Merge pull request #1875 from chanzuckerberg/release-v13.12.0

## [13.12.0](v13.11.0...v13.12.0) (2024-03-04)

[Storybook](https://61313967cde49b003ae2a860-telsscxlak.chromatic.com/?path=/docs/getting-started--docs)

### Features

* export ClickableStyleProps ([#1860](#1860)) ([0d1b49e](0d1b49e))
* **Select:** add support for required in overline ([#1855](#1855)) ([6e44566](6e44566))


### Bug Fixes

* lodash tree shaking ([#1852](#1852)) ([f55f9cb](f55f9cb))
* **Select:** add max height for Select.Options ([#1858](#1858)) ([24ed8bc](24ed8bc))

.eslintrc

@@ -95,11 +95,17 @@
     },
     {
       "files": ["src/**/*.{ts,tsx}"],
-      "excludedFiles": ["src/**/*.stories.{ts,tsx}"],
+      "excludedFiles": ["src/**/*.{stories,test,spec}.{ts,tsx}"],
       "rules": {
         "no-restricted-imports": [
           "error",
           {
+            "paths": [
+              {
+                "name": "lodash",
+                "message": "For better tree shaking, prefer deep imports from lodash (e.g. import at from 'lodash/at') instead of named (e.g. import {at} from 'lodash)"
+              }
+            ],
             "patterns": [
               {
                 "group": ["**/tokens-dist/ts/colors"],

.github/pull_request_template.md

@@ -1,4 +1,3 @@
-### Summary:
 
 ### Test Plan:
 
@@ -9,5 +8,5 @@
 - [ ] Wrote [automated tests](https://czi.atlassian.net/wiki/x/Hbl1H)
 - [ ] CI tests / new tests are not applicable
 - [ ] Manually tested my changes, but I want to keep the details secret
+- [ ] Created and used an [alpha publish](https://github.com/chanzuckerberg/edu-design-system/blob/main/docs/PUBLISHING.md#alpha-release)
 - [ ] Manually tested my changes, and here are the details:
-  - Create an [alpha publish](https://github.com/chanzuckerberg/edu-design-system/blob/main/docs/PUBLISHING.md#alpha-release) and try out in `edu-stack` or `traject` as a sanity check if changes affect build or deploy, or are breaking, such as token changes, widely used component updates, hooks changes, and major dependency upgrades.

.github/workflows/test.yml

@@ -122,9 +122,10 @@ jobs:
       - 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
+        # Filtering on just the (required) .id https://docs.github.com/en/actions/learn-github-actions/expressions#object-filters
         if: github.event_name == 'push'
         run: |
-          COMMIT_COUNT=$(echo '${{ toJSON(github.event.commits) }}' | jq length)
+          COMMIT_COUNT=$(echo '${{ toJSON(github.event.commits.*.id) }}' | jq length)
           echo "Number of commits in the push: $COMMIT_COUNT"
 
           yarn commitlint --from HEAD~$COMMIT_COUNT --to HEAD --verbose

CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.12.0](https://github.com/chanzuckerberg/edu-design-system/compare/v13.11.0...v13.12.0) (2024-03-04)
+
+
+### Features
+
+* export ClickableStyleProps ([#1860](https://github.com/chanzuckerberg/edu-design-system/issues/1860)) ([0d1b49e](https://github.com/chanzuckerberg/edu-design-system/commit/0d1b49e525492539a198f97bd98f67c2f8065537))
+* **Select:** add support for required in overline ([#1855](https://github.com/chanzuckerberg/edu-design-system/issues/1855)) ([6e44566](https://github.com/chanzuckerberg/edu-design-system/commit/6e445669e53224274bd7edc9f8d9c9cb6210a0e4))
+
+
+### Bug Fixes
+
+* lodash tree shaking ([#1852](https://github.com/chanzuckerberg/edu-design-system/issues/1852)) ([f55f9cb](https://github.com/chanzuckerberg/edu-design-system/commit/f55f9cb16db9c145ac9d4061f4b714c937888123))
+* **Select:** add max height for Select.Options ([#1858](https://github.com/chanzuckerberg/edu-design-system/issues/1858)) ([24ed8bc](https://github.com/chanzuckerberg/edu-design-system/commit/24ed8bc3c9e93312b53ee9b93f982659842a0bfc))
+
 ## [13.11.0](https://github.com/chanzuckerberg/edu-design-system/compare/v13.11.0-alpha.0...v13.11.0) (2024-02-20)
 
 

bin/_util.js

@@ -14,7 +14,7 @@ module.exports = {
 
     // If no config exists, fail
     if (!settings) {
-      throw new Error(
+      throw new ReferenceError(
         'Please add EDS config to your project before continuing (specify "src" and "dest" target paths)',
       );
     }
@@ -80,13 +80,14 @@ module.exports = {
    * @param {object} base The tokens theme file stored in the EDS project
    * @param {object} theme The project theme file stored in the app code (same format as bas)
    * @param {Array} path The base path, stored as an array of object key names (default [])
+   * @returns {boolean} true when is strict subset
    * @throws Error when there are tokens in theme that aren't in base
    */
   isStrictSubset: function (base, theme, path = []) {
     for (const name in theme) {
       if (typeof theme[name] === 'object') {
         if (base[name] === undefined) {
-          throw new Error(
+          throw new ReferenceError(
             `Local themeable value does not exist in base theme: --${path.join(
               '-',
             )}.${name}"`,
@@ -99,6 +100,8 @@ module.exports = {
         );
       }
     }
+
+    return true;
   },
   /**
    * Flatten token names such that any "root-tokens" do not include `@` in the resulting token name.

bin/_util.test.js

@@ -1,6 +1,198 @@
+jest.mock('lilconfig');
+
+const lilconfig = require('lilconfig');
+const identity = require('lodash/identity');
 const utils = require('./_util');
 
 describe('utils', function () {
+  describe('minifyDictionaryUsingFormat', () => {
+    const base = {
+      eds: {
+        theme: {
+          color: {
+            test: {
+              value: '#000000',
+            },
+            test2: {
+              value: '#00FF00',
+            },
+          },
+        },
+      },
+    };
+    it('bypasses parsing when object is not an object', () => {
+      const emptyArray = [];
+
+      expect(utils.minifyDictionaryUsingFormat(emptyArray)).toEqual([]);
+    });
+
+    it('allows interpretation of parsed values as identity', () => {
+      expect(utils.minifyDictionaryUsingFormat(base, identity)).toEqual(base);
+    });
+
+    it('allows flattening of value objects', () => {
+      const expected = {
+        eds: {
+          theme: {
+            color: {
+              test: '#000000',
+              test2: '#00FF00',
+            },
+          },
+        },
+      };
+      expect(
+        utils.minifyDictionaryUsingFormat(base, (obj) => obj.value),
+      ).toEqual(expected);
+    });
+  });
+
+  describe('formatEdsTokens', () => {
+    const base = {
+      neutral: {
+        default: {
+          '@': 'var(--eds-theme-color-border-neutral-default)',
+          hover: 'var(--eds-theme-color-border-neutral-default-hover)',
+        },
+      },
+    };
+
+    it('can strip out any at-symbols from input style-dictionary object', () => {
+      // since this function edits in place, clone the values then compare to expected
+      const input = {
+        ...base,
+      };
+      const expected = {
+        neutral: {
+          default: {
+            hover: 'var(--eds-theme-color-border-neutral-default-hover)',
+          },
+        },
+        'neutral-default': 'var(--eds-theme-color-border-neutral-default)',
+      };
+
+      utils.formatEdsTokens(input);
+
+      expect(input).toEqual(expected);
+    });
+  });
+
+  describe('isStrictSubset', () => {
+    const base = {
+      eds: {
+        theme: {
+          color: {
+            test: {
+              value: '#000000',
+            },
+            test2: {
+              value: '#00FF00',
+            },
+          },
+        },
+      },
+    };
+
+    it('allows exact matching themes', () => {
+      const theme = {
+        ...base,
+      };
+
+      expect(utils.isStrictSubset(base, theme)).toBeTruthy();
+    });
+
+    it('allows theme to be a subset of base', () => {
+      const theme = {
+        ...base,
+      };
+      delete theme.eds.theme.color.test2;
+
+      expect(utils.isStrictSubset(base, theme)).toBeTruthy();
+    });
+
+    it('throws when the theme has things not in the base theme file', () => {
+      const theme = {
+        ...base,
+        color: {
+          test: {
+            value: '#FFOOFF',
+          },
+        },
+      };
+
+      const assertThrow = () => {
+        utils.isStrictSubset(base, theme);
+      };
+
+      expect(assertThrow).toThrow(ReferenceError);
+    });
+  });
+
+  describe('getConfig', function () {
+    // Silence console output AND hook up for counting in tests
+    let origWarn;
+    beforeEach(() => {
+      origWarn = console.warn;
+      console.warn = jest.fn();
+    });
+
+    afterEach(() => {
+      console.warn = origWarn;
+    });
+
+    describe('with no settings read', () => {
+      it('throws when no settings are defined', async () => {
+        lilconfig.lilconfig.mockImplementation(() => {
+          return {
+            search: function () {
+              // https://www.npmjs.com/package/cosmiconfig#result
+              return Promise.resolve(undefined);
+            },
+          };
+        });
+
+        const test = async () => {
+          await utils.getConfig();
+        };
+
+        // We expect it to reject because it will also throw and throwing rejects
+        await expect(test()).rejects.toThrow(ReferenceError);
+      });
+    });
+
+    describe('with settings read', () => {
+      it('converts json key to src key', async () => {
+        lilconfig.lilconfig.mockImplementation(() => {
+          return {
+            search: function () {
+              // https://www.npmjs.com/package/cosmiconfig#result
+              return Promise.resolve({
+                config: {
+                  json: 'a/b/c',
+                  css: '1/2/3',
+                },
+              });
+            },
+          };
+        });
+        const test = async () => {
+          return await utils.getConfig();
+        };
+
+        // This ex expected to duplicate the keys currently.
+        // In the future, we will deprecate the preservation of the old keys
+        await expect(test()).resolves.toEqual({
+          css: '1/2/3',
+          src: 'a/b/c',
+          json: 'a/b/c',
+          dest: '1/2/3',
+        });
+
+        expect(console.warn).toHaveBeenCalledTimes(2);
+      });
+    });
+  });
+
   describe('getWritePath', function () {
     const exampleTheme = {
       eds: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chanzuckerberg/eds",
-  "version": "13.11.0",
+  "version": "13.12.0",
   "description": "The React-powered design system library for Chan Zuckerberg Initiative education web applications",
   "author": "CZI <edu-frontend-infra@chanzuckerberg.com>",
   "homepage": "https://github.com/chanzuckerberg/edu-design-system",
@@ -102,7 +102,7 @@
     "ora": "^8.0.1",
     "react-beautiful-dnd": "^13.1.1",
     "react-children-by-type": "^1.1.0",
-    "react-focus-lock": "^2.11.0",
+    "react-focus-lock": "^2.11.2",
     "react-popper": "^2.3.0",
     "react-portal": "^4.2.2",
     "react-uid": "^2.3.3",
@@ -111,7 +111,7 @@
     "yargs": "^17.7.2"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-env": "^7.24.0",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@chanzuckerberg/axe-storybook-testing": "^7.2.0",
@@ -123,17 +123,18 @@
     "@commitlint/cli": "^18.6.1",
     "@commitlint/config-conventional": "^18.6.2",
     "@geometricpanda/storybook-addon-badges": "^2.0.2",
-    "@omlet/cli": "^1.3.3",
+    "@omlet/cli": "^1.3.4",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
     "@size-limit/file": "^8.2.6",
-    "@storybook/addon-a11y": "^7.6.16",
-    "@storybook/addon-essentials": "^7.6.16",
-    "@storybook/addon-interactions": "^7.6.16",
-    "@storybook/addon-links": "^7.6.16",
+    "@storybook/addon-a11y": "^7.6.17",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/react": "^7.6.16",
-    "@storybook/react-webpack5": "^7.6.16",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-webpack5": "^7.6.17",
+    "@storybook/test": "^7.6.17",
     "@storybook/testing-library": "^0.2.2",
     "@storybook/testing-react": "^2.0.1",
     "@testing-library/jest-dom": "^6.4.2",
@@ -142,8 +143,8 @@
     "@types/jest": "^29.5.12",
     "@types/jsonfile": "^6",
     "@types/lodash": "^4.14.202",
-    "@types/node": "^20.11.19",
-    "@types/react": "^18.2.55",
+    "@types/node": "^20.11.24",
+    "@types/react": "^18.2.61",
     "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-dom": "^18.2.19",
     "@types/react-portal": "^4.0.7",
@@ -152,9 +153,9 @@
     "chromatic": "^9.1.0",
     "codecov": "^3.8.3",
     "copyfiles": "^2.4.1",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-jest": "^27.8.0",
+    "eslint-plugin-jest": "^27.9.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-testing-library": "^6.2.0",
@@ -175,11 +176,11 @@
     "prettier-plugin-tailwindcss": "^0.5.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^4.11.0",
+    "rollup": "^4.12.0",
     "rollup-plugin-postcss": "^4.0.2",
     "size-limit": "^8.2.6",
     "standard-version": "^9.5.0",
-    "storybook": "^7.6.16",
+    "storybook": "^7.6.17",
     "style-dictionary": "^3.9.2",
     "stylelint": "^15.11.0",
     "stylelint-config-recommended": "^13.0.0",

src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { debounce } from 'lodash';
+import debounce from 'lodash/debounce';
 import React, { createContext, useContext, type ReactNode } from 'react';
 import { flattenReactChildren } from '../../util/flattenReactChildren';
 import Icon, { type IconName } from '../Icon';

src/components/Icon/Icon.stories.tsx

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { kebabCase } from 'lodash';
+import kebabCase from 'lodash/kebabCase';
 import React from 'react';
 import { Icon, type IconProps } from './Icon';
 import icons, { type IconName } from '../../icons/spritemap';