Skip to content

Commit

Permalink
feat(project): update elements packages to v11 layout (#11078)
Browse files Browse the repository at this point in the history 
* feat(colors): move unstable swatches to stable

BREAKING CHANGE: the `orange` and `yellow` exports now refer to swatches instead
of colors

* refactor(styles): rename carbon--aspect-ratios to aspect-ratios

* feat(grid): move modules to scss directory

BREAKING CHANGE: this module now requires Dart Sass, all files have been
updated to Sass Modules

* feat(icons): remove scss directory

BREAKING CHANGE: the icons package no longer ships scss files. These styles are
now available in the styles package.

* feat(project): remove import-once package

* feat(layout): move to Sass Modules, remove layout exports

BREAKING CHANGE: the layout exports are no longer available in JavaScript. The
scss files have been updated to use Sass Modules.

* feat(motion): remove scss directory

BREAKING CHANGE: the scss directory has been removed, use the index.scss
entrypoint instead

* docs(migration): remove pictograms from changes

* feat(themes): remove deprecated code and update layout

BREAKING CHANGE: the exports in JavaScript have been replaced with the latest
tokens from v11. The files in the scss directory now use Sass Modules and have
been updated.

* fix(grid): update package to reference new scss entrypoints

* feat(type): update package layout

BREAKING CHANGE: this project has been updated to use Sass Modules and the
entrypoints for scss files have been updated or removed

* refactor(styles): update modules usage to new entrypoint

* fix(styles,themes): remove modules paths

* test(project): update snapshot and test files for elements

* docs(themes): update preview examples

* fix(themes): add back in white theme export

* fix(grid): remove import-specific mixins file

* docs(project): update elements previews to use v10 deps

* fix(type,layout): update elements preview examples

* docs(react): update styles for Data Table

* test(elements): update snapshot

* chore: update elements imports

* refactor(elements): remove build and clean tasks

* docs: update element example lock files

* fix(styles): update styles to use grid scss folder
  • Loading branch information
@joshblack
joshblack authored Mar 29, 2022
1 parent 6d91df4 commit 9ed7404
Show file tree
Hide file tree
Showing 190 changed files with 2,991 additions and 20,846 deletions.
333 changes: 145 additions & 188 deletions docs/migration/v11.md
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions packages/carbon-components-react/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@
"@rollup/plugin-node-resolve": "^13.0.0",
"babel-plugin-dev-expression": "^0.2.3",
"babel-preset-carbon": "^0.2.0",
"browserslist-config-carbon": "^10.6.1",
"fs-extra": "^10.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
Expand Down
2 changes: 1 addition & 1 deletion packages/colors/__tests__/__snapshots__/colors-test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ Object {
}
`;

exports[`unstable_hoverColors 1`] = `
exports[`hoverColors 1`] = `
Object {
"blackHover": "#212121",
"blueHover": Object {
Expand Down
0 ...ests__/__snapshots__/modules-test.js.snap → ...__tests__/__snapshots__/scss-test.js.snap
View file
File renamed without changes.
6 changes: 3 additions & 3 deletions packages/colors/__tests__/colors-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@

'use strict';

import { colors, unstable_hoverColors } from '../src';
import { colors, hoverColors } from '../src';

test('colors', () => {
expect(colors).toMatchSnapshot();
});

test('unstable_hoverColors', () => {
expect(unstable_hoverColors).toMatchSnapshot();
test('hoverColors', () => {
expect(hoverColors).toMatchSnapshot();
});
28 changes: 0 additions & 28 deletions packages/colors/__tests__/modules-test.js
View file

This file was deleted.

64 changes: 11 additions & 53 deletions packages/colors/__tests__/scss-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,62 +9,20 @@

'use strict';

const { createSassRenderer, types } = require('@carbon/test-utils/scss');
const { SassRenderer } = require('@carbon/test-utils/scss');

const render = createSassRenderer(__dirname);
const { render } = SassRenderer.create(__dirname);

describe('colors.scss', () => {
it('should emit default variable initializations when mixins are included', async () => {
const { calls } = await render(`
@import '../scss/mixins';
describe('@carbon/colors', () => {
test('Public API', async () => {
const { getValue } = await render(`
@use 'sass:meta';
@use '../index.scss' as colors;
$test: test(mixin-exists(carbon--colors));
$test: test(global-variable-exists(carbon--blue-50));
`);
expect(calls[0][0].getValue()).toBe(true);
expect(calls[1][0].getValue()).toBe(true);
});

it('should include color variables as globals if the mixin is called', async () => {
const { calls } = await render(`
@import '../scss/mixins';
@include carbon--colors();
$test: test(variable-exists(carbon--blue-50));
$test: test(global-variable-exists(carbon--blue-50));
`);
expect(calls[0][0].getValue()).toBe(true);
expect(calls[1][0].getValue()).toBe(true);
});

it('should include color variables in the default entrypoint', async () => {
const { calls } = await render(`
@import '../scss/colors';
$test: test(mixin-exists(carbon--colors));
$test: test(variable-exists(carbon--blue-50));
$test: test(global-variable-exists(carbon--blue-50));
`);
expect(calls[0][0].getValue()).toBe(true);
expect(calls[1][0].getValue()).toBe(true);
expect(calls[2][0].getValue()).toBe(true);
});

describe('deprecated', () => {
it('should provide a map of color values', async () => {
const { calls } = await render(`
@import '../scss/colors';
$map: test($ibm-color-map);
$swatch: test(map-get($ibm-color-map, 'black'));
$value: test(map-get(map-get($ibm-color-map, 'black'), 100));
$null: test(map-get($ibm-color-map, black));
`);
$_: get-value(meta.module-variables('colors'));
`);

expect(calls[0][0]).toBeInstanceOf(types.Map);
expect(calls[1][0]).toBeInstanceOf(types.Map);
expect(calls[2][0]).toBeInstanceOf(types.Color);
expect(calls[3][0]).toBeInstanceOf(types.Null);
});
const variables = getValue(0);
expect(variables).toMatchSnapshot();
});
});
1 change: 1 addition & 0 deletions packages/colors/examples/preview/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"develop": "parcel index.html --no-cache"
},
"devDependencies": {
"@carbon/colors": "^10.37.1",
"@parcel/transformer-sass": "^2.0.1",
"parcel": "^2.0.1"
},
Expand Down
8 changes: 8 additions & 0 deletions packages/colors/examples/preview/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,6 +282,13 @@ __metadata:
languageName: node
linkType: hard

"@carbon/colors@npm:^10.37.1":
version: 10.37.1
resolution: "@carbon/colors@npm:10.37.1"
checksum: 7cdc38370d1a51d968f28de951a180211b33db14f6dee5cd55c1d965ebe74c19c55924898df7c344f72dfa2c46a764ad16696038911e77b43d9b701d34c56514
languageName: node
linkType: hard

"@gar/promisify@npm:^1.0.1":
version: 1.1.2
resolution: "@gar/promisify@npm:1.1.2"
Expand Down Expand Up @@ -1949,6 +1956,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "colors-examples-preview@workspace:."
dependencies:
"@carbon/colors": ^10.37.1
"@parcel/transformer-sass": ^2.0.1
parcel: ^2.0.1
react: ^16.13.1
Expand Down
12 changes: 5 additions & 7 deletions packages/colors/src/colors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const yellow70 = '#684e00';
export const yellow80 = '#483700';
export const yellow90 = '#302400';
export const yellow100 = '#1c1500';
const unstable_yellow = {
const yellow = {
10: yellow10,
20: yellow20,
30: yellow30,
Expand All @@ -35,7 +35,6 @@ const unstable_yellow = {
90: yellow90,
100: yellow100,
};
export const yellow = yellow30;

export const yellow10Hover = '#f8e6a0';
export const yellow20Hover = '#fccd27';
Expand Down Expand Up @@ -70,8 +69,7 @@ export const orange70 = '#8a3800';
export const orange80 = '#5e2900';
export const orange90 = '#3e1a00';
export const orange100 = '#231000';
export const orange = orange40;
const unstable_orange = {
const orange = {
10: orange10,
20: orange20,
30: orange30,
Expand Down Expand Up @@ -578,18 +576,18 @@ export const colors = {
gray,
green,
magenta,
orange: unstable_orange,
orange,
purple,
red,
teal,
warmGray,
white: {
0: white,
},
yellow: unstable_yellow,
yellow,
};

export const unstable_hoverColors = {
export const hoverColors = {
whiteHover,
blackHover,
blueHover,
Expand Down
146 changes: 3 additions & 143 deletions packages/colors/tasks/build.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,20 +9,19 @@

'use strict';

const { colors, unstable_hoverColors: hoverColors } = require('@carbon/colors');
const { colors, hoverColors } = require('@carbon/colors');
const { types: t, generate } = require('@carbon/scss-generator');
const { paramCase } = require('change-case');
const fs = require('fs-extra');
const path = require('path');

const FILE_BANNER = t.Comment(` Code generated by @carbon/colors. DO NOT EDIT.
Copyright IBM Corp. 2018, 2020
Copyright IBM Corp. 2018, 2021
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
`);
const NAMESPACE = 'carbon';

async function build() {
// Colors has the shape:
Expand Down Expand Up @@ -73,137 +72,6 @@ async function build() {
return acc.concat(...values);
}, []);

const colorMapProperties = t.SassMap({
properties: Object.keys(colors).flatMap((swatch) => {
const value = t.SassMap({
properties: Object.keys(colors[swatch]).map((grade) => {
return t.SassMapProperty({
key: t.Identifier(grade),
value: t.SassColor(colors[swatch][grade]),
});
}),
});

if (swatch === paramCase(swatch)) {
return [
t.SassMapProperty({
key: t.Identifier(swatch),
value,
quoted: true,
}),
];
}

return [
t.SassMapProperty({
key: t.Identifier(paramCase(swatch)),
value,
quoted: true,
}),
t.SassMapProperty({
key: t.Identifier(swatch),
value,
quoted: true,
}),
];
}),
});

const prefixes = ['ibm-color__', 'carbon--', ''];
const variables = prefixes.flatMap((prefix) => {
return colorValues.flatMap(({ swatch, grade, value }) => {
return t.Assignment({
id: t.Identifier(`${prefix}${swatch}-${grade}`),
init: t.SassColor(value),
default: true,
});
});
});

for (const color of hoverColorValues) {
variables.push(
t.Assignment({
id: t.Identifier(color.name),
init: t.SassColor(color.value),
default: true,
})
);
}

variables.push(
t.Assignment({
id: t.Identifier('ibm-color-map'),
init: colorMapProperties,
default: true,
}),
t.Assignment({
id: t.Identifier('carbon--colors'),
init: colorMapProperties,
default: true,
}),
t.Newline()
);

const ibmColorsMixin = t.SassMixin({
id: t.Identifier('ibm--colors'),
body: t.BlockStatement([
...colorValues.flatMap(({ swatch, grade, value }) => {
return t.Assignment({
id: t.Identifier(`ibm-color__${swatch}-${grade}`),
init: t.SassColor(value),
global: true,
});
}),
t.Assignment({
id: t.Identifier('ibm-color-map'),
init: colorMapProperties,
global: true,
}),
]),
});

const carbonColorsMixin = t.SassMixin({
id: t.Identifier('carbon--colors'),
body: t.BlockStatement([
...colorValues.flatMap(({ swatch, grade, value }) => {
return t.Assignment({
id: t.Identifier(`carbon--${swatch}-${grade}`),
init: t.SassColor(value),
global: true,
});
}),
t.Assignment({
id: t.Identifier('carbon--colors'),
init: colorMapProperties,
global: true,
}),
]),
});

const mixins = t.StyleSheet([
FILE_BANNER,
...variables,
t.Comment(`/ Define color variables
/ @access public
/ @group @carbon/colors
/ @deprecated Use \`$carbon--colors\` going forward`),
ibmColorsMixin,
t.Newline(),
t.Comment(`/ Define color variables
/ @access public
/ @group @carbon/colors`),
carbonColorsMixin,
]);

const entrypoint = t.StyleSheet([
FILE_BANNER,
t.SassImport('./mixins'),
t.Comment(' Deprecated ☠️'),
t.SassMixinCall(t.Identifier('ibm--colors')),
t.Comment(' Preferred'),
t.SassMixinCall(t.Identifier(`${NAMESPACE}--colors`)),
]);

const sassModule = t.StyleSheet([
FILE_BANNER,
t.Newline(),
Expand Down Expand Up @@ -265,17 +133,9 @@ async function build() {
}),
]);

const SCSS_DIR = path.resolve(__dirname, '../scss');
const COLORS_ENTRYPOINT = path.join(SCSS_DIR, 'colors.scss');
const INDEX_ENTRYPOINT = path.join(SCSS_DIR, 'index.scss');
const MIXINS_ENTRYPOINT = path.join(SCSS_DIR, 'mixins.scss');
const MODULES_ENTRYPOINT = path.resolve(SCSS_DIR, '..', 'index.scss');
const MODULES_ENTRYPOINT = path.resolve(__dirname, '..', 'index.scss');

await fs.ensureDir(SCSS_DIR);
await Promise.all([
fs.writeFile(COLORS_ENTRYPOINT, generate(entrypoint).code),
fs.writeFile(INDEX_ENTRYPOINT, generate(entrypoint).code),
fs.writeFile(MIXINS_ENTRYPOINT, generate(mixins).code),
fs.writeFile(MODULES_ENTRYPOINT, generate(sassModule).code),
]);
}
Expand Down
Loading

0 comments on commit 9ed7404

Please sign in to comment.