feat(elements): update colors, layout, and motion packages with exper…

…imental Sass Modules (#7546) * refactor(colors): move Sass Modules to colors/index.scss * feat(layout): add support for sass modules * feat(motion): add support for sass modules * docs(migration): add initial 11.x docs for sass modules * chore(components): update sass check to ignore vendor files * chore(colors): update modules test to new location Co-authored-by: TJ Egan <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jan 25, 2021 · adb7cd1 · adb7cd1
1 parent 9e4485a
commit adb7cd1
Show file tree

Hide file tree

Showing 19 changed files with 516 additions and 2,268 deletions.
diff --git a/docs/migration/11.x-layout.md b/docs/migration/11.x-layout.md
@@ -0,0 +1,24 @@
+# Layout
+
+**Note: everything in this file is a work-in-progress and will be changed.**
+
+## Changes
+
+| v10                               | v11                       |
+| --------------------------------- | ------------------------- |
+| `$carbon--base-font-size`         | `$base-font-size`         |
+| `carbon--rem`                     | `rem`                     |
+| `carbon--em`                      | `em`                      |
+| `$carbon--grid-gutter`            | `$grid-gutter`            |
+| `$carbon--grid-gutter--condensed` | `$grid-gutter--condensed` |
+| `$carbon--grid-breakpoints`       | `$grid-breakpoints`       |
+| `carbon--breakpoint-next`         | `breakpoint-next`         |
+| `carbon--breakpoint-prev`         | `breakpoint-prev`         |
+| `carbon--is-smallest-breakpoint`  | `is-smallest-breakpoint`  |
+| `carbon--largest-breakpoint-name` | `largest-breakpoint-name` |
+| `carbon--breakpoint-infix`        | `breakpoint-infix`        |
+| `carbon--breakpoint-up`           | `breakpoint-up`           |
+| `carbon--breakpoint-down`         | `breakpoint-down`         |
+| `carbon--breakpoint-between`      | `breakpoint-between`      |
+| `carbon--largest-breakpoint`      | `largest-breakpoint`      |
+| `carbon--breakpoint`              | `breakpoint`              |
diff --git a/docs/migration/11.x-motion.md b/docs/migration/11.x-motion.md
@@ -0,0 +1,11 @@
+# Motion
+
+**Note: everything in this file is a work-in-progress and will be changed.**
+
+## Changes
+
+| v10                        | v11        |
+| -------------------------- | ---------- |
+| `$carbon--easings`         | `$easings` |
+| `@function carbon--motion` | `motion`   |
+| `@mixin carbon--motion`    | `motion`   |
diff --git a/packages/colors/.gitignore b/packages/colors/.gitignore
@@ -1 +1,2 @@
 scss
+index.scss
diff --git a/packages/colors/__tests__/__snapshots__/modules-test.js.snap b/packages/colors/__tests__/__snapshots__/modules-test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`modules.scss Public API 1`] = `
+exports[`@carbon/colors Public API 1`] = `
 Object {
   "black": "#000000",
   "black-100": "#000000",

diff --git a/packages/colors/__tests__/modules-test.js b/packages/colors/__tests__/modules-test.js
@@ -13,13 +13,13 @@ const { SassRenderer } = require('@carbon/test-utils/scss');
 
 const { render } = SassRenderer.create(__dirname);
 
-describe('modules.scss', () => {
+describe('@carbon/colors', () => {
   test('Public API', async () => {
     const { getValue } = await render(`
       @use 'sass:meta';
-      @use '../scss/module';
+      @use '../index.scss' as colors;
 
-      $_: get-value(meta.module-variables('module'));
+      $_: get-value(meta.module-variables('colors'));
     `);
 
     const variables = getValue(0);