Merge branch 'master' into 4219-overflow-menu-dead-code

carbon-design-system · Oct 9, 2019 · bb8e842 · bb8e842
2 parents 69be35a + 78aa5ff
commit bb8e842
Show file tree

Hide file tree

Showing 57 changed files with 720 additions and 724 deletions.
diff --git a/packages/colors/artifacts/IBM_Colors.zip b/packages/colors/artifacts/IBM_Colors.zip
diff --git a/packages/colors/package.json b/packages/colors/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/colors",
   "description": "Colors for digital and software products using the Carbon Design System",
-  "version": "10.5.0-rc.0",
+  "version": "10.5.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -34,7 +34,7 @@
     "@carbon/bundler": "10.4.0",
     "@carbon/cli-reporter": "10.3.0",
     "@carbon/scss-generator": "10.3.0",
-    "@carbon/test-utils": "10.4.0-rc.0",
+    "@carbon/test-utils": "10.4.0",
     "change-case": "^3.0.2",
     "core-js": "^3.0.1",
     "fs-extra": "^7.0.0",

diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
@@ -10361,6 +10361,7 @@ Get the font-family for an IBM Plex font
   - [carbon--font-family [mixin]](#carbon--font-family-mixin)
   - [form [mixin]](#form-mixin)
   - [number-input [mixin]](#number-input-mixin)
+  - [slider [mixin]](#slider-mixin)
 
 ### ✅carbon--font-family [mixin]
 
@@ -21393,6 +21394,7 @@ Slider styles
 
   .#{$prefix}--slider__range-label {
     @include type-style('code-02');
+    font-family: carbon--font-family('mono');
     color: $text-01;
 
     &:last-of-type {
@@ -21569,6 +21571,7 @@ Slider styles
 
 - **Group**: [slider](#slider)
 - **Requires**:
+  - [carbon--font-family [function]](#carbon--font-family-function)
   - [prefix [variable]](#prefix-variable)
   - [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
   - [text-01 [variable]](#text-01-variable)

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "carbon-components",
   "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.",
-  "version": "10.7.0-rc.0",
+  "version": "10.7.0",
   "license": "Apache-2.0",
   "main": "umd/index.js",
   "module": "es/index.js",
@@ -80,10 +80,10 @@
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/runtime": "^7.5.2",
-    "@carbon/elements": "10.7.0-rc.0",
+    "@carbon/elements": "10.7.0",
     "@carbon/icons-handlebars": "10.6.0",
     "@carbon/icons-react": "10.6.0",
-    "@carbon/test-utils": "10.4.0-rc.0",
+    "@carbon/test-utils": "10.4.0",
     "@frctl/fractal": "^1.1.0",
     "adaro": "1.0.4",
     "autoprefixer": "^8.2.0",

diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
@@ -96,12 +96,12 @@
     }
 
     &:focus {
-      color: $text-04;
+      color: $inverse-01;
       background-color: $interactive-03;
     }
 
     &:active {
-      background-color: $active-primary;
+      color: $inverse-01;
     }
 
     &:disabled,
@@ -112,6 +112,7 @@
     &.#{$prefix}--btn--disabled:focus {
       background: transparent;
       color: $disabled;
+      outline: none;
 
       & > .#{$prefix}--btn__icon path {
         fill: $disabled;
@@ -161,6 +162,7 @@
       color: $disabled;
       background: transparent;
       border-color: transparent;
+      outline: none;
 
       .#{$prefix}--btn__icon path {
         fill: $disabled;

diff --git a/packages/components/src/components/checkbox/_checkbox.scss b/packages/components/src/components/checkbox/_checkbox.scss
@@ -18,17 +18,18 @@
 @mixin checkbox {
   // Spacing between checkboxes
   .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper {
-    margin-bottom: rem(8px);
+    margin-bottom: $carbon--spacing-02;
   }
 
   // Spacing above collection of checkboxes
   .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:first-of-type {
     margin-top: rem(3px);
   }
 
-  // Remove spacing above collection of checkboxes if label is present
+  // Shift collection of checkboxes up if label is present
+  // to account for the 2px top margin for the first checkbox
   .#{$prefix}--label + .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper {
-    margin-top: 0;
+    margin-top: -#{$carbon--spacing-01};
   }
 
   // Spacing below collection of checkboxes
@@ -48,7 +49,6 @@
   .#{$prefix}--checkbox-label {
     @include reset;
     @include type-style('body-short-01');
-
     line-height: 1.5rem;
     position: relative;
     display: flex;
@@ -58,9 +58,14 @@
     user-select: none;
   }
 
+  // Required because `$css--reset: true` cannot currently apply to this `::before` and `::after`
+  .#{$prefix}--checkbox-label::before,
+  .#{$prefix}--checkbox-label::after {
+    box-sizing: border-box;
+  }
+
   // Spacing for presentational checkbox
   .#{$prefix}--checkbox-label::before {
-    box-sizing: border-box;
     content: '';
 
     // According to the spec, we'll want the bounding box for our checkbox to
@@ -87,11 +92,12 @@
   // Create the appearance of the check in the `after` pseudo-element
   .#{$prefix}--checkbox-label::after {
     content: '';
+
     position: absolute;
     left: rem(6px);
     top: rem(8px);
-    width: rem(7px);
-    height: rem(3px);
+    width: rem(9px);
+    height: rem(5px);
     background: none;
     border-left: 2px solid $inverse-01;
     border-bottom: 2px solid $inverse-01;

diff --git a/packages/components/src/components/data-table/_data-table-action.scss b/packages/components/src/components/data-table/_data-table-action.scss
@@ -17,11 +17,12 @@
   //TOOLBAR
   //-------------------------------------------------
   .#{$prefix}--table-toolbar {
-    display: flex;
-    width: 100%;
     background: $ui-01;
+    display: flex;
     height: $layout-04;
+    overflow: hidden;
     position: relative; //need for batch actions
+    width: 100%;
   }
 
   .#{$prefix}--toolbar-content {

diff --git a/packages/components/src/components/radio-button/_radio-button.scss b/packages/components/src/components/radio-button/_radio-button.scss
@@ -26,6 +26,11 @@
     margin-top: rem(6px);
   }
 
+  // Remove spacing above collection of radio buttons if label is present
+  .#{$prefix}--label + .#{$prefix}--form-item .#{$prefix}--radio-button-group {
+    margin-top: 0;
+  }
+
   // vertical radio button
   .#{$prefix}--radio-button-group--vertical {
     flex-direction: column;
@@ -37,6 +42,7 @@
 
     .#{$prefix}--radio-button__label {
       margin-right: 0;
+      line-height: carbon--mini-units(2.5);
     }
 
     .#{$prefix}--radio-button__label:not(:last-of-type) {

diff --git a/packages/components/src/components/slider/_slider.scss b/packages/components/src/components/slider/_slider.scss
@@ -37,6 +37,7 @@
 
   .#{$prefix}--slider__range-label {
     @include type-style('code-02');
+    font-family: carbon--font-family('mono');
     color: $text-01;
 
     &:last-of-type {
@@ -100,13 +101,13 @@
     &:focus {
       // 20px / 14px = 1.4285714286
       transform: translate(-50%, -50%) scale(1.4285714286);
-      box-shadow: inset 0 0 0 2px $interactive-01, inset 0 0 0 3px $ui-01;
-      background-color: $interactive-01;
+      box-shadow: inset 0 0 0 2px $interactive-04, inset 0 0 0 3px $ui-01;
+      background-color: $interactive-04;
     }
 
     &:active {
       transform: translate(-50%, -50%) scale(1.4285714286);
-      box-shadow: inset 0 0 0 2px $interactive-01;
+      box-shadow: inset 0 0 0 2px $interactive-04;
     }
   }
 
@@ -129,7 +130,7 @@
   }
 
   .#{$prefix}--slider__thumb:focus ~ .#{$prefix}--slider__filled-track {
-    background-color: $interactive-01;
+    background-color: $interactive-04;
   }
 
   // Disabled state
@@ -177,6 +178,7 @@
     color: $disabled-02;
     transition: none;
     cursor: not-allowed;
+    border: none;
 
     &:active,
     &:focus,

diff --git a/packages/components/src/components/toggle/_toggle.scss b/packages/components/src/components/toggle/_toggle.scss
@@ -315,6 +315,9 @@
     margin-left: carbon--rem(56px);
     @include type-style('body-short-01');
     user-select: none;
+    // top offset needed to vertically center absolutely positioned flex child in IE11
+    top: 50%;
+    transform: translateY(-50%);
   }
 
   //----------------------------------------------

diff --git a/packages/components/src/components/tooltip/tooltip--definition.hbs b/packages/components/src/components/tooltip/tooltip--definition.hbs
@@ -6,28 +6,28 @@
 -->
 {{!-- @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
-    aria-describedby="example-start"
+  <button 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 class="bx--assistive-text" id="example-start" role="tooltip">Brief description of the dotted, underlined word
+    above.</div>
 </div>
 <br>
 <div class="{{@root.prefix}}--tooltip--definition {{@root.prefix}}--tooltip--a11y">
-  <div
-    aria-describedby="example-center"
+  <button 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)
-  </div>
-  <div class="bx--assistive-text" id="example-center" role="tooltip">Brief description of the dotted, underlined word above.</div>
+  </button>
+  <div class="bx--assistive-text" id="example-center" role="tooltip">Brief description of the dotted, underlined word
+    above.</div>
 </div>
 <br>
 <div class="{{@root.prefix}}--tooltip--definition {{@root.prefix}}--tooltip--a11y">
-  <span
-    aria-describedby="example-end"
+  <button 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)
-  </span>
-  <div class="bx--assistive-text" id="example-end" role="tooltip">Brief description of the dotted, underlined word above.</div>
+  </button>
+  <div class="bx--assistive-text" id="example-end" role="tooltip">Brief description of the dotted, underlined word
+    above.</div>
 </div>
diff --git a/packages/components/src/globals/scss/_tooltip.scss b/packages/components/src/globals/scss/_tooltip.scss
@@ -21,6 +21,10 @@
   cursor: pointer;
   overflow: visible;
 
+  &:focus {
+    @include focus-outline('border');
+  }
+
   @if $tooltip-type == 'icon' {
     &:focus {
       outline: 1px solid transparent;

diff --git a/packages/elements/package.json b/packages/elements/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/elements",
   "description": "A collection of design elements in code for the IBM Design Language",
-  "version": "10.7.0-rc.0",
+  "version": "10.7.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -31,14 +31,14 @@
     "clean": "rimraf es lib umd && node tasks/clean.js"
   },
   "dependencies": {
-    "@carbon/colors": "10.5.0-rc.0",
+    "@carbon/colors": "10.5.0",
     "@carbon/grid": "10.6.0",
     "@carbon/icons": "10.6.0",
     "@carbon/import-once": "10.3.0",
     "@carbon/layout": "10.5.0",
     "@carbon/motion": "10.4.0",
-    "@carbon/themes": "10.7.0-rc.0",
-    "@carbon/type": "10.6.0-rc.0"
+    "@carbon/themes": "10.7.0",
+    "@carbon/type": "10.6.0"
   },
   "devDependencies": {
     "@carbon/bundler": "10.4.0",

diff --git a/packages/pictograms-react/package.json b/packages/pictograms-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/pictograms-react",
   "description": "React components for pictograms in digital and software products using the Carbon Design System",
-  "version": "10.7.0-rc.0",
+  "version": "10.7.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -33,7 +33,7 @@
   },
   "devDependencies": {
     "@carbon/icon-build-helpers": "0.2.0",
-    "@carbon/pictograms": "10.7.0-rc.0"
+    "@carbon/pictograms": "10.7.0"
   },
   "sideEffects": false
 }
diff --git a/packages/pictograms/package.json b/packages/pictograms/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/pictograms",
   "description": "Pictograms for digital and software products using the Carbon Design System",
-  "version": "10.7.0-rc.0",
+  "version": "10.7.0",
   "license": "Apache-2.0",
   "repository": "https://github.com/carbon-design-system/carbon/tree/master/packages/pictograms",
   "bugs": "https://github.com/carbon-design-system/carbon/issues",

diff --git a/packages/react-hooks/package.json b/packages/react-hooks/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react-hooks",
   "private": true,
-  "version": "10.1.0-rc.0",
+  "version": "10.1.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -30,7 +30,7 @@
     "@babel/core": "^7.5.5",
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
-    "@carbon/test-utils": "10.4.0-rc.0",
+    "@carbon/test-utils": "10.4.0",
     "@storybook/addon-actions": "^5.1.11",
     "@storybook/addon-links": "^5.1.11",
     "@storybook/addon-storysource": "^5.2.0",
@@ -39,7 +39,7 @@
     "autoprefixer": "^9.6.1",
     "babel-loader": "^8.0.6",
     "browserslist-config-carbon": "10.4.0",
-    "carbon-components": "10.7.0-rc.0",
+    "carbon-components": "10.7.0",
     "css-loader": "^3.2.0",
     "node-sass": "^4.12.0",
     "postcss-loader": "^3.0.0",