diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap index 1a1dd1143eb8..f7038f43f48c 100644 --- a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/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", diff --git a/packages/icons-vue/package.json b/packages/icons-vue/package.json index 62b0b673387e..c113b841aad4 100644 --- a/packages/icons-vue/package.json +++ b/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" }, diff --git a/packages/layout/__tests__/scss-test.js b/packages/layout/__tests__/scss-test.js index 25b304f5476c..ffdb74c00b3f 100644 --- a/packages/layout/__tests__/scss-test.js +++ b/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); + } + ); }); diff --git a/packages/layout/scss/_spacing.scss b/packages/layout/scss/_spacing.scss index 30608d018601..2b7ca37277ec 100644 --- a/packages/layout/scss/_spacing.scss +++ b/packages/layout/scss/_spacing.scss @@ -7,3 +7,4 @@ @forward './generated/fluid-spacing'; @forward './generated/spacing'; +@forward './generated/layout'; diff --git a/packages/layout/src/index.js b/packages/layout/src/index.js index 938e5895df7f..e5e5d4469249 100644 --- a/packages/layout/src/index.js +++ b/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); diff --git a/packages/layout/src/tokens.js b/packages/layout/src/tokens.js index 830a153041a4..41c51f3a2f5b 100644 --- a/packages/layout/src/tokens.js +++ b/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', ]; diff --git a/packages/layout/tasks/build.js b/packages/layout/tasks/build.js index 28bdcc3c1c50..73f44725d91c 100644 --- a/packages/layout/tasks/build.js +++ b/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); diff --git a/packages/styles/__tests__/compat-test.js b/packages/styles/__tests__/compat-test.js index e2559bcde660..22b576a409f7 100644 --- a/packages/styles/__tests__/compat-test.js +++ b/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(); + }); }); diff --git a/packages/styles/scss/__tests__/__snapshots__/spacing-test.js.snap b/packages/styles/scss/__tests__/__snapshots__/spacing-test.js.snap new file mode 100644 index 000000000000..c140507f2884 --- /dev/null +++ b/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", + }, +} +`; diff --git a/packages/styles/scss/__tests__/spacing-test.js b/packages/styles/scss/__tests__/spacing-test.js new file mode 100644 index 000000000000..4cdeab532ebb --- /dev/null +++ b/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(); + }); +}); diff --git a/packages/styles/scss/_spacing.scss b/packages/styles/scss/_spacing.scss index 43b973ea52e2..fa7943a4ac12 100644 --- a/packages/styles/scss/_spacing.scss +++ b/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; diff --git a/packages/themes/src/g10.js b/packages/themes/src/g10.js index 93c14bfa1239..e4b052420d76 100644 --- a/packages/themes/src/g10.js +++ b/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'; diff --git a/packages/themes/src/g100.js b/packages/themes/src/g100.js index 96a9f70cd719..23d342a6eebc 100644 --- a/packages/themes/src/g100.js +++ b/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'; diff --git a/packages/themes/src/g90.js b/packages/themes/src/g90.js index b0472f43f155..c980dab52609 100644 --- a/packages/themes/src/g90.js +++ b/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'; diff --git a/packages/themes/src/v10/g10.js b/packages/themes/src/v10/g10.js index 1d90bd4f0ef9..210e2df2061f 100644 --- a/packages/themes/src/v10/g10.js +++ b/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 ☠️ diff --git a/packages/themes/src/v10/g100.js b/packages/themes/src/v10/g100.js index 50233976ffc5..fd4588a70cf1 100644 --- a/packages/themes/src/v10/g100.js +++ b/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 ☠️ diff --git a/packages/themes/src/v10/g90.js b/packages/themes/src/v10/g90.js index 3c39e2c816f9..9d9f6d50bebe 100644 --- a/packages/themes/src/v10/g90.js +++ b/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 ☠️ diff --git a/packages/themes/src/v10/white.js b/packages/themes/src/v10/white.js index c739f4551791..9da5c30641d9 100644 --- a/packages/themes/src/v10/white.js +++ b/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 ☠️ diff --git a/packages/themes/src/white.js b/packages/themes/src/white.js index 292600da28b5..4c81a7758835 100644 --- a/packages/themes/src/white.js +++ b/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';