chore(enable-v11-release): cleanup enable-v11-release feature flag us…

…age (#13735) * chore(enable-v11-release): cleanup enable-v11-release feature flag usage * fix(ComboBox): restore excessively removed classnames * chore(Tab): cleanup classic Tab implementation --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · May 15, 2023 · 7ef9cb9 · 7ef9cb9
1 parent 2568048
commit 7ef9cb9
Show file tree

Hide file tree

Showing 47 changed files with 168 additions and 661 deletions.
diff --git a/packages/feature-flags/feature-flags.yml b/packages/feature-flags/feature-flags.yml
@@ -21,7 +21,7 @@ feature-flags:
   - name: enable-v11-release
     description: >
       Enable the features and functionality for the v11 Release
-    enabled: false
+    enabled: true
   - name: enable-experimental-tile-contrast
     description: >
       Enable the experimental tile improved contrast styles

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -3063,7 +3063,6 @@ Map {
       "buttonLabel": "",
       "disabled": false,
       "filenameStatus": "uploading",
-      "iconDescription": undefined,
       "multiple": false,
       "onClick": [Function],
     },
@@ -6426,7 +6425,6 @@ Map {
   "SelectItemGroup" => Object {
     "defaultProps": Object {
       "disabled": false,
-      "label": undefined,
     },
     "propTypes": Object {
       "children": Object {

diff --git a/packages/react/src/components/Accordion/Accordion.js b/packages/react/src/components/Accordion/Accordion.js
@@ -9,7 +9,6 @@ import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 import PropTypes from 'prop-types';
 import React from 'react';
-import * as FeatureFlags from '@carbon/feature-flags';
 
 function Accordion({
   align = 'end',
@@ -66,9 +65,7 @@ Accordion.propTypes = {
   /**
    * Specify the size of the Accordion. Currently supports the following:
    */
-  size: FeatureFlags.enabled('enable-v11-release')
-    ? PropTypes.oneOf(['sm', 'md', 'lg'])
-    : PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
 };
 
 export default Accordion;
diff --git a/packages/react/src/components/Button/Button.Skeleton.js b/packages/react/src/components/Button/Button.Skeleton.js
@@ -9,13 +9,12 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
-import * as FeatureFlags from '@carbon/feature-flags';
 
 const ButtonSkeleton = ({
   className,
   small = false,
   href,
-  size = FeatureFlags.enabled('enable-v11-release') ? 'lg' : 'default',
+  size = 'lg',
   ...rest
 }) => {
   const prefix = usePrefix();
@@ -58,18 +57,7 @@ ButtonSkeleton.propTypes = {
    * For `default` buttons, this prop can remain unspecified or use `default`.
    * In the next major release of Carbon, `default`, `field`, and `small` will be removed
    */
-  size: FeatureFlags.enabled('enable-v11-release')
-    ? PropTypes.oneOf(['sm', 'md', 'lg', 'xl', '2xl'])
-    : PropTypes.oneOf([
-        'default',
-        'field',
-        'small',
-        'sm',
-        'md',
-        'lg',
-        'xl',
-        '2xl',
-      ]),
+  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', '2xl']),
 
   /**
    * Specify whether the Button should be a small variant

diff --git a/packages/react/src/components/CodeSnippet/__tests__/CodeSnippet-test.js b/packages/react/src/components/CodeSnippet/__tests__/CodeSnippet-test.js
@@ -110,13 +110,13 @@ describe('CodeSnippet', () => {
   });
 
   it('should allow custom classes to be applied when passed in via className', () => {
-    const { container } = render(
+    render(
       <CodeSnippet type="inline" data-testid="code-5" className="custom-class">
         {inline}
       </CodeSnippet>
     );
-
-    expect(container.firstChild).toHaveClass('custom-class');
+    // note: outtermost component is a Tooltip
+    expect(screen.getByTestId('code-5')).toHaveClass('custom-class');
   });
 
   it('should allow hiding the copy button', () => {

diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -24,7 +24,6 @@ import { ListBoxTrigger, ListBoxSelection } from '../ListBox/next';
 import { match, keys } from '../../internal/keyboard';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
 import mergeRefs from '../../tools/mergeRefs';
-import { useFeatureFlag } from '../FeatureFlags';
 import deprecate from '../../prop-types/deprecate';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm';
@@ -382,18 +381,13 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
     }
   };
 
-  const enabled = useFeatureFlag('enable-v11-release');
-
   const showWarning = !invalid && warn;
-  const className = cx(
-    `${prefix}--combo-box`,
-    [enabled ? null : containerClassName],
-    {
-      [`${prefix}--list-box--up`]: direction === 'top',
-      [`${prefix}--combo-box--warning`]: showWarning,
-      [`${prefix}--combo-box--readonly`]: readOnly,
-    }
-  );
+  const className = cx(`${prefix}--combo-box`, {
+    [`${prefix}--list-box--up`]: direction === 'top',
+    [`${prefix}--combo-box--warning`]: showWarning,
+    [`${prefix}--combo-box--readonly`]: readOnly,
+  });
+
   const titleClasses = cx(`${prefix}--label`, {
     [`${prefix}--label--disabled`]: disabled,
   });
@@ -404,7 +398,7 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
     [`${prefix}--form__helper-text--disabled`]: disabled,
   });
   const wrapperClasses = cx(`${prefix}--list-box__wrapper`, [
-    enabled ? containerClassName : null,
+    containerClassName,
     {
       [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
       [`${prefix}--list-box__wrapper--fluid--focus`]: isFluid && isFocused,

diff --git a/packages/react/src/components/Copy/Copy-test.js b/packages/react/src/components/Copy/Copy-test.js
@@ -117,7 +117,7 @@ describe('Feedback', () => {
 
     const button = screen.getByTestId('copy-button-6');
     await user.click(button);
-    expect(screen.getAllByText('overriding-default-feedback').length).toBe(2);
+    expect(screen.getAllByText('overriding-default-feedback').length).toBe(1);
   });
 
   it('should allow users to override default feedback timeout via prop', async () => {

diff --git a/packages/react/src/components/Copy/Copy.js b/packages/react/src/components/Copy/Copy.js
@@ -12,7 +12,6 @@ import classnames from 'classnames';
 import { composeEventHandlers } from '../../tools/events';
 import { usePrefix } from '../../internal/usePrefix';
 import { IconButton } from '../IconButton';
-import * as FeatureFlags from '@carbon/feature-flags';
 
 export default function Copy({
   children,
@@ -55,49 +54,25 @@ export default function Copy({
     [handleFadeOut]
   );
 
-  if (FeatureFlags.enabled('enable-v11-release')) {
-    return (
-      <IconButton
-        closeOnActivation={false}
-        align="bottom"
-        className={classNames}
-        label={animation ? feedback : other['aria-label']}
-        onClick={composeEventHandlers([onClick, handleClick])}
-        onAnimationEnd={composeEventHandlers([
-          onAnimationEnd,
-          handleAnimationEnd,
-        ])}
-        {...other}
-        aria-label={
-          (!children && (animation ? feedback : other['aria-label'])) || null
-        }>
-        {children}
-      </IconButton>
-    );
-  }
+  const initialLabel = other['aria-label'] ?? '';
 
   return (
-    <button
-      type="button"
+    <IconButton
+      closeOnActivation={false}
+      align="bottom"
       className={classNames}
+      label={animation ? feedback : initialLabel}
       onClick={composeEventHandlers([onClick, handleClick])}
       onAnimationEnd={composeEventHandlers([
         onAnimationEnd,
         handleAnimationEnd,
       ])}
       {...other}
-      aria-live="polite"
       aria-label={
         (!children && (animation ? feedback : other['aria-label'])) || null
       }>
       {children}
-      {animation ? feedback : other['aria-label']}
-      <span
-        aria-hidden="true"
-        className={`${prefix}--assistive-text ${prefix}--copy-btn__feedback`}>
-        {feedback}
-      </span>
-    </button>
+    </IconButton>
   );
 }
 

diff --git a/packages/react/src/components/CopyButton/CopyButton-test.js b/packages/react/src/components/CopyButton/CopyButton-test.js
@@ -97,8 +97,7 @@ describe('Feedback', () => {
 
     const button = screen.getByTestId('copy-btn-6');
     await user.click(button);
-    // returns array of 2 for visible tooltip text and assistive text
-    expect(screen.getAllByText('custom-feedback').length).toBe(2);
+    expect(screen.getAllByText('custom-feedback').length).toBe(1);
   });
 
   it('should allow users to override default feedback timeout via prop', async () => {

diff --git a/packages/react/src/components/DatePicker/DatePicker-test.js b/packages/react/src/components/DatePicker/DatePicker-test.js
@@ -220,9 +220,8 @@ describe('Simple date picker', () => {
         </React.Suspense>
       );
 
-      expect(
-        await screen.findByLabelText('Date Picker label')
-      ).toBeInTheDocument();
+      const labeledElement = await screen.findByLabelText('Date Picker label');
+      expect(labeledElement).toBeInTheDocument();
 
       const input = document.querySelector('.cds--date-picker__input');
 

diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx
@@ -29,7 +29,6 @@ import ListBox, {
 } from '../ListBox';
 import mergeRefs from '../../tools/mergeRefs';
 import deprecate from '../../prop-types/deprecate';
-import { useFeatureFlag } from '../FeatureFlags';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm';
 import { ReactAttr } from '../../types/common';
@@ -271,25 +270,19 @@ const Dropdown = React.forwardRef(
     const inline = type === 'inline';
     const showWarning = !invalid && warn;
 
-    const enabled = useFeatureFlag('enable-v11-release');
-
     const [isFocused, setIsFocused] = useState(false);
 
-    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--readonly`]: readOnly,
-        [`${prefix}--dropdown--${size}`]: size,
-        [`${prefix}--list-box--up`]: direction === 'top',
-      }
-    );
+    const className = cx(`${prefix}--dropdown`, {
+      [`${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--readonly`]: readOnly,
+      [`${prefix}--dropdown--${size}`]: size,
+      [`${prefix}--list-box--up`]: direction === 'top',
+    });
 
     const titleClasses = cx(`${prefix}--label`, {
       [`${prefix}--label--disabled`]: disabled,
@@ -303,7 +296,7 @@ const Dropdown = React.forwardRef(
     const wrapperClasses = cx(
       `${prefix}--dropdown__wrapper`,
       `${prefix}--list-box__wrapper`,
-      [enabled ? containerClassName : null],
+      containerClassName,
       {
         [`${prefix}--dropdown__wrapper--inline`]: inline,
         [`${prefix}--list-box__wrapper--inline`]: inline,

diff --git a/packages/react/src/components/FileUploader/FileUploader.js b/packages/react/src/components/FileUploader/FileUploader.js
@@ -7,7 +7,6 @@
 
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import * as FeatureFlags from '@carbon/feature-flags';
 import React from 'react';
 import Filename from './Filename';
 import FileUploaderButton from './FileUploaderButton';
@@ -52,9 +51,7 @@ export default class FileUploader extends React.Component {
     /**
      * Provide a description for the complete/close icon that can be read by screen readers
      */
-    iconDescription: FeatureFlags.enabled('enable-v11-release')
-      ? PropTypes.string.isRequired
-      : PropTypes.string,
+    iconDescription: PropTypes.string.isRequired,
 
     /**
      * Specify the description text of this `<FileUploader>`
@@ -98,18 +95,13 @@ export default class FileUploader extends React.Component {
      * Specify the size of the FileUploaderButton, from a list of available
      * sizes.
      */
-    size: FeatureFlags.enabled('enable-v11-release')
-      ? PropTypes.oneOf(['sm', 'md', 'lg'])
-      : PropTypes.oneOf(['default', 'field', 'small', 'sm', 'md', 'lg']),
+    size: PropTypes.oneOf(['sm', 'md', 'lg']),
   };
 
   static contextType = PrefixContext;
 
   static defaultProps = {
     disabled: false,
-    iconDescription: FeatureFlags.enabled('enable-v11-release')
-      ? undefined
-      : 'Provide icon description',
     filenameStatus: 'uploading',
     buttonLabel: '',
     buttonKind: 'primary',
@@ -209,7 +201,7 @@ export default class FileUploader extends React.Component {
 
     return (
       <div className={classes} {...other}>
-        {FeatureFlags.enabled('enable-v11-release') && !labelTitle ? null : (
+        {!labelTitle ? null : (
           <p className={getHelperLabelClasses(`${prefix}--file--label`)}>
             {labelTitle}
           </p>

diff --git a/packages/react/src/components/FileUploader/FileUploaderButton.js b/packages/react/src/components/FileUploader/FileUploaderButton.js
@@ -12,7 +12,6 @@ import { matches, keys } from '../../internal/keyboard';
 import { ButtonKinds } from '../../prop-types/types';
 import uid from '../../tools/uniqueId';
 import { usePrefix } from '../../internal/usePrefix';
-import * as FeatureFlags from '@carbon/feature-flags';
 import deprecate from '../../prop-types/deprecate';
 
 function noop() {}
@@ -180,9 +179,7 @@ FileUploaderButton.propTypes = {
    * Specify the size of the FileUploaderButton, from a list of available
    * sizes.
    */
-  size: FeatureFlags.enabled('enable-v11-release')
-    ? PropTypes.oneOf(['sm', 'md', 'lg'])
-    : PropTypes.oneOf(['default', 'field', 'small', 'sm', 'md', 'lg']),
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
 
   /**
    * Provide a custom tabIndex value for the `<FileUploaderButton>`

diff --git a/packages/react/src/components/FileUploader/FileUploaderItem.js b/packages/react/src/components/FileUploader/FileUploaderItem.js
@@ -12,7 +12,6 @@ import Filename from './Filename';
 import { keys, matches } from '../../internal/keyboard';
 import uid from '../../tools/uniqueId';
 import { usePrefix } from '../../internal/usePrefix';
-import * as FeatureFlags from '@carbon/feature-flags';
 
 function FileUploaderItem({
   uuid,
@@ -111,9 +110,7 @@ FileUploaderItem.propTypes = {
    * Specify the size of the FileUploaderButton, from a list of available
    * sizes.
    */
-  size: FeatureFlags.enabled('enable-v11-release')
-    ? PropTypes.oneOf(['sm', 'md', 'lg'])
-    : PropTypes.oneOf(['default', 'field', 'small', 'sm', 'md', 'lg']),
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
 
   /**
    * Status of the file upload