@workday/canvas-kit-docs 16.0.0-alpha.0465-next.0 → 16.0.0-alpha.0475-next.0

package/dist/es6/lib/stackblitzFiles/packageJSONFile.js

@@ -18,11 +18,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "15.1.1",
-    "@workday/canvas-kit-preview-react": "15.1.1",
-    "@workday/canvas-kit-react": "15.1.1",
-    "@workday/canvas-kit-react-fonts": "^15.1.1",
-    "@workday/canvas-kit-styling": "15.1.1",
+    "@workday/canvas-kit-labs-react": "15.1.3",
+    "@workday/canvas-kit-preview-react": "15.1.3",
+    "@workday/canvas-kit-react": "15.1.3",
+    "@workday/canvas-kit-react-fonts": "^15.1.3",
+    "@workday/canvas-kit-styling": "15.1.3",
     "@workday/canvas-system-icons-web": "4.0.2",
     "@workday/canvas-expressive-icons-web": "1.0.1",
     "@workday/canvas-tokens-web": "4.2.0"

package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts

@@ -19,11 +19,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "15.1.1",
-    "@workday/canvas-kit-preview-react": "15.1.1",
-    "@workday/canvas-kit-react": "15.1.1",
-    "@workday/canvas-kit-react-fonts": "^15.1.1",
-    "@workday/canvas-kit-styling": "15.1.1",
+    "@workday/canvas-kit-labs-react": "15.1.3",
+    "@workday/canvas-kit-preview-react": "15.1.3",
+    "@workday/canvas-kit-react": "15.1.3",
+    "@workday/canvas-kit-react-fonts": "^15.1.3",
+    "@workday/canvas-kit-styling": "15.1.3",
     "@workday/canvas-system-icons-web": "4.0.2",
     "@workday/canvas-expressive-icons-web": "1.0.1",
     "@workday/canvas-tokens-web": "4.2.0"

package/dist/mdx/16.0-UPGRADE-GUIDE.mdx

@@ -14,8 +14,10 @@ Soon to be...
   - [Instructions](#instructions)
 - [New Components](#new-components)
   - [KBD](#kbd)
+  - [Tabs](#tabs)
 - [Component Updates](#component-updates)
   - [Action Bar](#action-bar)
+  - [Banner](#banner)
   - [Avatar](#avatar)
   - [Buttons](#buttons)
     - [Delete Button Outline Variant](#delete-button-outline-variant)
@@ -32,6 +34,8 @@ Soon to be...
     - [Text Area](#text-area)
     - [Text Input](#text-input)
   - [Menu](#menu)
+  - [Modal](#modal)
+  - [Popup](#popup)
   - [Segmented Control](#segmented-control)
 	- [Toast](#toast)
 	- [Tooltip](#tooltip)
@@ -135,6 +139,28 @@ import {KBD} from '@workday/canvas-kit-labs-react';
 For more details and advanced usage, including accessibility guidance for symbolic keys and
 functional shortcuts, refer to the storybook documentation and our example stories.
 
+### Tabs
+
+**PR:** [#4062](https://github.com/Workday/canvas-kit/pull/4062)
+
+A new `Tabs` component has been added to `@workday/canvas-kit-preview-react`, aligned with the Sana
+Canvas visual language. It supports `filled` and `outlined` variants.
+
+```tsx
+import {Tabs} from '@workday/canvas-kit-preview-react/tabs';
+
+<Tabs>
+  <Tabs.List>
+    <Tabs.Item>First Tab</Tabs.Item>
+    <Tabs.Item>Second Tab</Tabs.Item>
+  </Tabs.List>
+  <Tabs.Panels>
+    <Tabs.Panel>Contents of First Tab</Tabs.Panel>
+    <Tabs.Panel>Contents of Second Tab</Tabs.Panel>
+  </Tabs.Panels>
+</Tabs>;
+```
+
 ## Component Updates
 
 ### Action Bar
@@ -145,6 +171,12 @@ functional shortcuts, refer to the storybook documentation and our example stori
 
 - `ActionBar` padding has been updated to `padding.md` (16px).
 
+### Banner
+
+#### Visual Updates
+
+- `Banner` now uses `system.depth[5]` for box-shadow (previously had no box-shadow).
+
 ### Avatar
 
 **PR:** [#3981](https://github.com/Workday/canvas-kit/pull/3981)
@@ -355,6 +387,7 @@ If you customize `brand.success.base` in your theme, please verify the following
   `Toast.Body` and `Toast.Icon`.
 - Gap between the icon, body, and close icon is now `base.size150` (12px).
 - Shape uses `system.shape.xl`.
+- Box-shadow updated from `system.depth[3]` to `system.depth[5]`.
 - `Toast.Body` no longer has a gap between text and link.
 - `Toast.CloseIcon` is set to have absolute positioning and aligned with the top-right corner (in
   LTR).
@@ -372,9 +405,22 @@ If you customize `brand.success.base` in your theme, please verify the following
 - Tooltip boundaries remain visible in Windows High Contrast mode: when High Contrast is detected,
   Tooltip uses a solid outline (`outline: solid 1px CanvasText`) to ensure clear visibility.
 - Shape is now fully rounded using `system.shape.full`.
+- Box-shadow updated from `system.depth[2]` to `system.depth[3]`.
 - Type level is now `subtext.lg` (previously `subtext.md`).
 - Padding and spacing have been adjusted to accommodate the new styling.
 
+### Modal
+
+#### Visual Updates
+
+- `Modal.Card` box-shadow updated from `system.depth[5]` to `system.depth[6]`.
+
+### Popup
+
+#### Visual Updates
+
+- `Popup.Card` box-shadow updated from `system.depth[3]` to `system.depth[4]`.
+
 ### Menu
 
 **PR:** [#3987](https://github.com/Workday/canvas-kit/pull/3987)

package/dist/mdx/preview-react/tabs/Tabs.mdx

@@ -0,0 +1,136 @@
+import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
+import AlternativeTabStop from './examples/AlternativeTabStop';
+import Basic from './examples/Basic';
+import DisabledTab from './examples/DisabledTab';
+import DynamicTabs from './examples/DynamicTabs';
+import HoistedModel from './examples/HoistedModel';
+import Icons from './examples/Icons';
+import NamedTabs from './examples/NamedTabs';
+import OutlinedTabs from './examples/OutlinedTabs';
+import OverflowTabs from './examples/OverflowTabs';
+import RightToLeft from './examples/RightToLeft';
+import SinglePanel from './examples/SinglePanel';
+
+
+# Canvas Kit Tabs
+
+`Tabs` is a [compound component](/get-started/for-developers/documentation/compound-components/)
+that allows users to navigate between related views of content while remaining in context of the
+page.
+
+[> Workday Design Reference](https://design.workday.com/components/navigation/tabs)
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-react
+```
+
+## Usage
+
+### Basic Example
+
+`Tabs` includes a container `Tabs` component and the following subcomponents which can be composed
+in a variety of ways: `Tabs.List`, `Tabs.Item` and `Tabs.Panel`. It follows the
+[W3 Tabs specification](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).
+
+In this example, we set up a basic `Tabs` component with five tabs. This example uses a static API
+that does not support overflow.
+
+<ExampleCodeBlock code={Basic} />
+
+### Outlined Tabs
+
+Set the `variant` prop of `Tabs` to `outlined` to render an outlined style of tabs.
+
+<ExampleCodeBlock code={OutlinedTabs} />
+
+### Overflow Tabs
+
+Tabs is a responsive component based on the width of its container. If the rendered tabs exceed the
+width of the `Tabs.List`, an overflow menu will be rendered. This only works against the dynamic API
+where you give the `TabsModel` an array of items to be rendered. The dynamic API handles the React
+`key` for you based on the item's identifier. The dynamic API requires either an `id` on each item
+object or a `getId` function that returns an identifier based on the item. The below example uses an
+`id` property on each item.
+
+The dynamic API takes in any object, but since nothing is known about your object, a
+[render prop](https://reactjs.org/docs/render-props.html) is necessary to instruct a list how it
+should render.
+
+<ExampleCodeBlock code={OverflowTabs} />
+
+### Hoisted Model
+
+By default, `Tabs` will create and use its own [model](#model) internally. Alternatively, you may
+configure your own model with `useTabsModel` and pass it to `Tabs` via the `model` prop. This
+pattern is referred to as
+[hoisting the model](/get-started/for-developers/documentation/compound-components/#configuring-a-model)
+and provides direct access to its `state` and `events` outside of the `Tabs` component.
+
+In this example, we set up external observation of the model state and create an external button to
+trigger an event to change the active tab.
+
+<ExampleCodeBlock code={HoistedModel} />
+
+### Named Tabs
+
+`Tabs.Item` and `Tabs.Panel` both take an optional `data-id` attribute that is used for the
+`onActivate` callback. This example is identical to the Basic Example, but with tabs named using
+`data-id` for the `Tabs.Item` and `Tabs.Panel` subcomponents.
+
+<ExampleCodeBlock code={NamedTabs} />
+
+### Right-to-Left (RTL)
+
+`Tabs` supports right-to-left languages when specified in the `CanvasProvider` `theme`.
+
+<ExampleCodeBlock code={RightToLeft} />
+
+### Disabled Tab
+
+Set the `disabled` prop of a `Tabs.Item` to `true` to disable it.
+
+<ExampleCodeBlock code={DisabledTab} />
+
+### Tab Icons
+
+Tabs can have icons. Use the `Icon` and `Text` subcomponents.
+
+<ExampleCodeBlock code={Icons} />
+
+### Alternative Tab Stop
+
+By default, tab panels are focusable for accessibility. If the contents of a tab panel have a
+focusable element, you may disable this default behavior by setting the `tabIndex` prop of
+`Tabs.Panel` to `undefined`. This example has a tab panel with a focusable button.
+
+<ExampleCodeBlock code={AlternativeTabStop} />
+
+### Single Tab Panel
+
+The compound component pattern allows for advanced composition. For example, `Tabs` can be composed
+to have only a single `Tabs.Panel` using attribute overrides and callbacks. More information about
+attributes and callbacks can be found in the prop tables below for each subcomponent.
+
+In this example, we use a hoisted model and the `activeTab` property of the state to show content
+from the `contents` object.
+
+<ExampleCodeBlock code={SinglePanel} />
+
+### Dynamic Tabs
+
+The `Tabs.Item` component takes in an optional `index` property if you want to specify the position
+of a tab. If not defined, by default it will append tabs to the end. In this example, our tabs are
+stored as an array in the state, and we have a fixed tab at the end that can add new tabs to that
+array.
+
+<ExampleCodeBlock code={DynamicTabs} />
+
+## Component API
+
+<SymbolDoc name="Tabs" fileName="/react/" />
+
+## Specifications
+
+<Specifications file="./cypress/component/Tabs.spec.tsx" name="Tabs" />

package/dist/mdx/preview-react/tabs/examples/AlternativeTabStop.tsx

@@ -0,0 +1,26 @@
+import {Tabs} from '@workday/canvas-kit-preview-react/tabs';
+import {cssVar} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+export default () => {
+  return (
+    <Tabs>
+      <Tabs.List>
+        <Tabs.Item>First Tab</Tabs.Item>
+        <Tabs.Item>Second Tab</Tabs.Item>
+        <Tabs.Item>Third Tab</Tabs.Item>
+      </Tabs.List>
+      <div style={{marginBlock: cssVar(system.gap.lg)}}>
+        <Tabs.Panel tabIndex={undefined}>
+          <button>Focusable button</button>
+          <br />
+          Contents of First Tab. The tab panel is no longer focusable, but the button is. It may be
+          desirable to disable focus on the tab panel and allow focus to flow into the tab panel to
+          the first focusable element.
+        </Tabs.Panel>
+        <Tabs.Panel>Contents of Second Tab</Tabs.Panel>
+        <Tabs.Panel>Contents of Third Tab</Tabs.Panel>
+      </div>
+    </Tabs>
+  );
+};

package/dist/mdx/preview-react/tabs/examples/Basic.tsx

@@ -0,0 +1,24 @@
+import {Tabs} from '@workday/canvas-kit-preview-react/tabs';
+import {cssVar} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+export default () => {
+  return (
+    <Tabs>
+      <Tabs.List>
+        <Tabs.Item>First Tab</Tabs.Item>
+        <Tabs.Item>Second Tab</Tabs.Item>
+        <Tabs.Item>Third Tab</Tabs.Item>
+        <Tabs.Item>Fourth Tab</Tabs.Item>
+        <Tabs.Item>Fifth Tab</Tabs.Item>
+      </Tabs.List>
+      <div style={{marginBlockStart: cssVar(system.gap.lg)}}>
+        <Tabs.Panel>Contents of First Tab</Tabs.Panel>
+        <Tabs.Panel>Contents of Second Tab</Tabs.Panel>
+        <Tabs.Panel>Contents of Third Tab</Tabs.Panel>
+        <Tabs.Panel>Contents of Fourth Tab</Tabs.Panel>
+        <Tabs.Panel>Contents of Fifth Tab</Tabs.Panel>
+      </div>
+    </Tabs>
+  );
+};

package/dist/mdx/preview-react/tabs/examples/DisabledTab.tsx

@@ -0,0 +1,20 @@
+import {Tabs} from '@workday/canvas-kit-preview-react/tabs';
+import {cssVar} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+export default () => {
+  return (
+    <Tabs>
+      <Tabs.List>
+        <Tabs.Item>First Tab</Tabs.Item>
+        <Tabs.Item aria-disabled>Disabled Tab</Tabs.Item>
+        <Tabs.Item>Third Tab</Tabs.Item>
+      </Tabs.List>
+      <div style={{marginBlockStart: cssVar(system.gap.lg)}}>
+        <Tabs.Panel>Contents of First Tab</Tabs.Panel>
+        <Tabs.Panel>Contents of Disabled Tab</Tabs.Panel>
+        <Tabs.Panel>Contents of Third Tab</Tabs.Panel>
+      </div>
+    </Tabs>
+  );
+};

package/dist/mdx/preview-react/tabs/examples/DynamicTabs.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+
+import {Tabs, useTabsModel} from '@workday/canvas-kit-preview-react/tabs';
+import {isCursor} from '@workday/canvas-kit-react/collection';
+import {slugify} from '@workday/canvas-kit-react/common';
+import {px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+type Tab = {
+  tab: string;
+  id: string;
+};
+
+export default () => {
+  const [tabs, setTabs] = React.useState<Tab[]>([
+    {tab: 'Tab 1', id: 'tab-1'},
+    {tab: 'Tab 2', id: 'tab-2'},
+    {tab: 'Tab 3', id: 'tab-3'},
+    {tab: 'Add Tab', id: 'add'},
+  ]);
+  const addedRef = React.useRef(tabs.length - 1);
+  const model = useTabsModel({
+    items: tabs,
+    getTextValue: item => item.tab,
+    shouldSelect: data => data.id !== 'add',
+  });
+
+  // A ref of the model for the render functions to work around the caching done to lists
+  const modelRef = React.useRef(model);
+  modelRef.current = model;
+
+  /**
+   * Helper function that should be called when an item is programmatically removed. The following
+   * side effects depend on state of the model:
+   * * **Item is focused**: Focus will be moved to next item in the list
+   * * **Item is selected**: Selection will be moved to the next item in the list
+   * @param id The id of the item that will be removed
+   */
+  const removeItem = <T extends unknown>(id: string, model: ReturnType<typeof useTabsModel>) => {
+    const index = model.state.items.findIndex(item => isCursor(model.state, item.id));
+    const nextIndex = index === model.state.items.length - 1 ? index - 1 : index + 1;
+    const nextId = model.state.items[nextIndex].id;
+    if (model.state.selectedIds[0] === id) {
+      // We're removing the currently selected item. Select next item
+      model.events.select({id: nextId});
+    }
+    if (isCursor(model.state, id)) {
+      // We're removing the currently focused item. Focus next item
+      model.events.goTo({id: nextId});
+
+      // wait for stabilization of state
+      requestAnimationFrame(() => {
+        document
+          .querySelector<HTMLElement>(`[id="${slugify(`${model.state.id}-${nextId}`)}"]`)
+          ?.focus();
+      });
+    }
+  };
+
+  const onKeyDown = (id: string) => (e: React.KeyboardEvent<HTMLElement>) => {
+    if ((e.key === 'Delete' || e.key === 'Backspace') && id !== 'add') {
+      setTabs(tabs.filter(item => item.id !== id));
+      const model = modelRef.current;
+      removeItem(id, model);
+    }
+  };
+
+  const onClick = (id: string) => (e: React.MouseEvent) => {
+    if (id === 'add') {
+      addedRef.current += 1;
+      setTabs(tabs => {
+        const newTabs = tabs.slice(0, tabs.length - 1);
+        const addTab = tabs.slice(-1);
+        return newTabs.concat(
+          {tab: `Tab ${addedRef.current}`, id: `tab-${addedRef.current}`},
+          addTab
+        );
+      });
+    }
+  };
+
+  return (
+    <Tabs model={model}>
+      <Tabs.List overflowButton={<Tabs.OverflowButton>More</Tabs.OverflowButton>}>
+        {(item: Tab) => (
+          <Tabs.Item onKeyDown={onKeyDown(item.id)} onClick={onClick(item.id)}>
+            {item.tab}
+          </Tabs.Item>
+        )}
+      </Tabs.List>
+      <Tabs.Menu.Popper>
+        <Tabs.Menu.Card cs={{maxWidth: px2rem(300), maxHeight: px2rem(200)}}>
+          <Tabs.Menu.List>
+            {(item: Tab) => <Tabs.Menu.Item>{item.tab}</Tabs.Menu.Item>}
+          </Tabs.Menu.List>
+        </Tabs.Menu.Card>
+      </Tabs.Menu.Popper>
+      <Tabs.Panels>
+        {(item: Tab) => (
+          <Tabs.Panel cs={{marginBlockStart: system.gap.lg}}>Contents of {item.tab}</Tabs.Panel>
+        )}
+      </Tabs.Panels>
+    </Tabs>
+  );
+};

package/dist/mdx/preview-react/tabs/examples/HoistedModel.tsx

@@ -0,0 +1,36 @@
+import {Tabs, useTabsModel} from '@workday/canvas-kit-preview-react/tabs';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {cssVar} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+export default () => {
+  const model = useTabsModel({
+    onSelect(data, prevState) {
+      console.log('Selected Tab', data.id, prevState);
+    },
+  });
+
+  return (
+    <>
+      <Tabs model={model}>
+        <Tabs.List>
+          <Tabs.Item data-id="first">First Tab</Tabs.Item>
+          <Tabs.Item data-id="second">Second Tab</Tabs.Item>
+          <Tabs.Item data-id="third">Third Tab</Tabs.Item>
+        </Tabs.List>
+        <div style={{marginBlockStart: cssVar(system.gap.lg)}}>
+          <Tabs.Panel data-id="first">Contents of First Tab</Tabs.Panel>
+          <Tabs.Panel data-id="second">Contents of Second Tab</Tabs.Panel>
+          <Tabs.Panel data-id="third">Contents of Third Tab</Tabs.Panel>
+        </div>
+      </Tabs>
+      <SecondaryButton
+        onClick={() => {
+          model.events.select({id: 'third'});
+        }}
+      >
+        Select Third Tab
+      </SecondaryButton>
+    </>
+  );
+};

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

@@ -0,0 +1,35 @@
+import {Tabs} from '@workday/canvas-kit-preview-react/tabs';
+import {cssVar} from '@workday/canvas-kit-styling';
+import {searchIcon, selectIcon, shareIcon, starIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
+
+export default () => {
+  return (
+    <Tabs>
+      <Tabs.List>
+        <Tabs.Item>
+          <Tabs.Item.Icon icon={starIcon} />
+          <Tabs.Item.Text>First Tab</Tabs.Item.Text>
+        </Tabs.Item>
+        <Tabs.Item>
+          <Tabs.Item.Icon icon={searchIcon} />
+          <Tabs.Item.Text>Second Tab</Tabs.Item.Text>
+        </Tabs.Item>
+        <Tabs.Item>
+          <Tabs.Item.Icon icon={selectIcon} />
+          <Tabs.Item.Text>Third Tab</Tabs.Item.Text>
+        </Tabs.Item>
+        <Tabs.Item>
+          <Tabs.Item.Icon icon={shareIcon} />
+          <Tabs.Item.Text>Fourth Tab</Tabs.Item.Text>
+        </Tabs.Item>
+      </Tabs.List>
+      <div style={{marginBlockStart: cssVar(system.gap.lg)}}>
+        <Tabs.Panel>Contents of First Tab</Tabs.Panel>
+        <Tabs.Panel>Contents of Second Tab</Tabs.Panel>
+        <Tabs.Panel>Contents of Third Tab</Tabs.Panel>
+        <Tabs.Panel>Contents of Fourth Tab</Tabs.Panel>
+      </div>
+    </Tabs>
+  );
+};

package/dist/mdx/preview-react/tabs/examples/NamedTabs.tsx

@@ -0,0 +1,24 @@
+import {Tabs} from '@workday/canvas-kit-preview-react/tabs';
+import {cssVar} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+export default () => {
+  return (
+    <Tabs>
+      <Tabs.List>
+        <Tabs.Item data-id="first">First Tab</Tabs.Item>
+        <Tabs.Item data-id="second">Second Tab</Tabs.Item>
+        <Tabs.Item data-id="third">Third Tab</Tabs.Item>
+        <Tabs.Item data-id="fourth">Fourth Tab</Tabs.Item>
+        <Tabs.Item data-id="fifth">Fifth Tab</Tabs.Item>
+      </Tabs.List>
+      <div style={{marginBlockStart: cssVar(system.gap.lg)}}>
+        <Tabs.Panel data-id="first">Contents of First Tab</Tabs.Panel>
+        <Tabs.Panel data-id="second">Contents of Second Tab</Tabs.Panel>
+        <Tabs.Panel data-id="third">Contents of Third Tab</Tabs.Panel>
+        <Tabs.Panel data-id="fourth">Contents of Fourth Tab</Tabs.Panel>
+        <Tabs.Panel data-id="fifth">Contents of Fifth Tab</Tabs.Panel>
+      </div>
+    </Tabs>
+  );
+};

package/dist/mdx/preview-react/tabs/examples/OutlinedTabs.tsx

@@ -0,0 +1,24 @@
+import {Tabs} from '@workday/canvas-kit-preview-react/tabs';
+import {cssVar} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+export default () => {
+  return (
+    <Tabs variant="outlined">
+      <Tabs.List>
+        <Tabs.Item>First Tab</Tabs.Item>
+        <Tabs.Item>Second Tab</Tabs.Item>
+        <Tabs.Item>Third Tab</Tabs.Item>
+        <Tabs.Item>Fourth Tab</Tabs.Item>
+        <Tabs.Item>Fifth Tab</Tabs.Item>
+      </Tabs.List>
+      <div style={{marginBlockStart: cssVar(system.gap.lg)}}>
+        <Tabs.Panel>Contents of First Tab</Tabs.Panel>
+        <Tabs.Panel>Contents of Second Tab</Tabs.Panel>
+        <Tabs.Panel>Contents of Third Tab</Tabs.Panel>
+        <Tabs.Panel>Contents of Fourth Tab</Tabs.Panel>
+        <Tabs.Panel>Contents of Fifth Tab</Tabs.Panel>
+      </div>
+    </Tabs>
+  );
+};

package/dist/mdx/preview-react/tabs/examples/OverflowTabs.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import {Tabs, useTabsModel} from '@workday/canvas-kit-preview-react/tabs';
+import {Box} from '@workday/canvas-kit-react/layout';
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
+import {px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+type MyTabItem = {
+  id: string;
+  text: React.ReactNode;
+  contents: string;
+};
+
+export default () => {
+  const [items] = React.useState<MyTabItem[]>([
+    {id: 'first', text: 'First Tab', contents: 'Contents of First Tab'},
+    {id: 'second', text: 'Second Tab', contents: 'Contents of Second Tab'},
+    {id: 'third', text: 'Third Tab', contents: 'Contents of Third Tab'},
+    {id: 'fourth', text: 'Fourth Tab', contents: 'Contents of Fourth Tab'},
+    {id: 'fifth', text: 'Fifth Tab', contents: 'Contents of Fifth Tab'},
+    {id: 'sixth', text: 'Sixth Tab', contents: 'Contents of Sixth Tab'},
+    {id: 'seventh', text: 'Seventh Tab', contents: 'Contents of Seventh Tab'},
+  ]);
+  const model = useTabsModel({
+    items,
+  });
+  const [containerWidth, setContainerWidth] = React.useState('100%');
+  return (
+    <div>
+      <Box cs={{width: containerWidth, marginBlockEnd: system.gap.xl}}>
+        <Tabs model={model}>
+          <Tabs.List overflowButton={<Tabs.OverflowButton>More</Tabs.OverflowButton>}>
+            {(item: MyTabItem) => <Tabs.Item>{item.text}</Tabs.Item>}
+          </Tabs.List>
+          <Tabs.Menu.Popper>
+            <Tabs.Menu.Card cs={{maxWidth: px2rem(300), maxHeight: px2rem(200)}}>
+              <Tabs.Menu.List>
+                {(item: MyTabItem) => <Tabs.Menu.Item>{item.text}</Tabs.Menu.Item>}
+              </Tabs.Menu.List>
+            </Tabs.Menu.Card>
+          </Tabs.Menu.Popper>
+          <Tabs.Panels>
+            {(item: MyTabItem) => (
+              <Tabs.Panel cs={{marginBlockStart: system.gap.lg}}>{item.contents}</Tabs.Panel>
+            )}
+          </Tabs.Panels>
+        </Tabs>
+      </Box>
+      <hr />
+      <h4>Change Tabs container size</h4>
+      <SegmentedControl onSelect={data => setContainerWidth(data.id)}>
+        <SegmentedControl.List aria-label="container width control">
+          <SegmentedControl.Item data-id="100%">100%</SegmentedControl.Item>
+          <SegmentedControl.Item data-id="500px">500px</SegmentedControl.Item>
+          <SegmentedControl.Item data-id="360px">360px</SegmentedControl.Item>
+          <SegmentedControl.Item data-id="150px">150px</SegmentedControl.Item>
+        </SegmentedControl.List>
+      </SegmentedControl>
+    </div>
+  );
+};

package/dist/mdx/preview-react/tabs/examples/RightToLeft.tsx

@@ -0,0 +1,43 @@
+import {Tabs} from '@workday/canvas-kit-preview-react/tabs';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {cssVar} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+export default () => {
+  return (
+    <CanvasProvider dir="rtl">
+      <Tabs>
+        <Tabs.List>
+          <Tabs.Item>ראשון</Tabs.Item>
+          <Tabs.Item>שְׁנִיָה</Tabs.Item>
+          <Tabs.Item>שְׁלִישִׁי</Tabs.Item>
+          <Tabs.Item>רביעי</Tabs.Item>
+          <Tabs.Item>חמישי</Tabs.Item>
+        </Tabs.List>
+        <div style={{marginBlock: cssVar(system.gap.lg)}}>
+          <Tabs.Panel>תוכן הראשון</Tabs.Panel>
+          <Tabs.Panel>תוכן השני</Tabs.Panel>
+          <Tabs.Panel>תוכן השלישי</Tabs.Panel>
+          <Tabs.Panel>תוכן הרביעי</Tabs.Panel>
+          <Tabs.Panel>תוכן החמישי</Tabs.Panel>
+        </div>
+      </Tabs>
+      <Tabs variant="outlined">
+        <Tabs.List>
+          <Tabs.Item>ראשון</Tabs.Item>
+          <Tabs.Item>שְׁנִיָה</Tabs.Item>
+          <Tabs.Item>שְׁלִישִׁי</Tabs.Item>
+          <Tabs.Item>רביעי</Tabs.Item>
+          <Tabs.Item>חמישי</Tabs.Item>
+        </Tabs.List>
+        <div style={{marginBlock: cssVar(system.gap.lg)}}>
+          <Tabs.Panel>תוכן הראשון</Tabs.Panel>
+          <Tabs.Panel>תוכן השני</Tabs.Panel>
+          <Tabs.Panel>תוכן השלישי</Tabs.Panel>
+          <Tabs.Panel>תוכן הרביעי</Tabs.Panel>
+          <Tabs.Panel>תוכן החמישי</Tabs.Panel>
+        </div>
+      </Tabs>
+    </CanvasProvider>
+  );
+};