@workday/canvas-kit-docs 5.3.0-next.3 → 5.3.0-next.32

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

@@ -2,9 +2,11 @@ import {Tabs} from '@workday/canvas-kit-react/tabs';
 import {Specifications} from '@workday/canvas-kit-docs';
 
 import Basic from './examples/Basic';
-import NamedKeys from './examples/NamedKeys';
+import NamedTabs from './examples/NamedTabs';
 import RightToLeft from './examples/RightToLeft';
+import OverflowTabs from './examples/OverflowTabs';
 import DisabledTab from './examples/DisabledTab';
+import Icons from './examples/Icons';
 import SinglePanel from './examples/SinglePanel';
 import AlternativeTabStop from './examples/AlternativeTabStop';
 import HoistedModel from './examples/HoistedModel';
@@ -19,8 +21,8 @@ import {
 # Canvas Kit Tabs
 
 `Tabs` is a [compound component](/getting-started/for-developers/resources/compound-components/)
-which can be composed in a variety of different ways. It follows the
-[W3 Tabs specification](https://www.w3.org/TR/wai-aria-practices/#tabpanel).
+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)
 
@@ -34,34 +36,54 @@ yarn add @workday/canvas-kit-react
 
 ### Basic Example
 
-`Tabs` includes a container `Tabs` component and the following subcomponents: `Tabs.List`,
-`Tabs.Item` and `Tabs.Panel`.
+`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/TR/wai-aria-practices/#tabpanel).
+
+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} />
 
+### 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 and provides direct access to its `state` and `events`
-outside of the `Tabs` component.
+pattern is referred to as
+[hoisting the model](/getting-started/for-developers/resources/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 Keys
+### Named Tabs
 
 `Tabs.Item` and `Tabs.Panel` both take an optional `name` attribute that is used for the
-`onActivate` callback. This example is identical to the Basic Example, but with named keys for the
+`onActivate` callback. This example is identical to the Basic Example, but with named tabs for the
 `Tabs.Item` and `Tabs.Panel` subcomponents.
 
-<ExampleCodeBlock code={NamedKeys} />
+<ExampleCodeBlock code={NamedTabs} />
 
-### Right-to-Left
+### Right-to-Left (RTL)
 
-`Tabs` supports right-to-left through the theme of the `CanvasProvider`.
+`Tabs` supports right-to-left languages when specified in the `CanvasProvider` `theme`.
 
 <ExampleCodeBlock code={RightToLeft} />
 
@@ -71,6 +93,14 @@ Set the `disabled` prop of a `Tabs.Item` to `true` to disable it.
 
 <ExampleCodeBlock code={DisabledTab} />
 
+### Tab Icons
+
+Tabs can have icons. You must set `hasIcon` on the `Tabs.Item` and use the `Icon` and `Text`
+subcomponent. The `hasIcon` changes the `Tabs.Item` to change where overflow detection is from the
+`Tabs.Item` element to the `Tabs.Item.Text` element.
+
+<ExampleCodeBlock code={Icons} />
+
 ### Alternative Tab Stop
 
 By default, tab panels are focusable for accessibility. If the contents of a tab panel have a
@@ -93,9 +123,9 @@ from the `contents` object.
 ### 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. For example, if your tabs are
-stored as an array in the state that can be added to along with a fixed tab that should remain at
-the end.
+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} />
 
@@ -106,22 +136,24 @@ the end.
 #### Usage
 
 `Tabs` is a container component that is responsible for creating a `TabsModel` and sharing it with
-its children using React context. It does not represent a real element.
+its subcomponents using React context. It does not represent a real element.
 
 ```tsx
-// Configuration
-<Tabs onActivate={({data}) => console.log('Activated tab', data.tab)}>{/* Subcomponents */}</Tabs>;
+<Tabs onActivate={({data}) => console.log('Activated tab', data.tab)}>
+  {/* Child components */}
+</Tabs>
+```
 
-// OR
+Alternatively, you may pass in a model using the hoisted model pattern.
 
-// Hoisted model
+```tsx
 const model = useTabsModel({
   onActivate({data}) {
     console.log('Activated Tab', data.tab);
   },
 });
 
-<Tabs model={model}>{/* Subcomponents */}</Tabs>;
+<Tabs model={model}>{/* Child components */}</Tabs>;
 ```
 
 #### Props
@@ -135,8 +167,7 @@ Note that if you pass in a `model` configured with `useTabsModel`, configuration
 
 #### Usage
 
-`Tabs.List` is a `div` element with a `role=tablist`. It is a container for `Tabs.Item`
-subcomponents.
+`Tabs.List` is a `<div role="tablist">` element. It is a container for `Tabs.Item` subcomponents.
 
 ```tsx
 <Tabs.List>{/* Tabs.Items */}</Tabs.List>
@@ -144,7 +175,7 @@ subcomponents.
 
 #### Props
 
-Undocumented props are spread to the underlying `div` element.
+Undocumented props are spread to the underlying `<div>` element.
 
 <ArgsTable of={Tabs.List} />
 
@@ -152,9 +183,9 @@ Undocumented props are spread to the underlying `div` element.
 
 #### Usage
 
-`Tabs.Item` is a `button` element with a `role=tab`. Each `Tabs.Item` is associated with a
-`Tabs.Panel` either by a `name` attribute or by the position in the list. If a `name` is provided,
-it must match the name passed to the corresponding `Tabs.Panel` component.
+`Tabs.Item` is a `<button role="tab">` element. Each `Tabs.Item` is associated with a `Tabs.Panel`
+either by a `name` attribute or by the position in the list. If a `name` is provided, it must match
+the name passed to the corresponding `Tabs.Panel` component.
 
 ```tsx
 <Tabs.Item name="first">First Tab</Tabs.Item>
@@ -170,10 +201,9 @@ Undocumented props are spread to the underlying `button` element.
 
 #### Usage
 
-`Tabs.Panel` is a `div` element with a `role=tabpanel`. It is focusable by default. Each
-`Tabs.Panel` is controlled by a `Tabs.Item` either by a `name` attribute or by the position in the
-list. If a `name` is provided, it must match the name passed to the corresponding `Tabs.Item`
-component.
+`Tabs.Panel` is a `<div role="tabpanel">` element. It is focusable by default. Each `Tabs.Panel` is
+controlled by a `Tabs.Item` either by a `name` attribute or by the position in the list. If a `name`
+is provided, it must match the name passed to the corresponding `Tabs.Item` component.
 
 ```tsx
 <Tabs.Panel name="first">{/* Contents of the tab panel */}</Tabs.Panel>
@@ -181,7 +211,7 @@ component.
 
 #### Props
 
-Undocumented props are spread to the underlying `div` element.
+Undocumented props are spread to the underlying `<div>` element.
 
 <ArgsTable of={Tabs.Panel} />
 
@@ -192,9 +222,10 @@ If `Tabs` was stripped of all its markup, attributes, and styling, what would re
 object composed of two parts: `state` which describes the current snapshot in time of the component
 and `events` which describes events that can be sent to the model.
 
-By default, `Tabs` will create and use its own model internally. Alternatively, if you need direct
-access to the model's `state` and `events`, you may configure your own model with `useTabsModel` and
-pass it to `Tabs` via a pattern called
+By default, `Tabs` will create a model and share it internally with its subcomponents using React
+context. Alternatively, if you need direct access to the model's `state` and `events` outside of the
+`Tabs` component, you may configure your own model with `useTabsModel` and pass it to `Tabs` via a
+pattern called
 [hoisting the model](/getting-started/for-developers/resources/compound-components/#configuring-a-model).
 
 ```tsx
@@ -204,7 +235,7 @@ const model = useTabsModel({
   },
 });
 
-<Tabs model={model}>{/* Subcomponents */}</Tabs>;
+<Tabs model={model}>{/* Child components */}</Tabs>;
 ```
 
 ### Config

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

@@ -8,7 +8,7 @@ export default () => {
     <Tabs>
       <Tabs.List>
         <Tabs.Item>First Tab</Tabs.Item>
-        <Tabs.Item disabled>Disabled Tab</Tabs.Item>
+        <Tabs.Item aria-disabled>Disabled Tab</Tabs.Item>
         <Tabs.Item>Third Tab</Tabs.Item>
       </Tabs.List>
       <div style={{marginTop: space.m}}>

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

@@ -1,60 +1,104 @@
 import React from 'react';
 import {space} from '@workday/canvas-kit-react/tokens';
 
-import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
+import {Tabs, useTabsModel, TabsModel} from '@workday/canvas-kit-react/tabs';
+import {SelectionModel} from '../../lib/selection';
+
+type Tab = {
+  tab: string;
+  id: string;
+};
 
 export default () => {
-  const [tabs, setTabs] = React.useState([
-    {tab: 'Tab 1', name: 'tab-1'},
-    {tab: 'Tab 2', name: 'tab-2'},
-    {tab: 'Tab 3', name: 'tab-3'},
+  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);
+  const addedRef = React.useRef(tabs.length - 1);
   const model = useTabsModel({
-    shouldActivate: ({data}) => data.tab !== 'last',
+    items: tabs,
+    shouldSelect: ({data}) => data.id !== 'add',
   });
 
-  const onKeyDown = (e: React.KeyboardEvent<HTMLElement>, name: string) => {
-    if (e.key === 'Backspace') {
-      setTabs(tabs.filter(item => item.name !== name));
+  // 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: SelectionModel<T>) => {
+    const index = model.state.items.findIndex(item => model.getId(item) === model.state.cursorId);
+    console.log('index', index, id, model.state.cursorId, model.state.items);
+    const nextIndex = index === model.state.items.length - 1 ? index - 1 : index + 1;
+    const nextId = model.getId(model.state.items[nextIndex]);
+    if (model.state.selectedIds[0] === id) {
+      // We're removing the currently selected item. Select next item
+      model.events.select({id: nextId});
+    }
+    if (model.state.cursorId === 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>(`#${model.state.id}-${nextId}`)?.focus();
+      });
+    }
+  };
+
+  const onKeyDown = (id: string) => (e: React.KeyboardEvent<HTMLElement>) => {
+    if (e.key === 'Delete' && 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
+        );
+      });
+      model.events.goTo({id: 'add'});
     }
   };
 
   return (
     <Tabs model={model}>
-      <Tabs.List>
-        {tabs.map((item, index) => (
-          <Tabs.Item
-            key={item.name}
-            name={item.name}
-            index={index}
-            onKeyDown={e => onKeyDown(e, item.name)}
-          >
+      <Tabs.List overflowButton={<Tabs.OverflowButton>More</Tabs.OverflowButton>}>
+        {(item: Tab) => (
+          <Tabs.Item name={item.id} onKeyDown={onKeyDown(item.id)} onClick={onClick(item.id)}>
             {item.tab}
           </Tabs.Item>
-        ))}
-        <Tabs.Item
-          key={'last'}
-          index={tabs.length}
-          name={'last'}
-          onClick={() => {
-            addedRef.current += 1;
-            setTabs(tabs =>
-              tabs.concat({tab: `Tab ${addedRef.current}`, name: `tab-${addedRef.current}`})
-            );
-            model.events.goTo({id: 'last'});
-          }}
-        >
-          Add Tab
-        </Tabs.Item>
+        )}
       </Tabs.List>
-      <div style={{marginTop: space.m}}>
-        {tabs.map((item, index) => (
-          <Tabs.Panel key={item.name} name={item.name}>
+      <Tabs.Menu.Popper>
+        <Tabs.Menu.Card maxWidth={300} maxHeight={200}>
+          <Tabs.Menu.List>
+            {(item: Tab) => <Tabs.Menu.Item name={item.id}>{item.tab}</Tabs.Menu.Item>}
+          </Tabs.Menu.List>
+        </Tabs.Menu.Card>
+      </Tabs.Menu.Popper>
+      <Tabs.Panels>
+        {(item: Tab) => (
+          <Tabs.Panel marginTop="m" name={item.id}>
             Contents of {item.tab}
           </Tabs.Panel>
-        ))}
-      </div>
+        )}
+      </Tabs.Panels>
     </Tabs>
   );
 };

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

@@ -6,8 +6,8 @@ import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
 
 export default () => {
   const model = useTabsModel({
-    onActivate({data, prevState}) {
-      console.log('Activated Tab', data, prevState);
+    onSelect({data, prevState}) {
+      console.log('Selected Tab', data, prevState);
     },
   });
 
@@ -27,10 +27,10 @@ export default () => {
       </Tabs>
       <SecondaryButton
         onClick={() => {
-          model.events.activate({tab: 'third'});
+          model.events.select({id: 'third'});
         }}
       >
-        Activate third tab
+        Select Third Tab
       </SecondaryButton>
     </>
   );

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

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import {space} from '@workday/canvas-kit-react/tokens';
+import {starIcon, searchIcon, selectIcon, shareIcon} from '@workday/canvas-system-icons-web';
+import {Tabs} from '@workday/canvas-kit-react/tabs';
+
+export default () => {
+  return (
+    <Tabs>
+      <Tabs.List>
+        <Tabs.Item hasIcon>
+          <Tabs.Item.Icon icon={starIcon} />
+          <Tabs.Item.Text>First Tab</Tabs.Item.Text>
+        </Tabs.Item>
+        <Tabs.Item hasIcon>
+          <Tabs.Item.Icon icon={searchIcon} />
+          <Tabs.Item.Text>Second Tab</Tabs.Item.Text>
+        </Tabs.Item>
+        <Tabs.Item hasIcon>
+          <Tabs.Item.Icon icon={selectIcon} />
+          <Tabs.Item.Text>Third Tab</Tabs.Item.Text>
+        </Tabs.Item>
+        <Tabs.Item hasIcon>
+          <Tabs.Item.Icon icon={shareIcon} />
+          <Tabs.Item.Text>Fourth Tab</Tabs.Item.Text>
+        </Tabs.Item>
+      </Tabs.List>
+      <div style={{marginTop: space.m}}>
+        <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/react/tabs/examples/OverflowTabs.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
+import {HStack} from '@workday/canvas-kit-labs-react';
+import {SecondaryButton} from '../../../button';
+
+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 style={{width: containerWidth}}>
+      <Tabs model={model}>
+        <Tabs.List overflowButton={<Tabs.OverflowButton>More</Tabs.OverflowButton>}>
+          {(item: MyTabItem) => <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.Panels>
+          {(item: MyTabItem) => (
+            <Tabs.Panel marginTop="m" name={item.id}>
+              {item.contents}
+            </Tabs.Panel>
+          )}
+        </Tabs.Panels>
+      </Tabs>
+      <hr />
+      <h4>Change tab container size</h4>
+      <HStack spacing="xs">
+        <SecondaryButton onClick={() => setContainerWidth('100%')}>100%</SecondaryButton>
+        <SecondaryButton onClick={() => setContainerWidth('500px')}>500px</SecondaryButton>
+        <SecondaryButton onClick={() => setContainerWidth('235px')}>235px</SecondaryButton>
+        <SecondaryButton onClick={() => setContainerWidth('150px')}>150px</SecondaryButton>
+      </HStack>
+    </div>
+  );
+};

package/dist/mdx/react/tabs/examples/SinglePanel.tsx

@@ -34,7 +34,7 @@ export default () => {
         </Tabs.Item>
       </Tabs.List>
       <Tabs.Panel style={{marginTop: space.m}} hidden={undefined} id="mytab-panel">
-        {contents[model.state.activeTab]}
+        {contents[model.state.selectedIds[0]]}
       </Tabs.Panel>
     </Tabs>
   );

package/dist/mdx/react/text-area/TextArea.mdx

@@ -23,7 +23,7 @@ Text Areas allow users to enter and edit multiple lines of text.
 ## Installation
 
 ```sh
-yarn add @workday/canvas-kit-react
+yarn add @workday/canvas-kit-labs-react
 ```
 
 ## Usage

package/dist/mdx/react/toast/toast.mdx

@@ -29,52 +29,36 @@ Below are examples we expect will work for most use cases. Note that all example
 they are an important signifier to communicate meaning. For this reason, Toast notifications should
 always include an icon.
 
----
-
 #### Complete Example with Popper
 
 We use Popper to position Toast. Here's an example of how to use them together.
 
 <ExampleCodeBlock code={WithPopper} />
 
----
-
 #### Success
 
 <ExampleCodeBlock code={Success} />
 
----
-
 #### Error
 
 <ExampleCodeBlock code={Error} />
 
----
-
 #### WithCloseButton
 
 <ExampleCodeBlock code={WithCloseButton} />
 
----
-
 #### With an Action Link
 
 <ExampleCodeBlock code={WithActionLink} />
 
----
-
 #### With an Action Link and CloseIcon
 
 <ExampleCodeBlock code={WithActionLinkAndCloseIcon} />
 
----
-
 #### With RTL
 
 <ExampleCodeBlock code={RTL} />
 
----
-
-## Component Props
+## Props
 
 <ArgsTable of={Toast} />

package/dist/mdx/react/tooltip/Tooltip.mdx

@@ -3,6 +3,7 @@ import {Specifications} from '@workday/canvas-kit-docs';
 
 import Default from './examples/Default';
 import CustomContent from './examples/CustomContent';
+import DelayedTooltip from './examples/DelayedTooltip';
 import DescribeType from './examples/DescribeType';
 import Muted from './examples/Muted';
 import Placements from './examples/Placements';
@@ -87,6 +88,13 @@ a dialog instead.
 
 <ExampleCodeBlock code={CustomContent} />
 
+### Delayed Tooltip
+
+The default delay for showing and hiding a tooltip are 300ms and 100ms, respectively. You can
+control the length of the delay by providing custom `showDelay` and `hideDelay` in ms.
+
+<ExampleCodeBlock code={DelayedTooltip} />
+
 ### Placements
 
 The tooltip allows for a `placement` configuration. The tooltip uses
@@ -168,7 +176,7 @@ example uses those parts directly while being functionally equivalent to the ori
 
 <ExampleCodeBlock code={UseTooltip} />
 
-## Properties
+## Props
 
 <ArgsTable of={Tooltip} />
 

package/dist/mdx/react/tooltip/examples/DelayedTooltip.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+
+export default () => {
+  return (
+    <React.Fragment>
+      <Tooltip type="describe" title="Tooltip Text" showDelay={2000} hideDelay={1000}>
+        <SecondaryButton>
+          Tooltip appears after 2 seconds and disappears after 1 second
+        </SecondaryButton>
+      </Tooltip>
+    </React.Fragment>
+  );
+};

package/dist/mdx/react/tooltip/examples/Ellipsis.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
 import {space} from '@workday/canvas-kit-react/tokens';
+import {resetIcon} from '@workday/canvas-system-icons-web';
 
 const CustomContent = ({...elemProps}) => (
   <button
@@ -30,6 +31,11 @@ export default () => {
           Super Mega Ultra Long Content With Max Width On The Button
         </SecondaryButton>
       </OverflowTooltip>
+      <OverflowTooltip>
+        <SecondaryButton icon={resetIcon} style={{maxWidth: 200}}>
+          Super Mega Ultra Long Content With Max Width On The Button with Icon
+        </SecondaryButton>
+      </OverflowTooltip>
       <OverflowTooltip>
         <button
           style={{