feat(CodeSnippet): add feedbackTimeout prop, z-index fix (#8171)

* feat(CodeSnippet): add feedbackTimeout to single, multi variants * style(CodeSnippet): adjust z-index values of feedback tooltip * style(tooltip): set z-index in mixin * chore(snapshot): update snapshots * chore(demo): remove demo story Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Mar 30, 2021 · f020e54 · f020e54
1 parent 8abe3ae
commit f020e54
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 3 deletions.
diff --git a/packages/components/src/components/copy-button/_copy-button.scss b/packages/components/src/components/copy-button/_copy-button.scss
@@ -107,7 +107,6 @@
     .#{$prefix}--copy-btn__feedback {
       @include tooltip--content('icon');
 
-      z-index: 3;
       display: none;
       box-sizing: content-box;
       margin: auto;

diff --git a/packages/components/src/globals/scss/_tooltip.scss b/packages/components/src/globals/scss/_tooltip.scss
@@ -31,6 +31,7 @@
 @mixin tooltip--content($tooltip-type: 'icon') {
   @include box-shadow;
 
+  z-index: z('floating');
   width: max-content;
   min-width: rem(24px);
   max-width: rem(208px);

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -377,6 +377,9 @@ Map {
       "feedback": Object {
         "type": "string",
       },
+      "feedbackTimeout": Object {
+        "type": "number",
+      },
       "hideCopyButton": Object {
         "type": "bool",
       },

diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js
@@ -41,7 +41,8 @@ const props = () => ({
   ),
   disabled: boolean('Disabled (disabled)', false),
   light: boolean('Light variant (light)', false),
-  feedback: text('Feedback text', 'Copied to clipboard'),
+  feedback: text('Feedback text (feedback)', 'Copied to clipboard'),
+  feedbackTimeout: number('Feedback text timout (feedbackTimeout)', 2000),
   showMoreText: text('Text for "show more" button', 'Show more'),
   showLessText: text('Text for "show less" button', 'Show less'),
   hideCopyButton: boolean('Hide copy button (hideCopyButton)', false),

diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.js b/packages/react/src/components/CodeSnippet/CodeSnippet.js
@@ -30,6 +30,7 @@ function CodeSnippet({
   children,
   disabled,
   feedback,
+  feedbackTimeout,
   onClick,
   ariaLabel,
   copyLabel, //TODO: Merge this prop to `ariaLabel` in `v11`
@@ -165,7 +166,8 @@ function CodeSnippet({
         aria-label={copyLabel || ariaLabel}
         aria-describedby={uid}
         className={codeSnippetClasses}
-        feedback={feedback}>
+        feedback={feedback}
+        feedbackTimeout={feedbackTimeout}>
         <code id={uid}>{children}</code>
       </Copy>
     );
@@ -221,6 +223,7 @@ function CodeSnippet({
           disabled={disabled}
           onClick={handleCopyClick}
           feedback={feedback}
+          feedbackTimeout={feedbackTimeout}
           iconDescription={copyButtonDescription}
         />
       )}
@@ -284,6 +287,11 @@ CodeSnippet.propTypes = {
    */
   feedback: PropTypes.string,
 
+  /**
+   * Specify the time it takes for the feedback message to timeout
+   */
+  feedbackTimeout: PropTypes.number,
+
   /**
    * Specify whether or not a copy button should be used/rendered.
    */