@workday/canvas-kit-docs 5.3.17 → 5.4.0-next.1

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/TESTING.mdx

@@ -29,7 +29,7 @@ do. A "test" simply has to pass. A specification requires meaning.
 test('SomeComponent should render correctly', async () => {
   const {getByTestId} = render(<SomeComponent data-testid="test" text="foo" />);
 
-  const component = await getByTestId('test');
+  const component = getByTestId('test');
 
   expect(component.textContent).toEqual('foo');
   expect(component.getAttribute('aria-label')).toEqual('foo');
@@ -53,14 +53,14 @@ describe('SomeComponent', () => {
   it('should render the "text" prop as the text', async () => {
     const {getByTestId} = render(<SomeComponent data-testid="test" text="foo" />);
 
-    const component = await getByTestId('test');
+    const component = getByTestId('test');
     expect(component).toHaveTextContent('foo');
   });
 
   it('should render the "text" prop as an aria-label for accessibility', async () => {
     const {getByTestId} = render(<SomeComponent data-testid="test" text="foo" />);
 
-    const component = await getByTestId('test');
+    const component = getByTestId('test');
     expect(component).toHaveAttribute('aria-label', 'foo');
   });
 });
@@ -124,8 +124,8 @@ const {getByTestId} = render(
   </SomeComponent>
 );
 
-const component = await getByTestId('container');
-const child = await getByTestId('test');
+const component = getByTestId('container');
+const child = getByTestId('test');
 
 expect(component).toContainElement(child);
 ```
@@ -136,9 +136,33 @@ specification is met). Also this example will have a more useful failure message
 `.toContainElement` has the context that it is expecting an element in another element vs a match of
 a string.
 
+### Snapshot tests
+
+Canvas Kit does not contain DOM-based snapshot tests and uses [Visual Tests](#visual-tests) instead.
+DOM snapshots failures are often difficult to parse. Humans tend to be better at noticing and
+discerning visual changes than changes to a DOM structure.
+
+If your project uses snapshot tests and Canvas Kit, chances are you'll run into issues with changing
+ids and other ARIA attributes. Canvas Kit generates unique ids that are different every time the
+page loads. This can be a problem with snapshot tests. To fix this, you'll need to add special code
+to your test bootstrap file. For example:
+
+```ts
+import {setUniqueSeed, resetUniqueIdCount} from '@workday/canvas-kit-react/common';
+
+beforeEach(() => {
+  setUniqueSeed('a'); // set a static seed
+  resetUniqueIdCount(); // reset the id counter before every test
+});
+```
+
+This will ensure snapshot tests have stable ids for each snapshot. It is still possible to get ids
+changing if you add an additional component that uses id generation - subsequent ids will be
+different, but this will prevent snapshot tests that don't have any changes from showing diffs.
+
 ## Functional tests
 
-Canvas Kit uses [Cypress][https://cypress.io] for browser-based behavior testing (additional info:
+Canvas Kit uses [Cypress](https://cypress.io) for browser-based behavior testing (additional info:
 [Why Cypress?](https://github.com/Workday/canvas-kit/tree/master/cypress/WHY_CYPRESS.md)).
 Functional tests ensure the code meets functional specifications from a user's perspective. All
 functional tests are written against a Storybook Story. Specifications can come from many different

package/dist/mdx/changelog.stories.mdx

@@ -1,5 +1,4 @@
 import Changelog from '../../../CHANGELOG.md';
 import Markdown from '../../../utils/storybook/Markdown.tsx';
 
-
 <Markdown content={Changelog} />

package/dist/mdx/labs-react/layout/Stack.mdx

@@ -153,6 +153,11 @@ further to the right. You could use two separate horizontal stacks here to achie
 but you could also use `shouldWrapChildren` and then put additional margin only where needed. Either
 approach would be fine; it's a matter of personal preference.
 
+> Note: `shouldWrapChildren` implicitly passes the child element's index as a unique `key` prop to
+> the `Stack.Item`, which works well for static lists. If you have dynamic lists with child elements
+> that change over time, you'll want to provide a unique `id` prop to each child element for the
+> `Stack.Item` to use as a key instead.
+
 <ExampleCodeBlock code={ShouldWrapChildren} />
 
 Use this approach when:
@@ -170,8 +175,8 @@ wrapping children in `Stack.Item`s. A `Stack.Item` is a `Box` with some preset s
 overridden if needed.
 
 In the example below, we wanted to keep our `li` elements as direct children of the `ul` stack. So
-we're wrapping each of the links with `Stack.Item`s, casting them as `li`s and applying custom styles to each.
-This would not be possible with `shouldWrapChildren`.
+we're wrapping each of the links with `Stack.Item`s, casting them as `li`s and applying custom
+styles to each. This would not be possible with `shouldWrapChildren`.
 
 <ExampleCodeBlock code={StackItems} />
 

package/dist/mdx/labs-react/search-form/SearchForm.mdx

@@ -0,0 +1,62 @@
+import {SearchForm} from '@workday/canvas-kit-labs-react/search-form';
+// examples
+import Basic from './examples/Basic';
+import CustomTheme from './examples/CustomTheme';
+import Grow from './examples/Grow';
+import RTL from './examples/RTL';
+import Theming from './examples/Theming';
+import ThemeAttributes from './examples/PropTables.splitProps';
+
+
+# Canvas Kit Search Form
+
+`SearchForm` is a search form that contains a `Combobox` for rendering search results. It's
+primarily intended to be used within a `Header`.
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-labs-react
+```
+
+## Usage
+
+### Basic Example
+
+You will most likely use `SearchForm` within the context of a `Header` component, but it's helpful
+to see its functionality as a standalone component. Below is a basic example that filters results
+based on search input.
+
+<ExampleCodeBlock code={Basic} />
+
+### Grow
+
+If you'd like `SearchForm` to grow to the width of its container, set the `grow` prop to `true`.
+
+<ExampleCodeBlock code={Grow} />
+
+### Theming
+
+`SearchForm` can be themed to use one of the preset `SearchThemes`: `Light`, `Dark`, or
+`Transparent`. Below is an example of `SearchForm` using the `Dark` theme.
+
+<ExampleCodeBlock code={Theming} />
+
+You can also provide more specific theming values by providing specific `SearchThemeAttributes`.
+
+<ExampleCodeBlock code={CustomTheme} />
+
+Below is a table of attributes that can be supplied to `SearchForm`:
+
+<ArgsTable of={ThemeAttributes} />
+
+### RTL (Right-To-Left)
+
+`SearchForm` provides bidirectional support out of the box. You shouldn't need to provide any
+additional configuration.
+
+<ExampleCodeBlock code={RTL} />
+
+## Props
+
+<ArgsTable of={SearchForm} />

package/dist/mdx/labs-react/search-form/examples/Basic.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import {MenuItem} from '@workday/canvas-kit-preview-react/menu';
+import {SearchForm} from '@workday/canvas-kit-labs-react/search-form';
+import {Flex} from '@workday/canvas-kit-labs-react/layout';
+
+const initialWineList = [
+  'Beaujolais',
+  'Bordeaux',
+  'Cabernet Sauvignon',
+  'Champagne',
+  'Chardonnay',
+  'Chianti',
+  'Malbec',
+  'Merlot',
+  'Pinot Grigio',
+  'Pinot Gris',
+  'Pinot Noir',
+  'Primitivo',
+  'Prosecco',
+  'Riesling',
+  'Rioja',
+  'Rosé',
+  'Sauvignon Blanc',
+  'Syrah',
+  'Zinfandel',
+];
+
+export default () => {
+  const [wineList, setWineList] = React.useState(initialWineList);
+  // Tracking the input value for onSubmit
+  const [searchInput, setSearchInput] = React.useState('');
+  const menuItems = wineList.map(wine => <MenuItem key={wine}>{wine}</MenuItem>);
+
+  const filterMenuItems = e => {
+    setSearchInput(e.target.value);
+    const formattedValue = e.target.value.toLowerCase();
+
+    // Reset the list if the input is cleared
+    if (!formattedValue.length) {
+      setWineList(initialWineList);
+    } else {
+      const filteredItems = wineList.filter(wine => wine.toLowerCase().startsWith(formattedValue));
+      setWineList(filteredItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    // We don't need to prevent the default event because SearchForm handles that internally
+    console.log(`Searching for: ${searchInput}`);
+  };
+
+  return (
+    <Flex minHeight={200} alignItems="flex-start" padding="xs">
+      <SearchForm
+        autocompleteItems={menuItems}
+        onInputChange={filterMenuItems}
+        onSubmit={handleSubmit}
+      />
+    </Flex>
+  );
+};

package/dist/mdx/labs-react/search-form/examples/CustomTheme.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import {MenuItem} from '@workday/canvas-kit-preview-react/menu';
+import {SearchForm, SearchThemeAttributes} from '@workday/canvas-kit-labs-react/search-form';
+import {Flex} from '@workday/canvas-kit-labs-react/layout';
+import {colors} from '@workday/canvas-kit-react/tokens';
+
+const initialWineList = [
+  'Beaujolais',
+  'Bordeaux',
+  'Cabernet Sauvignon',
+  'Champagne',
+  'Chardonnay',
+  'Chianti',
+  'Malbec',
+  'Merlot',
+  'Pinot Grigio',
+  'Pinot Gris',
+  'Pinot Noir',
+  'Primitivo',
+  'Prosecco',
+  'Riesling',
+  'Rioja',
+  'Rosé',
+  'Sauvignon Blanc',
+  'Syrah',
+  'Zinfandel',
+];
+
+export default () => {
+  const [wineList, setWineList] = React.useState(initialWineList);
+  // Tracking the input value for onSubmit
+  const [searchInput, setSearchInput] = React.useState('');
+  const menuItems = wineList.map(wine => <MenuItem key={wine}>{wine}</MenuItem>);
+
+  const filterMenuItems = e => {
+    setSearchInput(e.target.value);
+    const formattedValue = e.target.value.toLowerCase();
+
+    // Reset the list if the input is cleared
+    if (!formattedValue.length) {
+      setWineList(initialWineList);
+    } else {
+      const filteredItems = wineList.filter(wine => wine.toLowerCase().startsWith(formattedValue));
+      setWineList(filteredItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    // We don't need to prevent the default event because SearchForm handles that internally
+    console.log(`Searching for: ${searchInput}`);
+  };
+
+  const customTheme = {
+    background: colors.cinnamon600,
+    backgroundFocus: colors.frenchVanilla100,
+    placeholderColor: colors.frenchVanilla100,
+    placeholderColorFocus: colors.blackPepper400,
+  } as SearchThemeAttributes;
+
+  return (
+    <Flex minHeight={200} alignItems="flex-start">
+      <Flex padding="xs" backgroundColor="cinnamon500" flex={1} flexBasis="auto">
+        <SearchForm
+          searchTheme={customTheme}
+          autocompleteItems={menuItems}
+          onInputChange={filterMenuItems}
+          onSubmit={handleSubmit}
+        />
+      </Flex>
+    </Flex>
+  );
+};

package/dist/mdx/labs-react/search-form/examples/Grow.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import {MenuItem} from '@workday/canvas-kit-preview-react/menu';
+import {SearchForm} from '@workday/canvas-kit-labs-react/search-form';
+import {Flex} from '@workday/canvas-kit-labs-react/layout';
+
+const initialWineList = [
+  'Beaujolais',
+  'Bordeaux',
+  'Cabernet Sauvignon',
+  'Champagne',
+  'Chardonnay',
+  'Chianti',
+  'Malbec',
+  'Merlot',
+  'Pinot Grigio',
+  'Pinot Gris',
+  'Pinot Noir',
+  'Primitivo',
+  'Prosecco',
+  'Riesling',
+  'Rioja',
+  'Rosé',
+  'Sauvignon Blanc',
+  'Syrah',
+  'Zinfandel',
+];
+
+export default () => {
+  const [wineList, setWineList] = React.useState(initialWineList);
+  // Tracking the input value for onSubmit
+  const [searchInput, setSearchInput] = React.useState('');
+  const menuItems = wineList.map(wine => <MenuItem key={wine}>{wine}</MenuItem>);
+
+  const filterMenuItems = e => {
+    setSearchInput(e.target.value);
+    const formattedValue = e.target.value.toLowerCase();
+
+    // Reset the list if the input is cleared
+    if (!formattedValue.length) {
+      setWineList(initialWineList);
+    } else {
+      const filteredItems = wineList.filter(wine => wine.toLowerCase().startsWith(formattedValue));
+      setWineList(filteredItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    // We don't need to prevent the default event because SearchForm handles that internally
+    console.log(`Searching for: ${searchInput}`);
+  };
+
+  return (
+    <Flex minHeight={200} alignItems="flex-start" padding="xs">
+      <SearchForm
+        autocompleteItems={menuItems}
+        grow
+        onInputChange={filterMenuItems}
+        onSubmit={handleSubmit}
+      />
+    </Flex>
+  );
+};

package/dist/mdx/labs-react/search-form/examples/PropTables.splitProps.tsx

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import {SearchThemeAttributes} from '@workday/canvas-kit-labs-react/search-form';
+
+export default (props: SearchThemeAttributes) => <div />;

package/dist/mdx/labs-react/search-form/examples/RTL.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import {MenuItem} from '@workday/canvas-kit-preview-react/menu';
+import {SearchForm} from '@workday/canvas-kit-labs-react/search-form';
+import {Flex} from '@workday/canvas-kit-labs-react/layout';
+import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+
+const initialWineList = [
+  'Beaujolais',
+  'Bordeaux',
+  'Cabernet Sauvignon',
+  'Champagne',
+  'Chardonnay',
+  'Chianti',
+  'Malbec',
+  'Merlot',
+  'Pinot Grigio',
+  'Pinot Gris',
+  'Pinot Noir',
+  'Primitivo',
+  'Prosecco',
+  'Riesling',
+  'Rioja',
+  'Rosé',
+  'Sauvignon Blanc',
+  'Syrah',
+  'Zinfandel',
+];
+
+export default () => {
+  const [wineList, setWineList] = React.useState(initialWineList);
+  // Tracking the input value for onSubmit
+  const [searchInput, setSearchInput] = React.useState('');
+  const menuItems = wineList.map(wine => <MenuItem key={wine}>{wine}</MenuItem>);
+
+  const filterMenuItems = e => {
+    setSearchInput(e.target.value);
+    const formattedValue = e.target.value.toLowerCase();
+
+    // Reset the list if the input is cleared
+    if (!formattedValue.length) {
+      setWineList(initialWineList);
+    } else {
+      const filteredItems = wineList.filter(wine => wine.toLowerCase().startsWith(formattedValue));
+      setWineList(filteredItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    // We don't need to prevent the default event because SearchForm handles that internally
+    console.log(`Searching for: ${searchInput}`);
+  };
+
+  const theme = {
+    canvas: {
+      direction: ContentDirection.RTL,
+    },
+  };
+
+  return (
+    <CanvasProvider theme={theme}>
+      <Flex minHeight={200} alignItems="flex-start" padding="xs">
+        <SearchForm
+          autocompleteItems={menuItems}
+          onInputChange={filterMenuItems}
+          onSubmit={handleSubmit}
+        />
+      </Flex>
+    </CanvasProvider>
+  );
+};

package/dist/mdx/labs-react/search-form/examples/Theming.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import {MenuItem} from '@workday/canvas-kit-preview-react/menu';
+import {SearchForm, SearchTheme} from '@workday/canvas-kit-labs-react/search-form';
+import {Flex} from '@workday/canvas-kit-labs-react/layout';
+
+const initialWineList = [
+  'Beaujolais',
+  'Bordeaux',
+  'Cabernet Sauvignon',
+  'Champagne',
+  'Chardonnay',
+  'Chianti',
+  'Malbec',
+  'Merlot',
+  'Pinot Grigio',
+  'Pinot Gris',
+  'Pinot Noir',
+  'Primitivo',
+  'Prosecco',
+  'Riesling',
+  'Rioja',
+  'Rosé',
+  'Sauvignon Blanc',
+  'Syrah',
+  'Zinfandel',
+];
+
+export default () => {
+  const [wineList, setWineList] = React.useState(initialWineList);
+  // Tracking the input value for onSubmit
+  const [searchInput, setSearchInput] = React.useState('');
+  const menuItems = wineList.map(wine => <MenuItem key={wine}>{wine}</MenuItem>);
+
+  const filterMenuItems = e => {
+    setSearchInput(e.target.value);
+    const formattedValue = e.target.value.toLowerCase();
+
+    // Reset the list if the input is cleared
+    if (!formattedValue.length) {
+      setWineList(initialWineList);
+    } else {
+      const filteredItems = wineList.filter(wine => wine.toLowerCase().startsWith(formattedValue));
+      setWineList(filteredItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    // We don't need to prevent the default event because SearchForm handles that internally
+    console.log(`Searching for: ${searchInput}`);
+  };
+
+  return (
+    <Flex minHeight={200} alignItems="flex-start">
+      <Flex padding="xs" backgroundColor="blueberry500" flex={1} flexBasis="auto">
+        <SearchForm
+          searchTheme={SearchTheme.Dark}
+          autocompleteItems={menuItems}
+          onInputChange={filterMenuItems}
+          onSubmit={handleSubmit}
+        />
+      </Flex>
+    </Flex>
+  );
+};

package/dist/mdx/preview-react/_examples/SelectWithFormik.mdx

@@ -0,0 +1,8 @@
+import SelectWithFormik from './examples/SelectWithFormik';
+
+
+# Canvas Kit Examples
+
+## Select With Formik
+
+<ExampleCodeBlock code={SelectWithFormik} />

package/dist/mdx/preview-react/_examples/TextInputWithFormik.mdx

@@ -0,0 +1,8 @@
+import TextInputWithFormik from './examples/TextInputWithFormik';
+
+
+# Canvas Kit Examples
+
+## Text Input With Formik
+
+<ExampleCodeBlock code={TextInputWithFormik} />