Merge branch 'master' into 4791-filter-tag-onclick-firing-when-disabled

carbon-design-system · Jan 10, 2020 · 60b4537 · 60b4537
2 parents 371ee11 + 8a20d0e
commit 60b4537
Show file tree

Hide file tree

Showing 21 changed files with 366 additions and 171 deletions.
diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
@@ -13455,6 +13455,37 @@ Code snippet styles
       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 {
@@ -13618,6 +13649,16 @@ Code snippet styles
     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;
@@ -22165,6 +22206,10 @@ Text area styles
     color: $disabled-02;
   }
 
+  .#{$prefix}--text-area.#{$prefix}--text-area--light:disabled {
+    background-color: $field-02;
+  }
+
   // Skeleton State
   #{$prefix}--text-area.#{$prefix}--skeleton {
     @include skeleton;
@@ -25261,10 +25306,6 @@ UI shell side nav
     }
   }
 
-  a.#{$prefix}--side-nav__link--current > span.#{$prefix}--side-nav__link-text {
-    color: $ibm-color__gray-100;
-    font-weight: 600;
-  }
   //----------------------------------------------------------------------------
   // Side-nav > Link
   //----------------------------------------------------------------------------
@@ -25310,9 +25351,16 @@ UI shell side nav
 
   a.#{$prefix}--side-nav__link[aria-current='page'],
   a.#{$prefix}--side-nav__link--current {
+    background-color: $shell-side-nav-bg-04;
     font-weight: 600;
   }
 
+  a.#{$prefix}--side-nav__link[aria-current='page']
+    .#{$prefix}--side-nav__link-text,
+  a.#{$prefix}--side-nav__link--current .#{$prefix}--side-nav__link-text {
+    color: $ibm-color__gray-100;
+  }
+
   a.#{$prefix}--side-nav__link[aria-current='page']::before,
   a.#{$prefix}--side-nav__link--current::before {
     content: '';

diff --git a/packages/components/src/components/code-snippet/_code-snippet.scss b/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;

diff --git a/packages/components/src/components/code-snippet/code-snippet.hbs b/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}}
diff --git a/packages/components/src/components/copy-button/_copy-button.scss b/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;

diff --git a/packages/components/src/components/text-area/_text-area.scss b/packages/components/src/components/text-area/_text-area.scss
@@ -100,6 +100,10 @@
     color: $disabled-02;
   }
 
+  .#{$prefix}--text-area.#{$prefix}--text-area--light:disabled {
+    background-color: $field-02;
+  }
+
   // Skeleton State
   #{$prefix}--text-area.#{$prefix}--skeleton {
     @include skeleton;

diff --git a/packages/components/src/components/ui-shell/_side-nav.scss b/packages/components/src/components/ui-shell/_side-nav.scss
@@ -470,10 +470,6 @@
     }
   }
 
-  a.#{$prefix}--side-nav__link--current > span.#{$prefix}--side-nav__link-text {
-    color: $ibm-color__gray-100;
-    font-weight: 600;
-  }
   //----------------------------------------------------------------------------
   // Side-nav > Link
   //----------------------------------------------------------------------------
@@ -519,9 +515,16 @@
 
   a.#{$prefix}--side-nav__link[aria-current='page'],
   a.#{$prefix}--side-nav__link--current {
+    background-color: $shell-side-nav-bg-04;
     font-weight: 600;
   }
 
+  a.#{$prefix}--side-nav__link[aria-current='page']
+    .#{$prefix}--side-nav__link-text,
+  a.#{$prefix}--side-nav__link--current .#{$prefix}--side-nav__link-text {
+    color: $ibm-color__gray-100;
+  }
+
   a.#{$prefix}--side-nav__link[aria-current='page']::before,
   a.#{$prefix}--side-nav__link--current::before {
     content: '';

diff --git a/...rc/components/copy-button/_keyframes.scss → ...mponents/src/globals/scss/_keyframes.scss b/...rc/components/copy-button/_keyframes.scss → ...mponents/src/globals/scss/_keyframes.scss
diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.js b/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}

diff --git a/packages/react/src/components/Copy/Copy-test.js b/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)
     });
   });