From 1336512912bcef99b8e15160e7dcabf43fe2d8d9 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Tue, 23 Mar 2021 12:02:23 -0700 Subject: [PATCH 1/5] feat(CodeSnippet): add feedbackTimeout to single, multi variants --- .../src/components/CodeSnippet/CodeSnippet-story.js | 3 ++- .../react/src/components/CodeSnippet/CodeSnippet.js | 10 +++++++++- 2 files changed, 11 insertions(+), 2 deletions(-) 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. */ From ea4b91d9d3f5e10623b89359002ee7f8831b87bf Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Tue, 23 Mar 2021 12:22:11 -0700 Subject: [PATCH 2/5] style(CodeSnippet): adjust z-index values of feedback tooltip --- .../code-snippet/_code-snippet.scss | 1 + .../components/copy-button/_copy-button.scss | 2 +- .../CodeSnippet/CodeSnippet-story.js | 20 +++++++++++++++++++ 3 files changed, 22 insertions(+), 1 deletion(-) diff --git a/packages/components/src/components/code-snippet/_code-snippet.scss b/packages/components/src/components/code-snippet/_code-snippet.scss index 4b749e0dacdd..ca43c6f74041 100644 --- a/packages/components/src/components/code-snippet/_code-snippet.scss +++ b/packages/components/src/components/code-snippet/_code-snippet.scss @@ -88,6 +88,7 @@ .#{$prefix}--copy-btn__feedback { @include tooltip--content('icon'); + z-index: z('floating'); display: none; box-sizing: content-box; margin: auto; diff --git a/packages/components/src/components/copy-button/_copy-button.scss b/packages/components/src/components/copy-button/_copy-button.scss index b300f56d47ec..ed1fa5888c34 100644 --- a/packages/components/src/components/copy-button/_copy-button.scss +++ b/packages/components/src/components/copy-button/_copy-button.scss @@ -107,7 +107,7 @@ .#{$prefix}--copy-btn__feedback { @include tooltip--content('icon'); - z-index: 3; + z-index: z('floating'); display: none; box-sizing: content-box; margin: auto; diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js index bf9a1414e45e..bc6adac14575 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js +++ b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js @@ -134,6 +134,26 @@ const lightPropMessage = ( ); +const snippetText = '
Hello World
'; +export const demo = () => ( +
+
+ {snippetText} +
+ {snippetText} +
+ {snippetText} +
+ + {snippetText} + + + {snippetText} + +
+
+); + export const playground = () => (
{props().light && lightPropMessage} From a7e39b1a1d3c5a7d72721e697a8c27eeb2d7700d Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Tue, 23 Mar 2021 12:45:38 -0700 Subject: [PATCH 3/5] style(tooltip): set z-index in mixin --- .../components/src/components/code-snippet/_code-snippet.scss | 1 - packages/components/src/components/copy-button/_copy-button.scss | 1 - packages/components/src/globals/scss/_tooltip.scss | 1 + 3 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/components/src/components/code-snippet/_code-snippet.scss b/packages/components/src/components/code-snippet/_code-snippet.scss index ca43c6f74041..4b749e0dacdd 100644 --- a/packages/components/src/components/code-snippet/_code-snippet.scss +++ b/packages/components/src/components/code-snippet/_code-snippet.scss @@ -88,7 +88,6 @@ .#{$prefix}--copy-btn__feedback { @include tooltip--content('icon'); - z-index: z('floating'); display: none; box-sizing: content-box; margin: auto; diff --git a/packages/components/src/components/copy-button/_copy-button.scss b/packages/components/src/components/copy-button/_copy-button.scss index ed1fa5888c34..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: z('floating'); 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); From ea591261da777472ac9e8e2c31041b732f90585a Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Tue, 23 Mar 2021 12:53:10 -0700 Subject: [PATCH 4/5] chore(snapshot): update snapshots --- packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index e3e837d7a362..cdda3caa1e86 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", }, From 02b6118bacf35986ca1db49a827e72223e2990ad Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Wed, 24 Mar 2021 11:04:03 -0700 Subject: [PATCH 5/5] chore(demo): remove demo story --- .../CodeSnippet/CodeSnippet-story.js | 20 ------------------- 1 file changed, 20 deletions(-) diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js index bc6adac14575..bf9a1414e45e 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js +++ b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js @@ -134,26 +134,6 @@ const lightPropMessage = ( ); -const snippetText = '
Hello World
'; -export const demo = () => ( -
-
- {snippetText} -
- {snippetText} -
- {snippetText} -
- - {snippetText} - - - {snippetText} - -
-
-); - export const playground = () => (
{props().light && lightPropMessage}