Skip to content

Commit 1b1ea55

Browse files
booc0mtacobooc0mtaco
authored
Merge pull request #2024 from chanzuckerberg/release-v15.2.0
## [15.2.0](v15.1.0...v15.2.0) (2024-07-25) [Storybook](https://61313967cde49b003ae2a860-bksjqddurj.chromatic.com/) ### Features * **Fieldset:** update styles to support new 2.0 components ([#2023](#2023)) ([e542b32](e542b32)) ### Bug Fixes * **Button:** update typography tokens to match design ([#2019](#2019)) ([3b94114](3b94114)) * **InputField:** align text content with inputWithin spacing ([#2020](#2020)) ([e87767b](e87767b))
2 parents d76d5bb + 21074fb commit 1b1ea55

37 files changed

+1490
-560
lines changed

‎.storybook/data/tokens.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -132,8 +132,9 @@
132132
"eds-theme-typography-overline-sm": "var(--eds-typography-preset-012)",
133133
"eds-theme-typography-callout": "var(--eds-typography-preset-002-light)",
134134
"eds-theme-typography-breadcrumb": "var(--eds-typography-preset-009)",
135-
"eds-theme-typography-button-lg": "var(--eds-typography-preset-006)",
136-
"eds-theme-typography-button-md": "var(--eds-typography-preset-006)",
135+
"eds-theme-typography-button-lg": "var(--eds-typography-preset-005)",
136+
"eds-theme-typography-button-md": "var(--eds-typography-preset-005)",
137+
"eds-theme-typography-button-sm": "var(--eds-typography-preset-009)",
137138
"eds-theme-typography-button-label": "var(--eds-typography-preset-006)",
138139
"eds-theme-typography-button-label-sm": "var(--eds-typography-preset-008-bold)",
139140
"eds-theme-typography-form-label": "var(--eds-typography-preset-006)",

‎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.2.0](https://github.com/chanzuckerberg/edu-design-system/compare/v15.1.0...v15.2.0) (2024-07-25)
6+
7+
8+
### Features
9+
10+
* **Fieldset:** update styles to support new 2.0 components ([#2023](https://github.com/chanzuckerberg/edu-design-system/issues/2023)) ([e542b32](https://github.com/chanzuckerberg/edu-design-system/commit/e542b32a5e205236baf02597d1595b71185cccd7))
11+
12+
13+
### Bug Fixes
14+
15+
* **Button:** update typography tokens to match design ([#2019](https://github.com/chanzuckerberg/edu-design-system/issues/2019)) ([3b94114](https://github.com/chanzuckerberg/edu-design-system/commit/3b9411443323050ef829e509443b2bde6db135e4))
16+
* **InputField:** align text content with inputWithin spacing ([#2020](https://github.com/chanzuckerberg/edu-design-system/issues/2020)) ([e87767b](https://github.com/chanzuckerberg/edu-design-system/commit/e87767bd00bd81828b67a8e651e16df0b955e585))
17+
518
## [15.1.0](https://github.com/chanzuckerberg/edu-design-system/compare/v15.0.1...v15.1.0) (2024-07-15)
619

720

‎package.json

+16-16
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@chanzuckerberg/eds",
3-
"version": "15.1.0",
3+
"version": "15.2.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",
@@ -129,26 +129,26 @@
129129
"@rollup/plugin-node-resolve": "^15.2.3",
130130
"@rollup/plugin-typescript": "^11.1.6",
131131
"@size-limit/file": "^8.2.6",
132-
"@storybook/addon-a11y": "^8.2.2",
133-
"@storybook/addon-essentials": "^8.2.2",
134-
"@storybook/addon-interactions": "^8.2.2",
135-
"@storybook/addon-links": "^8.2.2",
136-
"@storybook/addon-mdx-gfm": "^8.2.2",
132+
"@storybook/addon-a11y": "^8.2.4",
133+
"@storybook/addon-essentials": "^8.2.4",
134+
"@storybook/addon-interactions": "^8.2.4",
135+
"@storybook/addon-links": "^8.2.4",
136+
"@storybook/addon-mdx-gfm": "^8.2.4",
137137
"@storybook/addon-styling": "^1.3.7",
138138
"@storybook/addon-webpack5-compiler-babel": "^3.0.3",
139-
"@storybook/manager-api": "^8.2.2",
140-
"@storybook/react": "^8.2.2",
141-
"@storybook/react-webpack5": "^8.2.2",
142-
"@storybook/test": "^8.2.2",
139+
"@storybook/manager-api": "^8.2.4",
140+
"@storybook/react": "^8.2.4",
141+
"@storybook/react-webpack5": "^8.2.4",
142+
"@storybook/test": "^8.2.4",
143143
"@storybook/testing-library": "^0.2.2",
144-
"@storybook/theming": "^8.2.2",
144+
"@storybook/theming": "^8.2.4",
145145
"@testing-library/jest-dom": "^6.4.6",
146146
"@testing-library/react": "^16.0.0",
147147
"@testing-library/user-event": "^14.5.2",
148148
"@types/jest": "^29.5.12",
149149
"@types/jsonfile": "^6",
150-
"@types/lodash": "^4.17.6",
151-
"@types/node": "^20.14.10",
150+
"@types/lodash": "^4.17.7",
151+
"@types/node": "^20.14.11",
152152
"@types/react": "^18.3.3",
153153
"@types/react-beautiful-dnd": "^13.1.8",
154154
"@types/react-dom": "^18.3.0",
@@ -185,12 +185,12 @@
185185
"rollup-plugin-postcss": "^4.0.2",
186186
"size-limit": "^8.2.6",
187187
"standard-version": "^9.5.0",
188-
"storybook": "^8.2.2",
188+
"storybook": "^8.2.4",
189189
"style-dictionary": "^3.9.2",
190190
"stylelint": "^15.11.0",
191191
"stylelint-config-recommended": "^13.0.0",
192-
"tailwindcss": "^3.4.4",
193-
"ts-jest": "^29.2.2",
192+
"tailwindcss": "^3.4.6",
193+
"ts-jest": "^29.2.3",
194194
"typescript": "^5.5.2"
195195
},
196196
"lint-staged": {

‎plop-templates/Component/Component.test.ts.hbs

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { generateSnapshots } from '@chanzuckerberg/story-utils';
22
import * as stories from './{{pascalCase name}}.stories';
3+
import type { StoryFile } from '../../util/utility-types';
34

45
describe('<{{pascalCase name}} />', () => {
5-
generateSnapshots(stories);
6+
generateSnapshots(stories as StoryFile);
67
});

‎plop-templates/Component/Component.tsx.hbs

+5
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,13 @@ import React from 'react';
33
import styles from './{{pascalCase name}}.module.css';
44

55
export interface Props {
6+
// Component API
67
/**
78
* CSS class names that can be appended to the component.
89
*/
910
className?: string;
11+
// Design API
12+
// Insert props/values as defined in figma for {{pascalCase name}}
1013
}
1114

1215
/**
@@ -18,13 +21,15 @@ export interface Props {
1821
*/
1922
export const {{pascalCase name}} = ({
2023
className,
24+
// Add other deferenced props to use
2125
...other
2226
}: Props) => {
2327
const componentClassName = clsx(styles['{{dashCase name}}'], className);
2428

2529
return (
2630
<div
2731
className={componentClassName}
32+
// Other de-referenced props go here
2833
{...other}
2934
>
3035
Hello!

‎plopfile.js

+1-31
Original file line numberDiff line numberDiff line change
@@ -52,37 +52,7 @@ module.exports = (plop) => {
5252
template:
5353
"export { default as {{pascalCase name}} } from './components/{{pascalCase name}}';",
5454
},
55-
// From https://github.com/bradfrost/czi-vanilla-storybook
56-
function sortIndex() {
57-
process.chdir(plop.getPlopfilePath());
58-
59-
const fs = require('fs');
60-
const indexFile = `${plop.getDestBasePath()}/src/index.ts`;
61-
62-
if (fs.existsSync(indexFile)) {
63-
// Split the index file into lines.
64-
const lines = fs.readFileSync(indexFile, 'utf8').split('\n');
65-
// Only sort lines that begin with "export {" in order to ignore
66-
// comments and exported types.
67-
const sortableLines = lines.filter((line) =>
68-
/^export {.*/g.test(line),
69-
);
70-
// Ignore all other lines and turn them back into a string.
71-
const ignoreLines = lines
72-
.filter((line) => !/^export {.*/g.test(line))
73-
.join('\n');
74-
75-
// Sort the sortable lines.
76-
const sortedLines = sortableLines
77-
.sort((a, b) => a.localeCompare(b))
78-
.join('\n');
79-
80-
// Write all of the lines back to the file.
81-
fs.writeFileSync(indexFile, `${sortedLines}\n${ignoreLines}\n`);
82-
83-
return `index.ts lines sorted`;
84-
}
85-
},
55+
// Removed sort to avoid removing per-version component ordering and documentation (see diff for old code)
8656
],
8757
});
8858
};

‎src/components/Button/Button.module.css

+1-2
Original file line numberDiff line numberDiff line change
@@ -87,8 +87,7 @@
8787

8888
.button--sm {
8989
padding: calc(var(--eds-size-half) / 16 * 1rem) 1.33333333rem;
90-
/* TODO: need eds-theme-typography-button-sm => preset-009 */
91-
font: var(--eds-typography-preset-009);
90+
font: var(--eds-theme-typography-button-sm);
9291

9392
min-width: calc(var(--eds-size-6) / 16 * 1rem);
9493
max-width: calc(var(--eds-size-24) / 16 * 1rem);;

‎src/components/Button/Button.stories.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -199,6 +199,7 @@ export const LoadingStates: Story = {
199199
export const IconLayouts: Story = {
200200
args: {
201201
...Default.args,
202+
children: undefined,
202203
icon: 'open-in-new',
203204
},
204205
render: (args) => {
@@ -214,9 +215,7 @@ export const IconLayouts: Story = {
214215
{...args}
215216
aria-label="Label must be applied with icon-only layout"
216217
iconLayout="icon-only"
217-
>
218-
Icon Only (text not visible)
219-
</Button>
218+
/>
220219
</div>
221220
);
222221
},

‎src/components/Card/Card.stories.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -226,7 +226,7 @@ export const WithHorizontalPrimaryButton: Story = {
226226
<ButtonGroup>
227227
{/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
228228
<Button onClick={() => {}} rank="primary">
229-
Primary Action
229+
Primary
230230
</Button>
231231
</ButtonGroup>
232232
</Card.Footer>
@@ -264,7 +264,7 @@ export const TopStripe: Story = {
264264
<ButtonGroup>
265265
{/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
266266
<Button onClick={() => {}} rank="primary">
267-
Primary Action
267+
Primary
268268
</Button>
269269
</ButtonGroup>
270270
</Card.Footer>
@@ -296,7 +296,7 @@ export const CustomTopStripe: Story = {
296296
<ButtonGroup>
297297
{/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
298298
<Button onClick={() => {}} rank="primary">
299-
Primary Action
299+
Primary
300300
</Button>
301301
</ButtonGroup>
302302
</Card.Footer>
@@ -327,7 +327,7 @@ export const BackgroundCallout: Story = {
327327
<ButtonGroup>
328328
{/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
329329
<Button onClick={() => {}} rank="primary">
330-
Primary Action
330+
Primary
331331
</Button>
332332
</ButtonGroup>
333333
</Card.Footer>

‎src/components/Card/__snapshots__/Card.test.ts.snap

+4-4
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ exports[`<Card /> BackgroundCallout story renders snapshot 1`] = `
8787
<span
8888
class="button__text"
8989
>
90-
Primary Action
90+
Primary
9191
</span>
9292
</button>
9393
</div>
@@ -387,7 +387,7 @@ exports[`<Card /> CustomTopStripe story renders snapshot 1`] = `
387387
<span
388388
class="button__text"
389389
>
390-
Primary Action
390+
Primary
391391
</span>
392392
</button>
393393
</div>
@@ -576,7 +576,7 @@ exports[`<Card /> TopStripe story renders snapshot 1`] = `
576576
<span
577577
class="button__text"
578578
>
579-
Primary Action
579+
Primary
580580
</span>
581581
</button>
582582
</div>
@@ -894,7 +894,7 @@ exports[`<Card /> WithHorizontalPrimaryButton story renders snapshot 1`] = `
894894
<span
895895
class="button__text"
896896
>
897-
Primary Action
897+
Primary
898898
</span>
899899
</button>
900900
</div>

‎src/components/Fieldset/Fieldset.module.css

+14-26
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,38 @@
1-
@import '../../design-tokens/mixins.css';
1+
.fieldset__footer {
2+
display: flex;
3+
justify-content: space-between;
24

3-
/*------------------------------------*\
4-
    # FIELDSET
5-
\*------------------------------------*/
6-
7-
/**
8-
* The fieldset groups a legend and several controls.
9-
*/
10-
.fieldset {
11-
@mixin fieldsetStyles;
12-
/* Overrides default browser styling. */
13-
margin: calc(var(--eds-size-2) / 16 * 1rem);
5+
margin-top: calc(var(--eds-size-3) / 16 * 1rem);
146
}
157

16-
/*------------------------------------*\
17-
# FIELDSET ITEMS
18-
\*------------------------------------*/
19-
208
/**
219
* The contents of the fieldset. Spaces them apart.
2210
*/
2311
.fieldset-items > :not(:last-child) {
24-
margin-bottom: calc(var(--eds-size-1-and-half) / 16 * 1rem);
12+
margin-bottom: calc(var(--eds-size-2) / 16 * 1rem);
2513
}
2614

27-
/*------------------------------------*\
28-
# FIELDSET LEGEND
29-
\*------------------------------------*/
30-
3115
/**
3216
* A label that's rendered as a <legend> for fieldsets.
3317
* It contains the same characteristics as a label (ability to add flag for optional field, etc),
3418
* but semantically/stylistically a bit different.
3519
*/
3620
.fieldset-legend {
37-
/* Removes some default browser styles. */
38-
@mixin legendReset;
39-
font: var(--eds-theme-typography-form-label);
40-
/* Adjust margin between legend and option list */
41-
margin-bottom: calc(var(--eds-size-2) / 16 * 1rem);
21+
margin-bottom: calc(var(--eds-size-3) / 16 * 1rem);
4222
}
4323

4424
/**
4525
* Label flag to mark whether or not a field is required
4626
* or optional. Currently a flag is only present for optional fields
27+
*
28+
* TODO: remove as deprecated with v16 of EDS
4729
*/
4830
.fieldset-legend__flag {
4931
font: var(--eds-theme-typography-body-sm);
5032
}
33+
34+
.fieldset-legend__overline {
35+
display: flex;
36+
align-items: center;
37+
gap: calc(var(--eds-size-half) / 16 * 1rem);
38+
}

0 commit comments

Comments
 (0)