Merge pull request #1723 from chanzuckerberg/release-v13.0.0

## [13.0.0](v12.4.2...v13.0.0) (2023-08-14) ### ⚠ BREAKING CHANGES * **link:** remove text-link tokens for link t3 tokens (#1639) * **colors:** remove old colors and convert to input and show figma token (#1711) * remove deprecated dropdown (#1657) * **banner:** remove component (#1702) * remove legacy tokens and typography mixins (#1709) * **Grid:** remove top-level sub-component(s) (#1703) * **dragdrop:** remove top level subcomponents (#1697) * **Fieldset:** remove top-level sub-component(s) (#1695) * **HorizontalStepper:** remove top-level sub-component(s) (#1696) * **Card:** remove top-level sub-component(s) (#1692) * **checkbox:** remove top level subcomponents (#1693) * **radio:** remove top level subcomponents (#1690) * **DataBar:** remove top-level sub-component(s) (#1686) * **Modal:** remove top-level sub-component(s) (#1689) * **searchbar:** remove top level subcomponents (#1687) * **table:** remove top-level sub-components (#1685) * **toolbar:** remove component (#1683) * **Breadcrumbs:** remove top-level sub-component (#1680) * **timelinenav:** remove top-level sub-component (#1681) ### Features * **Breadcrumbs:** remove top-level sub-component ([#1680](#1680)) ([669081d](669081d)) * **Card:** remove top-level sub-component(s) ([#1692](#1692)) ([7ec01f4](7ec01f4)) * **checkbox:** remove top level subcomponents ([#1693](#1693)) ([87b12e8](87b12e8)) * **DataBar:** remove top-level sub-component(s) ([#1686](#1686)) ([b4b9276](b4b9276)) * **dragdrop:** remove top level subcomponents ([#1697](#1697)) ([b4fd00c](b4fd00c)) * **Fieldset:** remove top-level sub-component(s) ([#1695](#1695)) ([0c8280d](0c8280d)) * **Grid:** remove top-level sub-component(s) ([#1703](#1703)) ([c8925c9](c8925c9)) * **HorizontalStepper:** remove top-level sub-component(s) ([#1696](#1696)) ([188fd99](188fd99)) * **Layout:** mark layout components as deprecated ([#1700](#1700)) ([930a369](930a369)) * **Modal:** remove top-level sub-component(s) ([#1689](#1689)) ([8743e62](8743e62)) * **radio:** remove top level subcomponents ([#1690](#1690)) ([82da617](82da617)) * remove legacy tokens and typography mixins ([#1709](#1709)) ([ec3e819](ec3e819)) * **searchbar:** remove top level subcomponents ([#1687](#1687)) ([d13bb6c](d13bb6c)) * **table:** remove top-level sub-components ([#1685](#1685)) ([742a530](742a530)) * **timelinenav:** remove top-level sub-component ([#1681](#1681)) ([f46eca7](f46eca7)) ### Bug Fixes * **Avatar:** support display names using emoji and multi-byte ([#1716](#1716)) ([1294022](1294022)) * update token exports ([#1722](#1722)) ([982c55f](982c55f)) * **banner:** remove component ([#1702](#1702)) ([356550c](356550c)) * **colors:** remove old colors and convert to input and show figma token ([#1711](#1711)) ([c9a5079](c9a5079)) * **link:** remove text-link tokens for link t3 tokens ([#1639](#1639)) ([d35cfe4](d35cfe4)) * remove deprecated dropdown ([#1657](#1657)) ([26d1694](26d1694)) * **toolbar:** remove component ([#1683](#1683)) ([bd47899](bd47899))
chanzuckerberg · Aug 15, 2023 · c935b4f · c935b4f
2 parents b4eace2 + c5795a2
commit c935b4f
Show file tree

Hide file tree

Showing 326 changed files with 7,260 additions and 16,955 deletions.
diff --git a/.omletrc.json b/.omletrc.json
@@ -0,0 +1,5 @@
+{
+ "ignore": ["lib/**", ".storybook/**"],
+ "include": ["src/components/**/*.tsx"],
+ "tsconfigPath": "tsconfig.json"
+}
diff --git a/.storybook/components/ColorList/ColorList.module.css b/.storybook/components/ColorList/ColorList.module.css
@@ -0,0 +1,30 @@
+.color-list__label {
+ width: fit-content;
+ padding: var(--eds-size-half);
+ border-radius: var(--eds-theme-box-button-border-radius);
+
+ font: var(--eds-theme-typography-label-md-subtle);
+ color: rgb(235, 87, 87);
+
+ background-color: var(--eds-theme-color-background-neutral-subtle);
+}
+
+.color-list__input {
+ width: 100%;
+ height: 5rem;
+ border: var(--eds-theme-color-border-neutral-subtle) solid
+ var(--eds-border-width-sm);
+ outline: var(--eds-theme-color-border-neutral-strong) solid
+ var(--eds-border-width-sm);
+}
+
+.color-list__input::-webkit-color-swatch {
+ border-color: transparent;
+}
+.color-list__input::-webkit-color-swatch-wrapper {
+ padding: 0;
+}
+
+.color-list__input::-moz-color-swatch {
+ border-color: transparent;
+}
diff --git a/.storybook/components/ColorList/ColorList.tsx b/.storybook/components/ColorList/ColorList.tsx
@@ -1,33 +1,56 @@
-import React, { Component } from 'react';
-import { Grid } from '../../../src';
-import { TokenSpecimen } from '../TokenSpecimen/TokenSpecimen';
+import React from 'react';
+import Table from '../../../src/components/Table';
+import styles from './ColorList.module.css';
 
 type ListItem = {
  name: string;
- value: any;
+ value: string;
+ figmaToken?: string;
+ tailwindClass?: string;
 };
 
 type Props = {
  listItems: ListItem[];
 };
 
-export class ColorList extends Component<Props> {
- render() {
- return (
- <Grid>
- {this.props.listItems.map(function (listItem) {
- return (
- <TokenSpecimen
- inlineStyles={{
- backgroundColor: `var(${listItem.name})`,
- }}
- key={listItem.name}
- name={listItem.name}
+export const ColorList = (props: Props) => (
+ <Table>
+ <Table.Header>
+ <Table.Row variant="header">
+ <Table.HeaderCell className="w-72">CSS Variable</Table.HeaderCell>
+ <Table.HeaderCell className="w-40">Figma Token Name</Table.HeaderCell>
+ <Table.HeaderCell className="w-72">
+ Tailwind Class Name(s)
+ </Table.HeaderCell>
+ <Table.HeaderCell className="w-40">Raw Value</Table.HeaderCell>
+ <Table.HeaderCell>Clickable Color Palatte</Table.HeaderCell>
+ </Table.Row>
+ </Table.Header>
+ <Table.Body>
+ {props.listItems.map((listItem) => (
+ <Table.Row key={listItem.name}>
+ <Table.Cell>
+ <label
+ className={styles['color-list__label']}
+ htmlFor={listItem.name}
+ >
+ <code>{listItem.name}</code>
+ </label>
+ </Table.Cell>
+ <Table.Cell>{listItem.figmaToken}</Table.Cell>
+ <Table.Cell>{listItem.tailwindClass}</Table.Cell>
+ <Table.Cell>{listItem.value}</Table.Cell>
+ <Table.Cell>
+ <input
+ className={styles['color-list__input']}
+ id={listItem.name}
+ readOnly
+ type="color"
  value={listItem.value}
  />
- );
- })}
- </Grid>
- );
- }
-}
+ </Table.Cell>
+ </Table.Row>
+ ))}
+ </Table.Body>
+ </Table>
+);
diff --git a/.storybook/components/DesignTokens/Tier1/Animation.jsx b/.storybook/components/DesignTokens/Tier1/Animation.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Grid, GridItem, Section } from '../../../../src';
+import { Grid, Section } from '../../../../src';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
@@ -11,7 +11,7 @@ export class Tier1Animation extends Component {
  <Grid>
  {filterTokens(`eds-anim-fade`).map(function (listItem) {
  return (
- <GridItem key={listItem.name}>
+ <Grid.Item key={listItem.name}>
  <TokenSpecimen
  inlineStyles={{
  transitionDuration: `var(${listItem.name})`,
@@ -20,7 +20,7 @@ export class Tier1Animation extends Component {
  value={listItem.value}
  variant="animation-fade"
  />
- </GridItem>
+ </Grid.Item>
  );
  })}
  </Grid>
@@ -30,7 +30,7 @@ export class Tier1Animation extends Component {
  <Grid>
  {filterTokens(`eds-anim-move`).map(function (listItem) {
  return (
- <GridItem key={listItem.name}>
+ <Grid.Item key={listItem.name}>
  <TokenSpecimen
  inlineStyles={{
  transitionDuration: `var(${listItem.name})`,
@@ -39,7 +39,7 @@ export class Tier1Animation extends Component {
  value={listItem.value}
  variant="animation-move"
  />
- </GridItem>
+ </Grid.Item>
  );
  })}
  </Grid>
@@ -49,7 +49,7 @@ export class Tier1Animation extends Component {
  <Grid>
  {filterTokens(`eds-anim-ease`).map(function (listItem) {
  return (
- <GridItem key={listItem.name}>
+ <Grid.Item key={listItem.name}>
  <TokenSpecimen
  inlineStyles={{
  transitionTimingFunction: `var(${listItem.name})`,
@@ -58,7 +58,7 @@ export class Tier1Animation extends Component {
  value={listItem.value}
  variant="animation-fade"
  />
- </GridItem>
+ </Grid.Item>
  );
  })}
  </Grid>

diff --git a/.storybook/components/DesignTokens/Tier1/Borders.jsx b/.storybook/components/DesignTokens/Tier1/Borders.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Grid, GridItem, Section } from '../../../../src';
+import { Grid, Section } from '../../../../src';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
@@ -11,7 +11,7 @@ export class Tier1Borders extends Component {
  <Grid>
  {filterTokens(`eds-border-width`).map(function (listItem) {
  return (
- <GridItem key={listItem.name}>
+ <Grid.Item key={listItem.name}>
  <TokenSpecimen
  inlineStyles={{
  backgroundColor: 'transparent',
@@ -22,7 +22,7 @@ export class Tier1Borders extends Component {
  name={listItem.name}
  value={listItem.value}
  />
- </GridItem>
+ </Grid.Item>
  );
  })}
  </Grid>
@@ -32,7 +32,7 @@ export class Tier1Borders extends Component {
  <Grid>
  {filterTokens(`eds-border-radius`).map(function (listItem) {
  return (
- <GridItem key={listItem.name}>
+ <Grid.Item key={listItem.name}>
  <TokenSpecimen
  inlineStyles={{
  backgroundColor: 'transparent',
@@ -44,7 +44,7 @@ export class Tier1Borders extends Component {
  name={listItem.name}
  value={listItem.value}
  />
- </GridItem>
+ </Grid.Item>
  );
  })}
  </Grid>

diff --git a/.storybook/components/DesignTokens/Tier1/Colors.jsx b/.storybook/components/DesignTokens/Tier1/Colors.jsx
diff --git a/.storybook/components/DesignTokens/Tier1/Colors.tsx b/.storybook/components/DesignTokens/Tier1/Colors.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import '../DesignTokens.css';
+import { Section } from '../../../../src';
+import filterTokens from '../../../util/filterTokens';
+import { ColorList } from '../../ColorList/ColorList';
+
+export const Tier1Colors = () => {
+ const getListItems = (filterTerm: string, figmaTokenHeader: string) =>
+ filterTokens(filterTerm).map(({ name, value }) => ({
+ name,
+ value,
+ figmaToken:
+ figmaTokenHeader + '/' + name.slice(name.lastIndexOf('-') + 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')} />
+ <ColorList
+ listItems={getListItems('eds-color-other-lemon', 'supporting')}
+ />
+ </Section>
+ </div>
+ );
+};
diff --git a/.storybook/components/DesignTokens/Tier1/FontFamilies.tsx b/.storybook/components/DesignTokens/Tier1/FontFamilies.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Grid, GridItem, Section } from '../../../../src';
+import { Grid, Section } from '../../../../src';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
@@ -8,7 +8,7 @@ export const FontFamilies = () => (
  <Grid>
  {filterTokens(`eds-font-family`).map(function (listItem) {
  return (
- <GridItem key={listItem.name}>
+ <Grid.Item key={listItem.name}>
  <TokenSpecimen
  inlineStyles={{
  fontFamily: `var(${listItem.name})`,
@@ -17,7 +17,7 @@ export const FontFamilies = () => (
  value={listItem.value}
  variant="typography-title"
  />
- </GridItem>
+ </Grid.Item>
  );
  })}
  </Grid>

diff --git a/.storybook/components/DesignTokens/Tier1/FontSizes.tsx b/.storybook/components/DesignTokens/Tier1/FontSizes.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Grid, GridItem, Section } from '../../../../src';
+import { Grid, Section } from '../../../../src';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
@@ -8,7 +8,7 @@ export const FontSizes = () => (
  <Grid>
  {filterTokens(`eds-font-size`).map(function (listItem) {
  return (
- <GridItem key={listItem.name}>
+ <Grid.Item key={listItem.name}>
  <TokenSpecimen
  inlineStyles={{
  fontSize: `var(${listItem.name})`,
@@ -17,7 +17,7 @@ export const FontSizes = () => (
  value={listItem.value}
  variant="typography-title"
  />
- </GridItem>
+ </Grid.Item>
  );
  })}
  </Grid>

diff --git a/.storybook/components/DesignTokens/Tier1/FontWeights.tsx b/.storybook/components/DesignTokens/Tier1/FontWeights.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Grid, GridItem, Section } from '../../../../src';
+import { Grid, Section } from '../../../../src';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
@@ -8,7 +8,7 @@ export const FontWeights = () => (
  <Grid>
  {filterTokens(`eds-font-weight`).map(function (listItem) {
  return (
- <GridItem key={listItem.name}>
+ <Grid.Item key={listItem.name}>
  <TokenSpecimen
  inlineStyles={{
  fontWeight: `var(${listItem.name})`,
@@ -17,7 +17,7 @@ export const FontWeights = () => (
  value={listItem.value}
  variant="typography-title"
  />
- </GridItem>
+ </Grid.Item>
  );
  })}
  </Grid>

diff --git a/.storybook/components/DesignTokens/Tier1/Layout.jsx b/.storybook/components/DesignTokens/Tier1/Layout.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Grid, GridItem, Section } from '../../../../src';
+import { Grid, Section } from '../../../../src';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
@@ -11,15 +11,15 @@ export class Tier1Layout extends Component {
  <Grid>
  {filterTokens(`eds-l-`).map(function (listItem) {
  return (
- <GridItem key={listItem.name}>
+ <Grid.Item key={listItem.name}>
  <TokenSpecimen
  inlineStyles={{
  maxWidth: `var(${listItem.name})`,
  }}
  name={listItem.name}
  value={listItem.value}
  />
- </GridItem>
+ </Grid.Item>
  );
  })}
  </Grid>