Skip to content

UI: add "copy to clipboard" component #82686

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
simison wants to merge 11 commits into from
Closed

UI: add "copy to clipboard" component #82686

Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
fa61828
UI: add copy-to-clipboard components
simison Sep 8, 2026
a25dadf
Merge components under one
simison Sep 9, 2026
3b91d03
Add ClipboardButton.Label sub component
simison Sep 9, 2026
c3c2730
Remove Small & Compact examples
simison Sep 9, 2026
7ac1cea
Update custom icon example to be more meaningful
simison Sep 9, 2026
ce516a0
Include custom labels in button example
simison Sep 9, 2026
f682913
Update examples to be neutral+minimal
simison Sep 9, 2026
df5352b
Add shortcut support
simison Sep 9, 2026
19dae30
Remove reduntant "without tooltip" example
simison Sep 9, 2026
e968dd9
Include common "next to text" and "input suffix" examples
simison Sep 9, 2026
1fb9f1b
Update CHANGELOG.md
simison Sep 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Update custom icon example to be more meaningful
  • Loading branch information
@simison
simison committed Sep 9, 2026
commit 7ac1cea53323044c9a7520de27c6569f85ed3f1b
7 changes: 4 additions & 3 deletions packages/ui/src/clipboard-button/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Fragment } from '@wordpress/element';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { cog } from '@wordpress/icons';
import { code } from '@wordpress/icons';
import { ClipboardButton } from '../index';
import * as Tooltip from '../../tooltip';

Expand Down Expand Up @@ -169,9 +169,10 @@ export const IconAtEnd: Story = {
*/
export const CustomIcon: Story = {
args: {
text: "console.log( 'Code is Poetry' );",
children: [
<ClipboardButton.Icon key="icon" icon={ cog } />,
<ClipboardButton.Label key="label" />,
<ClipboardButton.Icon key="icon" icon={ code } />,
<ClipboardButton.Label key="label" pending="Copy code" />,
],
},
};
Expand Down