feat(CopyButton, CodeSnippet): migrate v11 components to use IconButt…

…on (#11054) * feat: migrate v11 copy to icon btn * fix: add default tooltip text for inline copy * fix: copy btn styles * chore: update codesnippet snapshot Co-authored-by: Josh Black <josh@josh.black> Co-authored-by: Alessandra Davila <aledavila@ibm.com>
carbon-design-system · Mar 29, 2022 · 606c8de · 606c8de
1 parent 9ed7404
commit 606c8de
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 106 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -441,6 +441,8 @@ Map {
   },
   "CodeSnippet" => Object {
     "defaultProps": Object {
+      "ariaLabel": "Copy to clipboard",
+      "copyLabel": "Copy to clipboard",
       "showLessText": "Show less",
       "showMoreText": "Show more",
       "type": "single",

diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.js b/packages/react/src/components/CodeSnippet/CodeSnippet.js
@@ -387,6 +387,8 @@ CodeSnippet.propTypes = {
 };
 
 CodeSnippet.defaultProps = {
+  ariaLabel: 'Copy to clipboard',
+  copyLabel: 'Copy to clipboard',
   type: 'single',
   showMoreText: 'Show more',
   showLessText: 'Show less',

diff --git a/packages/react/src/components/Copy/Copy.js b/packages/react/src/components/Copy/Copy.js
@@ -11,6 +11,8 @@ import debounce from 'lodash.debounce';
 import classnames from 'classnames';
 import { composeEventHandlers } from '../../tools/events';
 import { usePrefix } from '../../internal/usePrefix';
+import { IconButton } from '../IconButton';
+import * as FeatureFlags from '@carbon/feature-flags';
 
 export default function Copy({
   children,
@@ -39,6 +41,7 @@ export default function Copy({
     setAnimation('fade-in');
     handleFadeOut();
   }, [handleFadeOut]);
+
   const handleAnimationEnd = (event) => {
     if (event.animationName === 'hide-feedback') {
       setAnimation('');
@@ -52,6 +55,27 @@ export default function Copy({
     [handleFadeOut]
   );
 
+  if (FeatureFlags.enabled('enable-v11-release')) {
+    return (
+      <IconButton
+        align="bottom"
+        className={classNames}
+        label={animation ? feedback : other['aria-label']}
+        onClick={composeEventHandlers([onClick, handleClick])}
+        onAnimationEnd={composeEventHandlers([
+          onAnimationEnd,
+          handleAnimationEnd,
+        ])}
+        {...other}
+        aria-live="polite"
+        aria-label={
+          (!children && (animation ? feedback : other['aria-label'])) || null
+        }>
+        {children}
+      </IconButton>
+    );
+  }
+
   return (
     <button
       type="button"

diff --git a/packages/styles/scss/components/code-snippet/_code-snippet.scss b/packages/styles/scss/components/code-snippet/_code-snippet.scss
@@ -67,7 +67,7 @@ $copy-btn-feedback: $background-inverse !default;
     position: relative;
     display: inline;
     padding: 0;
-    border: 2px solid transparent;
+    border: 1px solid transparent;
     background-color: $layer;
     border-radius: 4px;
     color: $text-primary;
@@ -82,14 +82,16 @@ $copy-btn-feedback: $background-inverse !default;
     }
 
     &:focus {
-      border: 2px solid $focus;
+      border: 1px solid $focus;
       outline: none;
     }
 
     &::before {
       @include tooltip--caret;
 
       display: none;
+
+      border: none;
     }
 
     .#{$prefix}--copy-btn__feedback {
@@ -101,8 +103,6 @@ $copy-btn-feedback: $background-inverse !default;
       margin: auto;
       clip: auto;
     }
-
-    @include tooltip--placement('icon', 'bottom', 'center');
   }
 
   .#{$prefix}--snippet--inline.#{$prefix}--copy-btn--animating::before,
@@ -257,12 +257,9 @@ $copy-btn-feedback: $background-inverse !default;
     transition: all $duration-fast-01 motion(standard, productive);
   }
 
-  .#{$prefix}--snippet-button {
+  .#{$prefix}--copy-btn {
     @include reset;
 
-    position: absolute;
-    top: 0;
-    right: 0;
     display: flex;
     overflow: visible;
     width: $spacing-08;
@@ -282,48 +279,44 @@ $copy-btn-feedback: $background-inverse !default;
     }
   }
 
-  .#{$prefix}--snippet--multi .#{$prefix}--snippet-button {
-    top: $spacing-03;
-    right: $spacing-03;
-    width: $spacing-07;
-    height: $spacing-07;
-  }
+  // TODO: remove copy button styles above
+  .#{$prefix}--snippet .#{$prefix}--popover-container {
+    @include font-family('sans');
 
-  .#{$prefix}--snippet-button:hover {
-    background: $layer-hover;
+    position: absolute;
+    top: 0;
+    right: 0;
   }
 
-  .#{$prefix}--snippet-button:active {
-    background-color: $copy-active;
+  // Overrides for codesnippet copy btn
+  // TLDR: Copy/CopyButton now uses IconButton, which uses Carbon buttons under the hood
+  // v10 opy just used native html button so it didn't have extra carbon styles that needed overriding
+  .#{$prefix}--snippet--inline.#{$prefix}--btn--md.#{$prefix}--btn--icon-only {
+    padding-right: 0;
+    padding-left: 0;
   }
 
-  .#{$prefix}--btn--copy__feedback {
-    @include type-style('body-compact-01');
-    @include font-family('sans');
-
-    z-index: z('overlay');
-    top: 0.75rem;
-    right: 1.25rem;
-    left: inherit;
-    font-weight: 400;
+  .#{$prefix}--snippet--inline.#{$prefix}--btn--md {
+    min-height: 1.25rem;
   }
 
-  .#{$prefix}--btn--copy__feedback::before,
-  .#{$prefix}--btn--copy__feedback::after {
-    background: $copy-btn-feedback;
+  .#{$prefix}--snippet--inline.#{$prefix}--btn--primary:hover {
+    color: $text-primary;
   }
 
-  .#{$prefix}--btn--copy__feedback::after {
-    border: none;
+  // override multi copy btn styles
+  .#{$prefix}--snippet.#{$prefix}--snippet--multi
+    .#{$prefix}--popover-container {
+    top: 0.5rem;
+    right: 0.5rem;
   }
 
-  // TODO: remove copy button styles above
-  .#{$prefix}--snippet .#{$prefix}--copy-btn {
-    @include font-family('sans');
-
-    position: absolute;
-    top: 0;
-    right: 0;
+  .#{$prefix}--snippet--multi .#{$prefix}--copy-btn.#{$prefix}--btn--md {
+    z-index: 10;
+    width: $spacing-07;
+    height: $spacing-07;
+    min-height: $spacing-07;
+    padding: 0;
   }
 
   // Show more / less button
@@ -435,14 +428,6 @@ $copy-btn-feedback: $background-inverse !default;
     }
   }
 
-  .#{$prefix}--snippet--multi .#{$prefix}--copy-btn {
-    z-index: 10;
-    top: $spacing-03;
-    right: $spacing-03;
-    width: $spacing-07;
-    height: $spacing-07;
-  }
-
   .#{$prefix}--snippet--multi
     .#{$prefix}--snippet-button
     .#{$prefix}--btn--copy__feedback {

diff --git a/packages/styles/scss/components/copy-button/_copy-button.scss b/packages/styles/scss/components/copy-button/_copy-button.scss
@@ -18,63 +18,6 @@
 @use '../../utilities/visually-hidden' as *;
 
 @mixin copy-button {
-  .#{$prefix}--btn--copy {
-    position: relative;
-    overflow: visible;
-
-    .#{$prefix}--btn__icon {
-      margin-left: rem(5px);
-    }
-  }
-
-  .#{$prefix}--btn--copy__feedback {
-    position: absolute;
-    top: 1.2rem;
-    left: 50%;
-    display: none;
-
-    &::before {
-      @include box-shadow;
-      @include type-style('body-compact-01');
-
-      z-index: 2;
-      top: 1.1rem;
-      padding: $spacing-02;
-      border-radius: 4px;
-      color: $text-inverse;
-      content: attr(data-feedback);
-      font-weight: 400;
-      pointer-events: none;
-      transform: translateX(-50%);
-      white-space: nowrap;
-    }
-
-    &::after {
-      z-index: 1;
-      top: 0.85rem;
-      left: -0.3rem;
-      width: 0.6rem;
-      height: 0.6rem;
-      border-right: 1px solid $background-inverse;
-      border-bottom: 1px solid $background-inverse;
-      content: '';
-      transform: rotate(-135deg);
-    }
-
-    &::before,
-    &::after {
-      position: absolute;
-      display: block;
-      background: $background-inverse;
-    }
-
-    &--displayed {
-      display: inline-flex;
-    }
-  }
-
-  // TODO: deprecate above styles
-
   .#{$prefix}--copy-btn {
     @include reset;
 
@@ -113,8 +56,6 @@
       clip: auto;
     }
 
-    @include tooltip--placement('icon', 'bottom', 'center');
-
     &:focus {
       @include focus-outline('outline');