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"