Merge branch 'master' into storybook-updates

carbon-design-system · Feb 24, 2021 · c9152d3 · c9152d3
2 parents ee77772 + 0cfcf7c
commit c9152d3
Show file tree

Hide file tree

Showing 33 changed files with 536 additions and 84 deletions.
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/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