Skip to content

Commit

Permalink
Merge pull request #1850 from chanzuckerberg/release-v13.11.0
Browse files Browse the repository at this point in the history
## [13.11.0](v13.11.0-alpha.0...v13.11.0) (2024-02-20)

[Storybook](https://61313967cde49b003ae2a860-xfzakymyle.chromatic.com/)

### Features

* **script:** add import from figma script ([#1844](#1844)) ([9ed90e5](9ed90e5))
* **Select:** enable multi-select ([ced70d5](ced70d5))
* **Select:** add handling for long text in select field ([7c79a6e](7c79a6e))

### Bug Fixes

* **PopoverListItem:** adjust size of list item when selected ([0496f56](0496f56))
* **Select:** set trigger type to button to prevent submits ([#1843](#1843)) ([d7ea037](d7ea037))
  • Loading branch information
booc0mtaco committed Feb 20, 2024
2 parents 49c5b75 + 6ebce18 commit 7bffc1a
Show file tree
Hide file tree
Showing 19 changed files with 3,641 additions and 2,939 deletions.
2 changes: 1 addition & 1 deletion .eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
},
"overrides": [
{
"files": ["*.test.ts", "*.test.tsx", "**/test/**"],
"files": ["*.test.{js,ts}", "*.test.tsx", "**/test/**"],
"plugins": ["jest"],
"extends": ["plugin:jest/recommended"],
"env": {
Expand Down
29 changes: 24 additions & 5 deletions .github/workflows/test.yml
Original file line number Diff line number Diff line change
Expand Up @@ -102,10 +102,29 @@ jobs:
- name: Build design tokens 🛠️
run: yarn build:tokens

- name: Lint Commit Messages 👕
uses: wagoid/commitlint-github-action@v5
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

- name: Lint Javascript + SCSS 👕
run: yarn run lint --max-warnings=0

commitlint:
name: Lint Commit Messages 👕
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
with:
fetch-depth: 0
- name: Setup node 😻
uses: actions/setup-node@v3
with:
node-version-file: '.node-version'
cache: 'yarn'
- name: Install Dependencies 🧶
run: yarn install --immutable
- name: Validate commits commitlint
# This workflow can also be triggered via "workflow_call".
# Since it's a push event we have access to these properties https://docs.github.com/en/webhooks/webhook-events-and-payloads#push
if: github.event_name == 'push'
run: |
COMMIT_COUNT=$(echo '${{ toJSON(github.event.commits) }}' | jq length)
echo "Number of commits in the push: $COMMIT_COUNT"
yarn commitlint --from HEAD~$COMMIT_COUNT --to HEAD --verbose
33 changes: 32 additions & 1 deletion .storybook/components/Docs/Guidelines/Theming.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,36 @@ Once run, you will have a set of theme files written to the configured `dest` pa

To use, add this file to your core app root file **after** where the imported EDS's `@chanzuckerberg/eds/index.css` file is inserted.

### eds-import-from-Figma

Command to run: `npx eds-import-from-figma`

Designers can define and tweak the values of a custom theme. For this reason, we want to automate the application of those changes to the project's existing theme file.

To use this command, there are a few prerequisites:

* In Figma, install the [Export/Import Variables Plugin][export-import-plugin].

With the prerequisites set up, you can download a JSON file, containing the existing token definitions and values. Here's how:

* Open the design(s) in Figma
* Open the Resources Panel in the toolbar (or use <kbd>Shift + I</kbd>)
* Activate the "Export/Import Variables" plugin by first clicking the "Plugins" tab, then the "Export/Import Variables" option.
* Once it opens, click the "Export..." button for the Listed collections and save to your local machine
* Finally, us the above command, by passing in the file path to each collection.

Example:

`$ npx eds-import-from-figma path/to/export-file.json`

When using the script, it will read in the available Figma Modes in the file. Select the value you want (e.g., New Theme), then hit <kbd>Enter</kbd>

The script will run and apply new token values to the code in the appropriate places.

**NOTE**: currently, we only handle color tokens, and will skip any tokens storing other types of token values (number, etc.).

[export-import-plugin]: https://www.figma.com/community/plugin/1256972111705530093

## Custom Theming and Tailwind

When you have your own custom theme, you can use the tokens provided in `app-tailwind-theme.config.json` to do advanced tailwind configuration. This file contains all the tokens in JSON format, mapped to the literal values in your local theme.
Expand All @@ -80,7 +110,7 @@ You can use similar import values to what is in `@chanzuckerberg/eds/tailwind.co
// in your tailwind.config.ts file
import type { Config } from 'tailwindcss';
import baseConfig from '@chanzuckerberg/eds/tailwind.config';
import {eds as customTokens} from "<edsrc.json:dest>/app-tailwind-theme.config"; // where <edsrc.json:test> is the path configured in .edsrc.json
import {eds as customTokens} from "./<edsrc.json:dest>/app-tailwind-theme.config.json"; // where <edsrc.json:dest> is the path configured in .edsrc.json

const {
background: backgroundColorTokens,
Expand All @@ -97,6 +127,7 @@ export default {
...colorTokens,
},
extend: {
...baseConfig.theme.extend,
backgroundColor: {
...backgroundColorTokens,
},
Expand Down
672 changes: 336 additions & 336 deletions .yarn/releases/yarn-4.0.2.cjs → .yarn/releases/yarn-4.1.0.cjs

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion .yarnrc.yml
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,4 @@ enableGlobalCache: false

nodeLinker: node-modules

yarnPath: .yarn/releases/yarn-4.0.2.cjs
yarnPath: .yarn/releases/yarn-4.1.0.cjs
25 changes: 25 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,31 @@

All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

## [13.11.0](https://github.com/chanzuckerberg/edu-design-system/compare/v13.11.0-alpha.0...v13.11.0) (2024-02-20)


### Features

* **Select:** add handling for long text in select field ([7c79a6e](https://github.com/chanzuckerberg/edu-design-system/commit/7c79a6e57c9fd0056cc5ec6223a4fd1439a7b210))


### Bug Fixes

* **PopoverListItem:** adjust size of list item when selected ([0496f56](https://github.com/chanzuckerberg/edu-design-system/commit/0496f5608923ae674054d1dad40a232bb0def659))

## [13.11.0-alpha.0](https://github.com/chanzuckerberg/edu-design-system/compare/v13.10.0...v13.11.0-alpha.0) (2024-02-15)


### Features

* **script:** add import from figma script ([#1844](https://github.com/chanzuckerberg/edu-design-system/issues/1844)) ([9ed90e5](https://github.com/chanzuckerberg/edu-design-system/commit/9ed90e5bf1a42ce55c7c2b0f3cad1add3c71057c))
* **Select:** enable multi-select ([ced70d5](https://github.com/chanzuckerberg/edu-design-system/commit/ced70d59b653e5132e145e9361c0bc2b358d1b48))


### Bug Fixes

* **Select:** set trigger type to button to prevent submits ([#1843](https://github.com/chanzuckerberg/edu-design-system/issues/1843)) ([d7ea037](https://github.com/chanzuckerberg/edu-design-system/commit/d7ea0370e698a09516eacb9de61af3a63e8c1432))

## [13.10.0](https://github.com/chanzuckerberg/edu-design-system/compare/v13.9.0...v13.10.0) (2024-02-01)


Expand Down
110 changes: 110 additions & 0 deletions bin/_util.js
Original file line number Diff line number Diff line change
Expand Up @@ -140,4 +140,114 @@ module.exports = {
}
}
},
/**
* Determine the write path by taking the collection and variable name, and looking it up in
* the existing local theme. If there's a path in the local theme file, we can write there (using lodash/set
* or similar).
*
* @param {object} localTheme JSON file loaded, representing the data for the local theme
* @param {string} collectionName Name of the exported collection
* @param {string} variableName current variable name from figma (e.g., color/text/neutral/default)
* @returns {string|null} representation of the path to write to in the local theme JSON file
*/
getWritePath: function (localTheme, collectionName, variableName) {
const at = require('lodash/at');

const workingPath =
module.exports.getTokenPrefix(collectionName) +
module.exports.tokenNameToPath(variableName);

const found = at(localTheme, workingPath).filter(
(entries) => typeof entries !== 'undefined',
);

if (found.length) {
// handle case where we should look for @ in the file, then pluck the value object properly
if (found[0]['@']?.value) {
// update the write path to mark the @ and value
return workingPath + '.@.value';
}

// handle case where it's just value
if (found[0]?.value) {
// update the write path to mark the value
return workingPath + '.value';
}
}

// There is no write path based on what's in the local theme so we return null signal it's a missing token
return null;
},
/**
* Utilities for handling parsing of Figma Theme Data.
*
* These functions are set up to handle, transform, and read data coming from figma API Structure.
* For more information on this API format, refer to:
* - https://help.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma
* - https://www.figma.com/plugin-docs/api/VariableCollection/
*/
/**
* Given the value sourced from figma, translate it into a
* style-dictionary format. When encountering an unrecognized type,
* throw an error.
*
* Data Types:
* - Type COLOR: https://www.figma.com/plugin-docs/api/RGB/
*
* @param {string} type Figma type for the token value (Set:)
* @param {object} figmaResolvedValue
* @returns {string} value using the type
* @throws {TypeError} using `details` on the data read from figma
*/
parseResolvedValue: function (type, figmaResolvedValue) {
if (type === 'COLOR') {
const r = Math.floor(figmaResolvedValue.r * 255);
const g = Math.floor(figmaResolvedValue.g * 255);
const b = Math.floor(figmaResolvedValue.b * 255);
const a = figmaResolvedValue.a;
if (figmaResolvedValue.a > 0 && figmaResolvedValue.a < 1) {
return `rgba(${r}, ${g}, ${b}, ${a})`;
} else {
// print hex instead
return (
'#' +
[r, g, b]
.map((x) => x.toString(16))
.map((x) => (x.length === 1 ? '0' + x : x))
.join('')
.toUpperCase()
);
}
} else {
throw new TypeError('unknown resolved type: ' + type, {
details: figmaResolvedValue,
});
}
},
/**
* Given the "type" of import file (named after the collection name), produce
* a prefix to the token name that corresponds to the prefix used for those
* tokens.
*
* @param {string} collectionName The key to write to
* @returns {string|null} a text prefix for where to write the token value or null when no prefix is found
*/
getTokenPrefix: function (collectionName) {
switch (collectionName) {
case 'themes':
return 'eds.theme.';
case 'primitives':
return 'eds.';
default:
return null;
}
},
/**
* Conversion of the figma token name (e.g., some/path/to/token) to the equivalent path in a JSON object
* @param {string} figmaTokenName The name from the figma variables panel (slash separated)
* @returns {string} a lodash-compatible string representing the path to the token value in JSON
*/
tokenNameToPath: function (figmaTokenName) {
return figmaTokenName.replaceAll('/', '.').toLowerCase();
},
};
130 changes: 130 additions & 0 deletions bin/_util.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
const utils = require('./_util');

describe('utils', function () {
describe('getWritePath', function () {
const exampleTheme = {
eds: {
theme: {
color: {
body: {
background: {
neutral: {
default: {
'@': {
value: '#FFFFFF',
},
hover: {
value: '#F4F6F8',
},
},
},
},
},
},
},
},
};

it('generates a write path for a root-at value', () => {
expect(
utils.getWritePath(
exampleTheme,
'themes',
'color/body/background/neutral/default',
),
).toEqual('eds.theme.color.body.background.neutral.default.@.value');
});

it('generates a write path for a non-root-at value', () => {
expect(
utils.getWritePath(
exampleTheme,
'themes',
'color/body/background/neutral/default/hover',
),
).toEqual('eds.theme.color.body.background.neutral.default.hover.value');
});

it('generates a null when the path is not in the local theme', () => {
expect(
utils.getWritePath(
exampleTheme,
'themes',
'color/body/background/neutral/default/focus',
),
).toEqual(null);
});
});

describe('getTokenPath', function () {
it.each([
['themes', 'eds.theme.'],
['primitives', 'eds.'],
['some-unknown', null],
['', null],
])(
'parses the collection %s to token prefix "%s"',
(collection, expected) => {
expect(utils.getTokenPrefix(collection)).toEqual(expected);
},
);
});

describe('tokenNameToPath', function () {
it('properly converts a token name to a lodash-compatible path', function () {
expect(utils.tokenNameToPath('some/path/to/token')).toEqual(
'some.path.to.token',
);
});
});

describe('parseResolvedValue', function () {
const space500 = {
r: 0.12941177189350128,
g: 0.1568627506494522,
b: 0.4000000059604645,
a: 1,
};

const blueprint300 = {
r: 0.027450980618596077,
g: 0.30588236451148987,
b: 0.9098039269447327,
a: 1,
};

const neutral800 = {
r: 0.12941177189350128,
g: 0.15294118225574493,
b: 0.1764705926179886,
a: 1,
};

const backgroundVeil = {
r: 0.12941177189350128,
g: 0.15294118225574493,
b: 0.1764705926179886,
a: 0.5,
};

it.each`
figmaColor | type | expected
${space500} | ${'COLOR'} | ${'#212866'}
${blueprint300} | ${'COLOR'} | ${'#074EE8'}
${neutral800} | ${'COLOR'} | ${'#21272D'}
${backgroundVeil} | ${'COLOR'} | ${'rgba(33, 39, 45, 0.5)'}
`(
'will use type $type to convert $figmaColor to $expected',
({ figmaColor, type, expected }) => {
expect(utils.parseResolvedValue(type, figmaColor)).toEqual(expected);
},
);

it('will throw on unrecognized types', () => {
const test = () => {
utils.parseResolvedValue('FLOAT', 0.5);
};
expect(test).toThrow(TypeError);
});
});
});
Loading

0 comments on commit 7bffc1a

Please sign in to comment.