feat(components): move the snippet and copy to code components from gonfalon to LP #1795

ari-launchdarkly · 2025-10-20T20:13:47Z

Summary

Ports over the CopyToClipboard component and utility methods from gonfalon to LP
Ports over the Snippet component and styling to LP
Adds the requisite dependencies as part of porting over the components

https://launchdarkly.atlassian.net/browse/REL-10213

Screenshots (if appropriate):

Testing approaches

Related Jira issue: REL-10213: Move Snippet and CopyToClipboard to launchpad-ui

…onfalon to LP

changeset-bot · 2025-10-20T20:13:51Z

🦋 Changeset detected

Latest commit: 93ac482

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@launchpad-ui/components	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

ari-launchdarkly · 2025-10-20T20:14:06Z

packages/components/src/styles/Snippet.module.css

@@ -0,0 +1,132 @@
+@import 'prism-themes/themes/prism-ghcolors.css';
+
+.snippet {


renamed this from Snippet to snippet

ari-launchdarkly · 2025-10-20T20:14:22Z

packages/components/src/styles/Snippet.module.css

+	width: 100%;
+}
+
+.copyable [class*='_CopyToClipboard'] {


renamed this from Snippet--copyable to copyable

ari-launchdarkly · 2025-10-20T20:14:44Z

packages/components/src/styles/Snippet.module.css

+	border: none;
+}
+
+.snippet:not(.useDefaultHighlighting) .line-highlight {


renamed Snippet--useDefaultHighlighting to useDefaultHighlighting

ari-launchdarkly · 2025-10-20T20:15:32Z

packages/components/src/Snippet.tsx

+}: SnippetProps) {
+	const codeEl = useRef<HTMLElement>(null);
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: children and lang are intentionally included to re-highlight when they change


Added the biome-ignore to maintain the existing dependency list so we don't cause any unintended regressions with this migration

ari-launchdarkly · 2025-10-20T20:16:17Z

packages/components/src/utils.tsx

+		return true;
+	} catch (error) {
+		announce('Failed to copy', 'polite', 300);
+		console.error(`Unable to copy: ${error}`);


I'm not sure what to do about this, we were previously sending up a trackError and throwing this error message. Is there a pattern we want to establish where we can throw a CustomEvent that the consumer listens for if there's a failure?

I think the previous trackError solution wasn't very useful anyway so I think we can safely just announce and remove the console.error and not do anything else.

pkg-pr-new · 2025-10-20T20:43:41Z

yarn add https://pkg.pr.new/@launchpad-ui/components@1795.tgz

yarn add https://pkg.pr.new/@launchpad-ui/icons@1795.tgz

yarn add https://pkg.pr.new/@launchpad-ui/tokens@1795.tgz

commit: 93ac482

github-actions · 2025-10-20T20:44:49Z

Size Change: -9 B (0%)

Total Size: 533 kB

Filename	Size	Change
`packages/components/dist/index.es.js`	19 kB	-18 B (-0.09%)
`packages/components/dist/index.js`	19.9 kB	-3 B (-0.02%)
`packages/components/dist/style.css`	8.42 kB	+12 B (+0.14%)

ℹ️ View Unchanged

Filename	Size
`apps/vscode/dist/client.js`	111 kB
`apps/vscode/dist/server.js`	261 kB
`packages/box/dist/index.es.js`	7.26 kB
`packages/box/dist/index.js`	7.82 kB
`packages/box/dist/style.css`	2.67 kB
`packages/button/dist/index.es.js`	1.89 kB
`packages/button/dist/index.js`	2.32 kB
`packages/button/dist/style.css`	3 kB
`packages/core/dist/index.es.js`	512 B
`packages/core/dist/index.js`	1.27 kB
`packages/drawer/dist/index.es.js`	1.76 kB
`packages/drawer/dist/index.js`	2.22 kB
`packages/drawer/dist/style.css`	497 B
`packages/dropdown/dist/index.es.js`	1.15 kB
`packages/dropdown/dist/index.js`	1.59 kB
`packages/filter/dist/index.es.js`	2.23 kB
`packages/filter/dist/index.js`	2.68 kB
`packages/filter/dist/style.css`	881 B
`packages/focus-trap/dist/index.es.js`	418 B
`packages/focus-trap/dist/index.js`	852 B
`packages/form/dist/index.es.js`	4.25 kB
`packages/form/dist/index.js`	4.73 kB
`packages/form/dist/style.css`	2.21 kB
`packages/icons/dist/index.es.js`	2.8 kB
`packages/icons/dist/index.js`	3.23 kB
`packages/icons/dist/style.css`	532 B
`packages/menu/dist/index.es.js`	3.69 kB
`packages/menu/dist/index.js`	4.16 kB
`packages/menu/dist/style.css`	872 B
`packages/modal/dist/index.es.js`	3.08 kB
`packages/modal/dist/index.js`	3.55 kB
`packages/modal/dist/style.css`	903 B
`packages/navigation/dist/index.es.js`	2.75 kB
`packages/navigation/dist/index.js`	3.21 kB
`packages/navigation/dist/style.css`	874 B
`packages/overlay/dist/index.es.js`	1.02 kB
`packages/overlay/dist/index.js`	1.42 kB
`packages/popover/dist/index.es.js`	3.01 kB
`packages/popover/dist/index.js`	3.43 kB
`packages/popover/dist/style.css`	529 B
`packages/portal/dist/index.es.js`	420 B
`packages/portal/dist/index.js`	835 B
`packages/table/dist/index.es.js`	1.01 kB
`packages/table/dist/index.js`	1.44 kB
`packages/table/dist/style.css`	700 B
`packages/tokens/dist/fonts.css`	183 B
`packages/tokens/dist/index.css`	1.47 kB
`packages/tokens/dist/index.es.js`	3.07 kB
`packages/tokens/dist/index.js`	3.11 kB
`packages/tokens/dist/media-queries.css`	113 B
`packages/tokens/dist/themes.css`	2.27 kB
`packages/tooltip/dist/index.es.js`	598 B
`packages/tooltip/dist/index.js`	1.02 kB
`packages/tooltip/dist/style.css`	337 B
`packages/vars/dist/index.es.js`	2.66 kB
`packages/vars/dist/index.js`	2.66 kB

_{compressed-size-action}

yusinto · 2025-10-21T03:54:17Z

packages/components/package.json

 		"@launchpad-ui/icons": "workspace:~",
 		"@launchpad-ui/tokens": "workspace:~",
-		"class-variance-authority": "0.7.0"
+		"@react-aria/live-announcer": "3.4.4",


Should this be in devDep? I see all the other @react-aria deps are devDeps. I'm not sure why, but best to stay consistent. Better still find out why they are devDep and not dep.

I'm not sure on that one. The reason being that we had originally had it as a dependency in the dependencies list and I didn't want to stray from that. What'd you think?

https://github.com/launchdarkly/gonfalon/blob/main/packages/forms-experimental/package.json#L6-L28

cc @apucacao @vezaynk

yusinto

Couple of comments, but otherwise lgtm.

apucacao · 2025-10-22T17:58:22Z

packages/components/package.json

+		"@react-aria/live-announcer": "3.4.4",
+		"class-variance-authority": "0.7.0",
+		"prism-themes": "1.9.0",
+		"prismjs": "1.30.0"


Do you know how big prismjs is? Do we want to package this into @launchpad-ui/components like this? (I'm not sure yet, but curious if this is something you all thought about already.)

@yusinto and I talked about it. I'm not sure if we want is a peer dependency, or as a direct dependency. The package size for a minified bundle is at 18.7K (minified and gzipped at 6.9K)

i feel like a peer dependency would work well here? Curious what @vezaynk thinks too.

Snippet should be a share-able LP component. It's been living in launchpad-experimental for 3 years or so with that prismjs dependency. I did look at the size yes ari is correct. That dep must exist somewhere.

My general idea around making everything react-aria into peer dependencies is because having differing versions actually broke things.

I don't think the situation is the same with prismjs. The other argument for peers is that we want to force dedupping to save on size. I think that's valid too.

More generally, I think erring on the side of peer dependencies might be cool because it will avoid needing to do dependency version bumps here.

tldr: No strong feelings from me, but I have been enjoying peer dependencies lately (especially post-PNPM).

No strong feelings. Peer dep is fine with me.

Sounds good. I'll set it as a peer dependency

apucacao · 2025-10-22T17:59:28Z

Is this related to us trying to share onboarding code between different code bases?

ari-launchdarkly · 2025-10-22T18:05:14Z

Is this related to us trying to share onboarding code between different code bases?

It is! We're looking to share the Snippet in our docs site too

feat(components): move the snippet and copy to code components from g…

62f82e9

…onfalon to LP

ari-launchdarkly requested review from a team and matthewferry October 20, 2025 20:13

ari-launchdarkly requested a review from a team as a code owner October 20, 2025 20:13

ari-launchdarkly commented Oct 20, 2025

View reviewed changes

ari-launchdarkly added 2 commits October 20, 2025 13:20

chore(components): npx changeset

81e62f0

chore(components): address the linter issues

1d4b555

yusinto reviewed Oct 21, 2025

View reviewed changes

yusinto approved these changes Oct 21, 2025

View reviewed changes

apucacao reviewed Oct 22, 2025

View reviewed changes

ari-launchdarkly requested a review from apucacao October 22, 2025 18:07

move the dependency to a peer dependency

a714c81

ari-launchdarkly force-pushed the ari-launchdarkly/REL-10213-snippet-copy branch from c2c24d8 to a714c81 Compare October 22, 2025 18:45

Merge branch 'main' into ari-launchdarkly/REL-10213-snippet-copy

93ac482

ari-launchdarkly requested a review from vezaynk October 22, 2025 18:54

apucacao approved these changes Oct 22, 2025

View reviewed changes

ari-launchdarkly merged commit 9ec37fc into main Oct 22, 2025
16 checks passed

ari-launchdarkly deleted the ari-launchdarkly/REL-10213-snippet-copy branch October 22, 2025 20:22

This was referenced Oct 22, 2025

chore: version packages #1796

Merged

chore: version packages #1797

Closed

		@@ -0,0 +1,132 @@
		@import 'prism-themes/themes/prism-ghcolors.css';

		.snippet {

feat(components): move the snippet and copy to code components from gonfalon to LP #1795

feat(components): move the snippet and copy to code components from gonfalon to LP #1795

Uh oh!

Conversation

ari-launchdarkly commented Oct 20, 2025 • edited by launchdarkly-upra bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Screenshots (if appropriate):

Testing approaches

Uh oh!

changeset-bot bot commented Oct 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pkg-pr-new bot commented Oct 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Oct 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yusinto left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

apucacao commented Oct 22, 2025

Uh oh!

ari-launchdarkly commented Oct 22, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

ari-launchdarkly commented Oct 20, 2025 •

edited by launchdarkly-upra bot

Loading

changeset-bot bot commented Oct 20, 2025 •

edited

Loading

pkg-pr-new bot commented Oct 20, 2025 •

edited

Loading

github-actions bot commented Oct 20, 2025 •

edited

Loading