From 60c5512c7290ec4a6074808e25aaf320afb28d0c Mon Sep 17 00:00:00 2001
From: "Andrea N. Cardona" <andrea.cardona@ibm.com>
Date: Wed, 18 Aug 2021 12:49:56 -0500
Subject: [PATCH 1/5] feat(textInput, textArea, Select): move classNames to
 outer wrapper

---
 .../src/components/Select/Select-story.js     | 51 ++++++++++++++++++-
 .../react/src/components/Select/Select.js     | 31 +++++++----
 .../src/components/TextArea/TextArea-story.js | 23 ++++++++-
 .../react/src/components/TextArea/TextArea.js | 22 ++++++--
 .../components/TextInput/TextInput-story.js   | 33 ++++++++++--
 .../src/components/TextInput/TextInput.js     |  9 +++-
 6 files changed, 146 insertions(+), 23 deletions(-)

diff --git a/packages/react/src/components/Select/Select-story.js b/packages/react/src/components/Select/Select-story.js
index a82356b74400..60cf630a3d9c 100644
--- 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',
@@ -23,7 +24,7 @@ const sizes = {
 
 const props = {
   select: () => ({
-    className: 'some-class',
+    // className: 'some-class',
     light: boolean('Light variant (light in <Select>)', false),
     inline: boolean(
       'Put control in-line with label (inline in <Select>)',
@@ -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
index 46bcd539bebe..97c79aee11bd 100644
--- 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,8 +115,14 @@ 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}>
+        {console.log('hi', className)}
         {!noLabel && (
           <label htmlFor={id} className={labelClasses}>
             {labelText}
diff --git a/packages/react/src/components/TextArea/TextArea-story.js b/packages/react/src/components/TextArea/TextArea-story.js
index 061abbe8f653..181cf106ef9f 100644
--- a/packages/react/src/components/TextArea/TextArea-story.js
+++ b/packages/react/src/components/TextArea/TextArea-story.js
@@ -12,9 +12,10 @@ 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',
+  // className: 'some-class',
   disabled: boolean('Disabled (disabled)', false),
   light: boolean('Light variant (light)', false),
   hideLabel: boolean('No label (hideLabel)', false),
@@ -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
index a413625b6bda..8b770c44c7e6 100644
--- 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
index 51b58a98d4b7..6d554a5bfaa5 100644
--- 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: '',
@@ -53,12 +54,12 @@ const ControlledPasswordInputApp = React.forwardRef(
 
 const props = {
   SharedInputProps: () => ({
-    className: 'some-class',
+    // className: 'some-class',
     id: 'test2',
-    defaultValue: text(
-      'Default value (defaultValue)',
-      'This is not a default value'
-    ),
+    // defaultValue: text(
+    //   'Default value (defaultValue)',
+    //   'This is not a default value'
+    // ),
     size: select('Field size (size)', sizes, undefined) || undefined,
     labelText: text('Label text (labelText)', 'Text input label'),
     placeholder: text('Placeholder text (placeholder)', 'Placeholder text'),
@@ -123,6 +124,28 @@ export default {
   },
 };
 
+export const classNameChangeTest = () => (
+  <>
+    <TextInput
+      className="TEST_CLASS"
+      type={select('Form control type (type)', types, 'text')}
+      defaultValue="The class should be added to the label"
+      {...props.SharedInputProps()}
+      {...props.TextInputProps()}
+    />
+    <br />
+    <FeatureFlags flags={{ 'enable-v11-release': true }}>
+      <TextInput
+        defaultValue="The class should be added to the wrapper"
+        type={select('Form control type (type)', types, 'text')}
+        {...props.SharedInputProps()}
+        {...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
index 1bcecfdfd5b9..151ab5ae8df8 100644
--- 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,
@@ -78,7 +81,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,

From 17b23c38d067cf646f1aa47af88ed9a818223c38 Mon Sep 17 00:00:00 2001
From: "Andrea N. Cardona" <andrea.cardona@ibm.com>
Date: Wed, 18 Aug 2021 12:59:53 -0500
Subject: [PATCH 2/5] fix(props): cleaned up some prop text

---
 .../src/components/Select/Select-story.js     |  2 +-
 .../components/TextInput/TextInput-story.js   | 20 ++++++++++---------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/react/src/components/Select/Select-story.js b/packages/react/src/components/Select/Select-story.js
index 60cf630a3d9c..885ed947c42e 100644
--- a/packages/react/src/components/Select/Select-story.js
+++ b/packages/react/src/components/Select/Select-story.js
@@ -24,7 +24,7 @@ const sizes = {
 
 const props = {
   select: () => ({
-    // className: 'some-class',
+    className: 'some-class',
     light: boolean('Light variant (light in <Select>)', false),
     inline: boolean(
       'Put control in-line with label (inline in <Select>)',
diff --git a/packages/react/src/components/TextInput/TextInput-story.js b/packages/react/src/components/TextInput/TextInput-story.js
index 6d554a5bfaa5..58f69d162b97 100644
--- a/packages/react/src/components/TextInput/TextInput-story.js
+++ b/packages/react/src/components/TextInput/TextInput-story.js
@@ -54,12 +54,12 @@ const ControlledPasswordInputApp = React.forwardRef(
 
 const props = {
   SharedInputProps: () => ({
-    // className: 'some-class',
+    className: 'some-class',
     id: 'test2',
-    // defaultValue: text(
-    //   'Default value (defaultValue)',
-    //   'This is not a default value'
-    // ),
+    defaultValue: text(
+      'Default value (defaultValue)',
+      'This is not a default value'
+    ),
     size: select('Field size (size)', sizes, undefined) || undefined,
     labelText: text('Label text (labelText)', 'Text input label'),
     placeholder: text('Placeholder text (placeholder)', 'Placeholder text'),
@@ -127,18 +127,20 @@ export default {
 export const classNameChangeTest = () => (
   <>
     <TextInput
-      className="TEST_CLASS"
-      type={select('Form control type (type)', types, 'text')}
       defaultValue="The class should be added to the label"
-      {...props.SharedInputProps()}
+      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.SharedInputProps()}
         {...props.TextInputProps()}
         className="TEST_CLASS"
       />

From 22d65759fcbc16144200de34841e1d869e9d6122 Mon Sep 17 00:00:00 2001
From: "Andrea N. Cardona" <andreancardona@gmail.com>
Date: Tue, 31 Aug 2021 10:02:50 -0400
Subject: [PATCH 3/5] Update packages/react/src/components/Select/Select.js

Co-authored-by: TJ Egan <tw15egan@gmail.com>
---
 packages/react/src/components/Select/Select.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react/src/components/Select/Select.js b/packages/react/src/components/Select/Select.js
index 97c79aee11bd..2e26d01fedef 100644
--- a/packages/react/src/components/Select/Select.js
+++ b/packages/react/src/components/Select/Select.js
@@ -122,7 +122,6 @@ const Select = React.forwardRef(function Select(
           : `${prefix}--form-item`
       }>
       <div className={selectClasses}>
-        {console.log('hi', className)}
         {!noLabel && (
           <label htmlFor={id} className={labelClasses}>
             {labelText}

From bfb890279519d52381a15925747f38ffe62f9ea2 Mon Sep 17 00:00:00 2001
From: "Andrea N. Cardona" <andreancardona@gmail.com>
Date: Tue, 31 Aug 2021 10:03:01 -0400
Subject: [PATCH 4/5] Update
 packages/react/src/components/TextArea/TextArea-story.js

Co-authored-by: TJ Egan <tw15egan@gmail.com>
---
 packages/react/src/components/TextArea/TextArea-story.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/TextArea/TextArea-story.js b/packages/react/src/components/TextArea/TextArea-story.js
index 181cf106ef9f..d9914b8e8ad3 100644
--- a/packages/react/src/components/TextArea/TextArea-story.js
+++ b/packages/react/src/components/TextArea/TextArea-story.js
@@ -15,7 +15,7 @@ import mdx from './TextArea.mdx';
 import { FeatureFlags } from '../FeatureFlags';
 
 const TextAreaProps = () => ({
-  // className: 'some-class',
+  className: 'some-class',
   disabled: boolean('Disabled (disabled)', false),
   light: boolean('Light variant (light)', false),
   hideLabel: boolean('No label (hideLabel)', false),

From a87772029c1393fc3ed1707ec44322de28208183 Mon Sep 17 00:00:00 2001
From: "Andrea N. Cardona" <andrea.cardona@ibm.com>
Date: Tue, 31 Aug 2021 11:09:02 -0500
Subject: [PATCH 5/5] fix(textInput): remove class from textInput

---
 .../react/src/components/TextInput/TextInput.js  | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/components/TextInput/TextInput.js b/packages/react/src/components/TextInput/TextInput.js
index d15ea61339cb..8a921810436a 100644
--- a/packages/react/src/components/TextInput/TextInput.js
+++ b/packages/react/src/components/TextInput/TextInput.js
@@ -53,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) => {