LG-4760: `Code` minimal copy button #2661

shaneeza · 2025-01-24T19:15:58Z

✍️ Proposed changes

🎟 Jira ticket: LG-4760.

This PR adds a new minimal copy button.

Before:

After:

✅ Checklist

For bug fixes, new features & breaking changes

I have added tests that prove my fix is effective or that my feature works
I have added necessary documentation (if appropriate)
I have run pnpm changeset and documented my changes

For new components

I have added my new package to the global tsconfig
I have added my new package to the Table of Contents on the global README
I have verified the Live Example looks as intended on the design website.

🧪 How to test changes

… into LG-4760/code-copy-button

shaneeza · 2025-01-29T18:04:29Z

packages/lib/src/getMobileMediaQuery/getMobileMediaQuery.ts

@@ -0,0 +1,11 @@
+const _baseQuery = (size: number) =>


This was copied from the select component

is it worth replacing this in Select in this body of work?

stephl3 · 2025-01-29T19:01:55Z

packages/code/src/Code.stories.tsx

-          panel: undefined,
-        },
-      ],
+      storyNames: ['Generated', 'MinimalCopyButton'],


Is this the optimal way to organize the generated stories? My understanding is that if we specify custom storyNames that 'Generated' should not be used in favor of more specific sections. However, I do see that we do that for InputOption.stories.tsx

I got more context as I read further down. What do you think about calling these 'WithPanel and WithoutPanel?

i'll update the story names

packages/code/src/Code.stories.tsx

stephl3 · 2025-01-29T19:10:48Z

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

@@ -637,6 +686,7 @@ describe('packages/Code', () => {
        showLineNumbers={true}
        onCopy={() => {}}
        darkMode={true}
+        copyButtonAppearance="hover"


From reading the changeset/readme, I would expect attempting to pass in copyButtonAppearance when panel is defined would result in a TS error or vice-versa. Should those types use a discriminated union?

I think that makes a lot of sense; I'll update that

stephl3 · 2025-01-29T19:16:46Z

packages/code/src/Code/Code.styles.ts

+  hasPanel,
  showExpandButton,
 }: {
  scrollState: ScrollState;
  theme: Theme;
-  showPanel: boolean;
+  hasPanel: boolean;


const showPanel = !!panel || shouldRenderTempPanelSubComponent;
showPanel seems to better align with the value getting passed in over hasPanel

what's the reason for renaming to hasPanel?

I don't remember, but I don't feel strongly about hasPanel. I'll switch it back.

stephl3 · 2025-01-29T19:20:02Z

packages/code/src/Code/Code.tsx

+          {!showPanel &&
+            copyButtonAppearance !== CopyButtonAppearance.None &&
+            ClipboardJS.isSupported() && (


nit: move to variable to declutter the JSX

stephl3 · 2025-01-29T19:20:18Z

packages/code/src/Code/Code.tsx

+                <CopyButton onCopy={onCopy} contents={children} />
+              </div>
+            )}
+
          {!!panel && panel}


should this be using showPanel?

No, showPanel is true if there is a panel or if a temp panel should render because of deprecated props. The panel should only render if the consumer passes it. I updated showPanel to showPanelOrTempPanel to hopefully clarify that.

oh now I see that there are 2 panels! It might be more explicit to rename the old one DeprecatedPanel and then update the associated variables to *DeprecatedPanel

stephl3 · 2025-01-29T19:29:21Z

packages/code/src/Code/Code.tsx

+              <div
+                className={getCopyButtonWithoutPanelStyles({
+                  copyButtonAppearance,
+                })}
+              >
+                <CopyButton onCopy={onCopy} contents={children} />
+              </div>


maybe could remove a <div> here by passing className directly to CopyButton?

stephl3 · 2025-01-29T19:30:42Z

packages/code/src/Code/Code.types.ts

@@ -52,6 +61,21 @@ export type CodeProps = Omit<

  language: Language | LanguageOption['displayName'];

+  /**
+   * Determines the appearance of the copy button if the panel prop is not defined. If `panel` is defined, this prop will be ignored. The copy button allows the code block to be copied to the user's clipboard by clicking the button.


After reading this note again, I'm more convinced that copyButtonAppearance and panel should be a discriminated union type unless there's a specific reason to avoid that approach

stephl3 · 2025-01-29T19:45:45Z

packages/lib/src/getMobileMediaQuery/getMobileMediaQuery.ts

@@ -0,0 +1,11 @@
+const _baseQuery = (size: number) =>


is it worth replacing this in Select in this body of work?

stephl3 · 2025-01-29T19:55:47Z

packages/code/src/Code.stories.tsx

@@ -242,12 +225,22 @@ export const WithDeprecatedCopyableProps: StoryType<
    <Code
      {...(args as CodeProps)}
      highlightLines={highlightLines ? [6, [10, 15]] : undefined}
-      copyable


should this story still be using the deprecated copyable prop?

You know, probably not. I'll remove it.

stephl3

some docs worth updating to match the new panel | copyButtonAppearance api but overall LGTM!

I do also still see that tooltip notch issue but that can be addressed in a separate PR if you'd like

stephl3 · 2025-01-30T00:32:37Z

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


+      {/* @ts-expect-error - cannot pass both panel and copyButtonAppearance */}


stephl3 · 2025-01-30T00:34:02Z

.changeset/chatty-ears-exercise.md

@@ -22,6 +24,28 @@ or
 ```js
 panel={<Panel/>}
 ```
+
+### `copyButtonAppearance`
+Adds a new prop, `copyButtonAppearance`. This prop determines the appearance of the copy button if the `panel` prop is not defined. If `panel` is defined, this prop will be ignored. 


can we update this language to better communicate only 1 or the other can be defined?

stephl3 · 2025-01-30T00:34:44Z

.changeset/chatty-ears-exercise.md

-Adds a new slot prop, `panel`, that accepts the new `<Panel/>` sub-component. This will render the top panel with a language switcher, custom action buttons, and copy button. If no props are passed to the panel sub-component, the panel will render with only the copy button.
+### `panel`
+
+Adds a new slot prop, `panel`, that accepts the new `<Panel/>` sub-component. This will render the top panel with a language switcher, custom action buttons, and copy button. If no props are passed to the panel sub-component, the panel will render with only the copy button. This prop takes precedence over `copyButtonAppearance`.


can we update this language to better communicate only 1 or the other can be defined?

stephl3 · 2025-01-30T00:35:21Z

packages/code/README.md

+| `copyButtonAppearance`                   | `'none'`, `'hover'`, `'persist'`                                                                                                                                                                                                                                          | Determines the appearance of the copy button if the panel prop is not defined. If `panel` is defined, this prop will be ignored. The copy button allows the code block to be copied to the user's clipboard by clicking the button. If `hover`, the copy button will only appear when the user hovers over the code block. On mobile devices, the copy button will always be visible. If `persist`, the copy button will always be visible. If `none`, the copy button will not be rendered. | `hover` |
+| `panel`                                  | `React.ReactNode`                                                                                                                                                                                                                                                         | Slot to pass the `<Panel/>` sub-component which will render the top panel with a language switcher, custom action buttons, and copy button. If no props are passed to the panel sub-component, the panel will render with only the copy button. This prop takes precedence over `copyButtonAppearance`.                                                                                                                                                                                      | ``      |


can we update this language to better communicate only 1 or the other can be defined?

stephl3 · 2025-01-30T00:40:22Z

packages/code/src/Code/Code.types.ts

+        panel?: never;
+      }
+    | {
+        copyButtonAppearance?: never;


nit: if you want the tsdoc description tooltip to show the associated comment, you'll need to include it on these props. It's not sophisticated enough for discriminated union types unless you have another vscode extension. If you hover the panel variable, you should see that the comment doesn't show up

stephl3 · 2025-01-30T00:44:24Z

packages/code/src/Code/Code.tsx

+                <CopyButton onCopy={onCopy} contents={children} />
+              </div>
+            )}
+
          {!!panel && panel}


oh now I see that there are 2 panels! It might be more explicit to rename the old one DeprecatedPanel and then update the associated variables to *DeprecatedPanel

stephl3

had a note about the tooltip notch styles which are working great but could use some final cleanup before merging :)

stephl3 · 2025-01-30T17:34:47Z

.changeset/chatty-ears-exercise.md

+
+Adds a new slot prop, `panel`, that accepts the new `<Panel/>` sub-component. This will render the top panel with a language switcher, custom action buttons, and copy button. If no props are passed to the panel sub-component, the panel will render with only the copy button. 
+
+**_Note: This prop takes precedence over `copyButtonAppearance`. Either use `copyButtonAppearance` or `panel`, not both._**


This could just be me, but the mentions of "... takes precedence over..." + "this prop will be ignored" seem to suggest a consumer could define both if they wanted to although now with the discriminated union they should only be able to define one or the other

Simplifying the language to something like "x cannot be used with y" + "y cannot be used with x" reads more straightforward to me. Overall, I'm good with these as they are and will leave it up to you!

stephl3 · 2025-01-30T17:35:49Z

packages/code/src/CopyButton/CopyButton.styles.ts

+      div[role='tooltip'] svg {
+        width: 26px;
+        height: 26px;
+      }


can we move this into tooltipStyles on L6? or if it needs to be defined here, can we remove tooltipStyles?

oh whoops, i forgot to remove tooltipStyles

shaneeza added 30 commits January 7, 2025 11:58

wip

ef34493

wip - updating panel styles

b71de4e

updated panel styles

029a90e

trying to combine styles

6ef16ba

move styles to styles file

794fe08

updating panel types

2e19572

added context

e21b374

ts docs

07426d1

update copy button styles in panel

9994560

organize code style file

3af02dc

update types

ffb7c2f

remove unused type

db94d82

wip code tests

68f6b57

add language prop to context

02ede13

more tests updates

56c69e5

remove some tests

79f9394

delete windowChrome and CustomSelectMenuButton

ac0cadf

fix onChangeError

893f021

remove comment

2fd12a6

check if language is in option

a1d68a6

add copyButtonAppearance prop

2a35411

add clipboard check

f7164ca

Merge branch 'LG-4748-code-panel' of github.com:mongodb/leafygreen-ui…

05f3f67

… into LG-4760/code-copy-button

remove copyable prop

9e108d7

copy button styles

d1ecc7b

added back props i initially deleted

696bcd7

remove props from context

597eba3

update tsdocs

bf064a6

rename func and update tsdocs

2b77d46

add todo tests

8a6c5e3

shaneeza requested review from stephl3 and sandynguyenn and removed request for a team January 27, 2025 18:28

shaneeza added 3 commits January 28, 2025 15:30

fix story props

1168eb3

sandy feedback

33538df

fix build error

1d1deb3

Base automatically changed from LG-4748-code-panel to LG-4657-code-improvements-integration January 29, 2025 17:36

merge conflict

49625f4

shaneeza commented Jan 29, 2025

View reviewed changes

shaneeza added 2 commits January 29, 2025 13:45

build and story updates

813d6f4

lock

48a968a

stephl3 reviewed Jan 29, 2025

View reviewed changes

shaneeza added 7 commits January 29, 2025 17:11

update genereated stories

daff28f

showPanel and story updates

b8de180

add showCopyButtonWithoutPanel const

b8ec8e5

remove extra div

0e23069

discriminated union for copyButtonAppearnce and panel

0cce4b0

use getMobileMediaQuery in select

e0d7288

changeset

40839f8

shaneeza requested a review from stephl3 January 29, 2025 23:33

stephl3 approved these changes Jan 30, 2025

View reviewed changes

shaneeza added 2 commits January 29, 2025 21:36

doc feedback

7dd19e7

fix tooltip issue and be more specific with svg styles

3beac53

shaneeza requested a review from stephl3 January 30, 2025 16:55

stephl3 reviewed Jan 30, 2025

View reviewed changes

update docs and remove tooltip styles

2d9504e

shaneeza merged commit b0053aa into LG-4657-code-improvements-integration Jan 30, 2025
2 of 5 checks passed

shaneeza deleted the LG-4760/code-copy-button branch January 30, 2025 18:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

LG-4760: `Code` minimal copy button #2661

LG-4760: `Code` minimal copy button #2661

shaneeza commented Jan 24, 2025 •

edited

Loading

shaneeza Jan 29, 2025

stephl3 Jan 29, 2025

shaneeza Jan 29, 2025

stephl3 Jan 29, 2025

stephl3 Jan 29, 2025

shaneeza Jan 29, 2025

stephl3 Jan 29, 2025

shaneeza Jan 29, 2025

stephl3 Jan 29, 2025 •

edited

Loading

shaneeza Jan 29, 2025

stephl3 Jan 29, 2025

stephl3 Jan 29, 2025

shaneeza Jan 29, 2025

stephl3 Jan 30, 2025

stephl3 Jan 29, 2025

stephl3 Jan 29, 2025

stephl3 Jan 29, 2025

stephl3 Jan 29, 2025

shaneeza Jan 29, 2025

stephl3 left a comment

stephl3 Jan 30, 2025

stephl3 Jan 30, 2025

stephl3 Jan 30, 2025

stephl3 Jan 30, 2025

stephl3 Jan 30, 2025

stephl3 Jan 30, 2025

stephl3 left a comment

stephl3 Jan 30, 2025

stephl3 Jan 30, 2025

shaneeza Jan 30, 2025


		{/* @ts-expect-error - cannot pass both panel and copyButtonAppearance */}

		\| `copyButtonAppearance` \| `'none'`, `'hover'`, `'persist'` \| Determines the appearance of the copy button if the panel prop is not defined. If `panel` is defined, this prop will be ignored. The copy button allows the code block to be copied to the user's clipboard by clicking the button. If `hover`, the copy button will only appear when the user hovers over the code block. On mobile devices, the copy button will always be visible. If `persist`, the copy button will always be visible. If `none`, the copy button will not be rendered. \| `hover` \|
		\| `panel` \| `React.ReactNode` \| Slot to pass the `<Panel/>` sub-component which will render the top panel with a language switcher, custom action buttons, and copy button. If no props are passed to the panel sub-component, the panel will render with only the copy button. This prop takes precedence over `copyButtonAppearance`. \| `` \|


		Adds a new slot prop, `panel`, that accepts the new `<Panel/>` sub-component. This will render the top panel with a language switcher, custom action buttons, and copy button. If no props are passed to the panel sub-component, the panel will render with only the copy button.

		_Note: This prop takes precedence over `copyButtonAppearance`. Either use `copyButtonAppearance` or `panel`, not both._

LG-4760: Code minimal copy button #2661

LG-4760: Code minimal copy button #2661

Conversation

shaneeza commented Jan 24, 2025 • edited Loading

✍️ Proposed changes

Before:

After:

✅ Checklist

For bug fixes, new features & breaking changes

For new components

🧪 How to test changes

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stephl3 Jan 29, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stephl3 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stephl3 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

LG-4760: `Code` minimal copy button #2661

LG-4760: `Code` minimal copy button #2661

shaneeza commented Jan 24, 2025 •

edited

Loading

stephl3 Jan 29, 2025 •

edited

Loading