feat(react): remove deprecated v11 props (#11104)

* fix(React): remove deprecated v11 props * fix(DatePicker): remove unneeded ...other assignment * fix(Checkbox/Accordion): put back the v12 deprecations * chore(tests): update public api snaps * test(react): update certain tests * fix(react): pass in correct size to table toolbar * fix(button): update size props * feat(react): update ButtonSkeleton size Co-authored-by: Josh Black <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Mar 31, 2022 · caf3cf1 · caf3cf1
1 parent fbaec82
commit caf3cf1
Show file tree

Hide file tree

Showing 34 changed files with 199 additions and 454 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -45,7 +45,6 @@ Map {
       "disabled": Object {
         "type": "bool",
       },
-      "iconDescription": [Function],
       "onClick": Object {
         "type": "func",
       },
@@ -89,7 +88,6 @@ Map {
       "open": Object {
         "type": "bool",
       },
-      "uid": [Function],
     },
   },
   "ActionableNotification" => Object {
@@ -281,7 +279,6 @@ Map {
         ],
         "type": "oneOf",
       },
-      "small": [Function],
       "tabIndex": Object {
         "type": "number",
       },
@@ -398,7 +395,6 @@ Map {
       "title": Object {
         "type": "string",
       },
-      "wrapperClassName": [Function],
     },
     "render": [Function],
   },
@@ -1416,7 +1412,6 @@ Map {
         "overflowMenuOnHover": Object {
           "type": "bool",
         },
-        "shouldShowBorder": [Function],
         "size": Object {
           "args": Array [
             Array [
@@ -1600,15 +1595,7 @@ Map {
         "expandIconDescription": Object {
           "type": "string",
         },
-        "isExpanded": Object {
-          "args": Array [
-            Array [
-              [Function],
-              [Function],
-            ],
-          ],
-          "type": "oneOfType",
-        },
+        "isExpanded": [Function],
         "onExpand": Object {
           "args": Array [
             Array [
@@ -1952,11 +1939,9 @@ Map {
         "onFocus": Object {
           "type": "func",
         },
-        "persistant": [Function],
         "persistent": Object {
           "type": "bool",
         },
-        "placeHolderText": [Function],
         "placeholder": Object {
           "type": "string",
         },
@@ -2053,9 +2038,6 @@ Map {
         "isRequired": true,
         "type": "arrayOf",
       },
-      "shouldShowBorder": Object {
-        "type": "bool",
-      },
       "size": Object {
         "args": Array [
           Array [
@@ -2344,7 +2326,6 @@ Map {
       "hideLabel": Object {
         "type": "bool",
       },
-      "iconDescription": [Function],
       "id": Object {
         "isRequired": true,
         "type": "string",
@@ -2365,7 +2346,6 @@ Map {
       "onClick": Object {
         "type": "func",
       },
-      "openCalendar": [Function],
       "pattern": [Function],
       "placeholder": Object {
         "type": "string",
@@ -2503,7 +2483,6 @@ Map {
         ],
         "type": "oneOfType",
       },
-      "inline": [Function],
       "invalid": Object {
         "type": "bool",
       },
@@ -3678,7 +3657,6 @@ Map {
         ],
         "type": "oneOf",
       },
-      "success": [Function],
       "successDelay": Object {
         "type": "number",
       },
@@ -3840,12 +3818,9 @@ Map {
       "danger": Object {
         "type": "bool",
       },
-      "focusTrap": [Function],
-      "hasForm": [Function],
       "hasScrollingContent": Object {
         "type": "bool",
       },
-      "iconDescription": [Function],
       "id": Object {
         "type": "string",
       },
@@ -6481,7 +6456,6 @@ Map {
       "overflowMenuOnHover": Object {
         "type": "bool",
       },
-      "shouldShowBorder": [Function],
       "size": Object {
         "args": Array [
           Array [
@@ -6665,15 +6639,7 @@ Map {
       "expandIconDescription": Object {
         "type": "string",
       },
-      "isExpanded": Object {
-        "args": Array [
-          Array [
-            [Function],
-            [Function],
-          ],
-        ],
-        "type": "oneOfType",
-      },
+      "isExpanded": [Function],
       "onExpand": Object {
         "args": Array [
           Array [
@@ -7017,11 +6983,9 @@ Map {
       "onFocus": Object {
         "type": "func",
       },
-      "persistant": [Function],
       "persistent": Object {
         "type": "bool",
       },
-      "placeHolderText": [Function],
       "placeholder": Object {
         "type": "string",
       },

diff --git a/packages/react/src/components/Accordion/Accordion.Skeleton.js b/packages/react/src/components/Accordion/Accordion.Skeleton.js
@@ -10,7 +10,6 @@ import React from 'react';
 import cx from 'classnames';
 import { ChevronRight } from '@carbon/icons-react';
 import SkeletonText from '../SkeletonText';
-import deprecate from '../../prop-types/deprecate';
 import { usePrefix } from '../../internal/usePrefix';
 
 function AccordionSkeleton({ align, open, count, className, ...rest }) {
@@ -62,11 +61,6 @@ AccordionSkeleton.propTypes = {
    * `false` to not display the first item opened
    */
   open: PropTypes.bool,
-
-  /**
-   * Set unique identifier to generate unique item keys
-   */
-  uid: deprecate(PropTypes.any),
 };
 
 AccordionSkeleton.defaultProps = {

diff --git a/packages/react/src/components/Accordion/AccordionItem.js b/packages/react/src/components/Accordion/AccordionItem.js
@@ -115,17 +115,6 @@ AccordionItem.propTypes = {
    */
   disabled: PropTypes.bool,
 
-  /**
-   * The description of the expand icon.
-   */
-  iconDescription: deprecate(
-    PropTypes.string,
-    'The `iconDescription` prop has been deprecated as it is no longer ' +
-      'required. Feel free to remove this prop from <AccordionItem>. This ' +
-      'prop will be removed in the next major release of ' +
-      '`carbon-components-react`'
-  ),
-
   /**
    * The handler of the massaged `click` event.
    */

diff --git a/packages/react/src/components/Button/Button-test.js b/packages/react/src/components/Button/Button-test.js
@@ -211,15 +211,12 @@ describe('Ghost Button', () => {
   });
 });
 
-// V11: update this to `Extra Large Button`
-describe('Large Button', () => {
+describe('Extra Large Button', () => {
   describe('Renders as expected', () => {
-    // V11: update this size to `xl`
-    const wrapper = shallow(<Button size="lg" className="extra-class" />);
+    const wrapper = shallow(<Button size="xl" className="extra-class" />);
 
     it('has the expected classes', () => {
-      // V11: update this to `xl`
-      expect(wrapper.hasClass(`${prefix}--btn--lg`)).toEqual(true);
+      expect(wrapper.hasClass(`${prefix}--btn--xl`)).toEqual(true);
     });
 
     it('should add extra classes that are passed via className', () => {
@@ -228,15 +225,12 @@ describe('Large Button', () => {
   });
 });
 
-// V11: update this to `Extra Extra Large Button`
-describe('Extra Large Button', () => {
+describe('Extra Extra Large Button', () => {
   describe('Renders as expected', () => {
-    // V11: update this size to `2xl`
-    const wrapper = shallow(<Button size="xl" className="extra-class" />);
+    const wrapper = shallow(<Button size="2xl" className="extra-class" />);
 
     it('has the expected classes', () => {
-      // V11: update to 2xl
-      expect(wrapper.hasClass(`${prefix}--btn--xl`)).toEqual(true);
+      expect(wrapper.hasClass(`${prefix}--btn--2xl`)).toEqual(true);
     });
 
     it('should add extra classes that are passed via className', () => {
@@ -247,7 +241,7 @@ describe('Extra Large Button', () => {
 
 describe('Small Button', () => {
   describe('Renders as expected', () => {
-    const wrapper = shallow(<Button size="small" className="extra-class" />);
+    const wrapper = shallow(<Button size="sm" className="extra-class" />);
 
     it('has the expected classes for small', () => {
       expect(wrapper.hasClass(`${prefix}--btn--sm`)).toEqual(true);
@@ -368,16 +362,16 @@ describe('ButtonSkeleton', () => {
       expect(wrapperMd.hasClass(`${prefix}--btn--md`)).toEqual(true);
     });
 
-    const wrapperLg = shallow(<ButtonSkeleton size="lg" />);
+    const wrapperLg = shallow(<ButtonSkeleton size="xl" />);
 
     it('renders the large size', () => {
-      expect(wrapperLg.hasClass(`${prefix}--btn--lg`)).toEqual(true);
+      expect(wrapperLg.hasClass(`${prefix}--btn--xl`)).toEqual(true);
     });
 
-    const wrapperXl = shallow(<ButtonSkeleton size="xl" />);
+    const wrapperXl = shallow(<ButtonSkeleton size="2xl" />);
 
     it('renders the extra-large size', () => {
-      expect(wrapperXl.hasClass(`${prefix}--btn--xl`)).toEqual(true);
+      expect(wrapperXl.hasClass(`${prefix}--btn--2xl`)).toEqual(true);
     });
   });
 

diff --git a/packages/react/src/components/Button/Button.Skeleton.js b/packages/react/src/components/Button/Button.Skeleton.js
@@ -8,7 +8,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
-import { useFeatureFlag } from '../FeatureFlags';
 import { usePrefix } from '../../internal/usePrefix';
 import * as FeatureFlags from '@carbon/feature-flags';
 
@@ -19,18 +18,15 @@ const ButtonSkeleton = ({
   size = FeatureFlags.enabled('enable-v11-release') ? 'lg' : 'default',
   ...rest
 }) => {
-  const enabled = useFeatureFlag('enable-v11-release');
   const prefix = usePrefix();
 
   const buttonClasses = cx(className, {
     [`${prefix}--skeleton`]: true,
     [`${prefix}--btn`]: true,
     [`${prefix}--btn--sm`]: small || size === 'sm',
     [`${prefix}--btn--md`]: size === 'field' || size === 'md',
-    // V11: change lg to xl
-    [`${prefix}--btn--lg`]: enabled ? size === 'xl' : size === 'lg',
-    // V11: change xl to 2xl
-    [`${prefix}--btn--xl`]: enabled ? size === '2xl' : size === 'xl',
+    [`${prefix}--btn--xl`]: size === 'xl',
+    [`${prefix}--btn--2xl`]: size === '2xl',
   });
 
   const commonProps = {

diff --git a/packages/react/src/components/Button/Button.js b/packages/react/src/components/Button/Button.js
@@ -10,12 +10,9 @@ import React, { useRef } from 'react';
 import classNames from 'classnames';
 import { ButtonKinds } from '../../prop-types/types';
 import { IconButton } from '../IconButton';
-import deprecate from '../../prop-types/deprecate';
 import { composeEventHandlers } from '../../tools/events';
 import { usePrefix } from '../../internal/usePrefix';
 import { useId } from '../../internal/useId';
-import { useFeatureFlag } from '../FeatureFlags';
-import * as FeatureFlags from '@carbon/feature-flags';
 
 const Button = React.forwardRef(function Button(
   {
@@ -37,7 +34,6 @@ const Button = React.forwardRef(function Button(
     onMouseLeave,
     renderIcon: ButtonImageElement,
     size = 'lg',
-    small,
     tabIndex = 0,
     tooltipAlignment = 'center',
     tooltipPosition = 'top',
@@ -57,20 +53,12 @@ const Button = React.forwardRef(function Button(
     }
   };
 
-  const enabled = useFeatureFlag('enable-v11-release');
-
   const buttonClasses = classNames(className, {
     [`${prefix}--btn`]: true,
-    [`${prefix}--btn--sm`]:
-      (size === 'small' && !isExpressive) ||
-      (size === 'sm' && !isExpressive) ||
-      (small && !isExpressive),
-    [`${prefix}--btn--md`]:
-      (size === 'field' && !isExpressive) || (size === 'md' && !isExpressive),
-    // V11: change lg to xl
-    [`${prefix}--btn--lg`]: enabled ? size === 'xl' : size === 'lg',
-    // V11: change xl to 2xl
-    [`${prefix}--btn--xl`]: enabled ? size === '2xl' : size === 'xl',
+    [`${prefix}--btn--sm`]: size === 'sm' && !isExpressive,
+    [`${prefix}--btn--md`]: size === 'md' && !isExpressive,
+    [`${prefix}--btn--xl`]: size === 'xl',
+    [`${prefix}--btn--2xl`]: size === '2xl',
     [`${prefix}--btn--${kind}`]: kind,
     [`${prefix}--btn--disabled`]: disabled,
     [`${prefix}--btn--expressive`]: isExpressive,
@@ -303,27 +291,7 @@ Button.propTypes = {
   /**
    * Specify the size of the button, from the following list of sizes:
    */
-  size: FeatureFlags.enabled('enable-v11-release')
-    ? PropTypes.oneOf(['sm', 'md', 'lg', 'xl', '2xl'])
-    : PropTypes.oneOf([
-        'default',
-        'field',
-        'small',
-        'sm',
-        'md',
-        'lg',
-        'xl',
-        '2xl',
-      ]),
-
-  /**
-   * Deprecated in v10 in favor of `size`.
-   * Specify whether the Button should be a small variant
-   */
-  small: deprecate(
-    PropTypes.bool,
-    `\nThe prop \`small\` for Button has been deprecated in favor of \`size\`. Please use \`size="sm"\` instead.`
-  ),
+  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', '2xl']),
 
   /**
    * Optional prop to specify the tabIndex of the Button

diff --git a/packages/react/src/components/Checkbox/Checkbox-test.js b/packages/react/src/components/Checkbox/Checkbox-test.js
@@ -103,9 +103,11 @@ describe('Checkbox', () => {
 
       const call = onChange.mock.calls[0];
 
-      expect(call[0]).toEqual(true);
-      expect(call[1]).toEqual(id);
-      expect(call[2].target).toBe(inputElement);
+      expect(call[0].target).toBe(inputElement);
+      expect(call[1]).toEqual({
+        id,
+        checked: true,
+      });
     });
   });
 });