Merge branch 'master' into data-table-fixes

carbon-design-system · Apr 7, 2020 · adefc93 · adefc93
2 parents 8cac328 + 0719ef8
commit adefc93
Show file tree

Hide file tree

Showing 38 changed files with 237 additions and 248 deletions.
diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
@@ -2221,8 +2221,13 @@ Generate a media query for the maximum width of the given styles
       @content;
     }
   } @else if map-has-key($breakpoints, $name) {
+    // We borrow this logic from bootstrap for specifying the value of the
+    // max-width. The maximum width is calculated by finding the breakpoint and
+    // subtracting .02 from its value. This value is used instead of .01 to
+    // avoid rounding issues in Safari
+    // https://github.com/twbs/bootstrap/blob/c5b1919deaf5393fcca9e9b9d7ce9c338160d99d/scss/mixins/_breakpoints.scss#L34-L46
     $breakpoint: map-get($breakpoints, $name);
-    $width: map-get($breakpoint, width);
+    $width: map-get($breakpoint, width) - 0.02;
     @media (max-width: $width) {
       @content;
     }
@@ -6542,7 +6547,6 @@ $interactive-02: if(
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
   - [button [mixin]](#button-mixin)
-  - [tile [mixin]](#tile-mixin)
 
 ### ✅interactive-03 [variable]
 
@@ -7543,6 +7547,7 @@ $inverse-support-04: if(
   - [carbon--theme [mixin]](#carbon--theme-mixin)
   - [inline-notifications [mixin]](#inline-notifications-mixin)
   - [toast-notifications [mixin]](#toast-notifications-mixin)
+  - [carbon-header [mixin]](#carbon-header-mixin)
 
 ### ✅overlay-01 [variable]
 
@@ -19704,6 +19709,7 @@ Modal styles
     bottom: $spacing-09;
     // Safari interprets `transparent` differently, so make color token value transparent instead:
     background-image: linear-gradient(to bottom, rgba($ui-01, 0), $ui-01);
+    pointer-events: none;
   }
 
   .#{$prefix}--modal-content:focus
@@ -20103,6 +20109,11 @@ Inline notification styles
     }
   }
 
+  .#{$prefix}--inline-notification--low-contrast
+    .#{$prefix}--inline-notification__close-button {
+    @include focus-outline('outline');
+  }
+
   .#{$prefix}--inline-notification--low-contrast {
     .#{$prefix}--inline-notification__close-button
       .#{$prefix}--inline-notification__close-icon {
@@ -20360,6 +20371,11 @@ Toast notification styles
     }
   }
 
+  .#{$prefix}--toast-notification--low-contrast
+    .#{$prefix}--toast-notification__close-button {
+    @include focus-outline('outline');
+  }
+
   .#{$prefix}--toast-notification--low-contrast
     .#{$prefix}--toast-notification__close-button
     .#{$prefix}--toast-notification__close-icon {
@@ -23813,7 +23829,10 @@ Tile styles
     &:hover {
       background: $hover-ui;
     }
+  }
 
+  .#{$prefix}--tile--clickable,
+  .#{$prefix}--tile--expandable {
     &:hover,
     &:focus {
       .#{$prefix}--tile__checkmark {
@@ -23932,7 +23951,7 @@ Tile styles
   }
 
   .#{$prefix}--tile--is-selected {
-    outline: 1px solid $interactive-02;
+    outline: 1px solid $ui-05;
     outline-offset: -1px;
   }
 
@@ -23972,7 +23991,6 @@ Tile styles
   - [carbon--spacing-09 [variable]](#carbon--spacing-09-variable)
   - [icon-02 [variable]](#icon-02-variable)
   - [ui-05 [variable]](#ui-05-variable)
-  - [interactive-02 [variable]](#interactive-02-variable)
 
 ## time-picker
 
@@ -25467,7 +25485,6 @@ UI shell header
     right: 0;
     height: mini-units(6);
     background-color: $shell-header-bg-01;
-    border-bottom: 1px solid $shell-header-border-01;
     z-index: z('header');
   }
 
@@ -25616,6 +25633,7 @@ UI shell header
   }
 
   a.#{$prefix}--header__menu-item {
+    position: relative;
     display: flex;
     align-items: center;
     color: $shell-header-text-02;
@@ -25659,6 +25677,30 @@ UI shell header
     fill: $shell-header-icon-01;
   }
 
+  // Styles for selected state
+
+  a.#{$prefix}--header__menu-item[aria-current='page']::after,
+  .#{$prefix}--header__menu-item--current::after {
+    content: '';
+    width: 100%;
+    position: absolute;
+    top: 0;
+    bottom: -2px;
+    left: 0;
+    right: 0;
+    border-bottom: 3px solid $inverse-support-04;
+  }
+
+  a.#{$prefix}--header__menu-item[aria-current='page']:focus::after,
+  .#{$prefix}--header__menu-item--current:focus::after {
+    border: 0;
+  }
+
+  a.#{$prefix}--header__menu-item[aria-current='page']:focus,
+  a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item--current:focus {
+    border: 2px solid $shell-header-focus;
+  }
+
   .#{$prefix}--header__submenu {
     position: relative;
   }
@@ -25780,15 +25822,16 @@ UI shell header
   - [mini-units [function]](#mini-units-function)
   - [prefix [variable]](#prefix-variable)
   - [shell-header-bg-01 [variable]](#shell-header-bg-01-variable)
-  - [shell-header-border-01 [variable]](#shell-header-border-01-variable)
   - [shell-header-bg-04 [variable]](#shell-header-bg-04-variable)
+  - [shell-header-border-01 [variable]](#shell-header-border-01-variable)
   - [shell-header-focus [variable]](#shell-header-focus-variable)
   - [shell-header-bg-03 [variable]](#shell-header-bg-03-variable)
   - [shell-header-icon-02 [variable]](#shell-header-icon-02-variable)
   - [shell-header-icon-01 [variable]](#shell-header-icon-01-variable)
   - [shell-header-bg-02 [variable]](#shell-header-bg-02-variable)
   - [shell-header-text-01 [variable]](#shell-header-text-01-variable)
   - [shell-header-text-02 [variable]](#shell-header-text-02-variable)
+  - [inverse-support-04 [variable]](#inverse-support-04-variable)
   - [shell-header-bg-06 [variable]](#shell-header-bg-06-variable)
   - [shell-header-icon-03 [variable]](#shell-header-icon-03-variable)
 

diff --git a/packages/components/src/components/modal/_modal.scss b/packages/components/src/components/modal/_modal.scss
@@ -284,6 +284,7 @@
     bottom: $spacing-09;
     // Safari interprets `transparent` differently, so make color token value transparent instead:
     background-image: linear-gradient(to bottom, rgba($ui-01, 0), $ui-01);
+    pointer-events: none;
   }
 
   .#{$prefix}--modal-content:focus

diff --git a/packages/components/src/components/notification/_inline-notification.scss b/packages/components/src/components/notification/_inline-notification.scss
@@ -255,6 +255,11 @@
     }
   }
 
+  .#{$prefix}--inline-notification--low-contrast
+    .#{$prefix}--inline-notification__close-button {
+    @include focus-outline('outline');
+  }
+
   .#{$prefix}--inline-notification--low-contrast {
     .#{$prefix}--inline-notification__close-button
       .#{$prefix}--inline-notification__close-icon {

diff --git a/packages/components/src/components/notification/_toast-notification.scss b/packages/components/src/components/notification/_toast-notification.scss
@@ -157,6 +157,11 @@
     }
   }
 
+  .#{$prefix}--toast-notification--low-contrast
+    .#{$prefix}--toast-notification__close-button {
+    @include focus-outline('outline');
+  }
+
   .#{$prefix}--toast-notification--low-contrast
     .#{$prefix}--toast-notification__close-button
     .#{$prefix}--toast-notification__close-icon {

diff --git a/packages/components/src/components/tile/_tile.scss b/packages/components/src/components/tile/_tile.scss
@@ -57,7 +57,10 @@
     &:hover {
       background: $hover-ui;
     }
+  }
 
+  .#{$prefix}--tile--clickable,
+  .#{$prefix}--tile--expandable {
     &:hover,
     &:focus {
       .#{$prefix}--tile__checkmark {
@@ -176,7 +179,7 @@
   }
 
   .#{$prefix}--tile--is-selected {
-    outline: 1px solid $interactive-02;
+    outline: 1px solid $ui-05;
     outline-offset: -1px;
   }
 

diff --git a/packages/components/src/components/ui-shell/_header.scss b/packages/components/src/components/ui-shell/_header.scss
@@ -27,7 +27,6 @@
     right: 0;
     height: mini-units(6);
     background-color: $shell-header-bg-01;
-    border-bottom: 1px solid $shell-header-border-01;
     z-index: z('header');
   }
 
@@ -176,6 +175,7 @@
   }
 
   a.#{$prefix}--header__menu-item {
+    position: relative;
     display: flex;
     align-items: center;
     color: $shell-header-text-02;
@@ -219,6 +219,30 @@
     fill: $shell-header-icon-01;
   }
 
+  // Styles for selected state
+
+  a.#{$prefix}--header__menu-item[aria-current='page']::after,
+  .#{$prefix}--header__menu-item--current::after {
+    content: '';
+    width: 100%;
+    position: absolute;
+    top: 0;
+    bottom: -2px;
+    left: 0;
+    right: 0;
+    border-bottom: 3px solid $inverse-support-04;
+  }
+
+  a.#{$prefix}--header__menu-item[aria-current='page']:focus::after,
+  .#{$prefix}--header__menu-item--current:focus::after {
+    border: 0;
+  }
+
+  a.#{$prefix}--header__menu-item[aria-current='page']:focus,
+  a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item--current:focus {
+    border: 2px solid $shell-header-focus;
+  }
+
   .#{$prefix}--header__submenu {
     position: relative;
   }

diff --git a/packages/components/src/globals/scss/_layer.scss b/packages/components/src/globals/scss/_layer.scss
@@ -0,0 +1,93 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+//-------------------------------------------
+// 📑 Layer
+// ------------------------------------------
+//
+//   Layer                 ||  Elevation
+//   ==========================================
+//   0 - Base              ||  0
+//   1 - Flat              ||  1
+//   2 - Raised            ||  2
+//   3 - Overlay           ||  8
+//   4 - Pop-out           ||  24
+//   ==========================================
+//   Custom: Left Nav      ||  16
+//   Custom: Global Header ||  12
+//
+
+// Box shadow variables
+
+/// Box shadow color
+/// @access private
+/// @type Value
+/// @group global-layer
+/// @example box-shadow: 0px 3px 3px 0 $box-shadow;
+$box-shadow: rgba(0, 0, 0, 0.2);
+
+/// Raised box shadow
+/// @access private
+/// @type Value
+/// @group global-layer
+$box-shadow--raised: 0 2px 6px 0 $box-shadow;
+
+/// Overlay box shadow
+/// @access private
+/// @type Value
+/// @group global-layer
+$box-shadow--overlay: 0 2px 6px 0 $box-shadow;
+
+/// Sticky nav box shadow
+/// @access private
+/// @type Value
+/// @group global-layer
+$box-shadow--sticky-nav: 0 2px 6px 0 $box-shadow;
+
+/// Temporary nav box shadow
+/// @access private
+/// @type Value
+/// @group global-layer
+$box-shadow--temporary-nav: 0 2px 6px 0 $box-shadow;
+
+/// Pop out box shadow
+/// @access private
+/// @type Value
+/// @group global-layer
+$box-shadow--pop-out: 0 2px 6px 0 $box-shadow;
+
+// Layer box-shadow map
+
+/// Map of box shadows used in the `layer()` mixin
+/// @access private
+/// @type Map
+/// @group global-layer
+/// @example - @include layer('raised');
+$layer-shadows: (
+  base: none,
+  flat: none,
+  raised: $box-shadow--raised,
+  overlay: $box-shadow--overlay,
+  pop-out: $box-shadow--pop-out,
+  temporary-nav: $box-shadow--temporary-nav,
+  sticky-nav: $box-shadow--sticky-nav,
+);
+
+/// Layer mixin to set `box-shadow`
+/// @access public
+/// @param {String} $layer - A value from the `$layer-shadows` map
+/// @group global-layer
+/// @example - @include layer('raised');
+@mixin layer($layer) {
+  @if variable-exists('css--use-layer') == false or $css--use-layer == true {
+    @if map-has-key($layer-shadows, $layer) {
+      box-shadow: #{map-get($layer-shadows, $layer)};
+    } @else {
+      @warn '#{$layer} is not a valid layer.';
+    }
+  }
+}
diff --git a/packages/components/src/globals/scss/styles.scss b/packages/components/src/globals/scss/styles.scss
@@ -67,6 +67,7 @@ $css--use-experimental-grid-fallback: false !default;
 @import 'theme';
 @import 'mixins';
 @import 'layout';
+@import 'layer';
 @import 'spacing';
 @import 'typography';
 @import './vendor/@carbon/elements/scss/import-once/import-once';

diff --git a/packages/elements/docs/sass.md b/packages/elements/docs/sass.md
@@ -2006,8 +2006,13 @@ Generate a media query for the maximum width of the given styles
       @content;
     }
   } @else if map-has-key($breakpoints, $name) {
+    // We borrow this logic from bootstrap for specifying the value of the
+    // max-width. The maximum width is calculated by finding the breakpoint and
+    // subtracting .02 from its value. This value is used instead of .01 to
+    // avoid rounding issues in Safari
+    // https://github.com/twbs/bootstrap/blob/c5b1919deaf5393fcca9e9b9d7ce9c338160d99d/scss/mixins/_breakpoints.scss#L34-L46
     $breakpoint: map-get($breakpoints, $name);
-    $width: map-get($breakpoint, width);
+    $width: map-get($breakpoint, width) - 0.02;
     @media (max-width: $width) {
       @content;
     }

diff --git a/packages/icon-build-helpers/src/builders/react/components/Icon.js b/packages/icon-build-helpers/src/builders/react/components/Icon.js
@@ -9,12 +9,8 @@ import { getAttributes } from '@carbon/icon-helpers';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const defaultStyle = {
-  willChange: 'transform',
-};
-
 const Icon = React.forwardRef(function Icon(
-  { className, children, style = {}, tabIndex, ...rest },
+  { className, children, tabIndex, ...rest },
   ref
 ) {
   const { tabindex, ...props } = getAttributes({
@@ -34,11 +30,6 @@ const Icon = React.forwardRef(function Icon(
     props.ref = ref;
   }
 
-  props.style = {
-    ...defaultStyle,
-    ...style,
-  };
-
   return React.createElement('svg', props, children);
 });