From ee69d34c5d00477635559e70973149eae5c87c15 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Fri, 10 Sep 2021 13:26:37 +0200 Subject: [PATCH] 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> --- .../__snapshots__/PublicAPI-test.js.snap | 196 +++++++++++++++++- .../react/src/components/Checkbox/Checkbox.js | 17 +- .../react/src/components/ComboBox/ComboBox.js | 20 +- .../src/components/DatePicker/DatePicker.js | 38 +++- .../react/src/components/Dropdown/Dropdown.js | 28 ++- .../MultiSelect/FilterableMultiSelect.js | 13 +- .../src/components/MultiSelect/MultiSelect.js | 24 ++- .../src/components/NumberInput/NumberInput.js | 19 +- .../RadioButtonGroup/RadioButtonGroup.js | 19 +- .../react/src/components/Slider/Slider.js | 19 +- .../src/components/TimePicker/TimePicker.js | 19 +- 11 files changed, 362 insertions(+), 50 deletions(-) diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 7fdbd9d67627..a7f7650dce90 100644 --- 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 index ce74353a18d2..7bdca235a0b8 100644 --- 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 (
{ } }; + 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 index c58c4a07ade8..06228336c3fc 100644 --- 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 ( -
+
{childrenWithProps}
diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js index d72a8649ad6d..0ca9fb9728ab 100644 --- a/packages/react/src/components/Dropdown/Dropdown.js +++ b/packages/react/src/components/Dropdown/Dropdown.js @@ -19,6 +19,7 @@ import ListBox, { PropTypes as ListBoxPropTypes } from '../ListBox'; import { mapDownshiftProps } from '../../tools/createPropAdapter'; import mergeRefs from '../../tools/mergeRefs'; import deprecate from '../../prop-types/deprecate'; +import { useFeatureFlag } from '../FeatureFlags'; const { prefix } = settings; @@ -86,16 +87,22 @@ const Dropdown = React.forwardRef(function Dropdown( const inline = type === 'inline'; const showWarning = !invalid && warn; - const className = cx(`${prefix}--dropdown`, containerClassName, { - [`${prefix}--dropdown--invalid`]: invalid, - [`${prefix}--dropdown--warning`]: showWarning, - [`${prefix}--dropdown--open`]: isOpen, - [`${prefix}--dropdown--inline`]: inline, - [`${prefix}--dropdown--disabled`]: disabled, - [`${prefix}--dropdown--light`]: light, - [`${prefix}--dropdown--${size}`]: size, - [`${prefix}--list-box--up`]: direction === 'top', - }); + const enabled = useFeatureFlag('enable-v11-release'); + + const className = cx( + `${prefix}--dropdown`, + [enabled ? null : containerClassName], + { + [`${prefix}--dropdown--invalid`]: invalid, + [`${prefix}--dropdown--warning`]: showWarning, + [`${prefix}--dropdown--open`]: isOpen, + [`${prefix}--dropdown--inline`]: inline, + [`${prefix}--dropdown--disabled`]: disabled, + [`${prefix}--dropdown--light`]: light, + [`${prefix}--dropdown--${size}`]: size, + [`${prefix}--list-box--up`]: direction === 'top', + } + ); const titleClasses = cx(`${prefix}--label`, { [`${prefix}--label--disabled`]: disabled, @@ -109,6 +116,7 @@ const Dropdown = React.forwardRef(function Dropdown( const wrapperClasses = cx( `${prefix}--dropdown__wrapper`, `${prefix}--list-box__wrapper`, + [enabled ? containerClassName : null], { [`${prefix}--dropdown__wrapper--inline`]: inline, [`${prefix}--list-box__wrapper--inline`]: inline, diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js index 21d308b8686a..cb24c8682785 100644 --- a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js +++ b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js @@ -23,6 +23,7 @@ import { defaultItemToString } from './tools/itemToString'; import mergeRefs from '../../tools/mergeRefs'; import setupGetInstanceId from '../../tools/setupGetInstanceId'; import { defaultSortItems, defaultCompareItems } from './tools/sorting'; +import { FeatureFlagContext } from '../FeatureFlags'; const { prefix } = settings; @@ -160,6 +161,8 @@ export default class FilterableMultiSelect extends React.Component { warnText: PropTypes.node, }; + static contextType = FeatureFlagContext; + static getDerivedStateFromProps({ open }, state) { /** * programmatically control this `open` prop @@ -320,9 +323,17 @@ export default class FilterableMultiSelect extends React.Component { // needs to be capitalized for react to render it correctly const ItemToElement = itemToElement; + const scope = this.context; + let enabled; + + if (scope.enabled) { + enabled = scope.enabled('enable-v11-release'); + } + const wrapperClasses = cx( `${prefix}--multi-select__wrapper`, `${prefix}--list-box__wrapper`, + [enabled ? containerClassName : null], { [`${prefix}--multi-select__wrapper--inline`]: inline, [`${prefix}--list-box__wrapper--inline`]: inline, @@ -397,7 +408,7 @@ export default class FilterableMultiSelect extends React.Component { `${prefix}--multi-select`, `${prefix}--combo-box`, `${prefix}--multi-select--filterable`, - containerClassName, + [enabled ? null : containerClassName], { [`${prefix}--multi-select--invalid`]: invalid, [`${prefix}--multi-select--open`]: isOpen, diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js index 3b637223af93..5bd638468e26 100644 --- a/packages/react/src/components/MultiSelect/MultiSelect.js +++ b/packages/react/src/components/MultiSelect/MultiSelect.js @@ -21,6 +21,7 @@ import setupGetInstanceId from '../../tools/setupGetInstanceId'; import { mapDownshiftProps } from '../../tools/createPropAdapter'; import mergeRefs from '../../tools/mergeRefs'; import { keys, match } from '../../internal/keyboard'; +import { useFeatureFlag } from '../FeatureFlags'; const { prefix } = settings; const noop = () => {}; @@ -126,9 +127,12 @@ const MultiSelect = React.forwardRef(function MultiSelect( const inline = type === 'inline'; const showWarning = !invalid && warn; + const enabled = useFeatureFlag('enable-v11-release'); + const wrapperClasses = cx( `${prefix}--multi-select__wrapper`, `${prefix}--list-box__wrapper`, + [enabled ? containerClassName : null], { [`${prefix}--multi-select__wrapper--inline`]: inline, [`${prefix}--list-box__wrapper--inline`]: inline, @@ -147,14 +151,18 @@ const MultiSelect = React.forwardRef(function MultiSelect( [`${prefix}--form__helper-text--disabled`]: disabled, }); - const className = cx(`${prefix}--multi-select`, containerClassName, { - [`${prefix}--multi-select--invalid`]: invalid, - [`${prefix}--multi-select--warning`]: showWarning, - [`${prefix}--multi-select--inline`]: inline, - [`${prefix}--multi-select--selected`]: - selectedItems && selectedItems.length > 0, - [`${prefix}--list-box--up`]: direction === 'top', - }); + const className = cx( + `${prefix}--multi-select`, + [enabled ? null : containerClassName], + { + [`${prefix}--multi-select--invalid`]: invalid, + [`${prefix}--multi-select--warning`]: showWarning, + [`${prefix}--multi-select--inline`]: inline, + [`${prefix}--multi-select--selected`]: + selectedItems && selectedItems.length > 0, + [`${prefix}--list-box--up`]: direction === 'top', + } + ); // needs to be capitalized for react to render it correctly const ItemToElement = itemToElement; diff --git a/packages/react/src/components/NumberInput/NumberInput.js b/packages/react/src/components/NumberInput/NumberInput.js index e473cc12dd1c..c82dd27b9c87 100644 --- a/packages/react/src/components/NumberInput/NumberInput.js +++ b/packages/react/src/components/NumberInput/NumberInput.js @@ -17,6 +17,7 @@ import requiredIfValueExists from '../../prop-types/requiredIfValueExists'; import { useNormalizedInputProps as getNormalizedInputProps } from '../../internal/useNormalizedInputProps'; import { useControlledStateWithValue } from '../../internal/FeatureFlags'; import deprecate from '../../prop-types/deprecate'; +import { FeatureFlagContext } from '../FeatureFlags'; const { prefix } = settings; @@ -202,6 +203,8 @@ class NumberInput extends Component { translateWithId: (id) => defaultTranslations[id], }; + static contextType = FeatureFlagContext; + static getDerivedStateFromProps({ value }, state) { const { prevValue } = state; @@ -346,9 +349,16 @@ class NumberInput extends Component { ...other } = this.props; + const scope = this.context; + let enabled; + + if (scope.enabled) { + enabled = scope.enabled('enable-v11-release'); + } + const numberInputClasses = classNames( `${prefix}--number ${prefix}--number--helpertext`, - className, + [enabled ? null : className], { [`${prefix}--number--readonly`]: readOnly, [`${prefix}--number--light`]: light, @@ -458,7 +468,12 @@ class NumberInput extends Component { } return ( -
+
{(() => { return ( diff --git a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.js b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.js index 80d9c751ca1a..ce0092c3d2cd 100644 --- a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.js +++ b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.js @@ -11,6 +11,7 @@ import classNames from 'classnames'; import { warning } from '../../internal/warning'; import { settings } from 'carbon-components'; import { Legend } from '../Text'; +import { FeatureFlagContext } from '../FeatureFlags'; const { prefix } = settings; @@ -75,6 +76,8 @@ export default class RadioButtonGroup extends React.Component { onChange: /* istanbul ignore next */ () => {}, }; + static contextType = FeatureFlagContext; + static getDerivedStateFromProps({ valueSelected, defaultSelected }, state) { const { prevValueSelected } = state; return prevValueSelected === valueSelected @@ -135,9 +138,16 @@ export default class RadioButtonGroup extends React.Component { legendText, } = this.props; + const scope = this.context; + let enabled; + + if (scope.enabled) { + enabled = scope.enabled('enable-v11-release'); + } + const wrapperClasses = classNames( `${prefix}--radio-button-group`, - className, + [enabled ? null : className], { [`${prefix}--radio-button-group--${orientation}`]: orientation === 'vertical', @@ -146,7 +156,12 @@ export default class RadioButtonGroup extends React.Component { ); return ( -
+
{legendText && ( {legendText} diff --git a/packages/react/src/components/Slider/Slider.js b/packages/react/src/components/Slider/Slider.js index cbec157e6101..7d03e8ff311a 100644 --- a/packages/react/src/components/Slider/Slider.js +++ b/packages/react/src/components/Slider/Slider.js @@ -14,6 +14,7 @@ import throttle from 'lodash.throttle'; import * as keys from '../../internal/keyboard/keys'; import { matches } from '../../internal/keyboard/match'; import deprecate from '../../prop-types/deprecate'; +import { FeatureFlagContext } from '../FeatureFlags'; const { prefix } = settings; @@ -171,6 +172,8 @@ export default class Slider extends PureComponent { light: false, }; + static contextType = FeatureFlagContext; + state = { value: this.props.value, left: 0, @@ -515,6 +518,13 @@ export default class Slider extends PureComponent { const { value, left } = this.state; + const scope = this.context; + let enabled; + + if (scope.enabled) { + enabled = scope.enabled('enable-v11-release'); + } + const labelId = `${id}-label`; const labelClasses = classNames(`${prefix}--label`, { [`${prefix}--label--disabled`]: disabled, @@ -523,7 +533,7 @@ export default class Slider extends PureComponent { const sliderClasses = classNames( `${prefix}--slider`, { [`${prefix}--slider--disabled`]: disabled }, - className + [enabled ? null : className] ); const inputClasses = classNames( @@ -546,7 +556,12 @@ export default class Slider extends PureComponent { }; return ( -
+
diff --git a/packages/react/src/components/TimePicker/TimePicker.js b/packages/react/src/components/TimePicker/TimePicker.js index c141796f4d08..46d7e8e980ce 100644 --- a/packages/react/src/components/TimePicker/TimePicker.js +++ b/packages/react/src/components/TimePicker/TimePicker.js @@ -9,6 +9,7 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; import classNames from 'classnames'; import { settings } from 'carbon-components'; +import { FeatureFlagContext } from '../FeatureFlags'; const { prefix } = settings; @@ -126,6 +127,8 @@ export default class TimePicker extends Component { light: false, }; + static contextType = FeatureFlagContext; + static getDerivedStateFromProps({ value }, state) { const { prevValue } = state; return prevValue === value @@ -157,11 +160,18 @@ export default class TimePicker extends Component { ...other } = this.props; + const scope = this.context; + let enabled; + + if (scope.enabled) { + enabled = scope.enabled('enable-v11-release'); + } + const timePickerInputProps = { className: classNames( `${prefix}--time-picker__input-field`, `${prefix}--text-input`, - className, + [enabled ? null : className], { [`${prefix}--text-input--light`]: light, } @@ -223,7 +233,12 @@ export default class TimePicker extends Component { ) : null; return ( -
+
{label}