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))
chanzuckerberg · Jun 20, 2024 · 4dc57db · 4dc57db
2 parents 97d72d4 + de2e608
commit 4dc57db
Show file tree

Hide file tree

Showing 293 changed files with 22,554 additions and 18,480 deletions.
diff --git a/.storybook/Theme.ts b/.storybook/Theme.ts
@@ -0,0 +1,43 @@
+import { create } from '@storybook/theming/create';
+
+// Docs: https://storybook.js.org/docs/7.6/configure/theming
+// Keys from https://github.com/storybookjs/storybook/blob/next/code/lib/theming/src/themes/light.ts
+export default create({
+  base: 'light',
+  brandTitle: 'Education Design System',
+  brandUrl: 'https://github.com/chanzuckerberg/edu-design-system',
+  // brandImage: 'https://storybook.js.org/images/placeholders/350x150.png',
+  brandTarget: '_blank',
+
+  // UI Fonts
+  fontBase: '"Graphik", sans-serif',
+  fontCode: '"Consolas", monospace',
+
+  // Primary scale colors
+  // colorPrimary: '#254EAC', // TODO not sure where this applies : eds-color-blue-650
+  colorSecondary: '#6C6967', // Selection and other colors : color-neutral-550
+
+  // App Chrome
+  appBg: '#FDF9F8', // Sidebar : color-neutral-025
+  appContentBg: '#FFFFFF', // Main documentation container : eds-color-white
+  appPreviewBg: '#FFFFFF', // Story Preview container : eds-color-white
+  appBorderColor: '#EEE7E4', // neutral-100
+  appBorderRadius: 0, //
+
+  // Text Colors
+  textColor: '#212121', // NOTE: zeroheight's default color
+  textInverseColor: '#FFFFFF', // text-utility-inverse
+
+  // Toolbar default and active colors
+  barTextColor: '#FFFFFF', // eds-color-white
+  barSelectedColor: '#FFFFFF', // eds-color-white
+  barBg: '#0F2163', // Content panel bar : color-blue-850
+
+  // Form Colors
+  buttonBg: '#FFFFFF', // eds-color-white
+  buttonBorder: '#0F2163', // color-background-utility-interactive-high-emphasis
+  inputBg: '#FFFFFF',
+  inputBorder: '#6C6967', // color-border-utility-default-medium-emphasis
+  inputTextColor: '#0F2163', // color-text-utility-default-primary
+  inputBorderRadius: 2, // border-radius-sm
+});
diff --git a/.storybook/components/ColorList/ColorList.module.css b/.storybook/components/ColorList/ColorList.module.css
@@ -1,7 +1,7 @@
 .color-list__label {
   width: fit-content;
-  padding: var(--eds-size-half);
-  border-radius: var(--eds-theme-box-button-border-radius);
+  padding: calc(var(--eds-size-half) / 16 * 1rem);
+  border-radius: calc(var(--eds-theme-box-button-border-radius) * 1px);
 
   font: var(--eds-theme-typography-label-md-subtle);
   color: rgb(235, 87, 87);
@@ -13,9 +13,9 @@
   width: 100%;
   height: 5rem;
   border: var(--eds-theme-color-border-neutral-subtle) solid
-    var(--eds-border-width-sm);
+    calc(var(--eds-border-width-sm) * 1px);
   outline: var(--eds-theme-color-border-neutral-strong) solid
-    var(--eds-border-width-sm);
+    calc(var(--eds-border-width-sm) * 1px);
 }
 
 .color-list__input::-webkit-color-swatch {

diff --git a/.storybook/components/ColorList/ColorList.tsx b/.storybook/components/ColorList/ColorList.tsx
@@ -41,12 +41,10 @@ export const ColorList = (props: Props) => (
           <Table.Cell>{listItem.tailwindClass}</Table.Cell>
           <Table.Cell>{listItem.value}</Table.Cell>
           <Table.Cell>
-            <input
+            <div
               className={styles['color-list__input']}
               id={listItem.name}
-              readOnly
-              type="color"
-              value={listItem.value}
+              style={{ backgroundColor: listItem.value }}
             />
           </Table.Cell>
         </Table.Row>

diff --git a/.storybook/components/DesignTokens/Tier1/Animation.jsx b/.storybook/components/DesignTokens/Tier1/Animation.jsx
@@ -15,10 +15,10 @@ export class Tier1Animation extends Component {
                 <Grid.Item key={listItem.name}>
                   <TokenSpecimen
                     inlineStyles={{
-                      transitionDuration: `var(${listItem.name})`,
+                      transitionDuration: `calc(var(${listItem.name}) * 1s)`,
                     }}
                     name={listItem.name}
-                    value={listItem.value}
+                    value={listItem.value + 's'}
                     variant="animation-fade"
                   />
                 </Grid.Item>
@@ -34,10 +34,10 @@ export class Tier1Animation extends Component {
                 <Grid.Item key={listItem.name}>
                   <TokenSpecimen
                     inlineStyles={{
-                      transitionDuration: `var(${listItem.name})`,
+                      transitionDuration: `calc(var(${listItem.name}) * 1s)`,
                     }}
                     name={listItem.name}
-                    value={listItem.value}
+                    value={listItem.value + 's'}
                     variant="animation-move"
                   />
                 </Grid.Item>
@@ -53,7 +53,7 @@ export class Tier1Animation extends Component {
                 <Grid.Item key={listItem.name}>
                   <TokenSpecimen
                     inlineStyles={{
-                      transitionTimingFunction: `var(${listItem.name})`,
+                      transitionTimingFunction: `calc(var(${listItem.name}) * 1s)`,
                     }}
                     name={listItem.name}
                     value={listItem.value}

diff --git a/.storybook/components/DesignTokens/Tier1/Borders.jsx b/.storybook/components/DesignTokens/Tier1/Borders.jsx
@@ -6,6 +6,7 @@ import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
 export class Tier1Borders extends Component {
   render() {
+    // TODO: what are the width tokens to document?
     return (
       <div>
         <Section title="Border Width">
@@ -16,12 +17,12 @@ export class Tier1Borders extends Component {
                   <TokenSpecimen
                     inlineStyles={{
                       backgroundColor: 'transparent',
-                      borderWidth: `var(${listItem.name})`,
+                      borderWidth: `calc(var(${listItem.name}) * 1px)`,
                       borderStyle: 'solid',
                       borderColor: 'black',
                     }}
                     name={listItem.name}
-                    value={listItem.value}
+                    value={listItem.value + 'px'}
                   />
                 </Grid.Item>
               );
@@ -32,6 +33,7 @@ export class Tier1Borders extends Component {
         <Section title="Border Radius">
           <Grid>
             {filterTokens(`eds-border-radius`).map(function (listItem) {
+              const unit = listItem.name.indexOf('round') > 0 ? '%' : 'px';
               return (
                 <Grid.Item key={listItem.name}>
                   <TokenSpecimen
@@ -40,10 +42,10 @@ export class Tier1Borders extends Component {
                       borderWidth: '2px',
                       borderStyle: 'solid',
                       borderColor: 'black',
-                      borderRadius: `var(${listItem.name})`,
+                      borderRadius: `calc(var(${listItem.name}) * 1${unit})`,
                     }}
                     name={listItem.name}
-                    value={listItem.value}
+                    value={listItem.value + unit}
                   />
                 </Grid.Item>
               );

diff --git a/.storybook/components/DesignTokens/Tier1/Colors.tsx b/.storybook/components/DesignTokens/Tier1/Colors.tsx
@@ -12,23 +12,59 @@ export const Tier1Colors = () => {
       figmaToken:
         figmaTokenHeader + '/' + name.slice(name.lastIndexOf('-') + 1),
     }));
+
+  // filter down to the neutral tokens which were introduced or redefined in the new brand
+  const nonLegacyNeutralItems = getListItems(
+    'eds-color-neutral',
+    'neutral',
+  ).filter((item) => {
+    // TODO: remove this filter once the deprecated neutral tokens are deleted
+    return [
+      '025',
+      '050',
+      '100',
+      '150',
+      '200',
+      '250',
+      '350',
+      '450',
+      '550',
+      '650',
+      '750',
+      '800',
+      '850',
+      '900',
+      '950',
+    ].includes(item.figmaToken.split('/')[1]);
+  });
   return (
     <div>
-      <Section title="Neutral Colors">
-        <ColorList listItems={getListItems('eds-color-neutral', 'neutral')} />
-      </Section>
-      <Section title="Brand Colors">
-        <ColorList listItems={getListItems('eds-color-brand', 'brand-grape')} />
-      </Section>
-      <Section className="flex flex-col gap-3" title="Other Colors">
-        <ColorList
-          listItems={getListItems('eds-color-other-orange', 'orange')}
-        />
-        <ColorList listItems={getListItems('eds-color-other-mint', 'mint')} />
-        <ColorList
-          listItems={getListItems('eds-color-other-yellow', 'yellow')}
-        />
-        <ColorList listItems={getListItems('eds-color-other-ruby', 'ruby')} />
+      <Section
+        description="These base colors are used in higher tier tokens and not linked for use via Tailwind"
+        title="Brand Red Colors"
+      >
+        <ColorList listItems={getListItems('eds-color-red', 'red')} />
+      </Section>
+      <Section title="Brand Orange Colors">
+        <ColorList listItems={getListItems('eds-color-orange', 'orange')} />
+      </Section>
+      <Section title="Brand Yellow Colors">
+        <ColorList listItems={getListItems('eds-color-yellow', 'yellow')} />
+      </Section>
+      <Section title="Brand Green Colors">
+        <ColorList listItems={getListItems('eds-color-green', 'green')} />
+      </Section>
+      <Section title="Brand Blue Colors">
+        <ColorList listItems={getListItems('eds-color-blue', 'blue')} />
+      </Section>
+      <Section title="Brand Purple Colors">
+        <ColorList listItems={getListItems('eds-color-purple', 'purple')} />
+      </Section>
+      <Section title="Brand Pink Colors">
+        <ColorList listItems={getListItems('eds-color-pink', 'pink')} />
+      </Section>
+      <Section title="Brand Neutral Colors">
+        <ColorList listItems={nonLegacyNeutralItems} />
       </Section>
     </div>
   );

diff --git a/.storybook/components/DesignTokens/Tier1/FontSizes.tsx b/.storybook/components/DesignTokens/Tier1/FontSizes.tsx
diff --git a/.storybook/components/DesignTokens/Tier1/Layout.jsx b/.storybook/components/DesignTokens/Tier1/Layout.jsx
diff --git a/.storybook/components/DesignTokens/Tier1/Sizes.jsx b/.storybook/components/DesignTokens/Tier1/Sizes.jsx
@@ -7,47 +7,35 @@ import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 export class Tier1Sizes extends Component {
   render() {
     return (
-      <div>
-        <Section title="Base Grid Size">
-          <Grid>
-            {filterTokens('eds-size-base').map((listItem) => (
-              <Grid.Item key={listItem.name}>
-                <TokenSpecimen
-                  comment="Calculated from a multiple of the base font size"
-                  inlineStyles={{
-                    width: `var(${listItem.name})`,
-                    height: `var(${listItem.name})`,
-                    minHeight: '0',
-                  }}
-                  name={listItem.name}
-                  value={listItem.value}
-                />
-              </Grid.Item>
-            ))}
-          </Grid>
-        </Section>
-        <Section title="Grid Size">
-          <Grid>
-            {filterTokens(`eds-size`)
-              .filter((listItem) => !listItem.name.endsWith('base-unit'))
-              .map(function (listItem) {
-                return (
-                  <Grid.Item key={listItem.name}>
-                    <TokenSpecimen
-                      inlineStyles={{
-                        width: `var(${listItem.name})`,
-                        height: `var(${listItem.name})`,
-                        minHeight: '0',
-                      }}
-                      name={listItem.name}
-                      value={listItem.value}
-                    />
-                  </Grid.Item>
-                );
-              })}
-          </Grid>
-        </Section>
-      </div>
+      <Section
+        description="When using tailwind config, these sizes can be applied to any tailwind size utility class"
+        title="Grid Sizes"
+      >
+        <Grid>
+          {filterTokens(`eds-size`)
+            .filter((listItem) => !listItem.name.endsWith('base-unit'))
+            .map(function (listItem) {
+              return (
+                <Grid.Item key={listItem.name}>
+                  <TokenSpecimen
+                    comment={`Tailwind class: *-${
+                      listItem.name.split('--eds-')[1]
+                    }`}
+                    inlineStyles={{
+                      width: `calc(var(${listItem.name}) / 16 * 1rem)`,
+                      height: `calc(var(${listItem.name}) / 16 * 1rem)`,
+                      minHeight: '0',
+                    }}
+                    name={listItem.name}
+                    value={
+                      listItem.value + 'px' + ` (${listItem.value / 16}rem)`
+                    }
+                  />
+                </Grid.Item>
+              );
+            })}
+        </Grid>
+      </Section>
     );
   }
 }
diff --git a/.storybook/components/DesignTokens/Tier1/Tier1Tokens.stories.jsx b/.storybook/components/DesignTokens/Tier1/Tier1Tokens.stories.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { Tier1Animation } from './Animation';
 import { Tier1Borders } from './Borders';
 import { Tier1Colors } from './Colors';
-import { Tier1Layout } from './Layout';
 import { Tier1Shadows } from './Shadows';
 import { Tier1Sizes } from './Sizes';
 
@@ -22,6 +21,8 @@ export default {
   },
 };
 
+// TODO: Tokens to document: eds-color-opacity
+
 export const Colors = {
   render: () => <Tier1Colors />,
 };
@@ -38,10 +39,6 @@ export const Sizes = {
   render: () => <Tier1Sizes />,
 };
 
-export const Layout = {
-  render: () => <Tier1Layout />,
-};
-
 export const Shadows = {
   render: () => <Tier1Shadows />,
 };