Merge branch 'master' into pagination-overflow

carbon-design-system · Feb 25, 2021 · ed4ae1f · ed4ae1f
2 parents 7c75270 + 0310add
commit ed4ae1f
Show file tree

Hide file tree

Showing 130 changed files with 1,115 additions and 338 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -9,7 +9,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js 14.x
-        uses: actions/[email protected].4
+        uses: actions/[email protected].5
         with:
           node-version: '14.x'
       - name: Run yarn dedupe
@@ -20,7 +20,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js 14.x
-        uses: actions/[email protected].4
+        uses: actions/[email protected].5
         with:
           node-version: '14.x'
       - name: Install dependencies
@@ -33,7 +33,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js 14.x
-        uses: actions/[email protected].4
+        uses: actions/[email protected].5
         with:
           node-version: '14.x'
       - name: Install dependencies

diff --git a/.github/workflows/deploy-react-storybook.yml b/.github/workflows/deploy-react-storybook.yml
@@ -18,7 +18,7 @@ jobs:
     steps:
       - uses: actions/checkout@master
       - name: Use Node.js 14.x
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2.1.5
         with:
           node-version: '14.x'
       - name: Install dependencies

diff --git a/.github/workflows/deploy-vanilla-devenv.yml b/.github/workflows/deploy-vanilla-devenv.yml
@@ -17,7 +17,7 @@ jobs:
     steps:
       - uses: actions/checkout@master
       - name: Use Node.js 14.x
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2.1.5
         with:
           node-version: '14.x'
       - name: Install dependencies

diff --git a/.github/workflows/nightly-release.yml b/.github/workflows/nightly-release.yml
@@ -11,7 +11,7 @@ jobs:
     steps:
       - uses: actions/checkout@master
       - name: Use Node.js 14.x
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2.1.5
         with:
           node-version: '14.x'
       - name: Install dependencies

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -14,7 +14,7 @@ jobs:
       - uses: actions/checkout@v1
 
       - name: Use Node.js 14.x
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2.1.5
         with:
           node-version: '14.x'
           registry-url: 'https://registry.npmjs.org'

diff --git a/.github/workflows/sync-generated-files.yml b/.github/workflows/sync-generated-files.yml
@@ -9,7 +9,7 @@ jobs:
     steps:
       - uses: actions/checkout@v1
       - name: Use Node.js 14.x
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2.1.5
         with:
           node-version: '14.x'
       - name: Install dependencies

diff --git a/.yarn/cache/@emotion-core-npm-10.0.27-4cad5524e3-e64cde1542.zip b/.yarn/cache/@emotion-core-npm-10.0.27-4cad5524e3-e64cde1542.zip
diff --git a/.yarn/cache/@emotion-core-npm-10.1.1-f084e0eeac-78fec4a705.zip b/.yarn/cache/@emotion-core-npm-10.1.1-f084e0eeac-78fec4a705.zip
diff --git a/.yarn/cache/@emotion-is-prop-valid-npm-0.8.8-261a0f2426-4a6993c4e6.zip b/.yarn/cache/@emotion-is-prop-valid-npm-0.8.8-261a0f2426-4a6993c4e6.zip
diff --git a/.yarn/cache/@storybook-client-logger-npm-6.1.18-3244b76cb4-acf8cf6b58.zip b/.yarn/cache/@storybook-client-logger-npm-6.1.18-3244b76cb4-acf8cf6b58.zip
diff --git a/.yarn/cache/@storybook-theming-npm-6.1.18-86b59dec65-395a079c4e.zip b/.yarn/cache/@storybook-theming-npm-6.1.18-86b59dec65-395a079c4e.zip
diff --git a/.yarn/cache/flatpickr-npm-4.6.9-9928816e33-ffcbe9ab04.zip b/.yarn/cache/flatpickr-npm-4.6.9-9928816e33-ffcbe9ab04.zip
diff --git a/.yarn/cache/path-to-regexp-npm-2.4.0-ce02fd84d9-643c15bf32.zip b/.yarn/cache/path-to-regexp-npm-2.4.0-ce02fd84d9-643c15bf32.zip
diff --git a/.yarn/cache/path-to-regexp-npm-6.2.0-efbac3c1ff-4116de71f5.zip b/.yarn/cache/path-to-regexp-npm-6.2.0-efbac3c1ff-4116de71f5.zip
diff --git a/...ished-npm-3.4.2-ef13ba5bfe-a8c3f0961e.zip → ...ished-npm-3.7.1-41b09aa23f-2483fc6957.zip b/...ished-npm-3.4.2-ef13ba5bfe-a8c3f0961e.zip → ...ished-npm-3.7.1-41b09aa23f-2483fc6957.zip
diff --git a/.yarn/cache/ts-dedent-npm-2.0.0-c118e16591-386cff404a.zip b/.yarn/cache/ts-dedent-npm-2.0.0-c118e16591-386cff404a.zip
diff --git a/docs/migration/11.x-carbon-components.md b/docs/migration/11.x-carbon-components.md
@@ -0,0 +1,65 @@
+# `carbon-components`
+
+**Note: everything in this file is a work-in-progress and will be changed.**
+
+## Overview
+
+- Carbon now uses [Dart Sass](https://npmjs.com/package/sass) along with Sass
+  Modules
+- File paths have been renamed to provide shorter paths and more intuitive ways
+  to get access to common variables, mixins, functions, and more.
+- Prefixed variables, functions, and mixins have been renamed as part of our
+  migration to Sass Modules
+
+## Files
+
+| Filename                                                        | v11                                     |
+| --------------------------------------------------------------- | --------------------------------------- |
+| `scss/globals`                                                  |                                         |
+| `scss/globals/fonts/*`                                          | Removed                                 |
+| `scss/globals/grid/_grid.scss`                                  | `scss/_grid.scss`                       |
+| `scss/globals/scss`                                             | `scss`                                  |
+| `scss/globals/scss/vendor/*`                                    | Removed                                 |
+| `scss/globals/scss/_colors.scss`                                | `scss/_colors.scss`                     |
+| `scss/globals/scss/_component-tokens.scss`                      |                                         |
+| `scss/globals/scss/_css--body.scss`                             |                                         |
+| `scss/globals/scss/_css--font-face.scss`                        |                                         |
+| `scss/globals/scss/_css--helpers.scss`                          |                                         |
+| `scss/globals/scss/_css--reset.scss`                            |                                         |
+| `scss/globals/scss/_deprecate.scss`                             |                                         |
+| `scss/globals/scss/_feature-flags.scss`                         |                                         |
+| `scss/globals/scss/_functions.scss`                             |                                         |
+| `scss/globals/scss/_helper-classes.scss`                        |                                         |
+| `scss/globals/scss/_helper-mixins.scss`                         |                                         |
+| `scss/globals/scss/_import-once.scss`                           |                                         |
+| `scss/globals/scss/_keyframes.scss`                             |                                         |
+| `scss/globals/scss/_layer.scss`                                 |                                         |
+| `scss/globals/scss/_layout.scss`                                |                                         |
+| `scss/globals/scss/_mixins.scss`                                |                                         |
+| [`scss/globals/scss/_motion.scss`](#scssglobalsscss_motionscss) | `scss/_motion.scss`                     |
+| `scss/globals/scss/_spacing.scss`                               |                                         |
+| `scss/globals/scss/_theme-tokens.scss`                          |                                         |
+| `scss/globals/scss/_theme.scss`                                 |                                         |
+| `scss/globals/scss/_tooltip.scss`                               |                                         |
+| `scss/globals/scss/_typography.scss`                            |                                         |
+| `scss/globals/scss/_vars.scss`                                  |                                         |
+| `scss/globals/scss/styles.scss`                                 | `/index.scss`, require package directly |
+| `scss/components`                                               |                                         |
+
+### `scss/globals/scss/_motion.scss`
+
+| v10                        | v11 |
+| :------------------------- | :-- |
+| `$carbon--ease-in`         |     |
+| `$carbon--ease-out`        |     |
+| `$carbon--standard-easing` |     |
+| `$transition--base`        |     |
+| `$transition--expansion`   |     |
+| `$duration--fast-01`       |     |
+| `$duration--fast-02`       |     |
+| `$duration--moderate-01`   |     |
+| `$duration--moderate-02`   |     |
+| `$duration--slow-01`       |     |
+| `$duration--slow-02`       |     |
+| `@function motion`         |     |
+| `@mixin motion`            |     |
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -155,7 +155,7 @@
     "mock-raf": "^1.0.0",
     "node-sass": "^4.13.1",
     "nodemon": "^1.18.7",
-    "path-to-regexp": "^2.2.0",
+    "path-to-regexp": "^6.2.0",
     "portscanner": "^2.2.0",
     "postcss-custom-properties": "^9.0.0",
     "postcss-loader": "^3.0.0",

diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
@@ -212,6 +212,10 @@
     }
   }
 
+  .#{$prefix}--btn--icon-only.#{$prefix}--btn--selected {
+    background: $selected-ui;
+  }
+
   .#{$prefix}--btn path[data-icon-path='inner-path'] {
     fill: none;
   }

diff --git a/packages/components/src/components/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss
@@ -749,9 +749,10 @@ $list-box-menu-width: rem(300px);
     border-bottom-color: $selected-light-ui;
   }
 
-  .#{$prefix}--list-box__menu-item--active:hover {
-    background-color: $hover-ui;
-    border-bottom-color: $hover-ui;
+  .#{$prefix}--list-box__menu-item--active:hover,
+  .#{$prefix}--list-box__menu-item--active.#{$prefix}--list-box__menu-item--highlighted {
+    background-color: $hover-selected-ui;
+    border-bottom-color: $hover-selected-ui;
   }
 
   .#{$prefix}--list-box__menu-item--active