fix(Select): match experimental spec (#2030)

* fix(Select): match experimental spec * fix(Select): add legacy helper text * chore: bump carbon-components version * chore: bump carbon-components version * fix(Select): backport support for v9 inline helper
carbon-design-system · Mar 19, 2019 · 9084f78 · 9084f78
1 parent a0ba0df
commit 9084f78
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 23 deletions.
diff --git a/.yarn-offline-mirror/carbon-components-9.84.16.tgz b/.yarn-offline-mirror/carbon-components-9.84.16.tgz
diff --git a/.yarn-offline-mirror/carbon-components-9.84.21.tgz b/.yarn-offline-mirror/carbon-components-9.84.21.tgz
diff --git a/package.json b/package.json
@@ -180,7 +180,7 @@
     "babel-plugin-dev-expression": "^0.2.1",
     "babel-plugin-react-docgen": "^2.0.0",
     "bowser": "^1.6.1",
-    "carbon-components": "^9.84.16",
+    "carbon-components": "^9.84.18",
     "carbon-icons": "^7.0.5",
     "chalk": "^2.3.0",
     "cli-table": "^0.3.0",

diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js
@@ -13,6 +13,7 @@ import { settings } from 'carbon-components';
 import Icon from '../Icon';
 import { componentsX } from '../../internal/FeatureFlags';
 import ChevronDownGlyph from '@carbon/icons-react/lib/chevron--down/index';
+import WarningFilled16 from '@carbon/icons-react/lib/warning--filled/16';
 
 const { prefix } = settings;
 
@@ -39,31 +40,32 @@ const Select = React.forwardRef(
       [`${prefix}--select`]: true,
       [`${prefix}--select--inline`]: inline,
       [`${prefix}--select--light`]: light,
+      [`${prefix}--select--invalid`]: invalid,
       [className]: className,
     });
     const labelClasses = classNames(`${prefix}--label`, {
       [`${prefix}--visually-hidden`]: hideLabel,
+      [`${prefix}--label--disabled`]: disabled,
     });
     const errorId = `${id}-error-msg`;
     const error = invalid ? (
       <div className={`${prefix}--form-requirement`} id={errorId}>
         {invalidText}
       </div>
     ) : null;
+    const helperTextClasses = classNames(`${prefix}--form__helper-text`, {
+      [`${prefix}--form__helper-text--disabled`]: disabled,
+    });
     const helper = helperText ? (
-      <div className={`${prefix}--form__helper-text`}>{helperText}</div>
+      <div className={helperTextClasses}>{helperText}</div>
     ) : null;
     const ariaProps = {};
     if (invalid) {
       ariaProps['aria-describedby'] = errorId;
     }
-    return (
-      <div className={`${prefix}--form-item`}>
-        <div className={selectClasses}>
-          <label htmlFor={id} className={labelClasses}>
-            {labelText}
-          </label>
-          {componentsX && !inline && helper}
+    const input = (() => {
+      return (
+        <>
           <select
             {...other}
             {...ariaProps}
@@ -76,23 +78,52 @@ const Select = React.forwardRef(
             {children}
           </select>
           {componentsX ? (
-            <ChevronDownGlyph
-              aria-hidden={true}
-              aria-label={iconDescription}
-              alt={iconDescription}
-              className={`${prefix}--select__arrow`}
-              name="chevron--down"
-            />
+            <ChevronDownGlyph className={`${prefix}--select__arrow`}>
+              <title>{iconDescription}</title>
+            </ChevronDownGlyph>
           ) : (
             <Icon
               icon={iconCaretDown}
               className={`${prefix}--select__arrow`}
               description={iconDescription}
             />
           )}
-          {!componentsX && helper}
-          {componentsX && inline && helper}
-          {error}
+          {componentsX && invalid && (
+            <WarningFilled16 className={`${prefix}--select__invalid-icon`} />
+          )}
+        </>
+      );
+    })();
+    return (
+      <div className={`${prefix}--form-item`}>
+        <div className={selectClasses}>
+          <label htmlFor={id} className={labelClasses}>
+            {labelText}
+          </label>
+          {!inline && helper}
+          {componentsX && inline && (
+            <>
+              <div className={`${prefix}--select-input--inline__wrapper`}>
+                <div
+                  className={`${prefix}--select-input__wrapper`}
+                  data-invalid={invalid || null}>
+                  {input}
+                </div>
+                {error}
+              </div>
+              {helper}
+            </>
+          )}
+          {componentsX && !inline && (
+            <div
+              className={`${prefix}--select-input__wrapper`}
+              data-invalid={invalid || null}>
+              {input}
+            </div>
+          )}
+          {!componentsX && input}
+          {!componentsX && inline && helper}
+          {(!componentsX || (componentsX && !inline)) && error}
         </div>
       </div>
     );

diff --git a/yarn.lock b/yarn.lock
@@ -3158,10 +3158,10 @@ capture-stack-trace@^1.0.0:
   resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz#a6c0bbe1f38f3aa0b92238ecb6ff42c344d4135d"
   integrity sha512-mYQLZnx5Qt1JgB1WEiMCf2647plpGeQ2NMR/5L0HNZzGQo4fuSPnK+wjfPnKZV0aiJDgzmWqqkV/g7JD+DW0qw==
 
-carbon-components@^9.84.16:
-  version "9.84.16"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-9.84.16.tgz#58b453c9bc578e65d984d0f6b2f584130a787c4b"
-  integrity sha512-lGFQDKO+ARZ/+mpeHx3uoEwHgNAe2lPY+bCpSOJ7j7mGQYUn8uMG3lvzINLTpHFWeCD0NJSShQ6cByX7S+cajw==
+carbon-components@^9.84.18:
+  version "9.84.21"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-9.84.21.tgz#01e00adae06aecb082f23c3504ce9cafbeab37a8"
+  integrity sha512-SV1IeDLk2ILVf6RsZNQ7IJgkcoYx1rQcHscKT5UpX8QMk9nllfiBW82szQwFMbmtr3aVuZfkhzV8InaDEDSnlw==
   dependencies:
     carbon-icons "^7.0.7"
     flatpickr "4.5.7"