Skip to content

Commit 4dc57db

Browse files
booc0mtacobooc0mtaco
authored
Merge pull request #1996 from chanzuckerberg/release-v15.0.0
## [15.0.0](v14.0.0...v15.0.0) (2024-06-20) ### ⚠ BREAKING CHANGES * **TextareaField:** introduce 2.0 component (#1911) * **Card:** introduce 2.0 component (#1908) * **Modal:** introduce 2.0 component (#1907) * **Toast:** introduce 2.0 component (#1906) * **Tooltip:** introduce 2.0 component (#1905) * **BannerNotification:** introduce 2.0 component (#1904) * **InlineNotification:** introduce 2.0 component (#1903) * **Accordion:** introduce 2.0 component (#1901) * **Select:** introduce 2.0 component (#1899) * **config:** use literal values in style-dictionary config (#1900) * **InputField:** introduce 2.0 component (#1898) * **Checkbox:** introduce 2.0 component (#1897) * **Radio:** introduce 2.0 component (#1895) * **Menu:** introduce 2.0 component (#1894) * **TabGroup:** introduce 2.0 component (#1892) * **NumberIcon:** introduce 2.0 component (#1891) * **Link:** introduce v2.0 component (#1890) * **Button:** introduce v2.0 component (#1889) * **tokens:** remove units from design system tokens (#1912) * **Icon:** introduce 2.0 component (#1925) * adjust responsive and spacing tokens/config (#1933) * **AppNotification:** introduce 2.0 component (#1945) * **ToastNotification:** rename from Toast to ToastNotification (#1944) * **typography:** update typography tokens and fonts (#1942) * **FieldLabel:** introduce 2.0 component (#1953) * **LoadingIndicator:** introduce 2.0 component (#1963) * update tier 1 and 2 typography tokens (#1969) * move from isWarning and isError to status prop (#1973) * pre-cleanup changes to prepare for v15 (#1992) ### Features * **Accordion:** introduce 2.0 component ([#1901](#1901)) ([cf2086b](cf2086b)) * add new v2.0 component tokens ([#1888](#1888)) ([3607a5d](3607a5d)) * **BannerNotification:** introduce 2.0 component ([#1904](#1904)) ([cda9e4b](cda9e4b)) * **Button:** introduce v2.0 component ([#1889](#1889)) ([a6b446f](a6b446f)) * **Card:** introduce 2.0 component ([#1908](#1908)) ([cd21b49](cd21b49)) * **Checkbox:** introduce 2.0 component ([#1897](#1897)) ([f3fc767](f3fc767)) * **config:** use literal values in style-dictionary config ([#1900](#1900)) ([e470f4b](e470f4b)) * **InlineNotification:** introduce 2.0 component ([#1903](#1903)) ([7bff52d](7bff52d)) * **InputField:** introduce 2.0 component ([#1898](#1898)) ([a3d3984](a3d3984)) * **Link:** introduce v2.0 component ([#1890](#1890)) ([bdce10a](bdce10a)) * **Menu:** introduce 2.0 component ([#1894](#1894)) ([3f540f9](3f540f9)) * **Modal:** introduce 2.0 component ([#1907](#1907)) ([d14c963](d14c963)) * **NumberIcon:** introduce 2.0 component ([#1891](#1891)) ([cc7e140](cc7e140)) * **Radio:** introduce 2.0 component ([#1895](#1895)) ([8ef797f](8ef797f)) * **Select:** introduce 2.0 component ([#1899](#1899)) ([1164b90](1164b90)) * **TabGroup:** introduce 2.0 component ([#1892](#1892)) ([e952d33](e952d33)) * **TextareaField:** introduce 2.0 component ([#1911](#1911)) ([a68a255](a68a255)) * **Toast:** introduce 2.0 component ([#1906](#1906)) ([8bce819](8bce819)) * **Tooltip:** introduce 2.0 component ([#1905](#1905)) ([ded98b2](ded98b2)) * add support for extended nav and action components ([#1918](#1918)) ([f4a541e](f4a541e)) * **tokens:** remove units from design system tokens ([#1912](#1912)) ([ab666cf](ab666cf)) * **Icon:** introduce 2.0 component ([#1925](#1925)) ([3e40638](3e40638)) * adjust responsive and spacing tokens/config ([#1933](#1933)) ([b19e453](b19e453)) * **AppNotification:** introduce 2.0 component ([#1945](#1945)) ([489e8d9](489e8d9)) * **ToastNotification:** rename from Toast to ToastNotification ([#1944](#1944)) ([07284c2](07284c2)) * **typography:** update typography tokens and fonts ([#1942](#1942)) ([3140996](3140996)) * **Link:** allow nodes to be used in link body ([#1950](#1950)) ([01970a2](01970a2)) * allow react nodes on subtitle ([#1954](#1954)) ([fc6bb78](fc6bb78)) * **FieldLabel:** introduce 2.0 component ([#1953](#1953)) ([6198b9e](6198b9e)) * add eds-migrate command ([b45061e](b45061e)) * **tokens:** add border-utility-inteactive-secondary tokens ([#1959](#1959)) ([72daa0b](72daa0b)) * add `eds-migrate` script for running codemods on major version upgrades ([#1951](#1951)) ([109a0e5](109a0e5)) * **LoadingIndicator:** introduce 2.0 component ([#1963](#1963)) ([26faab7](26faab7)) * **LoadingIndicator:** update stroke width in Button ([#1964](#1964)) ([bac3594](bac3594)) * **Menu:** set new default for menu trigger ([#1965](#1965)) ([24815c2](24815c2)) * **Select:** support horizontal labels ([#1962](#1962)) ([675ad5f](675ad5f)) * **TabGroup:** add inverse variant treatment ([#1960](#1960)) ([402e433](402e433)) * **tokens:** add border-utility-inteactive-secondary tokens ([#1959](#1959)) ([72daa0b](72daa0b)) * **Button:** update interactive styles for tertiary buttons ([#1970](#1970)) ([288da8c](288da8c)) * update tier 1 and 2 typography tokens ([#1969](#1969)) ([9dea463](9dea463)) * **Link:** add inverse variant (with variant prop) ([#1972](#1972)) ([bdbf9df](bdbf9df)) * move from isWarning and isError to status prop ([#1973](#1973)) ([56066ae](56066ae)) * **Icon:** add new and updated icons ([#1981](#1981)) ([fc7f842](fc7f842)) * **Link:** add inverse text visited color token and apply ([#1982](#1982)) ([98dec99](98dec99)) * **ToastNotification:** add dismissType with automated dismissing ([#1980](#1980)) ([8545f14](8545f14)) * **Tooltip:** add inverse variant ([#1984](#1984)) ([d6ccc8d](d6ccc8d)) * **Typography:** add typography-overline-lg ([#1993](#1993)) ([36eb3c9](36eb3c9)) * pre-cleanup changes to prepare for v15 ([#1992](#1992)) ([dbce0d2](dbce0d2)) ### Bug Fixes * disambiguate old token colors ([#1913](#1913)) ([758eb2d](758eb2d)) * **Button:** allow as prop on button ([#1994](#1994)) ([37d1f5b](37d1f5b)) * **FieldNote:** fix icon alignment and size issues ([367717e](367717e)) * **Button:** align disabled treatment to latest design ([#1931](#1931)) ([01a9d71](01a9d71)) * sync color tokens with design ([#1929](#1929)) ([146df70](146df70)) * **Button:** address QA design feedback ([#1940](#1940)) ([1e431b4](1e431b4)) * **ButtonGroup:** address QA design updates ([#1943](#1943)) ([1595a18](1595a18)) * **InlineNotification:** address QA updates ([#1937](#1937)) ([d96ab79](d96ab79)) * **TabGroup:** address QA comments and designs ([#1938](#1938)) ([48e92d4](48e92d4)) * **TextareaField:** address QA updates ([#1936](#1936)) ([3aa5c94](3aa5c94)) * update token and theming ([#1946](#1946)) ([5546205](5546205)) * **Accordion:** address QA updates from design ([#1948](#1948)) ([56fa437](56fa437)) * **AppNotification:** apply usage feedback ([#1949](#1949)) ([06cc194](06cc194)) * **NumberIcon:** address QA design notes ([#1947](#1947)) ([007d757](007d757)) * **Card:** address QA design and eng feedback ([#1958](#1958)) ([14c73fe](14c73fe)) * **Modal:** address QA updates ([#1957](#1957)) ([0d5a414](0d5a414)) * handle more cases ([a7e5830](a7e5830)) * **FieldNote:** adjust layout for icon and text lockup ([5788fe5](5788fe5)) * **Button:** add in missing inverse disabled treatments ([#1976](#1976)) ([8389f35](8389f35)) * **Button:** mark disable usage as invalid ([#1977](#1977)) ([99a70d3](99a70d3)) * **Button:** use text-utility-default state tokens ([#1979](#1979)) ([e754588](e754588)) * **Link:** address problems with link color inheritance ([#1975](#1975)) ([78d173e](78d173e)) * **Link:** align icons in flexed standalone container ([#1978](#1978)) ([3a6a20d](3a6a20d)) * **Button:** align button icons and text with layouts ([#1988](#1988)) ([33fbd51](33fbd51)) * remove circular dependency for radio/checkbox ([dffed3c](dffed3c)) * use aria-disabled when disabled prop is applied ([#1987](#1987)) ([1fe3b0f](1fe3b0f)) * handle required disabled field hints ([#1990](#1990)) ([11c0883](11c0883)) * **Select:** allow attachment of headlessUI props to label ([#1991](#1991)) ([c3ce70f](c3ce70f))
2 parents 97d72d4 + de2e608 commit 4dc57db

File tree

293 files changed

+22554
-18480
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

293 files changed

+22554
-18480
lines changed

‎.storybook/Theme.ts

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { create } from '@storybook/theming/create';
2+
3+
// Docs: https://storybook.js.org/docs/7.6/configure/theming
4+
// Keys from https://github.com/storybookjs/storybook/blob/next/code/lib/theming/src/themes/light.ts
5+
export default create({
6+
base: 'light',
7+
brandTitle: 'Education Design System',
8+
brandUrl: 'https://github.com/chanzuckerberg/edu-design-system',
9+
// brandImage: 'https://storybook.js.org/images/placeholders/350x150.png',
10+
brandTarget: '_blank',
11+
12+
// UI Fonts
13+
fontBase: '"Graphik", sans-serif',
14+
fontCode: '"Consolas", monospace',
15+
16+
// Primary scale colors
17+
// colorPrimary: '#254EAC', // TODO not sure where this applies : eds-color-blue-650
18+
colorSecondary: '#6C6967', // Selection and other colors : color-neutral-550
19+
20+
// App Chrome
21+
appBg: '#FDF9F8', // Sidebar : color-neutral-025
22+
appContentBg: '#FFFFFF', // Main documentation container : eds-color-white
23+
appPreviewBg: '#FFFFFF', // Story Preview container : eds-color-white
24+
appBorderColor: '#EEE7E4', // neutral-100
25+
appBorderRadius: 0, //
26+
27+
// Text Colors
28+
textColor: '#212121', // NOTE: zeroheight's default color
29+
textInverseColor: '#FFFFFF', // text-utility-inverse
30+
31+
// Toolbar default and active colors
32+
barTextColor: '#FFFFFF', // eds-color-white
33+
barSelectedColor: '#FFFFFF', // eds-color-white
34+
barBg: '#0F2163', // Content panel bar : color-blue-850
35+
36+
// Form Colors
37+
buttonBg: '#FFFFFF', // eds-color-white
38+
buttonBorder: '#0F2163', // color-background-utility-interactive-high-emphasis
39+
inputBg: '#FFFFFF',
40+
inputBorder: '#6C6967', // color-border-utility-default-medium-emphasis
41+
inputTextColor: '#0F2163', // color-text-utility-default-primary
42+
inputBorderRadius: 2, // border-radius-sm
43+
});

‎.storybook/components/ColorList/ColorList.module.css

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.color-list__label {
22
width: fit-content;
3-
padding: var(--eds-size-half);
4-
border-radius: var(--eds-theme-box-button-border-radius);
3+
padding: calc(var(--eds-size-half) / 16 * 1rem);
4+
border-radius: calc(var(--eds-theme-box-button-border-radius) * 1px);
55

66
font: var(--eds-theme-typography-label-md-subtle);
77
color: rgb(235, 87, 87);
@@ -13,9 +13,9 @@
1313
width: 100%;
1414
height: 5rem;
1515
border: var(--eds-theme-color-border-neutral-subtle) solid
16-
var(--eds-border-width-sm);
16+
calc(var(--eds-border-width-sm) * 1px);
1717
outline: var(--eds-theme-color-border-neutral-strong) solid
18-
var(--eds-border-width-sm);
18+
calc(var(--eds-border-width-sm) * 1px);
1919
}
2020

2121
.color-list__input::-webkit-color-swatch {

‎.storybook/components/ColorList/ColorList.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,10 @@ export const ColorList = (props: Props) => (
4141
<Table.Cell>{listItem.tailwindClass}</Table.Cell>
4242
<Table.Cell>{listItem.value}</Table.Cell>
4343
<Table.Cell>
44-
<input
44+
<div
4545
className={styles['color-list__input']}
4646
id={listItem.name}
47-
readOnly
48-
type="color"
49-
value={listItem.value}
47+
style={{ backgroundColor: listItem.value }}
5048
/>
5149
</Table.Cell>
5250
</Table.Row>

‎.storybook/components/DesignTokens/Tier1/Animation.jsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@ export class Tier1Animation extends Component {
1515
<Grid.Item key={listItem.name}>
1616
<TokenSpecimen
1717
inlineStyles={{
18-
transitionDuration: `var(${listItem.name})`,
18+
transitionDuration: `calc(var(${listItem.name}) * 1s)`,
1919
}}
2020
name={listItem.name}
21-
value={listItem.value}
21+
value={listItem.value + 's'}
2222
variant="animation-fade"
2323
/>
2424
</Grid.Item>
@@ -34,10 +34,10 @@ export class Tier1Animation extends Component {
3434
<Grid.Item key={listItem.name}>
3535
<TokenSpecimen
3636
inlineStyles={{
37-
transitionDuration: `var(${listItem.name})`,
37+
transitionDuration: `calc(var(${listItem.name}) * 1s)`,
3838
}}
3939
name={listItem.name}
40-
value={listItem.value}
40+
value={listItem.value + 's'}
4141
variant="animation-move"
4242
/>
4343
</Grid.Item>
@@ -53,7 +53,7 @@ export class Tier1Animation extends Component {
5353
<Grid.Item key={listItem.name}>
5454
<TokenSpecimen
5555
inlineStyles={{
56-
transitionTimingFunction: `var(${listItem.name})`,
56+
transitionTimingFunction: `calc(var(${listItem.name}) * 1s)`,
5757
}}
5858
name={listItem.name}
5959
value={listItem.value}

‎.storybook/components/DesignTokens/Tier1/Borders.jsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
66

77
export class Tier1Borders extends Component {
88
render() {
9+
// TODO: what are the width tokens to document?
910
return (
1011
<div>
1112
<Section title="Border Width">
@@ -16,12 +17,12 @@ export class Tier1Borders extends Component {
1617
<TokenSpecimen
1718
inlineStyles={{
1819
backgroundColor: 'transparent',
19-
borderWidth: `var(${listItem.name})`,
20+
borderWidth: `calc(var(${listItem.name}) * 1px)`,
2021
borderStyle: 'solid',
2122
borderColor: 'black',
2223
}}
2324
name={listItem.name}
24-
value={listItem.value}
25+
value={listItem.value + 'px'}
2526
/>
2627
</Grid.Item>
2728
);
@@ -32,6 +33,7 @@ export class Tier1Borders extends Component {
3233
<Section title="Border Radius">
3334
<Grid>
3435
{filterTokens(`eds-border-radius`).map(function (listItem) {
36+
const unit = listItem.name.indexOf('round') > 0 ? '%' : 'px';
3537
return (
3638
<Grid.Item key={listItem.name}>
3739
<TokenSpecimen
@@ -40,10 +42,10 @@ export class Tier1Borders extends Component {
4042
borderWidth: '2px',
4143
borderStyle: 'solid',
4244
borderColor: 'black',
43-
borderRadius: `var(${listItem.name})`,
45+
borderRadius: `calc(var(${listItem.name}) * 1${unit})`,
4446
}}
4547
name={listItem.name}
46-
value={listItem.value}
48+
value={listItem.value + unit}
4749
/>
4850
</Grid.Item>
4951
);

‎.storybook/components/DesignTokens/Tier1/Colors.tsx

+51-15
Original file line numberDiff line numberDiff line change
@@ -12,23 +12,59 @@ export const Tier1Colors = () => {
1212
figmaToken:
1313
figmaTokenHeader + '/' + name.slice(name.lastIndexOf('-') + 1),
1414
}));
15+
16+
// filter down to the neutral tokens which were introduced or redefined in the new brand
17+
const nonLegacyNeutralItems = getListItems(
18+
'eds-color-neutral',
19+
'neutral',
20+
).filter((item) => {
21+
// TODO: remove this filter once the deprecated neutral tokens are deleted
22+
return [
23+
'025',
24+
'050',
25+
'100',
26+
'150',
27+
'200',
28+
'250',
29+
'350',
30+
'450',
31+
'550',
32+
'650',
33+
'750',
34+
'800',
35+
'850',
36+
'900',
37+
'950',
38+
].includes(item.figmaToken.split('/')[1]);
39+
});
1540
return (
1641
<div>
17-
<Section title="Neutral Colors">
18-
<ColorList listItems={getListItems('eds-color-neutral', 'neutral')} />
19-
</Section>
20-
<Section title="Brand Colors">
21-
<ColorList listItems={getListItems('eds-color-brand', 'brand-grape')} />
22-
</Section>
23-
<Section className="flex flex-col gap-3" title="Other Colors">
24-
<ColorList
25-
listItems={getListItems('eds-color-other-orange', 'orange')}
26-
/>
27-
<ColorList listItems={getListItems('eds-color-other-mint', 'mint')} />
28-
<ColorList
29-
listItems={getListItems('eds-color-other-yellow', 'yellow')}
30-
/>
31-
<ColorList listItems={getListItems('eds-color-other-ruby', 'ruby')} />
42+
<Section
43+
description="These base colors are used in higher tier tokens and not linked for use via Tailwind"
44+
title="Brand Red Colors"
45+
>
46+
<ColorList listItems={getListItems('eds-color-red', 'red')} />
47+
</Section>
48+
<Section title="Brand Orange Colors">
49+
<ColorList listItems={getListItems('eds-color-orange', 'orange')} />
50+
</Section>
51+
<Section title="Brand Yellow Colors">
52+
<ColorList listItems={getListItems('eds-color-yellow', 'yellow')} />
53+
</Section>
54+
<Section title="Brand Green Colors">
55+
<ColorList listItems={getListItems('eds-color-green', 'green')} />
56+
</Section>
57+
<Section title="Brand Blue Colors">
58+
<ColorList listItems={getListItems('eds-color-blue', 'blue')} />
59+
</Section>
60+
<Section title="Brand Purple Colors">
61+
<ColorList listItems={getListItems('eds-color-purple', 'purple')} />
62+
</Section>
63+
<Section title="Brand Pink Colors">
64+
<ColorList listItems={getListItems('eds-color-pink', 'pink')} />
65+
</Section>
66+
<Section title="Brand Neutral Colors">
67+
<ColorList listItems={nonLegacyNeutralItems} />
3268
</Section>
3369
</div>
3470
);

‎.storybook/components/DesignTokens/Tier1/FontSizes.tsx

-26
This file was deleted.

‎.storybook/components/DesignTokens/Tier1/Layout.jsx

-31
This file was deleted.

‎.storybook/components/DesignTokens/Tier1/Sizes.jsx

+29-41
Original file line numberDiff line numberDiff line change
@@ -7,47 +7,35 @@ import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
77
export class Tier1Sizes extends Component {
88
render() {
99
return (
10-
<div>
11-
<Section title="Base Grid Size">
12-
<Grid>
13-
{filterTokens('eds-size-base').map((listItem) => (
14-
<Grid.Item key={listItem.name}>
15-
<TokenSpecimen
16-
comment="Calculated from a multiple of the base font size"
17-
inlineStyles={{
18-
width: `var(${listItem.name})`,
19-
height: `var(${listItem.name})`,
20-
minHeight: '0',
21-
}}
22-
name={listItem.name}
23-
value={listItem.value}
24-
/>
25-
</Grid.Item>
26-
))}
27-
</Grid>
28-
</Section>
29-
<Section title="Grid Size">
30-
<Grid>
31-
{filterTokens(`eds-size`)
32-
.filter((listItem) => !listItem.name.endsWith('base-unit'))
33-
.map(function (listItem) {
34-
return (
35-
<Grid.Item key={listItem.name}>
36-
<TokenSpecimen
37-
inlineStyles={{
38-
width: `var(${listItem.name})`,
39-
height: `var(${listItem.name})`,
40-
minHeight: '0',
41-
}}
42-
name={listItem.name}
43-
value={listItem.value}
44-
/>
45-
</Grid.Item>
46-
);
47-
})}
48-
</Grid>
49-
</Section>
50-
</div>
10+
<Section
11+
description="When using tailwind config, these sizes can be applied to any tailwind size utility class"
12+
title="Grid Sizes"
13+
>
14+
<Grid>
15+
{filterTokens(`eds-size`)
16+
.filter((listItem) => !listItem.name.endsWith('base-unit'))
17+
.map(function (listItem) {
18+
return (
19+
<Grid.Item key={listItem.name}>
20+
<TokenSpecimen
21+
comment={`Tailwind class: *-${
22+
listItem.name.split('--eds-')[1]
23+
}`}
24+
inlineStyles={{
25+
width: `calc(var(${listItem.name}) / 16 * 1rem)`,
26+
height: `calc(var(${listItem.name}) / 16 * 1rem)`,
27+
minHeight: '0',
28+
}}
29+
name={listItem.name}
30+
value={
31+
listItem.value + 'px' + ` (${listItem.value / 16}rem)`
32+
}
33+
/>
34+
</Grid.Item>
35+
);
36+
})}
37+
</Grid>
38+
</Section>
5139
);
5240
}
5341
}

‎.storybook/components/DesignTokens/Tier1/Tier1Tokens.stories.jsx

+2-5
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from 'react';
22
import { Tier1Animation } from './Animation';
33
import { Tier1Borders } from './Borders';
44
import { Tier1Colors } from './Colors';
5-
import { Tier1Layout } from './Layout';
65
import { Tier1Shadows } from './Shadows';
76
import { Tier1Sizes } from './Sizes';
87

@@ -22,6 +21,8 @@ export default {
2221
},
2322
};
2423

24+
// TODO: Tokens to document: eds-color-opacity
25+
2526
export const Colors = {
2627
render: () => <Tier1Colors />,
2728
};
@@ -38,10 +39,6 @@ export const Sizes = {
3839
render: () => <Tier1Sizes />,
3940
};
4041

41-
export const Layout = {
42-
render: () => <Tier1Layout />,
43-
};
44-
4542
export const Shadows = {
4643
render: () => <Tier1Shadows />,
4744
};

0 commit comments

Comments
 (0)