mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

Remove clipboard-copy dependency from CodeSnippet, CopyButton (#726)

Browse source 
* 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
This commit is contained in:
Eric Liu 2021-07-05 12:12:28 -07:00 • committed by GitHub
commit 921c3e121a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 163 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

48
COMPONENT_INDEX.md
View file

@ -509,25 +509,26 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLPreElement</code> | <code>null</code> | Obtain a reference to the pre HTML element |
| showMoreLess | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the show more/less button |
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand a multi-line code snippet (type="multi") |
| type | <code>let</code> | No | <code>"single" &#124; "inline" &#124; "multi"</code> | <code>"single"</code> | Set the type of code snippet |
| 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 |
| hideCopyButton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the copy button |
| 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 |
| 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" |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| copyButtonDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the copy button icon |
| copyLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label of the copy button |
| feedback | <code>let</code> | No | <code>string</code> | <code>"Copied!"</code> | Specify the feedback text displayed when clicking the snippet |
| feedbackTimeout | <code>let</code> | No | <code>number</code> | <code>2000</code> | Set the timeout duration (ms) to display feedback text |
| showLessText | <code>let</code> | No | <code>string</code> | <code>"Show less"</code> | Specify the show less text<br />`type` must be "multi" |
| showMoreText | <code>let</code> | No | <code>string</code> | <code>"Show more"</code> | Specify the show more text<br />`type` must be "multi" |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the code element |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLPreElement</code> | <code>null</code> | Obtain a reference to the pre HTML element |
| showMoreLess | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the show more/less button |
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand a multi-line code snippet (type="multi") |
| type | <code>let</code> | No | <code>"single" &#124; "inline" &#124; "multi"</code> | <code>"single"</code> | Set the type of code snippet |
| 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 |
| copy | <code>let</code> | No | <code>(code: string) => void</code> | <code>async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } }</code> | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text |
| hideCopyButton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the copy button |
| 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 |
| 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" |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| copyButtonDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the copy button icon |
| copyLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label of the copy button |
| feedback | <code>let</code> | No | <code>string</code> | <code>"Copied!"</code> | Specify the feedback text displayed when clicking the snippet |
| feedbackTimeout | <code>let</code> | No | <code>number</code> | <code>2000</code> | Set the timeout duration (ms) to display feedback text |
| showLessText | <code>let</code> | No | <code>string</code> | <code>"Show less"</code> | Specify the show less text<br />`type` must be "multi" |
| showMoreText | <code>let</code> | No | <code>string</code> | <code>"Show more"</code> | Specify the show more text<br />`type` must be "multi" |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the code element |
### Slots
@ -879,10 +880,11 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :------------------ | -------------------------------- | ------------------------------------------------ |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Copy to clipboard"</code> | Set the title and ARIA label for the copy button |
| text | <code>let</code> | No | <code>string</code> | -- | Specify the text to copy |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :---------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Copy to clipboard"</code> | Set the title and ARIA label for the copy button |
| text | <code>let</code> | No | <code>string</code> | -- | Specify the text to copy |
| copy | <code>let</code> | No | <code>(text: string) => void</code> | <code>async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } }</code> | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text |
### Slots

1
docs/package.json
View file

@ -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",

20
docs/src/COMPONENT_API.json
View file

@ -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": [],

12
docs/src/components/ComponentApi.svelte
View file

@ -9,6 +9,7 @@
import {
Link,
OutboundLink,
StructuredList,
StructuredListHead,
StructuredListRow,
@ -43,10 +44,9 @@
<p style="margin-bottom: var(--cds-layout-02)">
Source code:
<Link inline size="lg" href="{source}" target="_blank">
<OutboundLink inline href="{source}">
{component.filePath}
<Launch16 />
</Link>
</OutboundLink>
</p>
<h3 id="props">Props</h3>
@ -94,14 +94,12 @@
Carbon Svelte icon
</TooltipDefinition>
{:else if type.startsWith("HTML")}
<Link
<OutboundLink
href="{mdn_api}{type}"
target="_blank"
style="white-space: nowrap"
>
{type}
<Launch16 />
</Link>
</OutboundLink>
{:else if type in typeMap}
<code>{typeMap[type]}</code>
{:else if type.startsWith("(")}

3
docs/src/components/InlineSnippet.svelte
View file

@ -1,11 +1,12 @@
<script>
export let code = "";
import copy from "clipboard-copy";
import { CodeSnippet } from "carbon-components-svelte";
</script>
<div>
<CodeSnippet code="{code}" type="inline" />
<CodeSnippet code="{code}" type="inline" copy="{(text) => copy(text)}" />
</div>
<style>

3
docs/src/components/Preview.svelte
View file

@ -4,6 +4,7 @@
export let src = "";
export let framed = false;
import copy from "clipboard-copy";
import { CodeSnippet, Button } from "carbon-components-svelte";
import Launch16 from "carbon-icons-svelte/lib/Launch16";
import { url } from "@sveltech/routify";
@ -40,7 +41,7 @@
{/if}
</div>
<div class="code-override">
<CodeSnippet type="multi" code="{codeRaw}">
<CodeSnippet type="multi" code="{codeRaw}" copy="{(text) => copy(text)}">
{@html code}
</CodeSnippet>
</div>

25
docs/src/pages/components/CodeSnippet.svx
View file

@ -1,5 +1,5 @@
<script>
import { CodeSnippet, InlineNotification, Link } from "carbon-components-svelte";
import { CodeSnippet } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
let code = `// helpers.js
@ -27,14 +27,31 @@ let comment = `
`
</script>
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">As of version 0.32, the CodeSnippet will copy the provided `code` text when clicking the copy button.</div>
</InlineNotification>
This component uses the native, asynchronous [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy text.
Please note that the `clipboard.writeText` API is not supported in [IE 11 nor Safari iOS version 13.3 or lower](https://caniuse.com/mdn-api_clipboard_writetext).
You can override the default copy functionality with your own copy text implementation. See [Overriding copy functionality](#overriding-copy-functionality).
### Default (single-line)
<CodeSnippet code="yarn add -D carbon-components-svelte" />
### Overriding copy functionality
To override the default copy behavior, pass a custom function to the `copy` prop.
In this example, we use the open source module [clipboard-copy](https://github.com/feross/clipboard-copy) to copy the text instead of the default Clipboard API.
<FileSource src="/framed/CodeSnippet/CodeSnippetOverride" />
### Preventing copy functionality
To prevent text from being copied entirely, pass a "noop" function to the `copy` prop.
<CodeSnippet code="yarn add -D carbon-components-svelte" copy={() => {}} />
### Inline
<CodeSnippet type="inline" code="rm -rf node_modules/" />

24
docs/src/pages/components/CopyButton.svx
View file

@ -1,11 +1,13 @@
<script>
import { CopyButton, InlineNotification, Link } from "carbon-components-svelte";
import { CopyButton } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">As of version 0.32, this component will copy the provided `code` text when clicking the button.</div>
</InlineNotification>
This component uses the native, asynchronous [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy text.
Please note that the `clipboard.writeText` API is not supported in [IE 11 nor Safari iOS version 13.3 or lower](https://caniuse.com/mdn-api_clipboard_writetext).
You can override the default copy functionality with your own copy text implementation. See [Overriding copy functionality](#overriding-copy-functionality).
### Default
@ -14,3 +16,17 @@
### Custom feedback text
<CopyButton text="Carbon svelte" feedback="Copied to clipboard" />
### Overriding copy functionality
To override the default copy behavior, pass a custom function to the `copy` prop.
In this example, we use the open source module [clipboard-copy](https://github.com/feross/clipboard-copy) to copy the text instead of the default Clipboard API.
<FileSource src="/framed/CopyButton/CopyButtonOverride" />
### Preventing copy functionality
To prevent text from being copied entirely, pass a "noop" function to the `copy` prop.
<CopyButton text="This text should not be copied" copy={() => {}} />

9
docs/src/pages/framed/CodeSnippet/CodeSnippetOverride.svelte Normal file
View file

@ -0,0 +1,9 @@
<script>
import copy from "clipboard-copy";
import { CodeSnippet } from "carbon-components-svelte";
</script>
<CodeSnippet
code="yarn add -D carbon-components-svelte"
copy="{(text) => copy(text)}"
/>

6
docs/src/pages/framed/CopyButton/CopyButtonOverride.svelte Normal file
View file

@ -0,0 +1,6 @@
<script>
import copy from "clipboard-copy";
import { CopyButton } from "carbon-components-svelte";
</script>
<CopyButton text="Carbon svelte" copy="{(text) => copy(text)}" />

11
docs/yarn.lock
View file

@ -837,10 +837,9 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw==
carbon-components-svelte@../:
version "0.37.0"
version "0.38.2"
dependencies:
carbon-icons-svelte "^10.27.0"
clipboard-copy "3.2.0"
flatpickr "4.6.9"
carbon-components@10.38.0:
@ -947,10 +946,10 @@ cli-spinners@^2.2.0:
resolved "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.4.0.tgz#c6256db216b878cfba4720e719cec7cf72685d7f"
integrity sha512-sJAofoarcm76ZGpuooaO0eDy8saEy+YoZBLjC4h8srt4jeBnkYeOgqxgsJQTpyt2LjI5PTfLJHSL+41Yu4fEJA==
clipboard-copy@3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/clipboard-copy/-/clipboard-copy-3.2.0.tgz#3c5b8651d3512dcfad295d77a9eb09e7fac8d5fb"
integrity sha512-vooFaGFL6ulEP1liiaWFBmmfuPm3cY3y7T9eB83ZTnYc/oFeAKsq3NcDrOkBC8XaauEE8zHQwI7k0+JSYiVQSQ==
clipboard-copy@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/clipboard-copy/-/clipboard-copy-4.0.1.tgz#326ef9726d4ffe72d9a82a7bbe19379de692017d"
integrity sha512-wOlqdqziE/NNTUJsfSgXmBMIrYmfd5V0HCGsR8uAKHcg+h9NENWINcfRjtWGU77wDHC8B8ijV4hMTGYbrKovng==
clipboard@^2.0.0:
version "2.0.6"

1
package.json
View file

@ -24,7 +24,6 @@
},
"dependencies": {
"carbon-icons-svelte": "^10.27.0",
"clipboard-copy": "3.2.0",
"flatpickr": "4.6.9"
},
"devDependencies": {

13
src/CodeSnippet/CodeSnippet.svelte
View file

@ -13,6 +13,18 @@
*/
export let code = undefined;
/**
* Override the default copy behavior of using the navigator.clipboard.writeText API to copy text
* @type {(code: string) => void}
*/
export let copy = async (code) => {
try {
await navigator.clipboard.writeText(code);
} catch (e) {
console.log(e);
}
};
/** Set to `true` to expand a multi-line code snippet (type="multi") */
export let expanded = false;
@ -77,7 +89,6 @@
export let ref = null;
import { createEventDispatcher, tick } from "svelte";
import copy from "clipboard-copy";
import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte";
import Button from "../Button/Button.svelte";
import Copy from "../Copy/Copy.svelte";

13
src/CopyButton/CopyButton.svelte
View file

@ -10,9 +10,20 @@
*/
export let text = undefined;
/**
* Override the default copy behavior of using the navigator.clipboard.writeText API to copy text
* @type {(text: string) => void}
*/
export let copy = async (text) => {
try {
await navigator.clipboard.writeText(text);
} catch (e) {
console.log(e);
}
};
import Copy from "../Copy/Copy.svelte";
import Copy16 from "carbon-icons-svelte/lib/Copy16/Copy16.svelte";
import copy from "clipboard-copy";
import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher();

4
tests/CodeSnippet.test.svelte
View file

@ -35,7 +35,9 @@ export function subtract(a: number, b: number) {
hideCloseButton
/>
<CodeSnippet>yarn add -D carbon-components-svelte</CodeSnippet>
<CodeSnippet copy="{(text) => {}}"
>yarn add -D carbon-components-svelte</CodeSnippet
>
<CodeSnippet type="inline">rm -rf node_modules/</CodeSnippet>

19
tests/CopyButton.test.svelte
View file

@ -1,16 +1,11 @@
<script lang="ts">
import { CopyButton, InlineNotification } from "../types";
import { CopyButton } from "../types";
</script>
<InlineNotification
svx-ignore
lowContrast
title="Note:"
subtitle="By design, the copy button does not copy text to the clipboard. You will need to write your own logic."
kind="info"
hideCloseButton
<CopyButton
text="text"
on:click
on:copy
copy="{(text) => {}}"
feedback="Copied to clipboard"
/>
<CopyButton on:click />
<CopyButton on:click feedback="Copied to clipboard" />

6
types/CodeSnippet/CodeSnippet.d.ts vendored
View file

@ -15,6 +15,12 @@ export interface CodeSnippetProps {
*/
code?: string;
/**
* Override the default copy behavior of using the navigator.clipboard.writeText API to copy text
* @default async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } }
*/
copy?: (code: string) => void;
/**
* Set to `true` to expand a multi-line code snippet (type="multi")
* @default false

6
types/CopyButton/CopyButton.d.ts vendored
View file

@ -13,6 +13,12 @@ export interface CopyButtonProps extends CopyProps {
* Specify the text to copy
*/
text?: string;
/**
* Override the default copy behavior of using the navigator.clipboard.writeText API to copy text
* @default async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } }
*/
copy?: (text: string) => void;
}
export default class CopyButton extends SvelteComponentTyped<

5
yarn.lock
View file

@ -540,11 +540,6 @@ cli-truncate@^2.1.0:
slice-ansi "^3.0.0"
string-width "^4.2.0"
clipboard-copy@3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/clipboard-copy/-/clipboard-copy-3.2.0.tgz#3c5b8651d3512dcfad295d77a9eb09e7fac8d5fb"
integrity sha512-vooFaGFL6ulEP1liiaWFBmmfuPm3cY3y7T9eB83ZTnYc/oFeAKsq3NcDrOkBC8XaauEE8zHQwI7k0+JSYiVQSQ==
cliui@^7.0.2:
version "7.0.4"
resolved "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"