feat(Select): disabled state improved

Author: Utzel-Butzel

src/components/Select/Select.js

@@ -43,11 +43,12 @@ const Select = React.forwardRef(
       [`${prefix}--select--small`]: small,
       [`${prefix}--select--light`]: light,
       [`${prefix}--select--invalid`]: invalid,
+      [`${prefix}--select--disabled`]: disabled,
       [className]: className,
     });
     const labelClasses = classNames(`${prefix}--label`, {
       [`${prefix}--visually-hidden`]: hideLabel,
-      [`${prefix}--label--disabled`]: other.disabled,
+      [`${prefix}--label--disabled`]: disabled,
     });
     const errorId = `${id}-error-msg`;
     const error = invalid ? (
@@ -99,7 +100,7 @@ const Select = React.forwardRef(
         <div className={selectClasses}>
           {labelTextComponent}
           {!inline && helper}
-          {componentsX && inline && (
+          {inline && (
             <>
               <div className={`${prefix}--select-input--inline__wrapper`}>
                 <div

src/components/Select/_select.scss

@@ -178,7 +178,7 @@
         }
       }
 
-      &:disabled ~ * {
+      &:disabled {
         opacity: 0.5;
         cursor: not-allowed;
       }
@@ -195,6 +195,10 @@
     }
   }
 
+  .#{$prefix}--select-input:disabled ~ .#{$prefix}--select__arrow {
+    opacity: 0.5;
+  }
+
   //Skeleton State
   .#{$prefix}--select.#{$prefix}--skeleton {
     @include skeleton;

src/components/TextArea/TextArea.js

@@ -46,6 +46,10 @@ const TextArea = ({
     </label>
   ) : null;
 
+  const helperTextClasses = classNames(`${prefix}--form__helper-text`, {
+    [`${prefix}--form__helper-text--disabled`]: other.disabled,
+  });
+
   const error = invalid ? (
     <div className="wfp--form-requirement">{invalidText}</div>
   ) : null;
@@ -62,7 +66,7 @@ const TextArea = ({
   );
 
   const helper = helperText ? (
-    <div className="wfp--form__helper-text">{helperText}</div>
+    <div className={helperTextClasses}>{helperText}</div>
   ) : null;
 
   return (

src/components/TextInput/TextInput.js

@@ -47,6 +47,10 @@ const TextInput = ({
     [`${prefix}--label--disabled`]: other.disabled,
   });
 
+  const helperTextClasses = classNames(`${prefix}--form__helper-text`, {
+    [`${prefix}--form__helper-text--disabled`]: other.disabled,
+  });
+
   const label = labelText ? (
     <label htmlFor={id} className={labelClasses}>
       {labelText}
@@ -73,7 +77,7 @@ const TextInput = ({
   );
 
   const helper = helperText ? (
-    <div className="wfp--form__helper-text">{helperText}</div>
+    <div className={helperTextClasses}>{helperText}</div>
   ) : null;
 
   return (

src/documentation/Usage/UsageDevelopers-story.js

@@ -51,6 +51,14 @@ storiesOf(' Design|Getting started', module)
           {`<Button>ButtonText</Button>`}
         </PrismCode>
       </Blockquote>
+      <h3>Polyfills</h3>
+      <p>
+        Polyfills are needed for IE browsers. We recommend{' '}
+        <Link href="https://babeljs.io/docs/en/babel-preset-env">
+          babel-preset-env
+        </Link>{' '}
+        for it.
+      </p>
       <h3>CSS</h3>
       <p>
         See the{' '}