Merge pull request #1662 from chanzuckerberg/release-v12.2.0

## [12.2.0](v12.1.0...v12.2.0) (2023-06-21) ### Features * deprecate color-other-eraser token ([#1640](#1640)) ([55a78e2](55a78e2)) * **Text:** add support for caption-md and caption-lg ([53fd4e0](53fd4e0)) ### Bug Fixes * allow all valid input types ([#1648](#1648)) ([e674741](e674741)) * **InputField:** fix alignment and color for required marker ([#1654](#1654)) ([1c3b1db](1c3b1db)) * make menu, popover, select ssr friendly ([#1660](#1660)) ([eac8829](eac8829)) * **Menu:** reset menu item hover and defer to popover ([#1653](#1653)) ([f329e4d](f329e4d)) * **ProgressBar:** align label and caption with design ([#1655](#1655)) ([9de0d6b](9de0d6b)) * **Tooltip:** use caption-lg for tooltip text ([f0772c7](f0772c7))
chanzuckerberg · Jun 21, 2023 · a8e572e · a8e572e
2 parents 9a5a856 + 73c40a8
commit a8e572e
Show file tree

Hide file tree

Showing 54 changed files with 1,602 additions and 1,545 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -42,4 +42,10 @@ jobs:
       - name: Publish package to the Github registry
         run: npm publish --access public
         env:
-          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Update Omlet 🍳
+        run: npx omlet analyze
+        env:
+          OMLET_TOKEN: ${{ secrets.OMLET_TOKEN }}
+
diff --git a/.gitignore b/.gitignore
@@ -6,6 +6,9 @@
 # testing
 /coverage
 
+# logging
+omlet-cli.log
+
 # production
 /build
 _site

diff --git a/.storybook/components/DesignTokens/Tier1/Colors.jsx b/.storybook/components/DesignTokens/Tier1/Colors.jsx
@@ -21,7 +21,15 @@ export class Tier1Colors extends Component {
         </Section>
 
         <Section title="Other Colors">
-          <ColorList listItems={filterTokens(`eds-color-other`)} />
+          <ColorList listItems={filterTokens(`eds-color-other-mint`)} />
+          <div className="p-3"></div>
+          <ColorList listItems={filterTokens(`eds-color-other-yellow`)} />
+          <div className="p-3"></div>
+          <ColorList listItems={filterTokens(`eds-color-other-lemon`)} />
+          <div className="p-3"></div>
+          <ColorList listItems={filterTokens(`eds-color-other-orange`)} />
+          <div className="p-3"></div>
+          <ColorList listItems={filterTokens(`eds-color-other-ruby`)} />
         </Section>
       </div>
     );

diff --git a/.storybook/components/DesignTokens/Tier1/FontFamilies.tsx b/.storybook/components/DesignTokens/Tier1/FontFamilies.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Grid, GridItem, Section } from '../../../../src';
+import filterTokens from '../../../util/filterTokens';
+import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
+
+export const FontFamilies = () => (
+  <Section title="Font Families">
+    <Grid>
+      {filterTokens(`eds-font-family`).map(function (listItem) {
+        return (
+          <GridItem key={listItem.name}>
+            <TokenSpecimen
+              inlineStyles={{
+                fontFamily: `var(${listItem.name})`,
+              }}
+              name={listItem.name}
+              value={listItem.value}
+              variant="typography-title"
+            />
+          </GridItem>
+        );
+      })}
+    </Grid>
+  </Section>
+);
diff --git a/.storybook/components/DesignTokens/Tier1/FontSizes.tsx b/.storybook/components/DesignTokens/Tier1/FontSizes.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Grid, GridItem, Section } from '../../../../src';
+import filterTokens from '../../../util/filterTokens';
+import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
+
+export const FontSizes = () => (
+  <Section title="Font Sizes">
+    <Grid>
+      {filterTokens(`eds-font-size`).map(function (listItem) {
+        return (
+          <GridItem key={listItem.name}>
+            <TokenSpecimen
+              inlineStyles={{
+                fontSize: `var(${listItem.name})`,
+              }}
+              name={listItem.name}
+              value={listItem.value}
+              variant="typography-title"
+            />
+          </GridItem>
+        );
+      })}
+    </Grid>
+  </Section>
+);
diff --git a/.storybook/components/DesignTokens/Tier1/FontWeights.tsx b/.storybook/components/DesignTokens/Tier1/FontWeights.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Grid, GridItem, Section } from '../../../../src';
+import filterTokens from '../../../util/filterTokens';
+import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
+
+export const FontWeights = () => (
+  <Section title="Font Weights">
+    <Grid>
+      {filterTokens(`eds-font-weight`).map(function (listItem) {
+        return (
+          <GridItem key={listItem.name}>
+            <TokenSpecimen
+              inlineStyles={{
+                fontWeight: `var(${listItem.name})`,
+              }}
+              name={listItem.name}
+              value={listItem.value}
+              variant="typography-title"
+            />
+          </GridItem>
+        );
+      })}
+    </Grid>
+  </Section>
+);
diff --git a/.storybook/components/DesignTokens/Tier1/Tier1Tokens.stories.jsx b/.storybook/components/DesignTokens/Tier1/Tier1Tokens.stories.jsx
@@ -5,8 +5,6 @@ import { Tier1Colors } from './Colors';
 import { Tier1Layout } from './Layout';
 import { Tier1Shadows } from './Shadows';
 import { Tier1Sizes } from './Sizes';
-import { Tier1TypographyPresets } from './TypographyPresets';
-import { Tier1TypographyTokens } from './TypographyTokens';
 
 export default {
   title: 'Design Tokens/Tier 1: Definitions',
@@ -47,11 +45,3 @@ export const Layout = {
 export const Shadows = {
   render: () => <Tier1Shadows />,
 };
-
-export const TypographyTokens = {
-  render: () => <Tier1TypographyTokens />,
-};
-
-export const TypographyPresets = {
-  render: () => <Tier1TypographyPresets />,
-};
diff --git a/.../DesignTokens/Tier1/TypographyPresets.jsx → .../DesignTokens/Tier1/TypographyPresets.tsx b/.../DesignTokens/Tier1/TypographyPresets.jsx → .../DesignTokens/Tier1/TypographyPresets.tsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Grid } from '../../../../src';
+import { Grid, Section } from '../../../../src';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 import styles from './TypographyPresets.module.css';
 
@@ -68,7 +68,10 @@ export const PRESET_SIZE_MAP = {
 
 export class Tier1TypographyPresets extends Component {
   render() {
-    const renderTypeToken = (preset, index) => {
+    const renderTypeToken = (
+      preset: keyof typeof PRESET_SIZE_MAP,
+      index: number,
+    ) => {
       const { fontSize, lineHeight, weights } = PRESET_SIZE_MAP[preset];
       const commonProps = {
         comment: 'font size / line height (px)',
@@ -104,12 +107,12 @@ export class Tier1TypographyPresets extends Component {
     };
 
     return (
-      <Grid>
+      <Section title="Typography Presets">
         {Object.keys(PRESET_SIZE_MAP).map((preset, index) => {
           // TODO: simplify this file to avoid custom mappings to type ramp
-          return renderTypeToken(preset, index);
+          return renderTypeToken(preset as keyof typeof PRESET_SIZE_MAP, index);
         })}
-      </Grid>
+      </Section>
     );
   }
 }
diff --git a/.storybook/components/DesignTokens/Tier1/TypographyTokens.stories.tsx b/.storybook/components/DesignTokens/Tier1/TypographyTokens.stories.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { FontFamilies } from './FontFamilies';
+import { FontSizes } from './FontSizes';
+import { FontWeights } from './FontWeights';
+import { Tier1TypographyPresets } from './TypographyPresets';
+export default {
+  title: 'Design Tokens/Tier 1: Definitions/Typography',
+  parameters: {
+    axe: {
+      // For documentation purposes only
+      skip: true,
+    },
+  },
+};
+export const FontFamily = {
+  render: () => <FontFamilies />,
+};
+export const FontSize = {
+  render: () => <FontSizes />,
+};
+export const FontWeight = {
+  render: () => <FontWeights />,
+};
+
+export const Presets = {
+  render: () => <Tier1TypographyPresets />,
+};
diff --git a/.storybook/components/DesignTokens/Tier2/Forms.jsx b/.storybook/components/DesignTokens/Tier2/Forms.jsx
@@ -6,50 +6,46 @@ import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 export class Tier2Forms extends Component {
   render() {
     return (
-      <div>
-        <Section title="Form Border">
-          <Grid>
-            {filterTokens(`eds-theme-form-border-width`).map(function (
-              listItem,
-            ) {
-              return (
-                <GridItem key={listItem.name}>
-                  <TokenSpecimen
-                    inlineStyles={{
-                      backgroundColor: 'transparent',
-                      borderWidth: `var(${listItem.name})`,
-                      borderStyle: 'solid',
-                      borderColor: 'black',
-                    }}
-                    name={listItem.name}
-                    value={listItem.value}
-                  />
-                </GridItem>
-              );
-            })}
+      <Section title="Form Border">
+        <Grid>
+          {filterTokens(`eds-theme-form-border-width`).map(function (listItem) {
+            return (
+              <GridItem key={listItem.name}>
+                <TokenSpecimen
+                  inlineStyles={{
+                    backgroundColor: 'transparent',
+                    borderWidth: `var(${listItem.name})`,
+                    borderStyle: 'solid',
+                    borderColor: 'black',
+                  }}
+                  name={listItem.name}
+                  value={listItem.value}
+                />
+              </GridItem>
+            );
+          })}
 
-            {filterTokens(`eds-theme-form-border-radius`).map(function (
-              listItem,
-            ) {
-              return (
-                <GridItem key={listItem.name}>
-                  <TokenSpecimen
-                    inlineStyles={{
-                      backgroundColor: 'transparent',
-                      borderWidth: '1px',
-                      borderStyle: 'solid',
-                      borderColor: 'black',
-                      borderRadius: `var(${listItem.name})`,
-                    }}
-                    name={listItem.name}
-                    value={listItem.value}
-                  />
-                </GridItem>
-              );
-            })}
-          </Grid>
-        </Section>
-      </div>
+          {filterTokens(`eds-theme-form-border-radius`).map(function (
+            listItem,
+          ) {
+            return (
+              <GridItem key={listItem.name}>
+                <TokenSpecimen
+                  inlineStyles={{
+                    backgroundColor: 'transparent',
+                    borderWidth: '1px',
+                    borderStyle: 'solid',
+                    borderColor: 'black',
+                    borderRadius: `var(${listItem.name})`,
+                  }}
+                  name={listItem.name}
+                  value={listItem.value}
+                />
+              </GridItem>
+            );
+          })}
+        </Grid>
+      </Section>
     );
   }
 }
diff --git a/.storybook/components/DesignTokens/Tier2/TypographyUsage.jsx b/.storybook/components/DesignTokens/Tier2/TypographyUsage.jsx
@@ -54,16 +54,16 @@ export class Tier2TypographyUsage extends Component {
 
         <Section title="Body Text">
           <Grid>
-            {renderTypeToken('body-lg', '004')}
-            {renderTypeToken('body-md', '005')}
-            {renderTypeToken('body-sm', '006')}
-            {renderTypeToken('body-xs', '008')}
+            {renderTypeToken('body-lg', '004-light')}
+            {renderTypeToken('body-md', '005-light')}
+            {renderTypeToken('body-sm', '006-light')}
+            {renderTypeToken('body-xs', '008-light')}
           </Grid>
         </Section>
 
         <Section title="Caption">
           <Grid>
-            {renderTypeToken('caption-lg', '006')}
+            {renderTypeToken('caption-lg', '006-light')}
             {renderTypeToken('caption-md', '008')}
             {renderTypeToken('caption-sm', '010')}
           </Grid>

diff --git a/.storybook/pages/AlongDemo/AlongDemo.module.css b/.storybook/pages/AlongDemo/AlongDemo.module.css
@@ -177,12 +177,8 @@
   padding-left: 5.5rem;
 }
 
-/**
- * THEMING-NOTE: Dropdown doesn't allow customization, so we have
- * to wrap the dropdown in a div with a class and drill down to the
- * Dropdown contents.
- */
-.watch-page__dropdown button {
+.watch-page__dropdown-button {
+  color: inherit;
   border-color: var(--along-color-space-500);
   background-color: transparent;
   justify-content: center;

diff --git a/.storybook/pages/AlongDemo/AlongDemo.tsx b/.storybook/pages/AlongDemo/AlongDemo.tsx
@@ -3,11 +3,11 @@ import React, { useState } from 'react';
 import {
   Button,
   ButtonGroup,
-  Dropdown,
   Heading,
   Icon,
   Label,
   Link,
+  Select,
   Tabs,
   Tab,
   Text,
@@ -262,14 +262,23 @@ const WatchPage = ({ onLogout }: { onLogout: () => void }) => {
         </div>
 
         <div className={styles['watch-page__carousel']}>
-          <div className={clsx('w-[10.5rem]', styles['watch-page__dropdown'])}>
-            <Dropdown
+          <div className="w-[10.5rem]">
+            <Select
               aria-label="student groups"
-              buttonText={selectedOption.label}
               onChange={setSelectedOption}
-              options={studentGroupOptions}
               value={selectedOption}
-            />
+            >
+              <Select.Button className={styles['watch-page__dropdown-button']}>
+                {selectedOption.label}
+              </Select.Button>
+              <Select.Options>
+                {studentGroupOptions.map((option) => (
+                  <Select.Option key={option.key} value={option}>
+                    {option.label}
+                  </Select.Option>
+                ))}
+              </Select.Options>
+            </Select>
           </div>
 
           <Tabs className={clsx(styles['watch-page__tabs'], 'mt-4')}>

diff --git a/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.module.css b/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.module.css
@@ -16,6 +16,15 @@
   }
 }
 
+/**
+ * Destructive variant of the Menu item.
+ *
+ * For indicating deletion of the project.
+ */
+.menu-item--destructive {
+  color: var(--eds-theme-color-text-utility-error);
+}
+
 /*------------------------------------*\
     # TABLE CARD
 \*------------------------------------*/