fix: cleaner property validation

packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/examples/properties-example.js

@@ -36,7 +36,7 @@ export default class MyClass extends PureComponent {
       <Fragment>
         {children}
         <dnb-form-label for_id="form-input">
-          My running seconds
+          Web Component Property updating
         </dnb-form-label>
         <dnb-input id="form-input" value={this.state.time} disabled />
       </Fragment>

packages/dnb-ui-lib/src/components/button/Button.js

@@ -185,10 +185,7 @@ export default class Button extends PureComponent {
       type,
       title: title || text,
       id,
-      disabled:
-        typeof disabled === 'string'
-          ? disabled === 'true'
-          : Boolean(disabled),
+      disabled,
       onMouseOut: this.onMouseOutHandler,
       onClick: this.onClickHandler
     }

packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap

@@ -23,6 +23,7 @@ exports[`Button component have to match default button snapshot 1`] = `
 >
   <button
     className="dnb-button dnb-button--primary dnb-button--icon-position-right dnb-button--has-text dnb-button--has-icon id class className"
+    disabled="disabled"
     id="id"
     onClick={[Function]}
     onMouseOut={[Function]}
@@ -99,6 +100,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
 >
   <a
     className="dnb-button dnb-button--primary dnb-button--icon-position-right dnb-button--has-text dnb-button--has-icon id class className dnb-no-anchor-underline dnb-no-anchor-hover"
+    disabled="disabled"
     href="https://url"
     id="id"
     onClick={[Function]}

packages/dnb-ui-lib/src/components/dropdown/Dropdown.js

@@ -318,12 +318,7 @@ export default class Dropdown extends Component {
 
     const { input_id, id, disabled } = this.props
 
-    const params = {
-      disabled:
-        typeof disabled === 'string'
-          ? disabled === 'true'
-          : Boolean(disabled)
-    }
+    const params = { disabled }
     if (this.state.opened) {
       params['aria-expanded'] = true
     }

packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap

@@ -8,6 +8,7 @@ exports[`Dropdown component have to match snapshot 1`] = `
     aria-haspopup="listbox"
     aria-label="title"
     className="dnb-dropdown__value-holder-input"
+    disabled="disabled"
     id="input_id"
     onBlur={[Function]}
     onFocus={[Function]}
@@ -20,6 +21,7 @@ exports[`Dropdown component have to match snapshot 1`] = `
     aria-hidden={true}
     aria-labelledby="undefined"
     className="dnb-dropdown__trigger dnb-typo-book"
+    disabled="disabled"
     onMouseDown={[Function]}
     tabIndex="-1"
   >
@@ -515,6 +517,7 @@ a.dnb-button {
   user-select: none;
   display: inline-block;
   cursor: pointer;
+  color: var(--color-black-80);
   width: auto;
   white-space: nowrap; }
 
@@ -640,6 +643,7 @@ a.dnb-button {
   .dnb-input__extra-information {
     flex: 1 100%;
     padding: 0.5em 1.5em;
+    color: var(--color-black);
     font-size: 0.75em;
     line-height: 1.25rem; }
   .dnb-form-label ~ .dnb-input__extra-information {

packages/dnb-ui-lib/src/components/form-label/style/_form-label.scss

@@ -9,6 +9,8 @@
   display: inline-block;
   cursor: pointer;
 
+  color: var(--color-black-80);
+
   width: auto;
   white-space: nowrap;
 }

packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap

@@ -375,6 +375,7 @@ a.dnb-button {
   user-select: none;
   display: inline-block;
   cursor: pointer;
+  color: var(--color-black-80);
   width: auto;
   white-space: nowrap; }
 
@@ -500,6 +501,7 @@ a.dnb-button {
   .dnb-input__extra-information {
     flex: 1 100%;
     padding: 0.5em 1.5em;
+    color: var(--color-black);
     font-size: 0.75em;
     line-height: 1.25rem; }
   .dnb-form-label ~ .dnb-input__extra-information {

packages/dnb-ui-lib/src/components/input/Input.js

@@ -235,10 +235,7 @@ export default class Input extends PureComponent {
       type,
       id,
       // align,
-      disabled:
-        typeof disabled === 'string'
-          ? disabled === 'true'
-          : Boolean(disabled),
+      disabled,
       name: id,
       onChange: this.onChangeHandler,
       onKeyDown: this.onKeyDownHandler,
@@ -249,7 +246,9 @@ export default class Input extends PureComponent {
     // also used for code markup simulation
     validateDOMAttributes(this.props, inputParams)
 
-    if (description) inputParams['aria-describedby'] = id + '-description'
+    if (description) {
+      inputParams['aria-describedby'] = id + '-description'
+    }
 
     const shellParams = {
       'data-input-state': this.state.inputState,

packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap

@@ -457,6 +457,7 @@ a.dnb-button {
   user-select: none;
   display: inline-block;
   cursor: pointer;
+  color: var(--color-black-80);
   width: auto;
   white-space: nowrap; }
 
@@ -582,6 +583,7 @@ a.dnb-button {
   .dnb-input__extra-information {
     flex: 1 100%;
     padding: 0.5em 1.5em;
+    color: var(--color-black);
     font-size: 0.75em;
     line-height: 1.25rem; }
   .dnb-form-label ~ .dnb-input__extra-information {

packages/dnb-ui-lib/src/components/input/style/_input.scss

@@ -150,6 +150,7 @@
 
     padding: 0.5em 1.5em;
 
+    color: var(--color-black);
     font-size: 0.75em; // 12px
     line-height: 1.25rem;
   }

packages/dnb-ui-lib/src/components/slider/Slider.js

@@ -410,21 +410,15 @@ export default class Slider extends Component {
         'slider__root',
         currentState && `slider__state--${currentState}`
       ),
-      disabled:
-        typeof disabled === 'string'
-          ? disabled === 'true'
-          : Boolean(disabled),
+      disabled,
       onClick: this.handleClick,
       onMouseDown: this.handleMouseDown,
       onTouchStartCapture: this.handleTouchStart,
       onTouchMove: this.handleMouseMove
     }
     const buttonParams = {
       className: 'slider__thumb',
-      disabled:
-        typeof disabled === 'string'
-          ? disabled === 'true'
-          : Boolean(disabled),
+      disabled,
       onBlur: this.handleBlur,
       onKeyDown: this.handleKeyDown,
       onTouchStart: this.handleTouchStart,

packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap

@@ -10,6 +10,7 @@ exports[`Slider component have to match snapshot 1`] = `
     aria-valuemin="min"
     aria-valuenow="value"
     className="slider__root slider__state--disabled"
+    disabled="disabled"
     id="id"
     onClick={[Function]}
     onMouseDown={[Function]}
@@ -27,6 +28,7 @@ exports[`Slider component have to match snapshot 1`] = `
     />
     <button
       className="slider__thumb"
+      disabled="disabled"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}

packages/dnb-ui-lib/src/components/switch/Switch.js

@@ -153,24 +153,17 @@ export default class Switch extends Component {
     const { checked } = this.state
 
     const params = {
+      disabled,
       checked
     }
     if (labelledby) {
       params['aria-labelledby'] = labelledby
     }
-    const labelParams = {}
-
-    if (
-      typeof disabled === 'string'
-        ? disabled === 'true'
-        : Boolean(disabled)
-    ) {
-      params.disabled = true
-      labelParams.disabled = true
-    }
+    const labelParams = { disabled }
 
     // also used for code markup simulation
     validateDOMAttributes(this.props, params)
+    validateDOMAttributes(null, labelParams)
 
     return (
       <span className={classes}>

packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap

@@ -25,6 +25,7 @@ exports[`Switch component have to match snapshot 1`] = `
   >
     <label
       className="dnb-switch__inner"
+      disabled="disabled"
       htmlFor="id"
       id="id-internal"
       title="title"
@@ -35,6 +36,7 @@ exports[`Switch component have to match snapshot 1`] = `
         aria-labelledby="labelledby"
         checked={false}
         className="dnb-switch__input"
+        disabled="disabled"
         id="id"
         name="id"
         onChange={[Function]}

packages/dnb-ui-lib/src/shared/component-helper.js

@@ -69,10 +69,15 @@ export const validateDOMAttributes = (props, params) => {
   }
 
   // remove disabled, in case it is false (this is for web components support)
-  if (params.disabled !== null && String(params.disabled) === 'false') {
+  if (params.disabled === null || String(params.disabled) === 'false') {
     delete params.disabled
   }
 
+  // in case disabled is a string, it its enabled, send it in as a true (this is for web components support)
+  else if (params.disabled === 'true') {
+    params.disabled = true
+  }
+
   if (props && props.tabindex) {
     let tabIndex = props.tabindex
     if (tabIndex === 'off') {