feat(classNames): move classNames to outer wrapper (#9491)

* feat(classNames): move classNames to outer wrapper * fix(Storybook): add test stories * feat(ComboBox): move className to wrapper * feat(MultiSelect): move className to wrapper * fix(className): use consistent pattern * feat(DatePicker): move className to wrapper * feat(NumberInput): move className to wrapper * feat(RadioButtonGroup): add className to wrapper * feat(Slider): move className to wrapper * feat(TimePicker): add className to wrapper * chore(snapshot): update snapshots * fix(propType): change wording in Checkbox propTypes * test(snapshot): update snapshots * chore(storybook): remove test stories Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Sep 10, 2021 · ee69d34 · ee69d34
1 parent 22372ff
commit ee69d34
Show file tree

Hide file tree

Showing 11 changed files with 362 additions and 50 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -357,9 +357,7 @@ Map {
       "title": Object {
         "type": "string",
       },
-      "wrapperClassName": Object {
-        "type": "string",
-      },
+      "wrapperClassName": [Function],
     },
     "render": [Function],
   },
@@ -2131,6 +2129,38 @@ Map {
     },
   },
   "DatePicker" => Object {
+    "contextType": Object {
+      "$$typeof": Symbol(react.context),
+      "Consumer": Object {
+        "$$typeof": Symbol(react.context),
+        "_calculateChangedBits": null,
+        "_context": [Circular],
+      },
+      "Provider": Object {
+        "$$typeof": Symbol(react.provider),
+        "_context": [Circular],
+      },
+      "_calculateChangedBits": null,
+      "_currentRenderer": null,
+      "_currentRenderer2": null,
+      "_currentValue": FeatureFlagScope {
+        "flags": Map {
+          "enable-css-custom-properties" => false,
+          "enable-use-controlled-state-with-value" => false,
+          "enable-css-grid" => false,
+          "enable-v11-release" => false,
+        },
+      },
+      "_currentValue2": FeatureFlagScope {
+        "flags": Map {
+          "enable-css-custom-properties" => false,
+          "enable-use-controlled-state-with-value" => false,
+          "enable-css-grid" => false,
+          "enable-v11-release" => false,
+        },
+      },
+      "_threadCount": 0,
+    },
     "defaultProps": Object {
       "dateFormat": "m/d/Y",
       "light": false,
@@ -2881,6 +2911,38 @@ Map {
     },
   },
   "FilterableMultiSelect" => Object {
+    "contextType": Object {
+      "$$typeof": Symbol(react.context),
+      "Consumer": Object {
+        "$$typeof": Symbol(react.context),
+        "_calculateChangedBits": null,
+        "_context": [Circular],
+      },
+      "Provider": Object {
+        "$$typeof": Symbol(react.provider),
+        "_context": [Circular],
+      },
+      "_calculateChangedBits": null,
+      "_currentRenderer": null,
+      "_currentRenderer2": null,
+      "_currentValue": FeatureFlagScope {
+        "flags": Map {
+          "enable-css-custom-properties" => false,
+          "enable-use-controlled-state-with-value" => false,
+          "enable-css-grid" => false,
+          "enable-v11-release" => false,
+        },
+      },
+      "_currentValue2": FeatureFlagScope {
+        "flags": Map {
+          "enable-css-custom-properties" => false,
+          "enable-use-controlled-state-with-value" => false,
+          "enable-css-grid" => false,
+          "enable-v11-release" => false,
+        },
+      },
+      "_threadCount": 0,
+    },
     "defaultProps": Object {
       "ariaLabel": "Choose an item",
       "compareItems": [Function],
@@ -3814,6 +3876,38 @@ Map {
   "MultiSelect" => Object {
     "$$typeof": Symbol(react.forward_ref),
     "Filterable": Object {
+      "contextType": Object {
+        "$$typeof": Symbol(react.context),
+        "Consumer": Object {
+          "$$typeof": Symbol(react.context),
+          "_calculateChangedBits": null,
+          "_context": [Circular],
+        },
+        "Provider": Object {
+          "$$typeof": Symbol(react.provider),
+          "_context": [Circular],
+        },
+        "_calculateChangedBits": null,
+        "_currentRenderer": null,
+        "_currentRenderer2": null,
+        "_currentValue": FeatureFlagScope {
+          "flags": Map {
+            "enable-css-custom-properties" => false,
+            "enable-use-controlled-state-with-value" => false,
+            "enable-css-grid" => false,
+            "enable-v11-release" => false,
+          },
+        },
+        "_currentValue2": FeatureFlagScope {
+          "flags": Map {
+            "enable-css-custom-properties" => false,
+            "enable-use-controlled-state-with-value" => false,
+            "enable-css-grid" => false,
+            "enable-v11-release" => false,
+          },
+        },
+        "_threadCount": 0,
+      },
       "defaultProps": Object {
         "ariaLabel": "Choose an item",
         "compareItems": [Function],
@@ -4924,6 +5018,38 @@ Map {
     "render": [Function],
   },
   "RadioButtonGroup" => Object {
+    "contextType": Object {
+      "$$typeof": Symbol(react.context),
+      "Consumer": Object {
+        "$$typeof": Symbol(react.context),
+        "_calculateChangedBits": null,
+        "_context": [Circular],
+      },
+      "Provider": Object {
+        "$$typeof": Symbol(react.provider),
+        "_context": [Circular],
+      },
+      "_calculateChangedBits": null,
+      "_currentRenderer": null,
+      "_currentRenderer2": null,
+      "_currentValue": FeatureFlagScope {
+        "flags": Map {
+          "enable-css-custom-properties" => false,
+          "enable-use-controlled-state-with-value" => false,
+          "enable-css-grid" => false,
+          "enable-v11-release" => false,
+        },
+      },
+      "_currentValue2": FeatureFlagScope {
+        "flags": Map {
+          "enable-css-custom-properties" => false,
+          "enable-use-controlled-state-with-value" => false,
+          "enable-css-grid" => false,
+          "enable-v11-release" => false,
+        },
+      },
+      "_threadCount": 0,
+    },
     "defaultProps": Object {
       "labelPosition": "right",
       "onChange": [Function],
@@ -5426,6 +5552,38 @@ Map {
     "render": [Function],
   },
   "Slider" => Object {
+    "contextType": Object {
+      "$$typeof": Symbol(react.context),
+      "Consumer": Object {
+        "$$typeof": Symbol(react.context),
+        "_calculateChangedBits": null,
+        "_context": [Circular],
+      },
+      "Provider": Object {
+        "$$typeof": Symbol(react.provider),
+        "_context": [Circular],
+      },
+      "_calculateChangedBits": null,
+      "_currentRenderer": null,
+      "_currentRenderer2": null,
+      "_currentValue": FeatureFlagScope {
+        "flags": Map {
+          "enable-css-custom-properties" => false,
+          "enable-use-controlled-state-with-value" => false,
+          "enable-css-grid" => false,
+          "enable-v11-release" => false,
+        },
+      },
+      "_currentValue2": FeatureFlagScope {
+        "flags": Map {
+          "enable-css-custom-properties" => false,
+          "enable-use-controlled-state-with-value" => false,
+          "enable-css-grid" => false,
+          "enable-v11-release" => false,
+        },
+      },
+      "_threadCount": 0,
+    },
     "defaultProps": Object {
       "ariaLabelInput": "Slider number input",
       "disabled": false,
@@ -6491,6 +6649,38 @@ Map {
     },
   },
   "TimePicker" => Object {
+    "contextType": Object {
+      "$$typeof": Symbol(react.context),
+      "Consumer": Object {
+        "$$typeof": Symbol(react.context),
+        "_calculateChangedBits": null,
+        "_context": [Circular],
+      },
+      "Provider": Object {
+        "$$typeof": Symbol(react.provider),
+        "_context": [Circular],
+      },
+      "_calculateChangedBits": null,
+      "_currentRenderer": null,
+      "_currentRenderer2": null,
+      "_currentValue": FeatureFlagScope {
+        "flags": Map {
+          "enable-css-custom-properties" => false,
+          "enable-use-controlled-state-with-value" => false,
+          "enable-css-grid" => false,
+          "enable-v11-release" => false,
+        },
+      },
+      "_currentValue2": FeatureFlagScope {
+        "flags": Map {
+          "enable-css-custom-properties" => false,
+          "enable-use-controlled-state-with-value" => false,
+          "enable-css-grid" => false,
+          "enable-v11-release" => false,
+        },
+      },
+      "_threadCount": 0,
+    },
     "defaultProps": Object {
       "disabled": false,
       "invalid": false,

diff --git a/packages/react/src/components/Checkbox/Checkbox.js b/packages/react/src/components/Checkbox/Checkbox.js
@@ -10,6 +10,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { useFeatureFlag } from '../FeatureFlags';
 import { settings } from 'carbon-components';
+import deprecate from '../../prop-types/deprecate';
 
 const { prefix } = settings;
 
@@ -27,18 +28,21 @@ const Checkbox = React.forwardRef(function Checkbox(
   },
   ref
 ) {
-  const labelClasses = classNames(`${prefix}--checkbox-label`, className);
+  const enabled = useFeatureFlag('enable-v11-release');
+
+  const labelClasses = classNames(`${prefix}--checkbox-label`, [
+    enabled ? null : className,
+  ]);
   const innerLabelClasses = classNames(`${prefix}--checkbox-label-text`, {
     [`${prefix}--visually-hidden`]: hideLabel,
   });
+
   const wrapperClasses = classNames(
     `${prefix}--form-item`,
     `${prefix}--checkbox-wrapper`,
-    wrapperClassName
+    [enabled ? className : wrapperClassName]
   );
 
-  const enabled = useFeatureFlag('enable-v11-release');
-
   return (
     <div className={wrapperClasses}>
       <input
@@ -127,7 +131,10 @@ Checkbox.propTypes = {
   /**
    * The CSS class name to be placed on the wrapping element
    */
-  wrapperClassName: PropTypes.string,
+  wrapperClassName: deprecate(
+    PropTypes.string,
+    `\nThe prop \`wrapperClassName\` for Checkbox will be deprecated in V11 in favor of \`className\`. \`className\` will then be placed on the outer wrapper.`
+  ),
 };
 
 Checkbox.defaultProps = {

diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
@@ -21,6 +21,7 @@ import { match, keys } from '../../internal/keyboard';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
 import { mapDownshiftProps } from '../../tools/createPropAdapter';
 import mergeRefs from '../../tools/mergeRefs';
+import { useFeatureFlag } from '../FeatureFlags';
 
 const { prefix } = settings;
 
@@ -190,11 +191,17 @@ const ComboBox = React.forwardRef((props, ref) => {
     }
   };
 
+  const enabled = useFeatureFlag('enable-v11-release');
+
   const showWarning = !invalid && warn;
-  const className = cx(`${prefix}--combo-box`, containerClassName, {
-    [`${prefix}--list-box--up`]: direction === 'top',
-    [`${prefix}--combo-box--warning`]: showWarning,
-  });
+  const className = cx(
+    `${prefix}--combo-box`,
+    [enabled ? null : containerClassName],
+    {
+      [`${prefix}--list-box--up`]: direction === 'top',
+      [`${prefix}--combo-box--warning`]: showWarning,
+    }
+  );
   const titleClasses = cx(`${prefix}--label`, {
     [`${prefix}--label--disabled`]: disabled,
   });
@@ -204,7 +211,10 @@ const ComboBox = React.forwardRef((props, ref) => {
   const helperClasses = cx(`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled,
   });
-  const wrapperClasses = cx(`${prefix}--list-box__wrapper`);
+  const wrapperClasses = cx(`${prefix}--list-box__wrapper`, [
+    enabled ? containerClassName : null,
+  ]);
+
   const inputClasses = cx(`${prefix}--text-input`, {
     [`${prefix}--text-input--empty`]: !inputValue,
   });

diff --git a/packages/react/src/components/DatePicker/DatePicker.js b/packages/react/src/components/DatePicker/DatePicker.js
@@ -16,6 +16,7 @@ import carbonFlatpickrAppendToPlugin from './plugins/appendToPlugin';
 import carbonFlatpickrFixEventsPlugin from './plugins/fixEventsPlugin';
 import carbonFlatpickrRangePlugin from './plugins/rangePlugin';
 import { match, keys } from '../../internal/keyboard';
+import { FeatureFlagContext } from '../FeatureFlags';
 
 const { prefix } = settings;
 
@@ -293,6 +294,8 @@ export default class DatePicker extends Component {
     locale: 'en',
   };
 
+  static contextType = FeatureFlagContext;
+
   componentDidMount() {
     const {
       allowInput,
@@ -605,15 +608,30 @@ export default class DatePicker extends Component {
       ...other
     } = this.props;
 
-    const datePickerClasses = classNames(`${prefix}--date-picker`, className, {
-      [`${prefix}--date-picker--short`]: short,
-      [`${prefix}--date-picker--light`]: light,
-      [`${prefix}--date-picker--simple`]: datePickerType === 'simple',
-      [`${prefix}--date-picker--single`]: datePickerType === 'single',
-      [`${prefix}--date-picker--range`]: datePickerType === 'range',
-      [`${prefix}--date-picker--nolabel`]:
-        datePickerType === 'range' && this.isLabelTextEmpty(children),
-    });
+    const scope = this.context;
+    let enabled;
+
+    if (scope.enabled) {
+      enabled = scope.enabled('enable-v11-release');
+    }
+
+    const datePickerClasses = classNames(
+      `${prefix}--date-picker`,
+      [enabled ? null : className],
+      {
+        [`${prefix}--date-picker--short`]: short,
+        [`${prefix}--date-picker--light`]: light,
+        [`${prefix}--date-picker--simple`]: datePickerType === 'simple',
+        [`${prefix}--date-picker--single`]: datePickerType === 'single',
+        [`${prefix}--date-picker--range`]: datePickerType === 'range',
+        [`${prefix}--date-picker--nolabel`]:
+          datePickerType === 'range' && this.isLabelTextEmpty(children),
+      }
+    );
+
+    const wrapperClasses = classNames(`${prefix}--form-item`, [
+      enabled ? className : null,
+    ]);
 
     const childArray = React.Children.toArray(children);
     const childrenWithProps = childArray.map((child, index) => {
@@ -649,7 +667,7 @@ export default class DatePicker extends Component {
       }
     });
     return (
-      <div className={`${prefix}--form-item`}>
+      <div className={wrapperClasses}>
         <div className={datePickerClasses} {...other}>
           {childrenWithProps}
         </div>