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';