feat(textInput, textArea, Select): move classNames to outer wrapper (#…

…9502) * feat(textInput, textArea, Select): move classNames to outer wrapper * fix(props): cleaned up some prop text * Update packages/react/src/components/Select/Select.js Co-authored-by: TJ Egan <tw15egan@gmail.com> * Update packages/react/src/components/TextArea/TextArea-story.js Co-authored-by: TJ Egan <tw15egan@gmail.com> * fix(textInput): remove class from textInput Co-authored-by: TJ Egan <tw15egan@gmail.com>
carbon-design-system · Sep 2, 2021 · 6b6933c · 6b6933c
1 parent 2dd2b31
commit 6b6933c
Show file tree

Hide file tree

Showing 6 changed files with 150 additions and 22 deletions.
diff --git a/packages/react/src/components/Select/Select-story.js b/packages/react/src/components/Select/Select-story.js
@@ -14,6 +14,7 @@ import SelectItem from '../SelectItem';
 import SelectItemGroup from '../SelectItemGroup';
 import SelectSkeleton from '../Select/Select.Skeleton';
 import mdx from './Select.mdx';
+import { FeatureFlags } from '../FeatureFlags';
 
 const sizes = {
   'Small  (sm)': 'sm',
@@ -125,3 +126,51 @@ Skeleton.parameters = {
       `,
   },
 };
+
+export const classNameChangeTest = () => {
+  return (
+    <div style={{ width: 400 }}>
+      <Select
+        className="TEST_CLASS"
+        id="select-1"
+        defaultValue="placeholder-item">
+        <SelectItem
+          disabled
+          hidden
+          value="placeholder-item"
+          text="The class should be added to the label"
+        />
+        <SelectItemGroup label="Category 1">
+          <SelectItem value="option-1" text="Option 1" />
+          <SelectItem value="option-2" text="Option 2" />
+        </SelectItemGroup>
+        <SelectItemGroup label="Category 2">
+          <SelectItem value="option-3" text="Option 3" />
+          <SelectItem value="option-4" text="Option 4" />
+        </SelectItemGroup>
+      </Select>
+      <br />
+      <FeatureFlags flags={{ 'enable-v11-release': true }}>
+        <Select
+          className="TEST_CLASS"
+          id="select-1"
+          defaultValue="placeholder-item">
+          <SelectItem
+            disabled
+            hidden
+            value="placeholder-item"
+            text="The class should be added to the wrapper"
+          />
+          <SelectItemGroup label="Category 1">
+            <SelectItem value="option-1" text="Option 1" />
+            <SelectItem value="option-2" text="Option 2" />
+          </SelectItemGroup>
+          <SelectItemGroup label="Category 2">
+            <SelectItem value="option-3" text="Option 3" />
+            <SelectItem value="option-4" text="Option 4" />
+          </SelectItemGroup>
+        </Select>
+      </FeatureFlags>
+    </div>
+  );
+};
diff --git a/packages/react/src/components/Select/Select.js b/packages/react/src/components/Select/Select.js
@@ -15,6 +15,7 @@ import {
   WarningAltFilled16,
 } from '@carbon/icons-react';
 import deprecate from '../../prop-types/deprecate';
+import { useFeatureFlag } from '../FeatureFlags';
 
 const { prefix } = settings;
 
@@ -42,15 +43,19 @@ const Select = React.forwardRef(function Select(
   },
   ref
 ) {
-  const selectClasses = classNames({
-    [`${prefix}--select`]: true,
-    [`${prefix}--select--inline`]: inline,
-    [`${prefix}--select--light`]: light,
-    [`${prefix}--select--invalid`]: invalid,
-    [`${prefix}--select--disabled`]: disabled,
-    [`${prefix}--select--warning`]: warn,
-    [className]: className,
-  });
+  const enabled = useFeatureFlag('enable-v11-release');
+
+  const selectClasses = classNames(
+    {
+      [`${prefix}--select`]: true,
+      [`${prefix}--select--inline`]: inline,
+      [`${prefix}--select--light`]: light,
+      [`${prefix}--select--invalid`]: invalid,
+      [`${prefix}--select--disabled`]: disabled,
+      [`${prefix}--select--warning`]: warn,
+    },
+    [enabled ? null : className]
+  );
   const labelClasses = classNames(`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel,
     [`${prefix}--label--disabled`]: disabled,
@@ -110,7 +115,12 @@ const Select = React.forwardRef(function Select(
     );
   })();
   return (
-    <div className={`${prefix}--form-item`}>
+    <div
+      className={
+        enabled
+          ? classNames(`${prefix}--form-item`, className)
+          : `${prefix}--form-item`
+      }>
       <div className={selectClasses}>
         {!noLabel && (
           <label htmlFor={id} className={labelClasses}>

diff --git a/packages/react/src/components/TextArea/TextArea-story.js b/packages/react/src/components/TextArea/TextArea-story.js
@@ -12,6 +12,7 @@ import { withKnobs, boolean, number, text } from '@storybook/addon-knobs';
 import TextArea from '../TextArea';
 import TextAreaSkeleton from '../TextArea/TextArea.Skeleton';
 import mdx from './TextArea.mdx';
+import { FeatureFlags } from '../FeatureFlags';
 
 const TextAreaProps = () => ({
   className: 'some-class',
@@ -51,3 +52,23 @@ export default {
 export const Default = () => <TextArea {...TextAreaProps()} />;
 
 export const Skeleton = () => <TextAreaSkeleton />;
+
+export const classNameChangeTest = () => (
+  <>
+    <TextArea
+      labelText="Text area label"
+      placeholder="The class should be added to the label"
+      helperText="Optional helper text."
+      className="TEST_CLASS"
+    />
+    <br />
+    <FeatureFlags flags={{ 'enable-v11-release': true }}>
+      <TextArea
+        labelText="Text area label"
+        placeholder="The class should be added to the wrapper"
+        helperText="Optional helper text."
+        className="TEST_CLASS"
+      />
+    </FeatureFlags>
+  </>
+);
diff --git a/packages/react/src/components/TextArea/TextArea.js b/packages/react/src/components/TextArea/TextArea.js
@@ -10,6 +10,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { settings } from 'carbon-components';
 import { WarningFilled16 } from '@carbon/icons-react';
+import { useFeatureFlag } from '../FeatureFlags';
 
 const { prefix } = settings;
 
@@ -30,6 +31,8 @@ const TextArea = React.forwardRef(function TextArea(
   },
   ref
 ) {
+  const enabled = useFeatureFlag('enable-v11-release');
+
   const textareaProps = {
     id,
     onChange: (evt) => {
@@ -72,10 +75,14 @@ const TextArea = React.forwardRef(function TextArea(
     </div>
   ) : null;
 
-  const textareaClasses = classNames(`${prefix}--text-area`, className, {
-    [`${prefix}--text-area--light`]: light,
-    [`${prefix}--text-area--invalid`]: invalid,
-  });
+  const textareaClasses = classNames(
+    `${prefix}--text-area`,
+    [enabled ? null : className],
+    {
+      [`${prefix}--text-area--light`]: light,
+      [`${prefix}--text-area--invalid`]: invalid,
+    }
+  );
 
   const input = (
     <textarea
@@ -90,7 +97,12 @@ const TextArea = React.forwardRef(function TextArea(
   );
 
   return (
-    <div className={`${prefix}--form-item`}>
+    <div
+      className={
+        enabled
+          ? classNames(`${prefix}--form-item`, className)
+          : `${prefix}--form-item`
+      }>
       {label}
       <div
         className={`${prefix}--text-area__wrapper`}

diff --git a/packages/react/src/components/TextInput/TextInput-story.js b/packages/react/src/components/TextInput/TextInput-story.js
@@ -12,6 +12,7 @@ import { TextInput } from '../../index';
 import TextInputSkeleton from '../TextInput/TextInput.Skeleton';
 import FluidForm from '../FluidForm/FluidForm';
 import mdx from './TextInput.mdx';
+import { FeatureFlags } from '../FeatureFlags';
 
 const types = {
   None: '',
@@ -123,6 +124,30 @@ export default {
   },
 };
 
+export const classNameChangeTest = () => (
+  <>
+    <TextInput
+      defaultValue="The class should be added to the label"
+      labelText="Text input label"
+      helperText="Optional help text"
+      type={select('Form control type (type)', types, 'text')}
+      {...props.TextInputProps()}
+      className="TEST_CLASS"
+    />
+    <br />
+    <FeatureFlags flags={{ 'enable-v11-release': true }}>
+      <TextInput
+        defaultValue="The class should be added to the wrapper"
+        labelText="Text input label"
+        helperText="Optional help text"
+        type={select('Form control type (type)', types, 'text')}
+        {...props.TextInputProps()}
+        className="TEST_CLASS"
+      />
+    </FeatureFlags>
+  </>
+);
+
 export const Default = () => (
   <TextInput
     type={select('Form control type (type)', types, 'text')}

diff --git a/packages/react/src/components/TextInput/TextInput.js b/packages/react/src/components/TextInput/TextInput.js
@@ -14,6 +14,7 @@ import PasswordInput from './PasswordInput';
 import ControlledPasswordInput from './ControlledPasswordInput';
 import { textInputProps } from './util';
 import { FormContext } from '../FluidForm';
+import { useFeatureFlag } from '../FeatureFlags';
 
 const { prefix } = settings;
 const TextInput = React.forwardRef(function TextInput(
@@ -40,6 +41,8 @@ const TextInput = React.forwardRef(function TextInput(
   },
   ref
 ) {
+  const enabled = useFeatureFlag('enable-v11-release');
+
   const normalizedProps = useNormalizedInputProps({
     id,
     readOnly,
@@ -50,12 +53,16 @@ const TextInput = React.forwardRef(function TextInput(
     warnText,
   });
 
-  const textInputClasses = classNames(`${prefix}--text-input`, className, {
-    [`${prefix}--text-input--light`]: light,
-    [`${prefix}--text-input--invalid`]: normalizedProps.invalid,
-    [`${prefix}--text-input--warning`]: normalizedProps.warn,
-    [`${prefix}--text-input--${size}`]: size,
-  });
+  const textInputClasses = classNames(
+    `${prefix}--text-input`,
+    [enabled ? null : className],
+    {
+      [`${prefix}--text-input--light`]: light,
+      [`${prefix}--text-input--invalid`]: normalizedProps.invalid,
+      [`${prefix}--text-input--warning`]: normalizedProps.warn,
+      [`${prefix}--text-input--${size}`]: size,
+    }
+  );
   const sharedTextInputProps = {
     id,
     onChange: (evt) => {
@@ -78,7 +85,11 @@ const TextInput = React.forwardRef(function TextInput(
     ...other,
   };
   const inputWrapperClasses = classNames(
-    `${prefix}--form-item`,
+    [
+      enabled
+        ? classNames(`${prefix}--form-item`, className)
+        : `${prefix}--form-item`,
+    ],
     `${prefix}--text-input-wrapper`,
     {
       [`${prefix}--text-input-wrapper--readonly`]: readOnly,