diff --git a/packages/components/src/components/copy-button/_copy-button.scss b/packages/components/src/components/copy-button/_copy-button.scss index b300f56d47ec..8c113acf3577 100644 --- 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 index 4dabb826b393..873b4af2a077 100644 --- 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 index fb70d829c648..2fd0362969c7 100644 --- 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 index 3ed94de292d9..bf9a1414e45e 100644 --- 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 index f19bcfcd9b5c..148e7c50ff85 100644 --- 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}> {children} ); @@ -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. */