@workday/canvas-kit-docs 6.0.0-alpha.0-next.31 → 6.0.0-alpha.0-next.37

package/dist/mdx/6.0-MIGRATION-GUIDE.mdx

@@ -15,6 +15,7 @@ any questions about the update.
   - [Depth Tokens](#depth-tokens)
 - [Theme Breakpoint Updates](#theme-breakpoint-updates)
   - [Action Bar](#action-bar)
+- [Tabs Component](#tabs-component)
 - [Button Updates](#button-updates)
   - [Primary Button](#primary-button)
     - [Primary Disabled](#primary-disabled)
@@ -215,6 +216,9 @@ const CustomGlobalHeader = props => {
 };
 ```
 
+You may continue to use this component exactly as you did in v5, but note that we plan to hard-deprecate it in Canvas Kit v7.
+If you would like to migrate away from this deprecated component now, you can reference [this example](https://workday.github.io/canvas-kit/?path=/story/examples-global-header-react--basic) instead.
+
 ### Page Header
 
 We are [soft-deprecating](#soft-deprecation) `PageHeader`. It has been renamed to
@@ -266,6 +270,9 @@ export const CustomPageHeader = (props: CustomPageHeaderProps) => {
 };
 ```
 
+You may continue to use this component exactly as you did in v5, but note that we plan to hard-deprecate it in Canvas Kit v7.
+If you would like to migrate away from this deprecated component now, you can reference [this example](https://workday.github.io/canvas-kit/?path=/story/examples-page-header-react--basic) instead.
+
 ## Component Migrations
 
 ### Search Bar
@@ -336,7 +343,7 @@ type CustomDepthValues = CanvasDepthValue;
 interface OtherCustomDepthValues extends CanvasDepthValue {}
 
 // v6
-import {CanvasDepthValue} from '@workday/canvas-kit-react/tokens';
+import {CanvasDepthValues} from '@workday/canvas-kit-react/tokens';
 
 type CustomDepthValues = CanvasDepthValues;
 interface OtherCustomDepthValues extends CanvasDepthValues {}
@@ -362,10 +369,10 @@ Below is a reference table for the V5 and V6 breakpoint values.
 
 Also for reference, these are our viewport ranges:
 
-- `small` (320px - 767px) Used for mobile-sized screens
-- `medium` (768px - 1023px) Used for tablet-sized screens
-- `large` - (1024px - 1439px) Used for laptop and small desktop screens
-- `extra-large` (≥1440px) Used for very large screens
+- `small` (`320px` - `767px`) Used for mobile-sized screens
+- `medium` (`768px` - `1023px`) Used for tablet-sized screens
+- `large` - (`1024px` - `1439px`) Used for laptop and small desktop screens
+- `extra-large` (`≥1440px`) Used for very large screens
 
 ### Action Bar
 
@@ -373,13 +380,70 @@ Also for reference, these are our viewport ranges:
 `max-width: 575px`. They now use `max-width: 767.5px` – the upper limit of the `small` range. This
 will have two effects for this component:
 
-- Container padding will decrease from `s` (16px) to `xxs` (8px) on all viewports < 768px wide
-  - This was previously happening only on viewports < 576px wide
-- Button order will be reversed on all viewports < 768px wide
-  - This was previously happening only on viewports < 576px wide
+- Container padding will decrease from `s` (`16px`) to `xxs` (`8px`) on all viewports less than `768px` wide
+  - This was previously happening only on viewports less than `576px` wide
+- Button order will be reversed on all viewports less than `768px` wide
+  - This was previously happening only on viewports less than `576px` wide
 
 These changes in behavior are intentional and expected.
 
+## Tabs Component
+
+The Tabs API changed to support a responsive layout
+([#1325](https://github.com/Workday/canvas-kit/pull/1325)). The model API was updated to support
+more generic behaviors to allow for other components to support responsive layouts using the same
+models and behaviors. The most notable changes were concerning the state and events around tab
+selection. The verb "select" was chosen to more accurately reflect selection for more component
+types. Also selection of lists (which Tabs is based on) can support single or multiple selection.
+Selection is now stored on state as an array of selected keys.
+
+```tsx
+// v5
+const model = useTabsModel({
+  shouldActivate,
+  onActivate,
+});
+
+console.log('Selected tab', model.state.activeTab);
+model.events.activate({tab: tabName});
+
+// v6
+const model = useTabsModel({
+  shouldSelect,
+  onSelect,
+});
+
+console.log('Selected tab', model.state.selectedKey[0]);
+model.events.select({id: tabName});
+```
+
+The Tabs component can now handle responsive containers, but the support is not automatic. You must
+use the dynamic API and provide an overflow menu subcomponent. The dynamic API doesn't know the
+shape of your object, so render props must be used to instruct React how to render each item.
+
+```tsx
+// Use `useState` because React will give the same reference each render
+const [items] = React.useState([
+  {id: 'first', text: 'First Tab', contents: 'First Tab Content'},
+  {id: 'second', text: 'Second Tab', contents: 'Second Tab Content'},
+]);
+
+return (
+  <Tabs items={items}>
+    <Tabs.List overflowButton={<Tabs.OverflowButton>More</Tabs.OverflowButton>}>
+      {item => <Tabs.Item name={item.id}>{item.text}</Tabs.Item>}
+    </Tabs.List>
+    <Tabs.Menu.Popper>
+      <Tabs.Menu.Card maxWidth={300} maxHeight={200}>
+        <Tabs.Menu.List>
+          {(item: MyTabItem) => <Tabs.Menu.Item name={item.id}>{item.text}</Tabs.Menu.Item>}
+        </Tabs.Menu.List>
+      </Tabs.Menu.Card>
+    </Tabs.Menu.Popper>
+  </Tabs>
+);
+```
+
 ## Button Updates
 
 All button updates for V6 are limited to our Primary, Secondary, and Tertiary buttons. Most of the
@@ -413,7 +477,7 @@ All these changes are described in detail by button type in the sections below.
 #### Primary Disabled State
 
 Previously the button's disabled state had a `blueberry200` background, but it now uses the default
-`blueberry400` and sets the entire button to 40% opacity. This creates more more consistency for the
+`blueberry400` and sets the entire button to 40% opacity. This creates more consistency for the
 disabled states across all our buttons.
 
 #### Primary Large
@@ -431,7 +495,7 @@ height of the button will remain the same.
 
 #### Primary Small
 
-We now support icons for small `PrimaryButton`s. The icons are `20px` x `20xpx`.
+We now support icons for small `PrimaryButton`s. The icons are `20px` x `20px`.
 
 #### Primary Extra Small
 
@@ -455,7 +519,7 @@ overall height of the button will remain the same.
 
 #### Secondary Small
 
-We now support icons for small `SecondaryButton`s. The icons are `20px` x `20xpx`.
+We now support icons for small `SecondaryButton`s. The icons are `20px` x `20px`.
 
 #### Secondary Extra Small
 

package/dist/mdx/7.0-MIGRATION-GUIDE.mdx

@@ -0,0 +1,33 @@
+# Canvas Kit 7.0 Migration Guide
+
+Below are the breaking changes made in Canvas Kit v7. Please
+[reach out](https://github.com/Workday/canvas-kit/issues/new?labels=bug&template=bug.md) if you have
+any questions about the update.
+
+- [Codemod](#codemod)
+
+## Codemod
+
+Please use our [codemod package](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+to automatically update your code to work with a majority of the breaking changes in the migration
+from Canvas Kit v6 to v7:
+
+```sh
+> npx @workday/canvas-kit-codemod v7 [path]
+```
+
+> Note: This codemod only works on `.js`, `.jsx`, `.ts`, and `.tsx` extensions. You may need to make
+> some manual changes in other file types (`.json`, `.mdx`, `.md`, etc.).
+
+> Note: You may need to run your linter after executing the codemod, as it's resulting formatting
+> (spacing, quotes, etc.) may not match your project's styling.
+
+**Breaking changes accounted for by this codemod will be marked with a 🤖.**
+
+**Please verify all changes made by the codemod. As a safety precaution, we recommend committing the
+changes from the codemod as a single isolated commit (separate from other changes) so you can
+rollback more easily if necessary.**
+
+[Let us know](https://github.com/Workday/canvas-kit/issues/new?labels=bug&template=bug.md) if you
+encounter any issues or use cases that we've missed. The `@workday/canvas-kit-codemod` package will
+help us maintain additional codemod transforms to make future migrations easier.

package/dist/mdx/COMPOUND_COMPONENTS.mdx

@@ -78,8 +78,8 @@ const Tabs = ({children, model, ...config}) => {
 
 ## Subcomponents
 
-A subcomponent typically follows ARIA roles. For the `Tabs` example, these are the `tablist`,
-`tab`, and `tabpanel` roles. A subcomponent provides direct access to semantic or key elements of a
+A subcomponent typically follows ARIA roles. For the `Tabs` example, these are the `tablist`, `tab`,
+and `tabpanel` roles. A subcomponent provides direct access to semantic or key elements of a
 compound component. In the `IconButton` example, the icon is not semantic and might be hidden from
 screen readers while the `IconButton.Text` content is instead used for a tooltip and as the
 accessible name while being visibly hidden.
@@ -175,35 +175,35 @@ Components that directly wrap an element (most of them) will have the following
 
 Compound components are also made up of [models](#models) that accept [guards](#guards) to
 conditionally prevent state changes and [callbacks](#callbacks) to attach listeners. For example, in
-our Tabs component clicking a Tab will activate that tab. The `Tabs` container component will accept
-a `shouldActivate` and a `onActivate` for the event called `activate`.
+our Tabs component clicking a Tab will select that tab. The `Tabs` container component will accept a
+`shouldSelect` and a `onSelect` for the event called `select`.
 
 ```tsx
 const MyComponent = () => {
-  // `data` is all event data from the `activate` event
+  // `data` is all event data from the `select` event
 
   // `state` is the current state of the `Tabs` component
-  const shouldActivate = ({data, state}) => {
-    // for some reason, we only want to allow activation the 'first' tab
-    // Clicking on the first tab will activate it, but clicking on the
+  const shouldSelect = ({data, state}) => {
+    // for some reason, we only want to allow selection the 'first' tab
+    // Clicking on the first tab will select it, but clicking on the
     // second tab will do nothing
     return data.tab === 'first' ? true : false;
 
     // returning true allows the event to trigger a state change and will
-    // also call the `onActivate` callback
+    // also call the `onSelect` callback
   };
 
   // `prevState` is the previous state of the model. Callbacks are called _before_ state has resolved.
   // This means the passed state hasn't updated yet. It also means it is safe to call `setState` without
   // triggering extra renders. `setState` calls will add to React's batching system before a state changes
   // are flushed and render functions are called.
-  const onActivate = ({data, prevState}) => {
-    // called any time the `activate` event is triggered
-    console.log('onActivate', data, prevState);
+  const onSelect = ({data, prevState}) => {
+    // called any time the `select` event is triggered
+    console.log('onSelect', data, prevState);
   };
 
   return (
-    <Tabs shouldActivate={shouldActivate} onActivate={onActivate}>
+    <Tabs shouldSelect={shouldSelect} onSelect={onSelect}>
       <Tabs.List>
         <Tabs.Item name="first">First</Tabs.Item>
         <Tabs.Item name="second">Second</Tabs.Item>
@@ -324,20 +324,20 @@ const useEllipsisTooltipModel = (config = {}) => {
 
 Models are meant to be composable. For example, a `TabsModel` uses a `CursorModel` (which itself
 uses `ListModel`) and a `ListModel` for a list of panels. `TabsModel` also keeps track of which tab
-is currently active. This might look like the following:
+is currently selected. This might look like the following:
 
 ```ts
 const useTabsModel = (config = {}) => {
   // id is used for ARIA attributes
   const id = useUniqueId(config.id);
-  const [activeTab, setActiveTab] = React.useState('');
+  const [selectedTab, setSelectedTab] = React.useState('');
   const cursor = useCursorModel(config);
   const panels = useListModel(config);
 
   const state = {
     ...cursor.state, // extend the CursorModel state
     id,
-    activeTab,
+    selectedTab,
     panels: panels.state.items, // we only care about
   };
 
@@ -346,12 +346,12 @@ const useTabsModel = (config = {}) => {
     registerPanel: panels.events.registerItem,
     unregisterPanel: panels.events.unregisterItem,
 
-    activate(data) {
-      if (config.shouldActivate?.({data, prevState: state}) === false) {
+    select(data) {
+      if (config.shouldSelect?.({data, prevState: state}) === false) {
         return;
       }
-      setActiveTab(data.tab);
-      config.onActivate?.({data, prevState: state});
+      setSelectedTab(data.tab);
+      config.onSelect?.({data, prevState: state});
     },
   };
 
@@ -362,10 +362,11 @@ const useTabsModel = (config = {}) => {
 Model composition allows for components to share functionality with other components. In the Tabs
 example, `ListModel` is in charge of maintaining a list of tab elements. The `CursorModel` is in
 charge of maintaining a current cursor position of the tab list. The `Tabs.List` component uses the
-cursor to allow keyboard navigation of the tabs. The `TabsModel` also maintains the currently active
-tab to ensure the correct `TabPanel` is visible. The `TabsModel` is also using a `ListModel` to
-maintain a list of tab panels. The `TabsModel` is in charge of composing all this and providing data
-and events to the `Tabs` compound component - coordination state between subcomponents.
+cursor to allow keyboard navigation of the tabs. The `TabsModel` also maintains the currently
+selected tab to ensure the correct `TabPanel` is visible. The `TabsModel` is also using a
+`ListModel` to maintain a list of tab panels. The `TabsModel` is in charge of composing all this and
+providing data and events to the `Tabs` compound component - coordination state between
+subcomponents.
 
 Many other components like `Select`, `Breadcrumbs`, or dropdown menus can also use the `ListModel`
 and/or the `CursorModel`. These models could be thought of as abstract models where they do not
@@ -463,11 +464,11 @@ const TabList = ({children, ...elemProps}) => {
 
 A container component can either accept model configuration _or_ a model. Passing model
 configuration allows for simpler model configuration of guards, callbacks, or any other model
-configuration. The following example provides an `onActivate` callback that fetches some data from
-the server:
+configuration. The following example provides an `onSelect` callback that fetches some data from the
+server:
 
 ```tsx
-<Tabs onActivate={({data}) => fetch('/api/activate' + data.id)}>...</Tabs>
+<Tabs onSelect={({data}) => fetch('/api/selectTab' + data.id)}>...</Tabs>
 ```
 
 If you need direct access to a model's state or events, you can hoist the model into your component
@@ -479,15 +480,15 @@ look like this:
 const MyTabs = () => {
   const model = useTabsModel({
     // we can still load data from the server
-    onActivate: ({data}) => fetch('/api/activate' + data.id),
+    onSelect: ({data}) => fetch('/api/selectTab' + data.id),
   });
 
   return (
     <>
       <Tabs model={model}>...</Tabs>
-      // direct access to the model's state Currently selected tab: {model.state.activeTab}
+      // direct access to the model's state Currently selected tab: {model.state.selectedTab}
       // Now we can send events directly to the model
-      <button onClick={() => model.events.activate({tab: 'third'})}>Activate third tab</button>
+      <button onClick={() => model.events.select({tab: 'third'})}>Select third tab</button>
     </>
   );
 };

package/dist/mdx/CONTRIBUTING.mdx

@@ -5,42 +5,37 @@ part of the community. Before you contribute, please take a moment and look thro
 sections:
 
 - [Code of Conduct](#code-of-conduct)
-- [Contributor License Agreement](#contributor-license-agreement)
-- [Contributing Guidelines](#contributing-guidelines)
-  - [How to Contribute](#how-to-contribute)
+- [How to Contribute](#how-to-contribute)
+  - [Communicate on Issues](#communicate-on-issues)
   - [Git Guidelines](#git-guidelines)
-- [Getting Started](#getting-started)
+    - [Branches](#branches)
+    - [Commit Message Format](#commit-message-format)
+    - [Commit Descriptions](#commit-descriptions)
+    - [Pull Requests](#pull-requests)
+  - [Developer Experience](#developer-experience)
+    - [Yarn and Workspaces](#yarn-and-workspaces)
+    - [Storybook](#storybook)
+    - [Testing](#testing)
+    - [Automation on Commit](#automation-on-commit)
+    - [Releases](#releases)
+- [Getting Started Developing](#getting-started-developing)
   - [Creating a Module](#creating-a-module)
   - [Exporting a Module](#exporting-a-module)
   - [Building Modules](#building-modules)
   - [Testing Modules](#testing-modules)
   - [Code Style Guide](#code-style-guide)
-  - [Canvas Kit Labs & Preview](#canvas-kit-labs-preview)
+  - [Canvas Kit Labs & Preview](#canvas-kit-labs--preview)
   - [Editors](#editors)
+- [Contributor License Agreement](#contributor-license-agreement)
 
 ## Code of Conduct
 
 At Workday, we are committed to a culture of integrity, innovation, and fun. That culture extends to
 the community that we are building here through Canvas. By participating in it, you are expected to
-uphold this [code of conduct](https://github.com/Workday/canvas-kit/tree/master/CODE_OF_CONDUCT.md)
-and agree to our CLA.
+uphold our [Code of Conduct](https://github.com/Workday/canvas-kit/blob/master/CODE_OF_CONDUCT.md)
+and agree to our [Contributor License Agreement](#contributor-license-agreement).
 
-## Contributor License Agreement
-
-Each Contributor (“You”) represents that such You are legally entitled to submit any Contributions
-in accordance with these terms and by posting a Contribution, you represent that each of Your
-Contribution is Your original creation.
-
-You are not expected to provide support for Your Contributions, except to the extent You desire to
-provide support. You may provide support for free, for a fee, or not at all. Unless required by
-applicable law or agreed to in writing, You provide Your Contributions on an "AS IS" BASIS, WITHOUT
-WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any
-warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR
-PURPOSE.
-
-## Contributing Guidelines
-
-### How to Contribute
+## How to Contribute
 
 **Don't hesitate to contribute!** Canvas Kit thrives on open discussion and contribution by anyone
 in the Workday community. Contribution doesn't have to be code-based. Anyone can suggest changes to
@@ -50,38 +45,25 @@ If you are contributing code, please take a look at the following sections to fa
 with how the Canvas Kit repo is organized and run. This will help streamline the pull request
 process. If you have any questions, please reach out!
 
-If your contribution is visual or UI-based, please ensure you consult with a designer so the
-contribution can be evaluated as an end-to-end process.
-
-#### Automation on Commit
-
-Upon commit, [lint-staged](https://github.com/okonet/lint-staged) will run your staged code through
-[Prettier](https://prettier.io) and [eslint](https://eslint.org).
+If your contribution is visual or UI-based, please ensure you consult with a designer or request a
+maintainer's help so the contribution can be evaluated as an end-to-end process.
 
-#### Storybook
+### Communicate on Issues
 
-Canvas Kit uses [Storybook](https://storybook.js.org/) for the component development environment.
-
-#### Yarn and Workspaces
-
-Canvas Kit uses Yarn for package management and takes advantage of its support for
-[Workspaces](https://yarnpkg.com/lang/en/docs/workspaces/) to connect all of its different modules
-within a single repository.
-
-#### Testing
-
-Canvas Kit uses [Jest](https://jestjs.io/) and
-[React Testing Library](https://testing-library.com/docs/react-testing-library/intro) to unit test
-our React components. For more information about our testing strategy and how we write unit tests,
-visit our [Testing Readme](/getting-started/for-developers/resources/testing/)
-
-Canvas Kit uses [Cypress](https://cypress.io) for UI tests. For info on why we chose Cypress, visit
-[Why Cypress?](https://github.com/Workday/canvas-kit/tree/master/cypress/WHY_CYPRESS.md) For more
-information about how to write Cypress tests, visit
-[Writing Cypress Tests](https://github.com/Workday/canvas-kit/tree/master/cypress/README.md)
+- Create or identify [an issue](https://github.com/Workday/canvas-kit/issues) to work on
+- New contributors are recommended to start with a
+  [good first issue](https://github.com/Workday/canvas-kit/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22)
+- Ask our team if the issue is relevant or has attention from other developers
+- Communicate if you'd like to work on the issue
+- Ask questions! You have our support, and you will always need more information than what is in the
+  issue.
 
 ### Git Guidelines
 
+All development should happen on a personal fork (including maintainers). Fork the
+[repo](https://github.com/Workday/canvas-kit) to your personal account, and create a feature branch
+for each contribution.
+
 #### Branches
 
 - Create branches for each feature you develop
@@ -127,18 +109,50 @@ fix: Add missing static class variable to IconButton and Avatar
 
 #### Pull Requests
 
-- All development should happen on a personal fork (including maintainers). This allows us to keep
-  the project tree clean and easy to follow, while ensuring everyone has the same developer
-  experience.
-- Project maintainers are able to push commits to fork PRs, but other contributors will need to open
-  PRs to the personal fork to collaborate with others on a feature.
+- We support creating a Draft Pull Request as soon as you have figured out a working implementation,
+  for early feedback. It can later be marked Ready for Review.
+- Open a pull request from a feature branch on your fork against the master branch on the main
+  repository
 - When a pull request passes all checks and reviews, a core maintainer merges via Squash and Merge
-  with a link back to the PR.
+  with a link back to the PR
 - The branch will automatically be deleted on merge, but its commits and the branch reference are
-  still available via the PR.
+  still available via the PR
+- When multiple developers collaborate on a PR, project maintainers are able to push commits to fork
+  PRs, but other contributors will need to open their own PRs against the personal fork and the
+  appropriate feature branch.
 - If you have questions about the above policies, please ask :)
 
-#### Releases
+## Developer Experience
+
+### Storybook
+
+Canvas Kit uses [Storybook](https://storybook.js.org/) for the component development environment.
+
+### Yarn and Workspaces
+
+Canvas Kit uses Yarn for package management and takes advantage of its support for
+[Workspaces](https://yarnpkg.com/lang/en/docs/workspaces/) to connect all of its different modules
+within a single repository. It is recommended but not required over `npm`, unless you are updating
+dependencies, then it's required.
+
+### Testing
+
+Canvas Kit uses [Jest](https://jestjs.io/) and
+[React Testing Library](https://testing-library.com/docs/react-testing-library/intro) to unit test
+our React components. For more information about our testing strategy and how we write unit tests,
+visit our [Testing Readme](/getting-started/for-developers/resources/testing/).
+
+Canvas Kit uses [Cypress](https://cypress.io) for UI tests. For info on why we chose Cypress, visit
+[Why Cypress?](https://github.com/Workday/canvas-kit/tree/master/cypress/WHY_CYPRESS.md) For more
+information about how to write Cypress tests, visit
+[Writing Cypress Tests](https://github.com/Workday/canvas-kit/tree/master/cypress/README.md).
+
+### Automation on Commit
+
+Upon commit, [lint-staged](https://github.com/okonet/lint-staged) will run your staged code through
+[Prettier](https://prettier.io) and [eslint](https://eslint.org).
+
+### Releases
 
 - Releases are prepared by updating package versions with `lerna version`, and updating the
   [changelog](./CHANGELOG.md)
@@ -148,9 +162,9 @@ fix: Add missing static class variable to IconButton and Avatar
 - The GitHub release automatically tags master with the new version, and deploys the new version to
   NPM.
 
-## Getting Started
+## Getting Started Developing
 
-1.  Clone the repository and run `yarn`
+1.  Clone the repository from your fork and run `yarn`
 2.  Run `yarn start` to start [Storybook](https://storybook.js.org/)
 3.  Visit [http://localhost:9001/](http://localhost:9001/)
 
@@ -220,8 +234,8 @@ Canvas Kit Preview is for beta components.
 
 ### Editors
 
-VSCode is our preferred IDE. Install the Prettier and ESLint plugins for quicker and easier
-formatting.
+Visual Studio Code is our preferred IDE. Install the Prettier and ESLint plugins for quicker and
+easier formatting.
 
 #### Visual Studio Code
 
@@ -230,4 +244,17 @@ Install [prettier-vscode](https://github.com/prettier/prettier-vscode) and
 
 Consider adding the following options:
 
-- [Format on save](https://github.com/prettier/prettier-vscode#format-on-save)
+- [Format on save](https://github.com/prettier/prettier-vscode#format-on-save)
+
+## Contributor License Agreement
+
+Each Contributor (“You”) represents that such You are legally entitled to submit any Contributions
+in accordance with these terms and by posting a Contribution, you represent that each of Your
+Contribution is Your original creation.
+
+You are not expected to provide support for Your Contributions, except to the extent You desire to
+provide support. You may provide support for free, for a fee, or not at all. Unless required by
+applicable law or agreed to in writing, You provide Your Contributions on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any
+warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR
+PURPOSE.

package/dist/mdx/preview-react/breadcrumbs/Breadcrumbs.mdx

@@ -46,7 +46,7 @@ you'll need to add `buttonAriaLabel` to `Breadcrumbs.CollapsibleList`.
 
 <ExampleCodeBlock code={CollapsibleList} />
 
-### Right-to-Left Example
+### Right-to-Left (RTL)
 
 Breadcrumbs has bidirectional support out of the box. That means outside of setting the content
 direction in your application's Canvas theme, you don't need to do anything else to make it work.

package/dist/mdx/preview-react/form-field/FormField.mdx

@@ -0,0 +1,27 @@
+import {Specifications} from '@workday/canvas-kit-docs';
+
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+
+import Custom from './examples/Custom';
+
+
+# Canvas Kit Form Field
+
+FormField allows users to wrap input components to make them accessible. You usually won't want to
+use FormField directly but instead should use the specific component you need, e.g. `TextInput`.
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-preview-react
+```
+
+## Usage
+
+### Customizing With Behavior Hooks Example
+
+If you need full customization you can use the form field behavior hooks to build your own solution.
+It is also easy it work with custom components or third party libraries and get the CKR
+accessibility guarantees by using the `as` prop.
+
+<ExampleCodeBlock code={Custom} />

package/dist/mdx/preview-react/form-field/examples/Custom.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import {
+  useFormFieldHint,
+  useFormFieldInput,
+  useFormFieldLabel,
+  useFormFieldModel,
+  useFormFieldOrientation,
+  FormFieldModelContext,
+} from '@workday/canvas-kit-preview-react/form-field';
+import {useModelContext} from '@workday/canvas-kit-react/common';
+import {Stack} from '@workday/canvas-kit-labs-react/layout';
+
+const Label = ({model, children}) => {
+  const localModel = useModelContext(FormFieldModelContext, model);
+  const props = useFormFieldLabel(localModel);
+
+  return (
+    <label {...props}>
+      {children}
+      {model.state.isRequired ? '*' : ''}
+    </label>
+  );
+};
+
+const Hint = ({model, children}) => {
+  const localModel = useModelContext(FormFieldModelContext, model);
+  const props = useFormFieldHint(localModel);
+
+  return <span {...props}>{children}</span>;
+};
+
+const Input = ({model, ...elementProps}) => {
+  const localModel = useModelContext(FormFieldModelContext, model);
+  const props = useFormFieldInput(localModel, elementProps);
+
+  return <input type="text" required={model.state.isRequired ? true : false} {...props} />;
+};
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  const model = useFormFieldModel({isRequired: true});
+
+  const layoutProps = useFormFieldOrientation('vertical')
+
+  return (
+    <Stack {...layoutProps}>
+      <Label model={model}>My Custom Field</Label>
+      <Input model={model} value={value} onChange={handleChange} />
+      <Hint model={model}>You can be anything</Hint>
+    </Stack>
+  );
+};

package/dist/mdx/preview-react/menu/examples/Icons.tsx

@@ -10,7 +10,7 @@ import {Menu, MenuItem} from '@workday/canvas-kit-preview-react/menu';
 
 export default () => {
   return (
-    <Menu title="Menu Title">
+    <Menu>
       <MenuItem icon={uploadCloudIcon}>First Item</MenuItem>
       <MenuItem icon={setupIcon}>Second Item (with a really really really long label)</MenuItem>
       <MenuItem isDisabled icon={uploadCloudIcon} secondaryIcon={taskContactIcon}>

package/dist/mdx/preview-react/menu/examples/ManyItems.tsx

@@ -4,7 +4,7 @@ import {Menu, MenuItem} from '@workday/canvas-kit-preview-react/menu';
 
 export default () => {
   return (
-    <Menu title="Menu Titles">
+    <Menu>
       {'One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen'
         .split(' ')
         .map(item => {