fix: enhance alignment on form components, incl. #toggle-button group…

… + #switch enhancements on semantics on a status
dnbexperience · Dec 2, 2019 · aeb8d0b · aeb8d0b
1 parent 5a4a2f0
commit aeb8d0b
Show file tree

Hide file tree

Showing 30 changed files with 152 additions and 185 deletions.
diff --git a/packages/dnb-ui-lib/src/components/button/Button.js b/packages/dnb-ui-lib/src/components/button/Button.js
@@ -307,16 +307,6 @@ class Content extends PureComponent {
           {text}
         </span>
       )
-    } else {
-      ret.push(
-        <span
-          key="button-helper"
-          className="dnb-button__helper"
-          aria-hidden
-        >
-          &zwnj;
-        </span>
-      )
     }
 
     if (icon) {

diff --git a/packages/dnb-ui-lib/src/components/button/style/_button.scss b/packages/dnb-ui-lib/src/components/button/style/_button.scss
@@ -47,10 +47,6 @@
   font-size: var(--font-size-small); // has to be 16px
   line-height: var(--button-height--small);
 
-  &__helper {
-    @include helper();
-  }
-
   &__icon {
     svg:not([width]):not([height]) {
       width: var(--button-icon-size);

diff --git a/packages/dnb-ui-lib/src/components/checkbox/Checkbox.js b/packages/dnb-ui-lib/src/components/checkbox/Checkbox.js
@@ -7,6 +7,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import keycode from 'keycode'
+import AlignmentHelper from '../../shared/AlignmentHelper'
 import {
   isTrue,
   makeUniqueId,
@@ -269,9 +270,7 @@ export default class Checkbox extends Component {
             />
           )}
 
-          <span className="dnb-checkbox__helper" aria-hidden>
-            &zwnj;
-          </span>
+          <AlignmentHelper className="dnb-checkbox__helper" />
 
           <span className="dnb-checkbox__inner">
             {label_position === 'left' && statusComp}

diff --git a/packages/dnb-ui-lib/src/components/checkbox/style/_checkbox.scss b/packages/dnb-ui-lib/src/components/checkbox/style/_checkbox.scss
@@ -21,12 +21,6 @@
     flex-direction: column;
     align-self: center;
   }
-  &__helper {
-    @include helper();
-
-    // since we don't have a vertical state, we set it to vertical by default
-    @include helperVertical();
-  }
 
   &__shell {
     user-select: none;

diff --git a/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js b/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js
@@ -6,7 +6,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-
+import AlignmentHelper from '../../shared/AlignmentHelper'
 import {
   isTrue,
   makeUniqueId,
@@ -425,8 +425,8 @@ export default class DatePicker extends PureComponent {
     )
     if (
       hidePicker &&
-      (!isTrue(this.props.show_submit_button) &&
-        !isTrue(this.props.show_cancel_button))
+      !isTrue(this.props.show_submit_button) &&
+      !isTrue(this.props.show_cancel_button)
     ) {
       this.hidePicker(args)
     }
@@ -719,9 +719,7 @@ export default class DatePicker extends PureComponent {
           />
         )}
 
-        <span className="dnb-date-picker__helper" aria-hidden>
-          &zwnj;
-        </span>
+        <AlignmentHelper className="dnb-date-picker__helper" />
 
         <span
           className="dnb-date-picker__inner"

diff --git a/packages/dnb-ui-lib/src/components/date-picker/style/_date-picker.scss b/packages/dnb-ui-lib/src/components/date-picker/style/_date-picker.scss
@@ -48,12 +48,8 @@
 
   // if no label is provided, then make sure we have some text to align the button
   &__helper {
-    @include helper();
     line-height: var(--date-picker-input-height);
   }
-  &--vertical &__helper {
-    @include helperVertical();
-  }
 
   &__shell {
     position: relative;

diff --git a/packages/dnb-ui-lib/src/components/dropdown/Dropdown.js b/packages/dnb-ui-lib/src/components/dropdown/Dropdown.js
@@ -7,6 +7,7 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import keycode from 'keycode'
+import AlignmentHelper from '../../shared/AlignmentHelper'
 import {
   isTrue,
   makeUniqueId,
@@ -799,7 +800,10 @@ export default class Dropdown extends PureComponent {
       }, {})
       const counts = Object.keys(itemSpots)
       const findClosest = (arr, val) =>
-        Math.max.apply(null, arr.filter(v => v <= val))
+        Math.max.apply(
+          null,
+          arr.filter(v => v <= val)
+        )
       let closestToTop = null,
         closestToBottom = null,
         tmpToTop,
@@ -1066,9 +1070,7 @@ export default class Dropdown extends PureComponent {
           />
         )}
 
-        <span className="dnb-dropdown__helper" aria-hidden>
-          &zwnj;
-        </span>
+        <AlignmentHelper className="dnb-dropdown__helper" />
 
         <span className="dnb-dropdown__inner" ref={this._ref}>
           {showStatus && (

diff --git a/packages/dnb-ui-lib/src/components/dropdown/style/_dropdown.scss b/packages/dnb-ui-lib/src/components/dropdown/style/_dropdown.scss
@@ -60,14 +60,6 @@
     color: inherit;
   }
 
-  // if no label is provided, then make sure we have some text to align the button
-  &__helper {
-    @include helper();
-  }
-  &--vertical &__helper {
-    @include helperVertical();
-  }
-
   &__shell {
     position: relative;
 

diff --git a/packages/dnb-ui-lib/src/components/form-label/FormLabel.js b/packages/dnb-ui-lib/src/components/form-label/FormLabel.js
@@ -6,6 +6,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import AlignmentHelper from '../../shared/AlignmentHelper'
 import {
   extendPropsWithContext,
   isTrue,
@@ -142,7 +143,7 @@ export default class FormLabel extends PureComponent {
     if (isTrue(sr_only)) {
       return (
         <Element is={element} aria-label={content} {...params}>
-          <span aria-hidden>&zwnj;</span>
+          <AlignmentHelper className="dnb-form-label__helper" />
         </Element>
       )
     }

diff --git a/packages/dnb-ui-lib/src/components/form-row/FormRow.js b/packages/dnb-ui-lib/src/components/form-row/FormRow.js
@@ -6,6 +6,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import AlignmentHelper from '../../shared/AlignmentHelper'
 import {
   extend,
   extendPropsWithContext,
@@ -241,9 +242,7 @@ export default class FormRow extends PureComponent {
       <Context.Provider value={context}>
         <Fieldset useFieldset={useFieldset}>
           <div {...params}>
-            <span className="dnb-form-row__helper" aria-hidden>
-              &zwnj;
-            </span>
+            <AlignmentHelper className="dnb-form-row__helper" />
 
             {label && (
               <FormLabel

diff --git a/packages/dnb-ui-lib/src/components/form-row/style/_form-row.scss b/packages/dnb-ui-lib/src/components/form-row/style/_form-row.scss
@@ -21,13 +21,6 @@
     width: 100%; // to help #input stretch
   }
 
-  &__helper {
-    @include helper();
-  }
-  &--vertical &__helper {
-    @include helperVertical();
-  }
-
   // for hoizontal direction
   &:not(#{&}--vertical) {
     & > .dnb-form-row__content {

diff --git a/packages/dnb-ui-lib/src/components/icon/style/_icon.scss b/packages/dnb-ui-lib/src/components/icon/style/_icon.scss
@@ -83,8 +83,6 @@
     justify-content: center;
   }
 
-  p &,
-  blockquote &,
   h1 &,
   h2 &,
   h3 &,

diff --git a/packages/dnb-ui-lib/src/components/input/Input.js b/packages/dnb-ui-lib/src/components/input/Input.js
@@ -6,6 +6,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import AlignmentHelper from '../../shared/AlignmentHelper'
 import Button from '../button/Button'
 import FormLabel from '../form-label/FormLabel'
 import FormStatus from '../form-status/FormStatus'
@@ -382,7 +383,7 @@ export default class Input extends PureComponent {
     }
 
     // we may considder using: aria-details
-    if (showStatus || (suffix || description)) {
+    if (showStatus || suffix || description) {
       inputParams['aria-describedby'] = `${
         showStatus ? id + '-status' : ''
       } ${suffix || description ? id + '-description' : ''}`
@@ -428,9 +429,7 @@ export default class Input extends PureComponent {
           />
         )}
 
-        <span className="dnb-input__helper" aria-hidden>
-          &zwnj;
-        </span>
+        <AlignmentHelper className="dnb-input__helper" />
 
         <span {...innerParams}>
           {showStatus && (

diff --git a/packages/dnb-ui-lib/src/components/input/style/_input.scss b/packages/dnb-ui-lib/src/components/input/style/_input.scss
@@ -26,14 +26,6 @@
   font-size: var(--input-font-small);
   line-height: var(--input-height);
 
-  // if no label is provided, then make sure we have some text to align the button
-  &__helper {
-    @include helper();
-  }
-  &--vertical &__helper {
-    @include helperVertical();
-  }
-
   &__inner {
     display: inline-flex;
     flex-direction: column;

diff --git a/packages/dnb-ui-lib/src/components/radio/Radio.js b/packages/dnb-ui-lib/src/components/radio/Radio.js
@@ -7,6 +7,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import keycode from 'keycode'
+import AlignmentHelper from '../../shared/AlignmentHelper'
 import {
   isTrue,
   makeUniqueId,
@@ -360,9 +361,7 @@ export default class Radio extends Component {
                   />
                 )}
 
-                <span className="dnb-radio__helper" aria-hidden>
-                  &zwnj;
-                </span>
+                <AlignmentHelper className="dnb-radio__helper" />
 
                 <span className="dnb-radio__inner">
                   {label_position === 'left' && statusComp}

diff --git a/packages/dnb-ui-lib/src/components/radio/RadioGroup.js b/packages/dnb-ui-lib/src/components/radio/RadioGroup.js
@@ -6,6 +6,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import AlignmentHelper from '../../shared/AlignmentHelper'
 import {
   extendPropsWithContext,
   makeUniqueId,
@@ -230,11 +231,7 @@ export default class RadioGroup extends PureComponent {
     return (
       <RadioGroupContext.Provider value={context}>
         <div className={classes}>
-          {!label && (
-            <span className="dnb-radio-group__helper" aria-hidden>
-              &zwnj;
-            </span>
-          )}
+          <AlignmentHelper className="dnb-radio-group__helper" />
           <FormRow {...formRowParams}>
             <span
               id={id}

diff --git a/packages/dnb-ui-lib/src/components/radio/style/_radio.scss b/packages/dnb-ui-lib/src/components/radio/style/_radio.scss
@@ -23,12 +23,6 @@
     flex-direction: column;
     align-self: center;
   }
-  &__helper {
-    @include helper();
-
-    // since we don't have a vertical state, we set it to vertical by default
-    @include helperVertical();
-  }
 
   &__shell {
     position: relative;
@@ -181,13 +175,11 @@
       // because of our bottom margins we have on the componens
       margin-bottom: calc(1px - 1px - var(--radio-margin-bottom));
     }
-    .dnb-form-row--vertical & {
-      display: flex;
-    }
 
     // if no label is given
     &__helper {
-      @include helper();
+      font-size: var(--font-size-basis);
+      line-height: var(--radio-height);
     }
   }
 

diff --git a/packages/dnb-ui-lib/src/components/slider/Slider.js b/packages/dnb-ui-lib/src/components/slider/Slider.js
@@ -8,6 +8,7 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import keycode from 'keycode'
 import Context from '../../shared/Context'
+import AlignmentHelper from '../../shared/AlignmentHelper'
 import {
   isTrue,
   makeUniqueId,
@@ -621,9 +622,7 @@ export default class Slider extends PureComponent {
           />
         )}
 
-        <span className="dnb-slider__helper" aria-hidden>
-          &zwnj;
-        </span>
+        <AlignmentHelper className="dnb-slider__helper" />
 
         <span className="dnb-slider__wrapper">
           {showStatus && (

diff --git a/packages/dnb-ui-lib/src/components/slider/style/_slider.scss b/packages/dnb-ui-lib/src/components/slider/style/_slider.scss
@@ -20,14 +20,6 @@
   font-size: var(--font-size-small);
   line-height: var(--line-height-basis);
 
-  &__helper {
-    // NB: this is not the same kind of helper than we have for the button!
-    @include helper();
-  }
-  &__label--vertical &__helper {
-    @include helperVertical();
-  }
-
   &--vertical {
     display: flex;
     width: auto;
-Original file line number
+Diff line change
@@ Expand Up / @@ -83,8 +83,6 @@ @@
         justify-content: center;
       }
-      p &,
-      blockquote &,
       h1 &,
       h2 &,
       h3 &,
@@ Expand Down @@