refactor: inline Copy component (#1175)

COMPONENT_INDEX.md

@@ -921,6 +921,8 @@ None.
 
 | Prop name       | Kind             | Reactive | Type                                | Default value                                                                                                     | Description                                                                                    |
 | :-------------- | :--------------- | :------- | :---------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
+| feedback        | <code>let</code> | No       | <code>string</code>                 | <code>"Copied!"</code>                                                                                            | Set the feedback text shown after clicking the button                                          |
+| feedbackTimeout | <code>let</code> | No       | <code>number</code>                 | <code>2000</code>                                                                                                 | Set the timeout duration (ms) to display feedback text                                         |
 | 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>                 | <code>undefined</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 |

docs/src/COMPONENT_API.json

@@ -2180,6 +2180,28 @@
       "moduleName": "CopyButton",
       "filePath": "src/CopyButton/CopyButton.svelte",
       "props": [
+        {
+          "name": "feedback",
+          "kind": "let",
+          "description": "Set the feedback text shown after clicking the button",
+          "type": "string",
+          "value": "\"Copied!\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "feedbackTimeout",
+          "kind": "let",
+          "description": "Set the timeout duration (ms) to display feedback text",
+          "type": "number",
+          "value": "2000",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "iconDescription",
           "kind": "let",
@@ -2216,16 +2238,12 @@
       "moduleExports": [],
       "slots": [],
       "events": [
-        { "type": "forwarded", "name": "click", "element": "Copy" },
+        { "type": "forwarded", "name": "click", "element": "button" },
-        { "type": "forwarded", "name": "animationend", "element": "Copy" },
+        { "type": "forwarded", "name": "animationend", "element": "button" },
         { "type": "dispatched", "name": "copy" }
       ],
       "typedefs": [],
-      "rest_props": { "type": "InlineComponent", "name": "Copy" },
+      "rest_props": { "type": "Element", "name": "button" }
-      "extends": {
-        "interface": "CopyProps",
-        "import": "\"../Copy/Copy.svelte\""
-      }
     },
     {
       "moduleName": "DataTable",

src/CodeSnippet/CodeSnippet.svelte

@@ -88,15 +88,18 @@
   /** Obtain a reference to the pre HTML element */
   export let ref = null;
 
-  import { createEventDispatcher, tick } from "svelte";
+  import { createEventDispatcher, tick, onMount } from "svelte";
   import ChevronDown16 from "../icons/ChevronDown16.svelte";
   import Button from "../Button/Button.svelte";
-  import Copy from "../Copy/Copy.svelte";
   import CopyButton from "../CopyButton/CopyButton.svelte";
   import CodeSnippetSkeleton from "./CodeSnippetSkeleton.svelte";
 
   const dispatch = createEventDispatcher();
 
+  /** @type {"fade-in" | "fade-out"} */
+  let animation = undefined;
+  let timeout = undefined;
+
   function setShowMoreLess() {
     const { height } = ref.getBoundingClientRect();
     if (height > 0) showMoreLess = ref.getBoundingClientRect().height > 255;
@@ -114,6 +117,10 @@
     if (code === undefined) setShowMoreLess();
     if (code) tick().then(setShowMoreLess);
   }
+
+  onMount(() => {
+    return () => clearTimeout(timeout);
+  });
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
@@ -144,20 +151,35 @@
       </code>
     </span>
   {:else}
-    <Copy
+    <button
+      type="button"
+      aria-live="polite"
+      class:bx--copy="{true}"
+      class:bx--btn--copy="{true}"
+      class:bx--copy-btn--animating="{animation}"
+      class:bx--copy-btn--fade-in="{animation === 'fade-in'}"
+      class:bx--copy-btn--fade-out="{animation === 'fade-out'}"
+      class:bx--snippet="{true}"
+      class:bx--snippet--inline="{type === 'inline'}"
+      class:bx--snippet--expand="{expanded}"
+      class:bx--snippet--light="{light}"
+      class:bx--snippet--wraptext="{wrapText}"
       aria-label="{copyLabel}"
-      aria-describedby="{id}"
-      feedback="{feedback}"
-      feedbackTimeout="{feedbackTimeout}"
-      class="bx--snippet {type && `bx--snippet--${type}`}
-          {type === 'inline' && 'bx--btn--copy'}
-          {expanded && 'bx--snippet--expand'}
-          {light && 'bx--snippet--light'}
-          {hideCopyButton && 'bx--snippet--no-copy'}
-          {wrapText && 'bx--snippet--wraptext'}"
       {...$$restProps}
       on:click
-      on:click="{copyCode}"
+      on:click="{() => {
+        copyCode();
+        if (animation === 'fade-in') return;
+        animation = 'fade-in';
+        timeout = setTimeout(() => {
+          animation = 'fade-out';
+        }, feedbackTimeout);
+      }}"
+      on:animationend="{({ animationName }) => {
+        if (animationName === 'hide-feedback') {
+          animation = undefined;
+        }
+      }}"
       on:mouseover
       on:mouseenter
       on:mouseleave
@@ -165,7 +187,14 @@
       <code id="{id}">
         <slot>{code}</slot>
       </code>
-    </Copy>
+      <span
+        aria-hidden="true"
+        class:bx--assistive-text="{true}"
+        class:bx--copy-btn__feedback="{true}"
+      >
+        {feedback}
+      </span>
+    </button>
   {/if}
 {:else}
   <div

src/CopyButton/CopyButton.svelte

@@ -1,5 +1,9 @@
 <script>
-  /** @extends {"../Copy/Copy.svelte"} CopyProps */
+  /** Set the feedback text shown after clicking the button */
+  export let feedback = "Copied!";
+
+  /** Set the timeout duration (ms) to display feedback text */
+  export let feedbackTimeout = 2000;
 
   /** Set the title and ARIA label for the copy button */
   export let iconDescription = "Copy to clipboard";
@@ -22,15 +26,28 @@
     }
   };
 
-  import Copy from "../Copy/Copy.svelte";
+  import { createEventDispatcher, onMount } from "svelte";
   import Copy16 from "../icons/Copy16.svelte";
-  import { createEventDispatcher } from "svelte";
 
   const dispatch = createEventDispatcher();
+
+  /** @type {"fade-in" | "fade-out"} */
+  let animation = undefined;
+  let timeout = undefined;
+
+  onMount(() => {
+    return () => clearTimeout(timeout);
+  });
 </script>
 
-<Copy
+<button
-  class="bx--copy-btn"
+  type="button"
+  aria-live="polite"
+  class:bx--copy-btn="{true}"
+  class:bx--copy="{true}"
+  class:bx--copy-btn--animating="{animation}"
+  class:bx--copy-btn--fade-in="{animation === 'fade-in'}"
+  class:bx--copy-btn--fade-out="{animation === 'fade-out'}"
   aria-label="{iconDescription}"
   title="{iconDescription}"
   {...$$restProps}
@@ -40,8 +57,26 @@
       copy(text);
       dispatch('copy');
     }
+
+    if (animation === 'fade-in') return;
+    animation = 'fade-in';
+    timeout = setTimeout(() => {
+      animation = 'fade-out';
+    }, feedbackTimeout);
   }}"
   on:animationend
+  on:animationend="{({ animationName }) => {
+    if (animationName === 'hide-feedback') {
+      animation = undefined;
+    }
+  }}"
 >
   <Copy16 class="bx--snippet__icon" />
-</Copy>
+  <span
+    aria-hidden="true"
+    class:bx--assistive-text="{true}"
+    class:bx--copy-btn__feedback="{true}"
+  >
+    {feedback}
+  </span>
+</button>

types/CopyButton/CopyButton.svelte.d.ts

@@ -1,8 +1,20 @@
 /// <reference types="svelte" />
 import { SvelteComponentTyped } from "svelte";
-import { CopyProps } from "../Copy/Copy.svelte";
 
-export interface CopyButtonProps extends CopyProps {
+export interface CopyButtonProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
+  /**
+   * Set the feedback text shown after clicking the button
+   * @default "Copied!"
+   */
+  feedback?: string;
+
+  /**
+   * Set the timeout duration (ms) to display feedback text
+   * @default 2000
+   */
+  feedbackTimeout?: number;
+
   /**
    * Set the title and ARIA label for the copy button
    * @default "Copy to clipboard"