Skip to content

Commit 50b93c8

Browse files
metonymmetonym
committed
feat(code-snippet): add copy functionality
- docs: add custom feedback copy text example
1 parent f13e3b1 commit 50b93c8

File tree

15 files changed

+91
-94
lines changed

15 files changed

+91
-94
lines changed

‎COMPONENT_INDEX.md‎

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -500,25 +500,25 @@ None.
500500

501501
### Props
502502

503-
| Prop name | Kind | Reactive | Type | Default value | Description |
504-
| :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
505-
| ref | <code>let</code> | Yes | <code>null &#124; HTMLPreElement</code> | <code>null</code> | Obtain a reference to the pre HTML element |
506-
| showMoreLess | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the show more/less button |
507-
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand a multi-line code snippet (type="multi") |
508-
| type | <code>let</code> | No | <code>"single" &#124; "inline" &#124; "multi"</code> | <code>"single"</code> | Set the type of code snippet |
509-
| code | <code>let</code> | No | <code>string</code> | -- | Set the code snippet text<br />Alternatively, use the default slot (e.g., &lt;CodeSnippet&gt;{`code`}&lt;/CodeSnippet&gt;) |
510-
| hideCopyButton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the copy button |
511-
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the disabled variant<br />Only applies to the "single", "multi" types |
512-
| wrapText | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to wrap the text<br />Note that `type` must be "multi" |
513-
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
514-
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
515-
| copyButtonDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the copy button icon |
516-
| copyLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label of the copy button |
517-
| feedback | <code>let</code> | No | <code>string</code> | <code>"Copied!"</code> | Specify the feedback text displayed when clicking the snippet |
518-
| feedbackTimeout | <code>let</code> | No | <code>number</code> | <code>2000</code> | Set the timeout duration (ms) to display feedback text |
519-
| showLessText | <code>let</code> | No | <code>string</code> | <code>"Show less"</code> | Specify the show less text<br />`type` must be "multi" |
520-
| showMoreText | <code>let</code> | No | <code>string</code> | <code>"Show more"</code> | Specify the show more text<br />`type` must be "multi" |
521-
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the code element |
503+
| Prop name | Kind | Reactive | Type | Default value | Description |
504+
| :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
505+
| ref | <code>let</code> | Yes | <code>null &#124; HTMLPreElement</code> | <code>null</code> | Obtain a reference to the pre HTML element |
506+
| showMoreLess | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the show more/less button |
507+
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand a multi-line code snippet (type="multi") |
508+
| type | <code>let</code> | No | <code>"single" &#124; "inline" &#124; "multi"</code> | <code>"single"</code> | Set the type of code snippet |
509+
| code | <code>let</code> | No | <code>string</code> | -- | Set the code snippet text<br />Alternatively, use the default slot (e.g., &lt;CodeSnippet&gt;{`code`}&lt;/CodeSnippet&gt;)<br />You must use the `code` prop to copy the code |
510+
| hideCopyButton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the copy button |
511+
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the disabled variant<br />Only applies to the "single", "multi" types |
512+
| wrapText | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to wrap the text<br />Note that `type` must be "multi" |
513+
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
514+
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
515+
| copyButtonDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the copy button icon |
516+
| copyLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label of the copy button |
517+
| feedback | <code>let</code> | No | <code>string</code> | <code>"Copied!"</code> | Specify the feedback text displayed when clicking the snippet |
518+
| feedbackTimeout | <code>let</code> | No | <code>number</code> | <code>2000</code> | Set the timeout duration (ms) to display feedback text |
519+
| showLessText | <code>let</code> | No | <code>string</code> | <code>"Show less"</code> | Specify the show less text<br />`type` must be "multi" |
520+
| showMoreText | <code>let</code> | No | <code>string</code> | <code>"Show more"</code> | Specify the show more text<br />`type` must be "multi" |
521+
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the code element |
522522

523523
### Slots
524524

@@ -528,13 +528,14 @@ None.
528528

529529
### Events
530530

531-
| Event name | Type | Detail |
532-
| :----------- | :-------- | :----- |
533-
| click | forwarded | -- |
534-
| mouseover | forwarded | -- |
535-
| mouseenter | forwarded | -- |
536-
| mouseleave | forwarded | -- |
537-
| animationend | forwarded | -- |
531+
| Event name | Type | Detail |
532+
| :----------- | :--------- | :----- |
533+
| click | forwarded | -- |
534+
| mouseover | forwarded | -- |
535+
| mouseenter | forwarded | -- |
536+
| mouseleave | forwarded | -- |
537+
| animationend | forwarded | -- |
538+
| copy | dispatched | -- |
538539

539540
## `CodeSnippetSkeleton`
540541

‎docs/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"devDependencies": {
1212
"@sveltech/routify": "^1.9.9",
1313
"autoprefixer": "^10.2.3",
14-
"carbon-components": "10.31.0",
14+
"carbon-components": "10.32.0-rc.0",
1515
"carbon-components-svelte": "../",
1616
"clipboard-copy": "^3.1.0",
1717
"mdsvex": "^0.8.8",

‎docs/src/COMPONENT_API.json‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -805,7 +805,7 @@
805805
{
806806
"name": "code",
807807
"kind": "let",
808-
"description": "Set the code snippet text\nAlternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)",
808+
"description": "Set the code snippet text\nAlternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)\nYou must use the `code` prop to copy the code",
809809
"type": "string",
810810
"isFunction": false,
811811
"constant": false,
@@ -989,7 +989,12 @@
989989
"name": "mouseleave",
990990
"element": "CodeSnippetSkeleton"
991991
},
992-
{ "type": "forwarded", "name": "animationend", "element": "CopyButton" }
992+
{
993+
"type": "forwarded",
994+
"name": "animationend",
995+
"element": "CopyButton"
996+
},
997+
{ "type": "dispatched", "name": "copy" }
993998
],
994999
"typedefs": [],
9951000
"rest_props": { "type": "InlineComponent", "name": "CodeSnippetSkeleton" }

‎docs/src/components/InlineSnippet.svelte‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,10 @@
22
export let code = "";
33
44
import { CodeSnippet } from "carbon-components-svelte";
5-
import copy from "clipboard-copy";
65
</script>
76

87
<div>
9-
<CodeSnippet
10-
code="{code}"
11-
type="inline"
12-
on:click="{() => {
13-
copy(code);
14-
}}"
15-
/>
8+
<CodeSnippet code="{code}" type="inline" />
169
</div>
1710

1811
<style>

‎docs/src/components/Preview.svelte‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
77
import { CodeSnippet, Button } from "carbon-components-svelte";
88
import Launch16 from "carbon-icons-svelte/lib/Launch16";
9-
import copy from "clipboard-copy";
109
import { url } from "@sveltech/routify";
1110
import { theme } from "../store";
1211
@@ -41,7 +40,7 @@
4140
{/if}
4241
</div>
4342
<div class="code-override">
44-
<CodeSnippet type="multi" on:click="{() => copy(codeRaw)}">
43+
<CodeSnippet type="multi" code="{codeRaw}">
4544
{@html code}
4645
</CodeSnippet>
4746
</div>

‎docs/src/pages/_layout.svelte‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,15 +105,19 @@
105105
>
106106
{child.title}
107107
{#if deprecated.includes(child.title)}
108-
<Tag size="sm" type="red" style="margin-top: 0; margin-bottom: 0">
108+
<Tag
109+
size="sm"
110+
type="red"
111+
style="margin-top: 0; margin-bottom: 0; cursor: inherit"
112+
>
109113
Deprecated
110114
</Tag>
111115
{/if}
112116
{#if new_components.includes(child.title)}
113117
<Tag
114118
size="sm"
115119
type="green"
116-
style="margin-top: 0; margin-bottom: 0"
120+
style="margin-top: 0; margin-bottom: 0; cursor: inherit"
117121
>
118122
New
119123
</Tag>

‎docs/src/pages/components/CodeSnippet.svx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,21 +28,27 @@ let comment = `
2828
</script>
2929

3030
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
31-
<div class="body-short-01">By design, the copy button does not copy text to the clipboard. You will need to write your own logic. Refer to the <Link href="/recipes/CopyableCodeSnippet">CopyableCodeSnippet recipe</Link> for an example.</div>
31+
<div class="body-short-01">As of version 0.32, the CodeSnippet will copy the provided `code` text when clicking the copy button.</div>
3232
</InlineNotification>
3333

3434
### Default (single-line)
3535

36-
<CodeSnippet>yarn add -D carbon-components-svelte</CodeSnippet>
36+
<CodeSnippet code="yarn add -D carbon-components-svelte" />
3737

3838
### Inline
3939

40-
<CodeSnippet type="inline">rm -rf node_modules/</CodeSnippet>
40+
<CodeSnippet type="inline" code="rm -rf node_modules/" />
4141

4242
### Multi-line
4343

4444
<CodeSnippet type="multi" {code} />
4545

46+
### Custom copy feedback text
47+
48+
Use the `feedback` prop to override the default copy button feedback text.
49+
50+
<CodeSnippet type="multi" {code} feedback="Copied to clipboard" />
51+
4652
### Hidden copy button
4753

4854
<CodeSnippet type="multi" {code} hideCopyButton />
@@ -51,7 +57,7 @@ let comment = `
5157

5258
The `disabled` prop applies only to the `"single"` and `"multi"` code snippet types.
5359

54-
<CodeSnippet disabled>yarn add -D carbon-components-svelte</CodeSnippet>
60+
<CodeSnippet disabled code="yarn add -D carbon-components-svelte" />
5561
<br />
5662
<CodeSnippet disabled type="multi" code="{comment}" />
5763

‎docs/src/pages/index.svelte‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
} from "carbon-components-svelte";
1010
import TileCard from "../components/TileCard.svelte";
1111
import { metatags } from "@sveltech/routify";
12-
import copy from "clipboard-copy";
1312
1413
metatags.title = "Carbon Components Svelte";
1514
metatags.description =
@@ -53,21 +52,9 @@
5352
<Column>
5453
<h3>Install</h3>
5554
<h4>Installing with yarn:</h4>
56-
<CodeSnippet
57-
code="{installYarn}"
58-
on:click="{() => {
59-
copy(installYarn);
60-
}}"
61-
/>
62-
55+
<CodeSnippet code="{installYarn}" />
6356
<h4>Using npm:</h4>
64-
65-
<CodeSnippet
66-
code="{installNpm}"
67-
on:click="{() => {
68-
copy(installNpm);
69-
}}"
70-
/>
57+
<CodeSnippet code="{installNpm}" />
7158
</Column>
7259
</Row>
7360
<Row>

‎docs/src/pages/recipes/CopyableCodeSnippet.svx‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎docs/yarn.lock‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -837,25 +837,25 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
837837
integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw==
838838

839839
carbon-components-svelte@../:
840-
version "0.30.0"
840+
version "0.31.1"
841841
dependencies:
842-
carbon-icons-svelte "^10.21.0"
842+
carbon-icons-svelte "^10.27.0"
843843
flatpickr "4.6.9"
844844

845-
carbon-components@10.31.0:
846-
version "10.31.0"
847-
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.31.0.tgz#050751e7fb4d845b7d1c6e8ac7fdfa9c71403c12"
848-
integrity sha512-gUXRky9rUHavqFLJJQf+Lzouk8GHsXJUjxRgTOUQ6vdBfA0ks6ugwptG8fiFGwCJJht/CW9/YsKb5w8N9a39sg==
845+
carbon-components@10.32.0-rc.0:
846+
version "10.32.0-rc.0"
847+
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.32.0-rc.0.tgz#e5886b6ebce37f378159938a08eae09da5d1cb04"
848+
integrity sha512-+0hwzLWa3YUG3i+Re1HgX0BslzuLLe/5EPRugGUEmklJsozUv4SjmMPZU4yk1As4kCqsxQ+h3sRSFSsPRpL1bg==
849849
dependencies:
850850
"@carbon/telemetry" "0.0.0-alpha.6"
851851
flatpickr "4.6.1"
852852
lodash.debounce "^4.0.8"
853853
warning "^3.0.0"
854854

855-
carbon-icons-svelte@^10.21.0:
856-
version "10.21.0"
857-
resolved "https://registry.npmjs.org/carbon-icons-svelte/-/carbon-icons-svelte-10.21.0.tgz#9bbdd37d5513d484e9706d6335c121f60f3186c4"
858-
integrity sha512-5NNaRdmbS4N36dUGNj72Ys3VqVjH3fZ69AhYUHx+bH02GFYCwAaE49qjtP77kP7DKMtDV9NmMEti/P/JB83aYQ==
855+
carbon-icons-svelte@^10.27.0:
856+
version "10.28.0"
857+
resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-10.28.0.tgz#812a6eae858d0c9e043067c714910fcfb6249cd2"
858+
integrity sha512-C3K+U2PRy63WHFZme1HQNju89rhVIQmUkfgBrZzcezdutkhXbSPOY+o/MI0B2mDcQ7G9gfhEpqsXET8gBTWfJQ==
859859

860860
caseless@~0.12.0:
861861
version "0.12.0"

0 commit comments

Comments
 (0)