fix(Layout): add v10 layout tokens (#13783)

* fix(Layout): add v10 layout tokens

* test(Layout): add tests for spacing tokens

* fix(Themes): add layout tokens to theme map

* test(snapshot): update snapshots

---------

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -187,6 +187,13 @@ Array [
   "layerSelectedHover02",
   "layerSelectedHover03",
   "layerSelectedInverse",
+  "layout01",
+  "layout02",
+  "layout03",
+  "layout04",
+  "layout05",
+  "layout06",
+  "layout07",
   "linkInverse",
   "linkInverseActive",
   "linkInverseHover",

packages/icons-vue/package.json

@@ -34,8 +34,8 @@
     "@carbon/cli-reporter": "^10.6.0",
     "@carbon/icons": "^11.19.0",
     "fs-extra": "^10.0.0",
-    "rimraf": "^5.0.0",
     "prettier": "^2.8.8",
+    "rimraf": "^5.0.0",
     "rollup": "^2.79.1",
     "vue": "^2.6.8"
   },

packages/layout/__tests__/scss-test.js

@@ -8,7 +8,7 @@
  */
 
 import { SassRenderer } from '@carbon/test-utils/scss';
-import { spacing, fluidSpacing, container, iconSize } from '../src';
+import { spacing, fluidSpacing, container, iconSize, layout } from '../src';
 
 const { render } = SassRenderer.create(__dirname);
 
@@ -36,6 +36,10 @@ const iconSizeScale = iconSize.map((value, index) => {
   return [index, formatStep('icon-size', index + 1), value];
 });
 
+const layoutScale = layout.map((value, index) => {
+  return [index, formatStep('layout', index + 1), value];
+});
+
 describe('scss/layout.scss', () => {
   it.each(spacingScale)(
     'should export spacing step `%s`',
@@ -108,4 +112,22 @@ describe('scss/layout.scss', () => {
       expect(get('value').value).toBe(value);
     }
   );
+
+  it.each(layoutScale)(
+    'should export layout step `%s`',
+    async (_index, id, value) => {
+      const { get } = await render(`
+        @use 'sass:map';
+        @use 'sass:meta';
+        @use '../index.scss' as layout;
+
+        $variables: meta.module-variables('layout');
+        $key: get('key', map.has-key($variables, '${id}'));
+        $value: get('value', map.get($variables, '${id}'));
+      `);
+
+      expect(get('key').value).toBe(true);
+      expect(get('value').value).toBe(value);
+    }
+  );
 });

packages/layout/scss/_spacing.scss

@@ -7,3 +7,4 @@
 
 @forward './generated/fluid-spacing';
 @forward './generated/spacing';
+@forward './generated/layout';

packages/layout/src/index.js

@@ -131,6 +131,25 @@ export const fluidSpacing = [
   fluidSpacing04,
 ];
 
+// Layout
+// Deprecated
+export const layout01 = miniUnits(2);
+export const layout02 = miniUnits(3);
+export const layout03 = miniUnits(4);
+export const layout04 = miniUnits(6);
+export const layout05 = miniUnits(8);
+export const layout06 = miniUnits(12);
+export const layout07 = miniUnits(20);
+export const layout = [
+  layout01,
+  layout02,
+  layout03,
+  layout04,
+  layout05,
+  layout06,
+  layout07,
+];
+
 // Container
 export const container01 = miniUnits(3);
 export const container02 = miniUnits(4);

packages/layout/src/tokens.js

@@ -43,4 +43,14 @@ export const unstable_tokens = [
   // Icon sizes
   'iconSize01',
   'iconSize02',
+
+  // Layout
+  // Deprecated
+  'layout01',
+  'layout02',
+  'layout03',
+  'layout04',
+  'layout05',
+  'layout06',
+  'layout07',
 ];

packages/layout/tasks/build.js

@@ -15,7 +15,14 @@ const { reporter } = require('@carbon/cli-reporter');
 const { types: t, generate } = require('@carbon/scss-generator');
 const fs = require('fs-extra');
 const path = require('path');
-const { container, iconSize, spacing, fluidSpacing, sizes } = require('../lib');
+const {
+  container,
+  iconSize,
+  spacing,
+  fluidSpacing,
+  sizes,
+  layout,
+} = require('../lib');
 
 async function build() {
   reporter.info('Building scss files for layout...');
@@ -83,6 +90,12 @@ async function build() {
         return buildModulesTokenFile(fluidSpacing, 'fluid-spacing', '');
       },
     },
+    {
+      filepath: path.join(SCSS_DIR, '_layout.scss'),
+      builder() {
+        return buildModulesTokenFile(layout, 'layout');
+      },
+    },
   ];
 
   await fs.ensureDir(SCSS_DIR);

packages/styles/__tests__/compat-test.js

@@ -68,7 +68,6 @@ describe('@carbon/styles/scss/compat', () => {
     await expect(
       render(`
           @use '../../type';
-
           div {
             @include type.type-style('caption-01');
             @include type.type-style('caption-02');
@@ -84,4 +83,16 @@ describe('@carbon/styles/scss/compat', () => {
         `)
     ).resolves.not.toThrow();
   });
+
+  it('should export v10 layout tokens', async () => {
+    await expect(
+      render(`
+          @use '../../layout' as spacing;
+
+          div {
+            margin-right: spacing.$layout-01;
+          }
+        `)
+    ).resolves.not.toThrow();
+  });
 });

packages/styles/scss/__tests__/__snapshots__/spacing-test.js.snap

@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`@carbon/styles/scss/spacing Public API 1`] = `
+Object {
+  "variables": Object {
+    "fluid-spacing-01": 0,
+    "fluid-spacing-02": "2vw",
+    "fluid-spacing-03": "5vw",
+    "fluid-spacing-04": "10vw",
+    "layout": Object {
+      "layout-01": "1rem",
+      "layout-02": "1.5rem",
+      "layout-03": "2rem",
+      "layout-04": "3rem",
+      "layout-05": "4rem",
+      "layout-06": "6rem",
+      "layout-07": "10rem",
+    },
+    "layout-01": "1rem",
+    "layout-02": "1.5rem",
+    "layout-03": "2rem",
+    "layout-04": "3rem",
+    "layout-05": "4rem",
+    "layout-06": "6rem",
+    "layout-07": "10rem",
+    "spacing": Object {
+      "spacing-01": "0.125rem",
+      "spacing-02": "0.25rem",
+      "spacing-03": "0.5rem",
+      "spacing-04": "0.75rem",
+      "spacing-05": "1rem",
+      "spacing-06": "1.5rem",
+      "spacing-07": "2rem",
+      "spacing-08": "2.5rem",
+      "spacing-09": "3rem",
+      "spacing-10": "4rem",
+      "spacing-11": "5rem",
+      "spacing-12": "6rem",
+      "spacing-13": "10rem",
+    },
+    "spacing-01": "0.125rem",
+    "spacing-02": "0.25rem",
+    "spacing-03": "0.5rem",
+    "spacing-04": "0.75rem",
+    "spacing-05": "1rem",
+    "spacing-06": "1.5rem",
+    "spacing-07": "2rem",
+    "spacing-08": "2.5rem",
+    "spacing-09": "3rem",
+    "spacing-10": "4rem",
+    "spacing-11": "5rem",
+    "spacing-12": "6rem",
+    "spacing-13": "10rem",
+  },
+}
+`;

packages/styles/scss/__tests__/spacing-test.js

@@ -0,0 +1,31 @@
+/**
+ * Copyright IBM Corp. 2018, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+const { SassRenderer } = require('@carbon/test-utils/scss');
+
+const { render } = SassRenderer.create(__dirname);
+
+describe('@carbon/styles/scss/spacing', () => {
+  test('Public API', async () => {
+    const { get } = await render(`
+      @use 'sass:meta';
+      @use '../spacing';
+
+      $_: get('api', (
+        variables: meta.module-variables('spacing'),
+      ));
+    `);
+
+    const { value: api } = get('api');
+
+    expect(api).toMatchSnapshot();
+  });
+});

packages/styles/scss/_spacing.scss

@@ -8,4 +8,8 @@
 @forward '@carbon/layout/scss/spacing' show $spacing, $spacing-01, $spacing-02,
   $spacing-03, $spacing-04, $spacing-05, $spacing-06, $spacing-07, $spacing-08,
   $spacing-09, $spacing-10, $spacing-11, $spacing-12, $spacing-13,
-  $fluid-spacing-01, $fluid-spacing-02, $fluid-spacing-03, $fluid-spacing-04;
+  $fluid-spacing-01, $fluid-spacing-02, $fluid-spacing-03, $fluid-spacing-04,
+  // Deprecated
+  $layout,
+  $layout-01, $layout-02, $layout-03, $layout-04, $layout-05, $layout-06,
+  $layout-07;

packages/themes/src/g10.js

@@ -271,4 +271,13 @@ export {
   // Icon sizes
   iconSize01,
   iconSize02,
+  // Layout
+  // Deprecated ☠️
+  layout01,
+  layout02,
+  layout03,
+  layout04,
+  layout05,
+  layout06,
+  layout07,
 } from './white';

packages/themes/src/g100.js

@@ -278,4 +278,13 @@ export {
   // Icon sizes
   iconSize01,
   iconSize02,
+  // Layout
+  // Deprecated ☠️
+  layout01,
+  layout02,
+  layout03,
+  layout04,
+  layout05,
+  layout06,
+  layout07,
 } from './white';

packages/themes/src/g90.js

@@ -278,4 +278,13 @@ export {
   // Icon sizes
   iconSize01,
   iconSize02,
+  // Layout
+  // Deprecated ☠️
+  layout01,
+  layout02,
+  layout03,
+  layout04,
+  layout05,
+  layout06,
+  layout07,
 } from './white';

packages/themes/src/v10/g10.js

@@ -329,6 +329,15 @@ export {
   // Icon sizes
   iconSize01,
   iconSize02,
+  // Layout
+  // Deprecated ☠️
+  layout01,
+  layout02,
+  layout03,
+  layout04,
+  layout05,
+  layout06,
+  layout07,
 } from './white';
 
 // Deprecated ☠️

packages/themes/src/v10/g100.js

@@ -328,6 +328,15 @@ export {
   // Icon sizes
   iconSize01,
   iconSize02,
+  // Layout
+  // Deprecated ☠️
+  layout01,
+  layout02,
+  layout03,
+  layout04,
+  layout05,
+  layout06,
+  layout07,
 } from './white';
 
 // Deprecated ☠️

packages/themes/src/v10/g90.js

@@ -330,6 +330,15 @@ export {
   // Icon sizes
   iconSize01,
   iconSize02,
+  // Layout
+  // Deprecated ☠️
+  layout01,
+  layout02,
+  layout03,
+  layout04,
+  layout05,
+  layout06,
+  layout07,
 } from './white';
 
 // Deprecated ☠️

packages/themes/src/v10/white.js

@@ -332,6 +332,15 @@ export {
   // Icon sizes
   iconSize01,
   iconSize02,
+  // Layout
+  // Deprecated ☠️
+  layout01,
+  layout02,
+  layout03,
+  layout04,
+  layout05,
+  layout06,
+  layout07,
 } from '@carbon/layout';
 
 // Deprecated ☠️

packages/themes/src/white.js

@@ -274,4 +274,13 @@ export {
   // Icon sizes
   iconSize01,
   iconSize02,
+  // Layout
+  // Deprecated ☠️
+  layout01,
+  layout02,
+  layout03,
+  layout04,
+  layout05,
+  layout06,
+  layout07,
 } from '@carbon/layout';