diff --git a/package.json b/package.json index c2055f9c..1a4b311d 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "@testing-library/svelte": "^1.11.0", "babel-jest": "^24.9.0", "babel-loader": "^8.0.6", - "carbon-components": "10.8.0", + "carbon-components": "10.9.0-rc.1", "eslint": "^6.7.2", "eslint-plugin-svelte3": "^2.7.3", "husky": "^3.1.0", diff --git a/src/components/CopyButton/CopyButton.Story.svelte b/src/components/CopyButton/CopyButton.Story.svelte index 7a25638d..7608224a 100644 --- a/src/components/CopyButton/CopyButton.Story.svelte +++ b/src/components/CopyButton/CopyButton.Story.svelte @@ -4,7 +4,5 @@ -
- -
+
diff --git a/src/components/CopyButton/CopyButton.stories.js b/src/components/CopyButton/CopyButton.stories.js index 45d72ae1..71b9ce6a 100644 --- a/src/components/CopyButton/CopyButton.stories.js +++ b/src/components/CopyButton/CopyButton.stories.js @@ -7,7 +7,7 @@ export const Default = () => ({ Component, props: { feedback: text('The text shown upon clicking (feedback)', 'Copied!'), - feedbackTimeout: number('How long the text is shown upon clicking (feedbackTimeout)', 3000), + feedbackTimeout: number('How long the text is shown upon clicking (feedbackTimeout)', 2000), iconDescription: text('Feedback icon description (iconDescription)', 'Copy to clipboard') } }); diff --git a/src/components/CopyButton/CopyButton.svelte b/src/components/CopyButton/CopyButton.svelte index 5e9fd1af..3aa2d991 100644 --- a/src/components/CopyButton/CopyButton.svelte +++ b/src/components/CopyButton/CopyButton.svelte @@ -4,59 +4,52 @@ export let iconDescription = 'Copy to clipboard'; export let feedback = 'Copied!'; export let feedbackTimeout = 2000; - export let props = {}; - import { createEventDispatcher, onDestroy } from 'svelte'; + import { onDestroy } from 'svelte'; import Copy16 from 'carbon-icons-svelte/lib/Copy16'; import { cx } from '../../lib'; - const dispatch = createEventDispatcher(); let animation = undefined; let timeoutId = undefined; onDestroy(() => { if (timeoutId !== undefined) { - clearTimeout(timeoutId); + window.clearTimeout(timeoutId); timeoutId = undefined; } }); - function handleClick(event) { - animation = 'fade-in'; - - timeoutId = setTimeout(() => { - animation = 'fade-out'; - }, feedbackTimeout); - } - - function handleAnimationEnd(event) { - if (event.animationName === 'hide-feedback') { - animation = undefined; - } - } - $: _class = cx( - '--snippet-button', // TODO: deprecated? '--copy-btn', animation && '--copy-btn--animating', animation && `--copy-btn--${animation}`, + animation === 'fade-in' && '--btn--copy__feedback--displayed', className ); diff --git a/yarn.lock b/yarn.lock index 7cc65dfa..0569cd2b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3268,10 +3268,10 @@ capture-exit@^2.0.0: dependencies: rsvp "^4.8.4" -carbon-components@10.8.0: - version "10.8.0" - resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.8.0.tgz#d5332b8360d93c5d12bdcfd34d8a9adc7940f194" - integrity sha512-G5/Nf7PdwPLcLazKkqemLBu7OA0e14M1AEObxbWu9/hgkI9D/3eNep8ZOG/X1Jb8Hc5HJUkGU5Mt6JHgWu1UoQ== +carbon-components@10.9.0-rc.1: + version "10.9.0-rc.1" + resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.9.0-rc.1.tgz#d801a12ae1053c078d4f3e33169a71c914ae8408" + integrity sha512-JCJqKaEfttHW0Wr12JRdhRMtAg8f8Pn/ryxVQp/FAY1Z4iNNEFFS6ShVavOJMrEE28ojT7QPEhl8ruZ3THHoJg== dependencies: carbon-icons "^7.0.7" flatpickr "4.6.1"