fix(CodeSnippet): use tooltip styles for feedback and add animation (#…

…4741)

packages/components/src/components/code-snippet/_code-snippet.scss

@@ -11,6 +11,8 @@
 @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
 @import '../../globals/scss/css--reset';
 @import '../../globals/scss/theme-tokens';
+@import '../../globals/scss/tooltip';
+@import '../../globals/scss/keyframes';
 @import 'mixins';
 
 /// Code snippet styles
@@ -50,6 +52,37 @@
  outline: none;
  border: 2px solid $focus;
  }
+
+ &::before {
+ @include tooltip--caret;
+ display: none;
+ }
+
+ .#{$prefix}--copy-btn__feedback {
+ @include tooltip--content('icon');
+ clip: auto;
+ margin: auto;
+ overflow: visible;
+ display: none;
+ }
+ @include tooltip--placement('icon', 'bottom', 'center');
+
+ &.#{$prefix}--copy-btn--animating::before,
+ &.#{$prefix}--copy-btn--animating .#{$prefix}--copy-btn__feedback {
+ display: block;
+ }
+
+ &.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-out::before,
+ &.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-out
+ .#{$prefix}--copy-btn__feedback {
+ animation: $duration--fast-02 motion(standard, productive) hide-feedback;
+ }
+
+ &.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-in::before,
+ &.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-in
+ .#{$prefix}--copy-btn__feedback {
+ animation: $duration--fast-02 motion(standard, productive) show-feedback;
+ }
  }
 
  .#{$prefix}--snippet--inline code {
@@ -213,6 +246,16 @@
  border: none;
  }
 
+ // TODO: remove copy button styles above
+ .#{$prefix}--snippet .#{$prefix}--copy-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+ @include carbon--font-family(
+ 'sans'
+ ); // Override inherited rule in code snippet
+ }
+
  // Show more / less button
  button.#{$prefix}--btn.#{$prefix}--snippet-btn--expand {
  display: inline-flex;

packages/components/src/components/code-snippet/code-snippet.hbs

@@ -7,17 +7,19 @@
 
 {{#is variant "inline"}}
 <p>Here is an example of a text that a user would be reading. In this paragraph would be
- <button data-copy-btn="" type="button" class="{{@root.prefix}}--snippet {{@root.prefix}}--snippet--inline {{@root.prefix}}--btn--copy{{#if light}} {{@root.prefix}}--snippet--light{{/if}}"
+ <button data-copy-btn type="button"
+ class="{{@root.prefix}}--snippet {{@root.prefix}}--snippet--inline {{#if light}} {{@root.prefix}}--snippet--light{{/if}}"
  aria-label="Copy code" tabindex="0">
  <code>inline code</code>
- <div class="{{@root.prefix}}--btn--copy__feedback" role="alert" data-feedback="Copied!"></div>
+ <span class="{{@root.prefix}}--assistive-text {{@root.prefix}}--copy-btn__feedback">Copied!</span>
  </button>
  that the user could look at and copy in to their code editor.</p>
 {{else}}
 
 <div class="{{@root.prefix}}--snippet {{@root.prefix}}--snippet--{{variant}}" {{#is variant "multi"}}
- data-code-snippet{{/is}}> <div class="{{@root.prefix}}--snippet-container" aria-label="Code Snippet Text">
- <pre>
+ data-code-snippet{{/is}}>
+ <div class="{{@root.prefix}}--snippet-container" aria-label="Code Snippet Text">
+ <pre>
 <code>@mixin grid-container {
  width: 100%;
  padding-right: padding(mobile);
@@ -40,22 +42,24 @@
  floating: 10000
  );</code>
  </pre>
-</div>
-<button data-copy-btn class="{{@root.prefix}}--snippet-button" type="button" aria-label="Copy" tabindex="0">
- {{ carbon-icon 'Copy16' class=(add @root.prefix '--snippet__icon')}}
- <div class="{{@root.prefix}}--btn--copy__feedback" role="alert" data-feedback="Copied!"></div>
-</button>
-{{#is variant "multi"}}
-<button class="{{@root.prefix}}--btn {{@root.prefix}}--btn--ghost {{@root.prefix}}--btn--sm {{@root.prefix}}--snippet-btn--expand"
- type="button">
- <span class="{{@root.prefix}}--snippet-btn--text" data-show-more-text="Show more" data-show-less-text="Show less">Show
- more</span>
- {{ carbon-icon 'ChevronDown16' class=(add
+ </div>
+ <button data-copy-btn class="{{@root.prefix}}--copy-btn" type="button" tabindex="0">
+ <span class="{{@root.prefix}}--assistive-text {{@root.prefix}}--copy-btn__feedback">Copied!</span>
+ {{ carbon-icon 'Copy16' class=(add @root.prefix '--snippet__icon' hidden="true")}}
+ </button>
+ {{#is variant "multi"}}
+ <button
+ class="{{@root.prefix}}--btn {{@root.prefix}}--btn--ghost {{@root.prefix}}--btn--sm {{@root.prefix}}--snippet-btn--expand"
+ type="button">
+ <span class="{{@root.prefix}}--snippet-btn--text" data-show-more-text="Show more"
+ data-show-less-text="Show less">Show
+ more</span>
+ {{ carbon-icon 'ChevronDown16' class=(add
  (add @root.prefix '--icon-chevron--down')
  (add ' ' (add @root.prefix '--snippet__icon'))
  )
  aria-label="Show more icon"}}
-</button>
-{{/is}}
+ </button>
+ {{/is}}
 </div>
 {{/is}}

packages/components/src/components/copy-button/_copy-button.scss

@@ -12,7 +12,8 @@
 @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
 @import '../../globals/scss/css--reset';
 @import '../button/button';
-@import 'keyframes';
+@import '../../globals/scss/tooltip';
+@import '../../globals/scss/keyframes';
 
 @include exports('copy-button') {
  .#{$prefix}--btn--copy {
@@ -85,6 +86,11 @@
  height: $carbon--spacing-08;
  width: $carbon--spacing-08;
  background-color: $ui-01;
+ cursor: pointer;
+
+ &:hover {
+ background-color: $hover-ui;
+ }
 
  &::before {
  @include tooltip--caret;

packages/react/src/components/CodeSnippet/CodeSnippet.js

@@ -78,7 +78,6 @@ function CodeSnippet({
  </code>
  </div>
  <CopyButton
- className={`${prefix}--snippet-button`}
  onClick={onClick}
  feedback={feedback}
  iconDescription={copyButtonDescription}

packages/react/src/components/Copy/Copy-test.js

@@ -52,38 +52,32 @@ describe('Copy', () => {
  it('Should be able to specify the feedback message', () => {
  const feedbackWrapper = mount(<Copy feedback="Copied!" />);
  expect(
- feedbackWrapper.find(`.${prefix}--btn--copy__feedback`).props()[
- 'data-feedback'
- ]
+ feedbackWrapper.find(`.${prefix}--copy-btn__feedback`).text()
  ).toBe('Copied!');
  });
  });
 
  describe('Renders feedback as expected', () => {
  it('Should make the feedback visible', () => {
  const feedbackWrapper = mount(<Copy feedback="Copied!" />);
- const feedback = () =>
- feedbackWrapper.find(`.${prefix}--btn--copy__feedback`);
- expect(
- feedback().hasClass(`${prefix}--btn--copy__feedback--displayed`)
- ).toBe(false);
- feedbackWrapper.setState({ showFeedback: true });
- expect(
- feedback().hasClass(`${prefix}--btn--copy__feedback--displayed`)
- ).toBe(true);
+ const feedback = feedbackWrapper.find(`.${prefix}--copy-btn__feedback`);
+ expect(feedback).toBeFalsy;
+ feedbackWrapper.simulate('click');
+ expect(feedback).toBeTruthy;
  });
 
  it('Should show feedback for a limited amount of time', () => {
  const feedbackWrapper = mount(
  <Copy feedback="Copied!" feedbackTimeout={5000} />
  );
- expect(feedbackWrapper.state().showFeedback).toBe(false);
  feedbackWrapper.simulate('click');
- expect(feedbackWrapper.state().showFeedback).toBe(true);
- expect(setTimeout.mock.calls.length).toBe(2);
- expect(setTimeout.mock.calls[1][1]).toBe(5000);
- jest.runAllTimers();
- expect(feedbackWrapper.state().showFeedback).toBe(false);
+ const copyButton = feedbackWrapper.find('button');
+ expect(copyButton.hasClass(`${prefix}--copy-btn--animating`)).toBe(true);
+ setTimeout(() => {
+ expect(copyButton.hasClass(`${prefix}--copy-btn--animating`)).toBe(
+ false
+ );
+ }, 5220); // 5000 + 2 * 110 (transition duration)
  });
  });
 

packages/react/src/components/Copy/Copy.js

@@ -6,91 +6,101 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
+import debounce from 'lodash.debounce';
 import classnames from 'classnames';
 import { settings } from 'carbon-components';
+import { composeEventHandlers } from '../../tools/events';
 
 const { prefix } = settings;
 
-export default class Copy extends Component {
- static propTypes = {
-  /**
-  * Pass in content to be rendred in the underlying <button>
-  */
-  children: PropTypes.node,
-
-  /**
- * Specify an optional className to be applied to the underlying <button>
-  */
-  className: PropTypes.string,
-
- /**
-  * Specify the string that is displayed when the button is clicked and the
-  * content is copied
-  */
- feedback: PropTypes.string,
-
- /**
-  * Specify the time it takes for the feedback message to timeout
-  */
- feedbackTimeout: PropTypes.number,
-
-  /**
-  * Specify an optional `onClick` handler that is called when the underlying
-  * <button> is clicked
- */
- onClick: PropTypes.func,
+export default function Copy({
+ children,
+ className,
+ feedback,
+ feedbackTimeout,
+ onAnimationEnd,
+ onClick,
+ ...other
+}) {
+ const [animation, setAnimation] = useState('');
+ const classNames = classnames(className, {
+ [`${prefix}--copy-btn--animating`]: animation,
+ [`${prefix}--copy-btn--${animation}`]: animation,
+ });
+ const handleFadeOut = useCallback(
+ debounce(() => {
+  setAnimation('fade-out');
+ }, feedbackTimeout),
+ [feedbackTimeout]
+ );
+ const handleClick = useCallback(() => {
+ setAnimation('fade-in');
+ handleFadeOut();
+ }, [handleFadeOut]);
+ const handleAnimationEnd = event => {
+ if (event.animationName === 'hide-feedback') {
+  setAnimation('');
+ }
  };
 
- static defaultProps = {
- feedback: 'Copied!',
- feedbackTimeout: 2000,
- onClick: () => {},
- };
+ useEffect(
+ () => () => {
+ handleFadeOut.cancel();
+ },
+ [handleFadeOut]
+ );
 
- state = {
- showFeedback: false,
- };
+ return (
+ <button
+ type="button"
+ className={classNames}
+ onClick={composeEventHandlers([onClick, handleClick])}
+ onAnimationEnd={composeEventHandlers([
+ onAnimationEnd,
+ handleAnimationEnd,
+ ])}
+ {...other}>
+ {children}
+ <span
+ className={`${prefix}--assistive-text ${prefix}--copy-btn__feedback`}>
+ {feedback}
+ </span>
+ </button>
+ );
+}
 
- /* istanbul ignore next */
- componentWillUnmount() {
- if (typeof this.timeoutId !== 'undefined') {
- clearTimeout(this.timeoutId);
- delete this.timeoutId;
- }
- }
+Copy.propTypes = {
+ /**
+ * Pass in content to be rendred in the underlying <button>
+ */
+ children: PropTypes.node,
 
- handleClick = evt => {
- this.setState({ showFeedback: true });
- this.timeoutId = setTimeout(() => {
- this.setState({ showFeedback: false });
- }, this.props.feedbackTimeout);
+ /**
+ * Specify an optional className to be applied to the underlying <button>
+ */
+ className: PropTypes.string,
 
- this.props.onClick(evt);
- }; // eslint-disable-line no-unused-vars
+ /**
+ * Specify the string that is displayed when the button is clicked and the
+ * content is copied
+ */
+ feedback: PropTypes.string,
 
- render() {
- const {
- className,
- feedback,
- children,
- feedbackTimeout, // eslint-disable-line no-unused-vars
- onClick, // eslint-disable-line no-unused-vars
- ...other
- } = this.props;
- const feedbackClassNames = classnames(`${prefix}--btn--copy__feedback`, {
- [`${prefix}--btn--copy__feedback--displayed`]: this.state.showFeedback,
- });
+ /**
+ * Specify the time it takes for the feedback message to timeout
+ */
+ feedbackTimeout: PropTypes.number,
 
-  return (
-  <button
-  type="button"
-  className={className}
-  onClick={this.handleClick}
- {...other}>
- {children}
- <div className={feedbackClassNames} data-feedback={feedback} />
-  </button>
-  );
- }
-}
+ /**
+ * Specify an optional `onClick` handler that is called when the underlying
+ * <button> is clicked
+ */
+ onClick: PropTypes.func,
+};
+
+Copy.defaultProps = {
+ feedback: 'Copied!',
+ feedbackTimeout: 2000,
+ onClick: () => {},
+};