[NO-TICKET] Deprecate Button's "component" prop (#1546)

* Add deprecation docs and warning for Button's `component` prop * Update unit tests and story
CMSgov · Jan 25, 2022 · 34980d1 · 34980d1
1 parent 5d0c9ce
commit 34980d1
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 25 deletions.
diff --git a/packages/design-system/src/components/Button/Button.stories.jsx b/packages/design-system/src/components/Button/Button.stories.jsx
@@ -13,9 +13,6 @@ export default {
       control: { type: 'text' },
       type: { name: 'string', required: true },
     },
-    component: {
-      control: false,
-    },
     disabled: {
       control: { type: 'boolean' },
     },
@@ -25,6 +22,11 @@ export default {
         disable: true,
       },
     },
+    component: {
+      table: {
+        disable: true,
+      },
+    },
     // hiding deprecated opts
     variation: {
       options: ['primary', 'success', 'transparent'],

diff --git a/packages/design-system/src/components/Button/Button.test.tsx b/packages/design-system/src/components/Button/Button.test.tsx
@@ -2,13 +2,16 @@ import Button, { ButtonProps, ButtonComponentType } from './Button';
 import React from 'react';
 import { shallow } from 'enzyme';
 
-interface LinkProps {
-  children: React.ReactNode;
-  type: 'submit';
-  to: string;
+function mockWarn(testFunction: () => void) {
+  const original = console.warn;
+  const mock = jest.fn();
+  console.warn = mock;
+  testFunction();
+  console.warn = original;
+  return mock;
 }
 
-const Link = (props: LinkProps) => {
+const Link = (props: any) => {
   return <div {...props}>{props.children}</div>;
 };
 
@@ -49,20 +52,21 @@ describe('Button', () => {
   });
 
   it('renders as a custom Link component', () => {
-    const wrapper = shallow(
-      <Button
-        {...defaultProps}
-        {...{
-          component: Link,
-          type: 'submit',
-          to: 'anywhere',
-        }}
-      />
-    );
-    expect(wrapper.is('Link')).toBe(true);
-    expect(wrapper.hasClass('ds-c-button')).toBe(true);
-    expect(wrapper.render().text()).toBe(defaultProps.children);
-    expect(wrapper).toMatchSnapshot();
+    mockWarn(() => {
+      const wrapper = shallow(
+        <Button
+          {...defaultProps}
+          component={Link}
+          type="submit"
+          // @ts-ignore: This custom prop isn't supported
+          to="anywhere"
+        />
+      );
+      expect(wrapper.is('Link')).toBe(true);
+      expect(wrapper.hasClass('ds-c-button')).toBe(true);
+      expect(wrapper.render().text()).toBe(defaultProps.children);
+      expect(wrapper).toMatchSnapshot();
+    });
   });
 
   it('renders disabled link correctly', () => {
@@ -146,4 +150,21 @@ describe('Button', () => {
     expect(wrapper.hasClass('ds-c-button--transparent')).toBe(true);
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('prints deprecation warning for "component" prop', () => {
+    const mock = mockWarn(() => {
+      shallow(
+        <Button
+          {...defaultProps}
+          component={Link}
+          type="submit"
+          // @ts-ignore: This custom prop isn't supported
+          to="anywhere"
+        />
+      );
+    });
+    expect(mock).toHaveBeenCalledWith(
+      "[Deprecated]: Please remove the 'component' prop in <Button>. This prop will be removed in a future release."
+    );
+  });
 });
diff --git a/packages/design-system/src/components/Button/Button.tsx b/packages/design-system/src/components/Button/Button.tsx
@@ -20,8 +20,9 @@ type CommonButtonProps = {
    */
   className?: string;
   /**
-   * When provided, this will render the passed in component. This is useful when
-   * integrating with React Router's `<Link>` or using your own custom component.
+   * @hide-prop [Deprecated] Support for rendering custom components will be removed
+   * in the next major version. If you need to use React components like react-router
+   * `Link`, try wrapping this component instead.
    */
   component?: ButtonComponentType;
   disabled?: boolean;
@@ -96,7 +97,12 @@ export const Button = ({
     }
     if (variation === 'danger') {
       console.warn(
-        `[Deprecated]: Please remove the 'danger' variation prop in <Button>. This prop has will be removed in a future release.`
+        `[Deprecated]: Please remove the 'danger' variation prop in <Button>. This prop will be removed in a future release.`
+      );
+    }
+    if (component) {
+      console.warn(
+        "[Deprecated]: Please remove the 'component' prop in <Button>. This prop will be removed in a future release."
       );
     }
   }