Deprecates Code props

.changeset/modern-buttons-bow.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/code': major
+---
+
+The following props are deprecated and have been removed: `copyable`, `showCustomActionButtons`, `languageOptions`, `customActionButtons`, `chromeTitle`, `onChange`. Please use the Panel component instead.

packages/code/src/Code.stories.tsx

@@ -13,7 +13,6 @@ import IconButton from '@leafygreen-ui/icon-button';
 
 import {
   languageOptions,
-  LanguageSwitcherWithDeprecatedPropsExample,
   LanguageSwitcherWithPanelExample,
 } from './LanguageSwitcher/LanguageSwitcherExample';
 import Code, { CodeProps, CopyButtonAppearance, Language, Panel } from '.';
@@ -103,7 +102,6 @@ const meta: StoryMetaType<typeof Code> = {
     baseFontSize: 14,
     children: shortJsSnippet,
     copyButtonAppearance: CopyButtonAppearance.Hover,
-    chromeTitle: '',
   },
   argTypes: {
     isLoading: { control: 'boolean' },
@@ -232,7 +230,6 @@ WithLanguageSwitcher.parameters = {
       'copyable',
       'children',
       'expandable',
-      'chromeTitle',
     ],
   },
 };
@@ -273,56 +270,6 @@ export const Multiple: StoryType<typeof Code, FontSizeProps> = ({
   </div>
 );
 
-export const WithDeprecatedCustomActionProps: StoryType<
-  typeof Code,
-  FontSizeProps
-> = ({ highlightLines, ...args }: CodeProps) => (
-  <Code
-    {...(args as CodeProps)}
-    highlightLines={highlightLines ? [6, [10, 15]] : undefined}
-    customActionButtons={customActionButtons}
-    showCustomActionButtons
-  >
-    {jsSnippet}
-  </Code>
-);
-WithDeprecatedCustomActionProps.parameters = {
-  controls: {
-    exclude: [
-      'highlightLines',
-      'copyButtonAppearance',
-      'copyable',
-      'children',
-      'expandable',
-      'language',
-    ],
-  },
-};
-
-export const WithDeprecatedLanguageSwitcherProps: StoryType<
-  typeof Code,
-  FontSizeProps
-> = ({ ...args }: CodeProps) => (
-  <LanguageSwitcherWithDeprecatedPropsExample
-    showCustomActionButtons={true}
-    customActionButtons={customActionButtons}
-    {...args}
-  />
-);
-WithDeprecatedLanguageSwitcherProps.parameters = {
-  controls: {
-    exclude: [
-      'highlightLines',
-      'copyButtonAppearance',
-      'copyable',
-      'children',
-      'expandable',
-      'chromeTitle',
-      'language',
-    ],
-  },
-};
-
 export const WithPanel = () => {};
 WithPanel.parameters = {
   generate: {

packages/code/src/Code/Code.spec.tsx

@@ -83,18 +83,6 @@ describe('packages/Code', () => {
     });
   });
 
-  // TODO: remove this test when we remove the prop
-  describe('when copyable is true', () => {
-    test('onCopy callback is fired when code is copied', () => {
-      const onCopy = jest.fn();
-      renderCode({ onCopy, copyable: true });
-
-      const copyIcon = screen.getByRole('button');
-      userEvent.click(copyIcon);
-      expect(onCopy).toHaveBeenCalledTimes(1);
-    });
-  });
-
   describe('hasMultipleLines()', () => {
     test('when passed a single line without preceding and subsequent line breaks, returns "false"', () => {
       const codeExample = `Example`;
@@ -163,7 +151,6 @@ describe('packages/Code', () => {
                 spy.mockReturnValue(true);
                 return renderCode({
                   isLoading: true,
-                  copyable: false,
                 });
               },
             );
@@ -211,7 +198,12 @@ describe('packages/Code', () => {
               return renderCode({
                 isLoading: false,
                 language: languageOptions[0].displayName,
-                panel: <Panel />,
+                panel: (
+                  <Panel
+                    onChange={() => {}}
+                    languageOptions={languageOptions}
+                  />
+                ),
               });
             },
           );
@@ -631,171 +623,10 @@ describe('packages/Code', () => {
     });
   });
 
-  describe('Deprecated props', () => {
-    describe('custom action buttons', () => {
-      test('does not renders a panel with custom action buttons when only customActionButtons is passed', () => {
-        const { queryPanel } = renderCode({
-          customActionButtons,
-        });
-        expect(queryPanel()).toBeNull();
-      });
-      test('does not renders a panel with custom action buttons when only showCustomActionButtons is true', () => {
-        const { queryPanel } = renderCode({
-          showCustomActionButtons: true,
-        });
-        expect(queryPanel()).toBeNull();
-      });
-      test('renders a panel with with custom action buttons when showCustomActionButtons is true and customActionButtons is passed', () => {
-        const { queryPanel } = renderCode({
-          showCustomActionButtons: true,
-          customActionButtons,
-        });
-        expect(queryPanel()).toBeDefined();
-      });
-    });
-
-    describe('language switcher', () => {
-      test('renders a panel when only language, onChange, and languageOptions are defined', () => {
-        const { queryPanel } = renderCode({
-          language: languageOptions[0].displayName,
-          languageOptions,
-          onChange: () => {},
-        });
-        expect(queryPanel()).toBeDefined();
-      });
-      test('does not render a panel when language and onChange are defined but languageOptions is not defined', () => {
-        const { queryPanel } = renderCode({
-          language: languageOptions[0].displayName,
-          onChange: () => {},
-        });
-        expect(queryPanel()).toBeNull();
-      });
-      test('does not render a panel when language and languageOptions are defined but onChange is not defined', () => {
-        const { queryPanel } = renderCode({
-          language: languageOptions[0].displayName,
-          languageOptions,
-        });
-        expect(queryPanel()).toBeNull();
-      });
-      test('does not render a panel when languageOptions is an empty array', () => {
-        const { queryPanel } = renderCode({
-          language: languageOptions[0].displayName,
-          languageOptions: [],
-          onChange: () => {},
-        });
-        expect(queryPanel()).toBeNull();
-      });
-      test('does not render a panel if language is a string', () => {
-        const { queryPanel } = renderCode({
-          language: 'javascript',
-          languageOptions: [],
-          onChange: () => {},
-        });
-        expect(queryPanel()).toBeNull();
-      });
-      test('throws an error if language is not in languageOptions', () => {
-        try {
-          renderCode({
-            language: 'Testing',
-            languageOptions,
-            onChange: () => {},
-          });
-        } catch (error) {
-          expect(error).toBeInstanceOf(Error);
-          expect(error).toHaveProperty(
-            'message',
-            expect.stringMatching(/Unknown language: "Testing"/),
-          );
-        }
-      });
-    });
-
-    describe('chromeTitle', () => {
-      test('renders a panel with a title when chromeTitle is defined', () => {
-        const { getByTestId } = renderCode({
-          chromeTitle: 'Title',
-        });
-        expect(getByTestId('lg-code-panel')).toBeDefined();
-        expect(getByTestId('lg-code-panel')).toHaveTextContent('Title');
-      });
-    });
-
-    describe('copyable', () => {
-      test('renders a panel with a copy button when only copyable is true', () => {
-        const { getByTestId } = Context.within(
-          Jest.spyContext(ClipboardJS, 'isSupported'),
-          spy => {
-            spy.mockReturnValue(true);
-            return renderCode({
-              copyable: true,
-            });
-          },
-        );
-        expect(getByTestId('lg-code-panel')).toBeDefined();
-        expect(getByTestId('lg-code-copy_button')).toBeDefined();
-      });
-      test('does not render a panel with a copy button when copyable is false', () => {
-        const { queryPanel } = Context.within(
-          Jest.spyContext(ClipboardJS, 'isSupported'),
-          spy => {
-            spy.mockReturnValue(true);
-            return renderCode({
-              copyable: false,
-            });
-          },
-        );
-        expect(queryPanel()).toBeNull();
-      });
-    });
-
-    describe('panel slot', () => {
-      describe('copyable', () => {
-        test('is overridden by the panel prop', () => {
-          const { queryPanel } = renderCode({
-            copyable: false,
-            panel: <Panel />,
-          });
-          expect(queryPanel()).toBeDefined();
-        });
-      });
-
-      describe('language switcher', () => {
-        test('is overridden by the panel prop', () => {
-          const { getByTestId } = renderCode({
-            language: languageOptions[1].displayName,
-            languageOptions,
-            onChange: () => {},
-            panel: (
-              <Panel
-                data-testid="lg-code_panel-override"
-                languageOptions={languageOptions}
-                onChange={() => {}}
-              />
-            ),
-          });
-          expect(getByTestId('lg-code_panel-override')).toBeDefined();
-          expect(
-            screen.getByRole('button', { name: 'Python' }),
-          ).toBeInTheDocument();
-        });
-      });
-    });
-  });
-
   // eslint-disable-next-line jest/no-disabled-tests
   test.skip('types behave as expected', () => {
     <>
-      <Code
-        language="javascript"
-        customActionButtons={[]}
-        showCustomActionButtons={true}
-        chromeTitle=""
-        languageOptions={[]}
-        onChange={() => {}}
-        copyable={true}
-      >
-        snippet
-      </Code>
+      <Code language="javascript">snippet</Code>
       <Code language="javascript">snippet</Code>
       {/* @ts-expect-error - missing language prop */}
       <Code>snippet</Code>