Merge branch 'master' into feat-btn-loader

carbon-design-system · Jul 9, 2019 · 5ae72d7 · 5ae72d7
2 parents e737125 + 3b124f9
commit 5ae72d7
Show file tree

Hide file tree

Showing 27 changed files with 871 additions and 438 deletions.
diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
@@ -4359,7 +4359,6 @@ $ui-02: map-get($carbon--theme, 'ui-02');
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
   - [button-theme [mixin]](#button-theme-mixin)
-  - [checkbox [mixin]](#checkbox-mixin)
   - [loading [mixin]](#loading-mixin)
   - [number-input [mixin]](#number-input-mixin)
   - [carbon-content [mixin]](#carbon-content-mixin)
@@ -4985,6 +4984,7 @@ $overlay-01: map-get($carbon--theme, 'overlay-01');
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
   - [modal [mixin]](#modal-mixin)
+  - [carbon-side-nav [mixin]](#carbon-side-nav-mixin)
 
 ### ✅focus [variable]
 
@@ -9119,8 +9119,8 @@ Checkbox styles
     width: rem(7px);
     height: rem(3px);
     background: none;
-    border-left: 2px solid $ui-02;
-    border-bottom: 2px solid $ui-02;
+    border-left: 2px solid $inverse-01;
+    border-bottom: 2px solid $inverse-01;
     transform: scale(0) rotate(-45deg);
     transform-origin: bottom right;
     margin-top: rem(-3px);
@@ -9214,9 +9214,8 @@ Checkbox styles
 - **Requires**:
   - [prefix [variable]](#prefix-variable)
   - [ui-05 [variable]](#ui-05-variable)
-  - [ui-02 [variable]](#ui-02-variable)
-  - [text-01 [variable]](#text-01-variable)
   - [inverse-01 [variable]](#inverse-01-variable)
+  - [text-01 [variable]](#text-01-variable)
   - [focus [variable]](#focus-variable)
   - [disabled-02 [variable]](#disabled-02-variable)
 
@@ -9851,11 +9850,14 @@ Data table action styles
     width: 100%;
     justify-content: flex-end;
     transform: translate3d(0, 0, 0);
-    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
     transition: transform $duration--fast-02 motion(standard, productive), clip-path
         $duration--fast-02 motion(standard, productive);
   }
 
+  .#{$prefix}--batch-actions ~ .#{$prefix}--toolbar-content {
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+  }
+
   .#{$prefix}--toolbar-content .#{$prefix}--search .#{$prefix}--search-input {
     background-color: transparent; // For tool bar animation with (esp.) persistent search box
   }
@@ -14066,7 +14068,6 @@ Inline notification styles
   .#{$prefix}--inline-notification__title {
     @include type-style('heading-01');
     margin: 0 $carbon--spacing-02 0 0;
-    white-space: nowrap;
   }
 
   .#{$prefix}--inline-notification__subtitle {
@@ -18667,6 +18668,17 @@ Tooltip styles
   @include tooltip--definition--legacy;
   /* end legacy definition tooltip */
 
+  .#{$prefix}--tooltip--definition.#{$prefix}--tooltip--a11y {
+    // Wrapping element set to inline since the tooltip isn't contained within the trigger (affects center and end alignments)
+    // Also allows for Definition Tooltip to be used within a paragraph of text as defined in the usage guidelines
+    display: inline-flex;
+  }
+
+  // default buttons in Safari are adding a small margin, affecting tooltip placement
+  .#{$prefix}--tooltip--definition button.#{$prefix}--tooltip--a11y {
+    margin: 0;
+  }
+
   // Definition CSS only tooltip
   .#{$prefix}--tooltip__trigger.#{$prefix}--tooltip__trigger--definition {
     @include type-style('label-01');
@@ -19066,6 +19078,11 @@ UI shell header
     height: 100%;
     padding-left: mini-units(2);
     position: relative;
+    display: block;
+
+    @include carbon--breakpoint-down('lg') {
+      display: none;
+    }
 
     &::before {
       content: '';
@@ -19796,11 +19813,37 @@ UI shell side nav
     }
   }
 
+  .#{$prefix}--side-nav--hidden {
+    width: 0;
+  }
+
   .#{$prefix}--side-nav:not(.#{$prefix}--side-nav--fixed):hover,
   .#{$prefix}--side-nav--expanded {
     width: mini-units(32);
   }
 
+  .#{$prefix}--side-nav__overlay {
+    position: absolute;
+    top: rem(48px);
+    height: 0;
+    width: 0;
+    background-color: transparent;
+    opacity: 0;
+    transition: opacity $transition--expansion $carbon--standard-easing, background-color
+        $transition--expansion $carbon--standard-easing;
+  }
+
+  .#{$prefix}--side-nav__overlay-active {
+    @include carbon--breakpoint-down('lg') {
+      height: 100vh;
+      width: 100%;
+      background-color: $overlay-01;
+      opacity: 1;
+      transition: opacity $transition--expansion $carbon--standard-easing, background-color
+          $transition--expansion $carbon--standard-easing;
+    }
+  }
+
   // When used alongside the header, we update the `top` positioning so that we
   // can fit both widgets on the same page without overlapping.
   .#{$prefix}--header ~ .#{$prefix}--side-nav {
@@ -19998,7 +20041,10 @@ UI shell side nav
   .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active)
     > .#{$prefix}--side-nav__link:hover,
   .#{$prefix}--side-nav__menu[role='menu']
-    a.#{$prefix}--side-nav__link[role='menuitem']:not(.#{$prefix}--side-nav__link--current):not([aria-current='page']):hover {
+    a.#{$prefix}--side-nav__link[role='menuitem']:not(.#{$prefix}--side-nav__link--current):not([aria-current='page']):hover,
+  .#{$prefix}--side-nav a.#{$prefix}--header__menu-item[role='menuitem']:hover,
+  .#{$prefix}--side-nav
+    .#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true']:hover {
     // TODO: sync color
     background-color: $shell-side-nav-bg-04;
     color: $ibm-color__gray-100;
@@ -20031,6 +20077,11 @@ UI shell side nav
       outline $duration--fast-02;
   }
 
+  .#{$prefix}--side-nav__submenu:hover {
+    background-color: $shell-side-nav-bg-04;
+    color: $ibm-color__gray-100;
+  }
+
   .#{$prefix}--side-nav__submenu:focus {
     @include focus-outline('outline');
   }
@@ -20128,7 +20179,11 @@ UI shell side nav
   //----------------------------------------------------------------------------
   // Side-nav > Link
   //----------------------------------------------------------------------------
-  a.#{$prefix}--side-nav__link {
+  a.#{$prefix}--side-nav__link,
+  .#{$prefix}--side-nav a.#{$prefix}--header__menu-item[role='menuitem'],
+  .#{$prefix}--side-nav
+    .#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true']
+    + .#{$prefix}--header__menu {
     @include focus-outline('reset');
     @include type-style('heading-01');
     position: relative;
@@ -20141,7 +20196,10 @@ UI shell side nav
       outline $duration--fast-02;
   }
 
-  a.#{$prefix}--side-nav__link > .#{$prefix}--side-nav__link-text {
+  a.#{$prefix}--side-nav__link > .#{$prefix}--side-nav__link-text,
+  .#{$prefix}--side-nav
+    a.#{$prefix}--header__menu-item[role='menuitem']
+    .#{$prefix}--text-truncate-end {
     @include text-overflow();
     color: $shell-side-nav-text-01;
     font-size: rem(14px);
@@ -20150,7 +20208,8 @@ UI shell side nav
     user-select: none;
   }
 
-  a.#{$prefix}--side-nav__link:focus {
+  a.#{$prefix}--side-nav__link:focus,
+  .#{$prefix}--side-nav a.#{$prefix}--header__menu-item[role='menuitem']:focus {
     @include focus-outline('outline');
   }
 
@@ -20222,6 +20281,87 @@ UI shell side nav
     a.#{$prefix}--side-nav__link {
     padding-left: mini-units(4);
   }
+
+  //----------------------------------------------------------------------------
+  // Variants - Header Nav Links in Side Nav
+  //----------------------------------------------------------------------------
+  .#{$prefix}--side-nav .#{$prefix}--header__nav {
+    @include carbon--breakpoint-down('lg') {
+      display: block;
+    }
+  }
+
+  .#{$prefix}--side-nav__header-navigation {
+    display: none;
+
+    @include carbon--breakpoint-down('lg') {
+      display: block;
+      position: relative;
+      margin-bottom: rem(32px);
+    }
+  }
+
+  .#{$prefix}--side-nav__header-divider::after {
+    content: '';
+    position: absolute;
+    height: rem(1px);
+    bottom: rem(-16px);
+    left: rem(16px);
+    width: calc(100% - 32px);
+    background: $ibm-color__gray-20;
+  }
+
+  //header menu items overrides
+  .#{$prefix}--side-nav a.#{$prefix}--header__menu-item[role='menuitem'] {
+    color: $shell-side-nav-text-01;
+    white-space: nowrap;
+    justify-content: space-between;
+
+    &[aria-expanded='true'] {
+      background-color: transparent;
+    }
+  }
+
+  .#{$prefix}--side-nav
+    .#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true']
+    + .#{$prefix}--header__menu {
+    bottom: inherit;
+    width: 100%;
+    box-shadow: none;
+    transform: none;
+    background-color: transparent;
+    padding: 0;
+
+    & li {
+      width: 100%;
+    }
+
+    & a.#{$prefix}--header__menu-item[role='menuitem'] {
+      padding-left: 4.25rem;
+      font-weight: 400;
+    }
+
+    & a.#{$prefix}--header__menu-item[role='menuitem']:hover {
+      background-color: $shell-side-nav-bg-04;
+      color: $ibm-color__gray-100;
+    }
+  }
+
+  .#{$prefix}--side-nav
+    .#{$prefix}--header__menu
+    a.#{$prefix}--header__menu-item[role='menuitem'] {
+    height: inherit;
+  }
+
+  .#{$prefix}--side-nav
+    a.#{$prefix}--header__menu-item[role='menuitem']:hover
+    .#{$prefix}--header__menu-arrow,
+  .#{$prefix}--side-nav
+    a.#{$prefix}--header__menu-item[role='menuitem']:focus
+    .#{$prefix}--header__menu-arrow,
+  .#{$prefix}--side-nav .#{$prefix}--header__menu-arrow {
+    fill: $shell-side-nav-text-01;
+  }
 }
 ```
 
@@ -20237,6 +20377,7 @@ UI shell side nav
   - [shell-side-nav-text-01 [variable]](#shell-side-nav-text-01-variable)
   - [shell-side-nav-bg-01 [variable]](#shell-side-nav-bg-01-variable)
   - [spacing-09 [variable]](#spacing-09-variable)
+  - [overlay-01 [variable]](#overlay-01-variable)
   - [shell-side-nav-bg-02 [variable]](#shell-side-nav-bg-02-variable)
   - [shell-side-nav-icon-01 [variable]](#shell-side-nav-icon-01-variable)
   - [shell-header-bg-01 [variable]](#shell-header-bg-01-variable)

diff --git a/packages/components/src/components/checkbox/_checkbox.scss b/packages/components/src/components/checkbox/_checkbox.scss
@@ -93,8 +93,8 @@
     width: rem(7px);
     height: rem(3px);
     background: none;
-    border-left: 2px solid $ui-02;
-    border-bottom: 2px solid $ui-02;
+    border-left: 2px solid $inverse-01;
+    border-bottom: 2px solid $inverse-01;
     transform: scale(0) rotate(-45deg);
     transform-origin: bottom right;
     margin-top: rem(-3px);

diff --git a/packages/components/src/components/data-table/_data-table-action.scss b/packages/components/src/components/data-table/_data-table-action.scss
@@ -30,11 +30,14 @@
     width: 100%;
     justify-content: flex-end;
     transform: translate3d(0, 0, 0);
-    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
     transition: transform $duration--fast-02 motion(standard, productive),
       clip-path $duration--fast-02 motion(standard, productive);
   }
 
+  .#{$prefix}--batch-actions ~ .#{$prefix}--toolbar-content {
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+  }
+
   .#{$prefix}--toolbar-content .#{$prefix}--search .#{$prefix}--search-input {
     background-color: transparent; // For tool bar animation with (esp.) persistent search box
   }

diff --git a/packages/components/src/components/notification/_inline-notification.scss b/packages/components/src/components/notification/_inline-notification.scss
@@ -128,7 +128,6 @@
   .#{$prefix}--inline-notification__title {
     @include type-style('heading-01');
     margin: 0 $carbon--spacing-02 0 0;
-    white-space: nowrap;
   }
 
   .#{$prefix}--inline-notification__subtitle {

diff --git a/packages/components/src/components/tooltip/_tooltip.scss b/packages/components/src/components/tooltip/_tooltip.scss
@@ -439,6 +439,17 @@
   @include tooltip--definition--legacy;
   /* end legacy definition tooltip */
 
+  .#{$prefix}--tooltip--definition.#{$prefix}--tooltip--a11y {
+    // Wrapping element set to inline since the tooltip isn't contained within the trigger (affects center and end alignments)
+    // Also allows for Definition Tooltip to be used within a paragraph of text as defined in the usage guidelines
+    display: inline-flex;
+  }
+
+  // default buttons in Safari are adding a small margin, affecting tooltip placement
+  .#{$prefix}--tooltip--definition button.#{$prefix}--tooltip--a11y {
+    margin: 0;
+  }
+
   // Definition CSS only tooltip
   .#{$prefix}--tooltip__trigger.#{$prefix}--tooltip__trigger--definition {
     @include type-style('label-01');

diff --git a/packages/components/src/components/tooltip/tooltip--definition.hbs b/packages/components/src/components/tooltip/tooltip--definition.hbs
@@ -4,25 +4,30 @@
   This source code is licensed under the Apache-2.0 license found in the
   LICENSE file in the root directory of this source tree.
 -->
-
-<div class="{{@root.prefix}}--tooltip--definition">
+{{!-- @todo remove duplicate class on next major release when selectors can be cleaned up --}}
+<div class="{{@root.prefix}}--tooltip--definition {{@root.prefix}}--tooltip--a11y">
   <button
-    class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip__trigger--definition {{@root.prefix}}--tooltip--bottom {{@root.prefix}}--tooltip--align-start"
-    aria-label="Brief description of the dotted, underlined word above.">
+    aria-describedby="example-start"
+    class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip__trigger--definition {{@root.prefix}}--tooltip--bottom {{@root.prefix}}--tooltip--align-start">
     Definition Tooltip (start aligned)
   </button>
+  <div class="bx--assistive-text" id="example-start" role="tooltip">Brief description of the dotted, underlined word above.</div>
 </div>
-<div class="{{@root.prefix}}--tooltip--definition">
-  <button
-    class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip__trigger--definition {{@root.prefix}}--tooltip--bottom {{@root.prefix}}--tooltip--align-center"
-    aria-label="Brief description of the dotted, underlined word above.">
+<br>
+<div class="{{@root.prefix}}--tooltip--definition {{@root.prefix}}--tooltip--a11y">
+  <div
+    aria-describedby="example-center"
+    class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip__trigger--definition {{@root.prefix}}--tooltip--bottom {{@root.prefix}}--tooltip--align-center">
     Definition Tooltip (center aligned)
-  </button>
+  </div>
+  <div class="bx--assistive-text" id="example-center" role="tooltip">Brief description of the dotted, underlined word above.</div>
 </div>
-<div class="{{@root.prefix}}--tooltip--definition">
-  <button
-    class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip__trigger--definition {{@root.prefix}}--tooltip--bottom {{@root.prefix}}--tooltip--align-end"
-    aria-label="Brief description of the dotted, underlined word above.">
+<br>
+<div class="{{@root.prefix}}--tooltip--definition {{@root.prefix}}--tooltip--a11y">
+  <span
+    aria-describedby="example-end"
+    class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip__trigger--definition {{@root.prefix}}--tooltip--bottom {{@root.prefix}}--tooltip--align-end">
     Definition Tooltip (end aligned)
-  </button>
+  </span>
+  <div class="bx--assistive-text" id="example-end" role="tooltip">Brief description of the dotted, underlined word above.</div>
 </div>