From 921c3e121a5cb9e9114f2c631d8d973028497b2d Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Mon, 5 Jul 2021 12:12:28 -0700 Subject: [PATCH] Remove clipboard-copy dependency from CodeSnippet, CopyButton (#726) * chore(deps): remove clipboard-copy * feat: add copy prop, use navigator.clipboard API * docs: add clipboard-copy back to docsite for more browser support * docs(component-api): use outbound link * docs: add override/prevent copy examples --- COMPONENT_INDEX.md | 48 ++++++++++--------- docs/package.json | 1 + docs/src/COMPONENT_API.json | 20 ++++++++ docs/src/components/ComponentApi.svelte | 12 ++--- docs/src/components/InlineSnippet.svelte | 3 +- docs/src/components/Preview.svelte | 3 +- docs/src/pages/components/CodeSnippet.svx | 25 ++++++++-- docs/src/pages/components/CopyButton.svx | 26 ++++++++-- .../CodeSnippet/CodeSnippetOverride.svelte | 9 ++++ .../CopyButton/CopyButtonOverride.svelte | 6 +++ docs/yarn.lock | 11 ++--- package.json | 1 - src/CodeSnippet/CodeSnippet.svelte | 13 ++++- src/CopyButton/CopyButton.svelte | 13 ++++- tests/CodeSnippet.test.svelte | 4 +- tests/CopyButton.test.svelte | 19 +++----- types/CodeSnippet/CodeSnippet.d.ts | 6 +++ types/CopyButton/CopyButton.d.ts | 6 +++ yarn.lock | 5 -- 19 files changed, 163 insertions(+), 68 deletions(-) create mode 100644 docs/src/pages/framed/CodeSnippet/CodeSnippetOverride.svelte create mode 100644 docs/src/pages/framed/CopyButton/CopyButtonOverride.svelte diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 87b462c0..5a957ef4 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -509,25 +509,26 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLPreElement | null | Obtain a reference to the pre HTML element | -| showMoreLess | let | Yes | boolean | false | Set to `true` to enable the show more/less button | -| expanded | let | Yes | boolean | false | Set to `true` to expand a multi-line code snippet (type="multi") | -| type | let | No | "single" | "inline" | "multi" | "single" | Set the type of code snippet | -| code | let | No | string | -- | Set the code snippet text
Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)
You must use the `code` prop to copy the code | -| hideCopyButton | let | No | boolean | false | Set to `true` to hide the copy button | -| disabled | let | No | boolean | false | Set to `true` for the disabled variant
Only applies to the "single", "multi" types | -| wrapText | let | No | boolean | false | Set to `true` to wrap the text
Note that `type` must be "multi" | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | -| copyButtonDescription | let | No | string | -- | Specify the ARIA label for the copy button icon | -| copyLabel | let | No | string | -- | Specify the ARIA label of the copy button | -| feedback | let | No | string | "Copied!" | Specify the feedback text displayed when clicking the snippet | -| feedbackTimeout | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text | -| showLessText | let | No | string | "Show less" | Specify the show less text
`type` must be "multi" | -| showMoreText | let | No | string | "Show more" | Specify the show more text
`type` must be "multi" | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the code element | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ref | let | Yes | null | HTMLPreElement | null | Obtain a reference to the pre HTML element | +| showMoreLess | let | Yes | boolean | false | Set to `true` to enable the show more/less button | +| expanded | let | Yes | boolean | false | Set to `true` to expand a multi-line code snippet (type="multi") | +| type | let | No | "single" | "inline" | "multi" | "single" | Set the type of code snippet | +| code | let | No | string | -- | Set the code snippet text
Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)
You must use the `code` prop to copy the code | +| copy | let | No | (code: string) => void | async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } } | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text | +| hideCopyButton | let | No | boolean | false | Set to `true` to hide the copy button | +| disabled | let | No | boolean | false | Set to `true` for the disabled variant
Only applies to the "single", "multi" types | +| wrapText | let | No | boolean | false | Set to `true` to wrap the text
Note that `type` must be "multi" | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | +| copyButtonDescription | let | No | string | -- | Specify the ARIA label for the copy button icon | +| copyLabel | let | No | string | -- | Specify the ARIA label of the copy button | +| feedback | let | No | string | "Copied!" | Specify the feedback text displayed when clicking the snippet | +| feedbackTimeout | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text | +| showLessText | let | No | string | "Show less" | Specify the show less text
`type` must be "multi" | +| showMoreText | let | No | string | "Show more" | Specify the show more text
`type` must be "multi" | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the code element | ### Slots @@ -879,10 +880,11 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :------------------ | -------------------------------- | ------------------------------------------------ | -| iconDescription | let | No | string | "Copy to clipboard" | Set the title and ARIA label for the copy button | -| text | let | No | string | -- | Specify the text to copy | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :---------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | +| iconDescription | let | No | string | "Copy to clipboard" | Set the title and ARIA label for the copy button | +| text | let | No | string | -- | Specify the text to copy | +| copy | let | No | (text: string) => void | async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } } | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text | ### Slots diff --git a/docs/package.json b/docs/package.json index 7425758e..b9094863 100644 --- a/docs/package.json +++ b/docs/package.json @@ -13,6 +13,7 @@ "autoprefixer": "^10.2.3", "carbon-components": "10.38.0", "carbon-components-svelte": "../", + "clipboard-copy": "^4.0.1", "mdsvex": "^0.8.8", "npm-run-all": "^4.1.5", "postcss": "^8.2.4", diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index fe0fa3d1..da7a5789 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -839,6 +839,16 @@ "constant": false, "reactive": false }, + { + "name": "copy", + "kind": "let", + "description": "Override the default copy behavior of using the navigator.clipboard.writeText API to copy text", + "type": "(code: string) => void", + "value": "async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } }", + "isFunction": true, + "constant": false, + "reactive": false + }, { "name": "expanded", "kind": "let", @@ -1911,6 +1921,16 @@ "isFunction": false, "constant": false, "reactive": false + }, + { + "name": "copy", + "kind": "let", + "description": "Override the default copy behavior of using the navigator.clipboard.writeText API to copy text", + "type": "(text: string) => void", + "value": "async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } }", + "isFunction": true, + "constant": false, + "reactive": false } ], "slots": [], diff --git a/docs/src/components/ComponentApi.svelte b/docs/src/components/ComponentApi.svelte index 2f131f01..820a45ed 100644 --- a/docs/src/components/ComponentApi.svelte +++ b/docs/src/components/ComponentApi.svelte @@ -9,6 +9,7 @@ import { Link, + OutboundLink, StructuredList, StructuredListHead, StructuredListRow, @@ -43,10 +44,9 @@

Source code: - + {component.filePath} - - +

Props

@@ -94,14 +94,12 @@ Carbon Svelte icon {:else if type.startsWith("HTML")} - {type} - - + {:else if type in typeMap} {typeMap[type]} {:else if type.startsWith("(")} diff --git a/docs/src/components/InlineSnippet.svelte b/docs/src/components/InlineSnippet.svelte index f28facf6..48a02642 100644 --- a/docs/src/components/InlineSnippet.svelte +++ b/docs/src/components/InlineSnippet.svelte @@ -1,11 +1,12 @@
- +