Skip to content

Commit 84da5d7

Browse files
booc0mtacobooc0mtaco
authored
Merge pull request #2103 from chanzuckerberg/release-v15.7.0
## [15.7.0](v15.6.0...v15.7.0) (2024-11-18) [Storybook](https://61313967cde49b003ae2a860-cpbnunloqv.chromatic.com/) ### Features * **InputChip:** add 1.0 component ([#2097](#2097)) ([2f68041](2f68041)) * **Tag:** update to 2.0 styles ([#2087](#2087)) ([a344222](a344222)) ### Bug Fixes * **deps:** update dependency ts-morph to v24 ([#2102](#2102)) ([350c72b](350c72b))
2 parents 46a4b7f + fae22a6 commit 84da5d7

28 files changed

+1695
-1325
lines changed

‎.stylelintrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"extends": ["stylelint-config-recommended"],
3-
"plugins": ["./scripts/stylelint/index.js"],
3+
"plugins": ["./scripts/stylelint/index.mjs"],
44
"rules": {
55
"eds/no-tier-1-color-variable": true,
66
"at-rule-no-unknown": [

‎.vscode/settings.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,8 @@
1212
"typescript.validate.enable": true,
1313
"javascript.validate.enable": true,
1414
"editor.formatOnSave": true,
15-
"editor.defaultFormatter": "esbenp.prettier-vscode"
15+
"editor.defaultFormatter": "esbenp.prettier-vscode",
16+
"[css]": {
17+
"editor.defaultFormatter": "vscode.css-language-features"
18+
}
1619
}

‎CHANGELOG.md

+13
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,19 @@
22

33
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.
44

5+
## [15.7.0](https://github.com/chanzuckerberg/edu-design-system/compare/v15.6.0...v15.7.0) (2024-11-18)
6+
7+
8+
### Features
9+
10+
* **InputChip:** add 1.0 component ([#2097](https://github.com/chanzuckerberg/edu-design-system/issues/2097)) ([2f68041](https://github.com/chanzuckerberg/edu-design-system/commit/2f68041191bffd02f5843839eac7a18c96079dd7))
11+
* **Tag:** update to 2.0 styles ([#2087](https://github.com/chanzuckerberg/edu-design-system/issues/2087)) ([a344222](https://github.com/chanzuckerberg/edu-design-system/commit/a3442228991c866ca3c8c62137085cf1ca2a3b48))
12+
13+
14+
### Bug Fixes
15+
16+
* **deps:** update dependency ts-morph to v24 ([#2102](https://github.com/chanzuckerberg/edu-design-system/issues/2102)) ([350c72b](https://github.com/chanzuckerberg/edu-design-system/commit/350c72b244a85a053fc943224f019227d1bf4729))
17+
518
## [15.6.0](https://github.com/chanzuckerberg/edu-design-system/compare/v15.5.0...v15.6.0) (2024-11-05)
619

720

‎package.json

+30-30
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@chanzuckerberg/eds",
3-
"version": "15.6.0",
3+
"version": "15.7.0",
44
"description": "The React-powered design system library for Chan Zuckerberg Initiative education web applications",
55
"author": "CZI <[email protected]>",
66
"homepage": "https://github.com/chanzuckerberg/edu-design-system",
@@ -99,7 +99,7 @@
9999
"jsonfile": "^6.1.0",
100100
"lilconfig": "^3.1.2",
101101
"lodash": "^4.17.21",
102-
"ora": "^8.1.0",
102+
"ora": "^8.1.1",
103103
"react-beautiful-dnd": "^13.1.1",
104104
"react-children-by-type": "^1.1.0",
105105
"react-focus-lock": "^2.13.2",
@@ -109,7 +109,7 @@
109109
"style-dictionary": "^3.9.2",
110110
"svg4everybody": "^2.1.9",
111111
"ts-dedent": "^2.2.0",
112-
"ts-morph": "^22.0.0",
112+
"ts-morph": "^24.0.0",
113113
"yargs": "^17.7.2"
114114
},
115115
"devDependencies": {
@@ -130,66 +130,66 @@
130130
"@rollup/plugin-node-resolve": "^15.3.0",
131131
"@rollup/plugin-typescript": "^12.1.1",
132132
"@size-limit/file": "^8.2.6",
133-
"@storybook/addon-a11y": "^8.4.1",
134-
"@storybook/addon-essentials": "^8.4.1",
135-
"@storybook/addon-interactions": "^8.4.1",
136-
"@storybook/addon-links": "^8.4.1",
137-
"@storybook/addon-mdx-gfm": "^8.4.1",
133+
"@storybook/addon-a11y": "^8.4.2",
134+
"@storybook/addon-essentials": "^8.4.2",
135+
"@storybook/addon-interactions": "^8.4.2",
136+
"@storybook/addon-links": "^8.4.2",
137+
"@storybook/addon-mdx-gfm": "^8.4.2",
138138
"@storybook/addon-styling": "^1.3.7",
139139
"@storybook/addon-webpack5-compiler-babel": "^3.0.3",
140-
"@storybook/manager-api": "^8.4.1",
141-
"@storybook/react": "^8.4.1",
142-
"@storybook/react-webpack5": "^8.4.1",
143-
"@storybook/test": "^8.4.1",
140+
"@storybook/manager-api": "^8.4.2",
141+
"@storybook/react": "^8.4.2",
142+
"@storybook/react-webpack5": "^8.4.2",
143+
"@storybook/test": "^8.4.2",
144144
"@storybook/testing-library": "^0.2.2",
145-
"@storybook/theming": "^8.4.1",
145+
"@storybook/theming": "^8.4.2",
146146
"@testing-library/jest-dom": "^6.6.3",
147147
"@testing-library/react": "^16.0.1",
148148
"@testing-library/user-event": "^14.5.2",
149149
"@types/jest": "^29.5.14",
150150
"@types/jsonfile": "^6",
151151
"@types/lodash": "^4.17.13",
152-
"@types/node": "^20.17.5",
152+
"@types/node": "^20.17.6",
153153
"@types/react": "^18.3.12",
154154
"@types/react-beautiful-dnd": "^13.1.8",
155155
"@types/react-dom": "^18.3.1",
156156
"@types/react-portal": "^4.0.7",
157157
"@types/yargs": "^17.0.33",
158158
"axe-core": "4.10.2",
159-
"chromatic": "^11.16.3",
159+
"chromatic": "^11.18.0",
160160
"codecov": "^3.8.3",
161161
"copyfiles": "^2.4.1",
162162
"eslint": "^8.57.1",
163-
"eslint-config-prettier": "^9.0.0",
164-
"eslint-plugin-jest": "^27.9.0",
165-
"eslint-plugin-prettier": "^5.0.1",
166-
"eslint-plugin-storybook": "^0.8.0",
163+
"eslint-config-prettier": "^9.1.0",
164+
"eslint-plugin-jest": "^28.9.0",
165+
"eslint-plugin-prettier": "^5.2.1",
166+
"eslint-plugin-storybook": "^0.11.0",
167167
"eslint-plugin-testing-library": "^6.4.0",
168168
"husky": "^8.0.3",
169169
"identity-obj-proxy": "^3.0.0",
170170
"jest": "^29.7.0",
171171
"jest-environment-jsdom": "^29.7.0",
172172
"jest-preset-stylelint": "^6.3.2",
173-
"lint-staged": "^13.3.0",
173+
"lint-staged": "^15.2.10",
174174
"plop": "^4.0.1",
175175
"postcss": "^8.4.47",
176-
"postcss-cli": "^10.1.0",
177-
"postcss-import": "^15.1.0",
178-
"postcss-mixins": "^9.0.4",
179-
"postcss-nested": "^6.2.0",
176+
"postcss-cli": "^11.0.0",
177+
"postcss-import": "^16.1.0",
178+
"postcss-mixins": "^11.0.3",
179+
"postcss-nested": "^7.0.2",
180180
"postcss-simple-vars": "^7.0.1",
181-
"prettier": "^3.1.0",
182-
"prettier-plugin-tailwindcss": "^0.5.7",
181+
"prettier": "^3.3.3",
182+
"prettier-plugin-tailwindcss": "^0.6.0",
183183
"react": "^18.2.0",
184184
"react-dom": "^18.2.0",
185-
"rollup": "^4.24.3",
185+
"rollup": "^4.24.4",
186186
"rollup-plugin-postcss": "^4.0.2",
187187
"size-limit": "^8.2.6",
188188
"standard-version": "^9.5.0",
189-
"storybook": "^8.4.1",
189+
"storybook": "^8.4.2",
190190
"style-dictionary": "^3.9.2",
191-
"stylelint": "^15.11.0",
192-
"stylelint-config-recommended": "^13.0.0",
191+
"stylelint": "^16.10.0",
192+
"stylelint-config-recommended": "^14.0.1",
193193
"tailwindcss": "^3.4.14",
194194
"ts-jest": "^29.2.5",
195195
"typescript": "^5.6.3"

‎scripts/stylelint/index.js

-10
This file was deleted.

‎scripts/stylelint/index.mjs

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* eslint-env node */
2+
3+
import stylelint from 'stylelint';
4+
import * as rules from './rules/index.mjs';
5+
6+
const rulesPlugins = Object.keys(rules).map((ruleName) => {
7+
return stylelint.createPlugin(ruleName, rules[ruleName]);
8+
});
9+
10+
export default rulesPlugins;

‎scripts/stylelint/rules/index.js

-5
This file was deleted.

‎scripts/stylelint/rules/index.mjs

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/* eslint-env node */
2+
3+
import noTier1Rule from './no-tier-1-color-variable.mjs';
4+
5+
export { noTier1Rule as 'eds/no-tier-1-color-variable' };

‎scripts/stylelint/rules/no-tier-1-color-variable.js renamed to ‎scripts/stylelint/rules/no-tier-1-color-variable.mjs

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-env node */
22

3-
const stylelint = require('stylelint');
3+
import stylelint from 'stylelint';
44

55
const ruleName = 'eds/no-tier-1-color-variable';
66

@@ -39,4 +39,4 @@ function rule(actual) {
3939

4040
rule.ruleName = ruleName;
4141
rule.messages = messages;
42-
module.exports = rule;
42+
export default rule;

‎scripts/stylelint/rules/no-tier-1-color-variable.test.js renamed to ‎scripts/stylelint/rules/no-tier-1-color-variable.test.mjs

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
const getTestRule = require('jest-preset-stylelint/getTestRule');
2-
const { messages, ruleName } = require('./no-tier-1-color-variable');
1+
import getTestRule from 'jest-preset-stylelint/getTestRule';
2+
import { messages, ruleName } from './no-tier-1-color-variable.mjs';
33

4-
const testRule = getTestRule({ plugins: ['./scripts/stylelint/index.js'] });
4+
const testRule = getTestRule({ plugins: ['./scripts/stylelint/index.mjs'] });
55

66
testRule({
77
ruleName,

‎src/bin/migrate/transforms/rename-jsx-import.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,11 @@ export default function transform({ file, changes }: TransformOptions) {
5252
});
5353

5454
namedImport.setName(changeToApply.newImportName);
55-
namedImport.getNameNode().rename(changeToApply.newImportName);
55+
const namedNode = namedImport.getNameNode();
56+
if ('rename' in namedNode) {
57+
namedNode.rename(changeToApply.newImportName);
58+
}
59+
5660
if (changeToApply.removeAlias) {
5761
namedImport.removeAliasWithRename();
5862
} else if (changeToApply.alias) {

‎src/components/InputChip/InputChip.module.css

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
/*------------------------------------*\
2+
# INPUT CHIP
3+
\*------------------------------------*/
4+
5+
/**
6+
* InputChip
7+
*/
8+
9+
.input-chip {
10+
display: inline-flex;
11+
}
12+
13+
.input-chip__label {
14+
display: inline-flex;
15+
padding: calc(var(--eds-size-1) / 16 * 1rem);
16+
padding-right: 0;
17+
gap: calc(var(--eds-size-1) / 16 * 1rem);
18+
align-items: center;
19+
justify-content: center;
20+
21+
border: 1px solid var(--eds-theme-color-border-utility-default-low-emphasis);
22+
border-right: none;
23+
24+
border-radius: calc(var(--eds-border-radius-full) * 1px);
25+
border-top-right-radius: 0;
26+
border-bottom-right-radius: 0;
27+
28+
color: var(--eds-theme-color-text-utility-default-primary);
29+
}
30+
31+
.input-chip .input-chip__action-button {
32+
display: flex;
33+
align-items: center;
34+
padding: calc(var(--eds-size-1) / 16 * 1rem);
35+
36+
border: 1px solid var(--eds-theme-color-border-utility-default-low-emphasis);
37+
border-left: none;
38+
border-radius: calc(var(--eds-border-radius-full) * 1px);
39+
border-top-left-radius: 0;
40+
border-bottom-left-radius: 0;
41+
outline: none;
42+
43+
color: var(--eds-theme-color-text-utility-default-primary);
44+
}
45+
46+
.input-chip--disabled {
47+
pointer-events: none;
48+
}
49+
50+
/**
51+
* Theme tokens
52+
*/
53+
54+
.input-chip__action-button:hover {
55+
background-color: var(--eds-theme-color-background-utility-default-no-emphasis-hover);
56+
}
57+
58+
.input-chip__action-button:active {
59+
background-color: var(--eds-theme-color-background-utility-default-no-emphasis-active);
60+
}
61+
62+
.input-chip__action-button:focus-visible {
63+
border: none;
64+
box-shadow: inset 0 0 0 2px var(--eds-theme-color-border-utility-focus);
65+
}
66+
67+
@supports not selector(:focus-visible) {
68+
.input-chip__action-button:focus {
69+
border: none;
70+
box-shadow: inset 0 0 0 2px var(--eds-theme-color-border-utility-focus);
71+
}
72+
}

‎src/components/InputChip/InputChip.stories.ts

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import type { StoryObj, Meta } from '@storybook/react';
2+
import type React from 'react';
3+
4+
import { InputChip } from './InputChip';
5+
6+
export default {
7+
title: 'Components/InputChip',
8+
component: InputChip,
9+
parameters: {
10+
badges: ['intro-1.0', 'current-1.0'],
11+
},
12+
argTypes: {
13+
onClick: {
14+
control: false,
15+
},
16+
leadingComponent: {
17+
control: false,
18+
},
19+
},
20+
} as Meta<Args>;
21+
22+
type Args = React.ComponentProps<typeof InputChip>;
23+
24+
export const Default: StoryObj<Args> = {
25+
args: {
26+
label: 'Chip Label',
27+
onClick: () => {},
28+
},
29+
};
30+
31+
export const WithLeadingIcon: StoryObj<Args> = {
32+
args: {
33+
...Default.args,
34+
leadingComponent: 'person-encircled',
35+
},
36+
};
37+
38+
export const Disabled: StoryObj<Args> = {
39+
args: {
40+
...Default.args,
41+
isDisabled: true,
42+
},
43+
};

‎src/components/Tag/Tag.test.ts renamed to ‎src/components/InputChip/InputChip.test.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { generateSnapshots } from '@chanzuckerberg/story-utils';
2-
import * as stories from './Tag.stories';
2+
import * as stories from './InputChip.stories';
33
import type { StoryFile } from '../../util/utility-types';
44

5-
describe('<Tag />', () => {
5+
describe('<InputChip />', () => {
66
generateSnapshots(stories as StoryFile);
77
});

0 commit comments

Comments
 (0)