Merge pull request #1549 from chanzuckerberg/release-v11.0.0

## [11.0.0](v10.0.0...v11.0.0) (2023-03-17)


### ⚠ BREAKING CHANGES

* add `indeterminate` prop to <Checkbox> that's separate from `checked` (#1520)

### Features

* add `indeterminate` prop to <Checkbox> that's separate from `checked` ([#1520](#1520)) ([d8e2cc4](d8e2cc4))
* **LoadingIndicator:** extract and use SVG animation directly ([#1540](#1540)) ([6e315ea](6e315ea))
* **menu:** add Menu.PlainButton as a minimally styled Menu button ([#1516](#1516)) ([8268d8e](8268d8e))


### Bug Fixes

* actually use our shared prettier config ([c98ea51](c98ea51))
* **Avatar:** loosen props for avatar aria-label component ([#1544](#1544)) ([4ab9183](4ab9183))
* markdown story styling ([#1536](#1536)) ([89eba6b](89eba6b))

.github/renovate.json5

@@ -20,11 +20,6 @@
  fetchReleaseNotes: true,
  },
 
- ignoreDeps: [
- // headlessui starting v1.7.6 causes some downstream feature tests to fail
- '@headlessui/react',
- ],
-
  packageRules: [
  {
  // Hold back from creating branches until 3 or more days have elapsed since the version

.github/workflows/docs.yml

@@ -10,7 +10,7 @@ jobs:
  runs-on: ubuntu-latest
 
  steps:
- - uses: actions/checkout@v2
+ - uses: actions/checkout@v3
  - name: Setup node 😻
  uses: actions/setup-node@v3
  with:

.github/workflows/size-limit.yml

@@ -1,4 +1,4 @@
-name: "Bundle Size"
+name: 'Bundle Size'
 on:
  pull_request:
  branches:
@@ -10,7 +10,7 @@ jobs:
  env:
  CI_JOB_NUMBER: 1
  steps:
- - uses: actions/checkout@v1
+ - uses: actions/checkout@v3
  - uses: andresz1/size-limit-action@v1
  with:
  github_token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/test.yml

@@ -6,7 +6,7 @@ jobs:
  test:
  runs-on: ubuntu-latest
  steps:
- - uses: actions/checkout@v2
+ - uses: actions/checkout@v3
  - name: Setup node 😻
  uses: actions/setup-node@v3
  with:
@@ -28,7 +28,7 @@ jobs:
  build:
  runs-on: ubuntu-latest
  steps:
- - uses: actions/checkout@v2
+ - uses: actions/checkout@v3
  - name: Setup node 😻
  uses: actions/setup-node@v3
  with:
@@ -70,7 +70,7 @@ jobs:
  lint:
  runs-on: ubuntu-latest
  steps:
- - uses: actions/checkout@v2
+ - uses: actions/checkout@v3
  with:
  fetch-depth: 0
 
@@ -83,8 +83,11 @@ jobs:
  - name: Install Dependencies ⬆️
  run: yarn install --immutable
 
+ - name: Build design tokens # required since there are references to built tokens
+ run: yarn build:tokens
+
  - name: Lint Commit Messages 👕
- uses: wagoid/commitlint-github-action@v1
+ uses: wagoid/commitlint-github-action@v5
  env:
  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 

.storybook/components/Docs/GettingStarted/GettingStarted.stories.tsx

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import React from 'react';
+import GettingStartedDocs from '../../../../docs/GETTING_STARTED.md';
+import { markdownStorybookOptions } from '../MarkdownWrapper';
+export default {
+ title: 'Getting Started',
+ component: GettingStartedDocs,
+ ...markdownStorybookOptions,
+};
+
+export const GettingStarted: StoryObj = {
+ render: () => <GettingStartedDocs />,
+};

.storybook/components/Docs/Guildelines/Documents.stories.tsx

@@ -0,0 +1,38 @@
+import type { StoryObj } from '@storybook/react';
+import React from 'react';
+import Code from '../../../../docs/CODE_GUIDELINES.md';
+import ComponentDocs from '../../../../docs/COMPONENTS.md';
+import IconDocs from '../../../../docs/ICONS.md';
+import LayoutDocs from '../../../../docs/LAYOUT.md';
+import TokenDocs from '../../../../docs/TOKENS.md';
+import TypographyDocs from '../../../../docs/TYPOGRAPHY.md';
+import { markdownStorybookOptions } from '../MarkdownWrapper';
+
+export default {
+ title: 'Documentation/Guidelines',
+ ...markdownStorybookOptions,
+};
+
+export const CodeGuidelines: StoryObj = {
+ render: () => <Code />,
+};
+
+export const Components: StoryObj = {
+ render: () => <ComponentDocs />,
+};
+
+export const Icons: StoryObj = {
+ render: () => <IconDocs />,
+};
+
+export const Layout: StoryObj = {
+ render: () => <LayoutDocs />,
+};
+
+export const Tokens: StoryObj = {
+ render: () => <TokenDocs />,
+};
+
+export const Typography: StoryObj = {
+ render: () => <TypographyDocs />,
+};

.storybook/components/Docs/MarkdownWrapper.module.css

@@ -0,0 +1,112 @@
+/**
+ * The purpose of this file is to re-apply default browser styling on markdown documentation displayed in Storybook.
+ * Default browser styling had been overwritten by Tailwind preflight Tailwind preflight https://tailwindcss.com/docs/preflight.
+ * These styles are a subset of WebKit default styling from https://github.com/WebKit/WebKit/blob/main/Source/WebCore/css/html.css.
+ * Since the styling is applied for documentation only, these magic numbers are for reader pleasure only and won't apply to any components.
+ */
+
+.markdown {
+ body {
+ margin: 8px;
+ }
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ font-weight: bold;
+ }
+ h1 {
+ font-size: 2em;
+ margin-block-start: 0.67em;
+ margin-block-end: 0.67em;
+ }
+ h2 {
+ font-size: 1.5em;
+ margin-block-start: 0.83em;
+ margin-block-end: 0.83em;
+ }
+ h3 {
+ font-size: 1.17em;
+ margin-block-start: 1em;
+ margin-block-end: 1em;
+ }
+ h4 {
+ margin-block-start: 1.33em;
+ margin-block-end: 1.33em;
+ }
+ h5 {
+ font-size: 0.83em;
+ margin-block-start: 1.67em;
+ margin-block-end: 1.67em;
+ }
+ h6 {
+ font-size: 0.67em;
+ margin-block-start: 2.33em;
+ margin-block-end: 2.33em;
+ }
+ a {
+ color: -webkit-link;
+ text-decoration: underline;
+ }
+ hr {
+ margin-block-start: 0.5em;
+ margin-block-end: 0.5em;
+ margin-inline-start: auto;
+ margin-inline-end: auto;
+ }
+ dl,
+ p {
+ margin-block-start: 1em;
+ margin-block-end: 1em;
+ margin-inline-start: 0px;
+ margin-inline-end: 0px;
+ }
+ dd {
+ margin-inline-start: 40px;
+ }
+ pre {
+ margin: 1em 0px;
+ }
+ fieldset {
+ margin-inline-start: 2px;
+ margin-inline-end: 2px;
+ padding-block-start: 0.35em;
+ padding-inline-start: 0.75em;
+ padding-inline-end: 0.75em;
+ padding-block-end: 0.625em;
+ }
+ legend {
+ padding-inline-start: 2px;
+ padding-inline-end: 2px;
+ }
+ ol,
+ ul {
+ margin-block-start: 1em;
+ margin-block-end: 1em;
+ margin-inline-start: 0px;
+ margin-inline-end: 0px;
+ padding-inline-start: 40px;
+ }
+ ol {
+ list-style-type: decimal;
+ }
+ ul {
+ list-style-type: disc;
+ }
+ ul ul,
+ ol ul {
+ list-style-type: circle;
+ }
+ ol ul,
+ ul ol,
+ ol ol,
+ ul ul {
+ margin-block-start: 0px;
+ margin-block-end: 0px;
+ }
+ textarea {
+ resize: auto;
+ }
+}

.storybook/components/Docs/Documentation.tsx → .storybook/components/Docs/MarkdownWrapper.tsx

@@ -1,25 +1,43 @@
+import type { Story } from '@storybook/react';
 import type { ReactNode } from 'react';
 import React, { useEffect } from 'react';
 // @ts-expect-error prism.js must be in JS
 import Prism from './prism';
 import { LayoutContainer } from '../../../src/components/LayoutContainer/LayoutContainer';
 import { LayoutLinelengthContainer } from '../../../src/components/LayoutLinelengthContainer/LayoutLinelengthContainer';
 import './prism.css';
+import styles from './MarkdownWrapper.module.css';
 
-export interface Props {
+type MarkdownWrapperProps = {
  /**
  * Child node(s) that can be nested inside component
  */
- children?: ReactNode;
-}
+ children: ReactNode;
+};
 
-export const Documentation: React.FC<Props> = ({ children }) => {
+export const MarkdownWrapper = ({ children }: MarkdownWrapperProps) => {
  useEffect(() => {
  Prism.highlightAll();
  }, []);
  return (
- <LayoutContainer>
+ <LayoutContainer className={styles['markdown']}>
  <LayoutLinelengthContainer>{children}</LayoutLinelengthContainer>
  </LayoutContainer>
  );
 };
+
+export const markdownStorybookOptions = {
+ parameters: {
+ chromatic: { disableSnapshot: true },
+ axe: {
+ skip: true,
+ },
+ },
+ decorators: [
+ (Story: Story) => (
+ <MarkdownWrapper>
+ <Story />
+ </MarkdownWrapper>
+ ),
+ ],
+};

.storybook/components/Docs/Recipes/Recipes.stories.tsx

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react';
+import React from 'react';
+import RecipesDocs from '../../../../docs/RECIPES.md';
+import { markdownStorybookOptions } from '../MarkdownWrapper';
+
+export default {
+ title: 'Documentation/Recipes',
+ component: RecipesDocs,
+ ...markdownStorybookOptions,
+};
+
+export const Recipes: StoryObj = {
+ render: () => <RecipesDocs />,
+};

.storybook/components/Docs/Theming/Theming.stories.tsx

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react';
+import React from 'react';
+import ThemingDocs from '../../../../docs/THEMING.md';
+import { markdownStorybookOptions } from '../MarkdownWrapper';
+
+export default {
+ title: 'Documentation/Theming',
+ component: ThemingDocs,
+ ...markdownStorybookOptions,
+};
+
+export const Theming: StoryObj = {
+ render: () => <ThemingDocs />,
+};