Merge pull request #1850 from chanzuckerberg/release-v13.11.0

## [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))

Author: booc0mtaco

.eslintrc

@@ -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": {

.github/workflows/test.yml

@@ -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

.storybook/components/Docs/Guidelines/Theming.stories.mdx

@@ -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.
@@ -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,
@@ -97,6 +127,7 @@ export default {
       ...colorTokens,
     },
     extend: {
+      ...baseConfig.theme.extend,
       backgroundColor: {
         ...backgroundColorTokens,
       },

.yarn/releases/yarn-4.0.2.cjs renamed to .yarn/releases/yarn-4.1.0.cjs

@@ -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

.yarnrc.yml

@@ -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)
 
 

CHANGELOG.md

@@ -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 + '[email protected]';
+      }
+
+      // 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();
+  },
 };

bin/_util.js

@@ -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('[email protected]');
+    });
+
+    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);
+    });
+  });
+});