Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 10 commits into from
Sep 2, 2021
49 changes: 49 additions & 0 deletions packages/react/src/components/Select/Select-story.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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>
);
};
30 changes: 20 additions & 10 deletions packages/react/src/components/Select/Select.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
WarningAltFilled16,
} from '@carbon/icons-react';
import deprecate from '../../prop-types/deprecate';
import { useFeatureFlag } from '../FeatureFlags';

const { prefix } = settings;

Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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}>
Expand Down
21 changes: 21 additions & 0 deletions packages/react/src/components/TextArea/TextArea-story.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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>
</>
);
22 changes: 17 additions & 5 deletions packages/react/src/components/TextArea/TextArea.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -30,6 +31,8 @@ const TextArea = React.forwardRef(function TextArea(
},
ref
) {
const enabled = useFeatureFlag('enable-v11-release');

const textareaProps = {
id,
onChange: (evt) => {
Expand Down Expand Up @@ -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
Expand All @@ -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`}
Expand Down
25 changes: 25 additions & 0 deletions packages/react/src/components/TextInput/TextInput-story.js
Original file line number Diff line number Diff line change
Expand Up @@ -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: '',
Expand Down Expand Up @@ -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')}
Expand Down
25 changes: 18 additions & 7 deletions packages/react/src/components/TextInput/TextInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -40,6 +41,8 @@ const TextInput = React.forwardRef(function TextInput(
},
ref
) {
const enabled = useFeatureFlag('enable-v11-release');

const normalizedProps = useNormalizedInputProps({
id,
readOnly,
Expand All @@ -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) => {
Expand All @@ -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,
Expand Down