@workday/canvas-kit-docs 6.0.0-beta.0-next.15 → 6.0.2

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

@@ -1,17 +1,30 @@
 import {Tabs} from '@workday/canvas-kit-react/tabs';
 import {Specifications} from '@workday/canvas-kit-docs';
 
-import Simple from './examples/Simple';
-import NamedKeys from './examples/NamedKeys';
+import Basic from './examples/Basic';
+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';
 import DynamicTabs from './examples/DynamicTabs';
+import {
+  TabsModelConfigComponent,
+  TabsStateComponent,
+  TabsEventsComponent,
+} from './TabsModel.splitprops.tsx';
 
 
-# Canvas Kit React Tabs
+# Canvas Kit Tabs
+
+`Tabs` is a [compound component](/getting-started/for-developers/resources/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
 
@@ -21,85 +34,98 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
-This component follows the
-[W3 Tabs specification](https://www.w3.org/TR/wai-aria-practices/#tabpanel). `Tabs` is a
-[Compound Component](/getting-started/for-developers/resources/compound-components/), which means it
-can be composed in a variety of different ways. We'll first cover some basic usage examples followed
-by more advanced usage.
+### Basic Example
 
-### Basic Usage
+`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).
 
-Below are examples we expect will work for most cases. Please refer to the
-[Advanced Usage](#advanced-usage) section for details on supporting custom implementations.
+In this example, we set up a basic `Tabs` component with five tabs. This example uses a static API
+that does not support overflow.
 
-#### Basic Example
+<ExampleCodeBlock code={Basic} />
 
-In this example, a few tab items and tab panels are set up without any named keys.
+### Overflow Tabs
 
-<ExampleCodeBlock code={Simple} />
+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.
 
-#### Named Keys
+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.
 
-`Tabs.Item` and `Tabs.Panel` both take an optional `name` attribute that are used for the
-`onActivate` callback. This example is the same, but with named keys for the tabs and panels.
+<ExampleCodeBlock code={OverflowTabs} />
 
-<ExampleCodeBlock code={NamedKeys} />
+### Hoisted Model
 
-#### Right-to-Left
+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](/getting-started/for-developers/resources/compound-components/#configuring-a-model)
+and provides direct access to its `state` and `events` outside of the `Tabs` component.
 
-`Tabs` supports right-to-left through the theme of the `CanvasProvider`.
+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={RightToLeft} />
+<ExampleCodeBlock code={HoistedModel} />
 
-#### Disabled Tab
+### Named Tabs
 
-A `Tab.Item` can be disabled by passing `disabled={true}`.
+`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 tabs for the
+`Tabs.Item` and `Tabs.Panel` subcomponents.
 
-<ExampleCodeBlock code={DisabledTab} />
+<ExampleCodeBlock code={NamedTabs} />
 
-#### Alternative Tab Stop
+### Right-to-Left (RTL)
 
-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 `tabIndex` to `undefined`. This
-example has a tab panel with a focusable button in the tab panel.
+`Tabs` supports right-to-left languages when specified in the `CanvasProvider` `theme`.
 
-<ExampleCodeBlock code={AlternativeTabStop} />
+<ExampleCodeBlock code={RightToLeft} />
 
-### Advanced Usage
+### Disabled Tab
 
-Below are some examples for more advanced / custom use cases. We expect most people won't need to
-read this section, but if you're needing to go beyond basic examples or are curious, feel free to
-explore this section. While these examples are not exhaustive, they provide additional insight into
-what's possible.
+Set the `disabled` prop of a `Tabs.Item` to `true` to disable it.
 
-#### Hoisted Model
+<ExampleCodeBlock code={DisabledTab} />
 
-The `Tabs` component takes in an optional `model` property. If not defined, it will create and use
-its own. Hoisting the model allows access to state and events outside the `Tabs` component family.
-You can create a `TabsModel` using the `useTabsModel` hook and configure the model with the same
-configuration that the `Tabs` component receives. If you pass in a configured model, configuration
-properties passed to the `Tabs` component will be ignored.
+### Tab Icons
 
-In this example, we'll set up external observation of the `TabsModel` state and set up an external
-button to trigger an event to change the currently active tab.
+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={HoistedModel} />
+<ExampleCodeBlock code={Icons} />
+
+### Alternative Tab Stop
 
-#### Single Tab Panel
+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} />
 
-The compound component patterns allows advanced composition. For example, the tabs can be composed
-to have only a single tab panel using attribute overrides and callbacks. More info about attributes
-and callbacks are in property tables below for each subcomponent. In this example, we'll use a
-Hoisted model and the `activeTab` property of the state to show content of our `contents` object.
+### 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
+### 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} />
 
@@ -107,83 +133,129 @@ the end.
 
 ### Tabs
 
-The `Tabs` component is the container component that is responsible for creating a `TabsModel` that
-is shared using React context. It does not represent a real element.
-
 #### Usage
 
+`Tabs` is a container component that is responsible for creating a `TabsModel` and sharing it with
+its subcomponents using React context. It does not represent a real element.
+
 ```tsx
-// configuration
-<Tabs onActivate={({ data }) => console.log('Activate tab', data.tab)}>
-  {/* sub components go here */ }
+<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.
 
-// model
-const model = useTabsModel(config)
+```tsx
+const model = useTabsModel({
+  onActivate({data}) {
+    console.log('Activated Tab', data.tab);
+  },
+});
 
-<Tabs model={model}>
-  {/* sub components go here */ }
-</Tabs>
+<Tabs model={model}>{/* Child components */}</Tabs>;
 ```
 
-#### Component Props
+#### Props
 
-<PropsTable of={Tabs} />
+Note that if you pass in a `model` configured with `useTabsModel`, configuration props passed to
+`Tabs` will be ignored.
 
----
+<ArgsTable of={Tabs} />
 
 ### Tabs.List
 
-`Tabs.List` is a `div` element with a `role=tablist`. It is a container for `Tabs.Item` components.
-Any additional attributes provided will be forwared to the dom element.
-
 #### Usage
 
+`Tabs.List` is a `<div role="tablist">` element. It is a container for `Tabs.Item` subcomponents.
+
 ```tsx
-<Tabs.List>{/* Tabs.Items go here */}</Tabs.List>
+<Tabs.List>{/* Tabs.Items */}</Tabs.List>
 ```
 
-#### Component Props
+#### Props
 
-<PropsTable of={Tabs.List} />
+Undocumented props are spread to the underlying `<div>` element.
 
----
+<ArgsTable of={Tabs.List} />
 
 ### Tabs.Item
 
-`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 `Tabs.Panel` component.
-
 #### Usage
 
+`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>
 ```
 
-#### Component Props
+#### Props
 
-<PropsTable of={Tabs.Item} />
+Undocumented props are spread to the underlying `button` element.
 
----
+<ArgsTable of={Tabs.Item} />
 
 ### Tabs.Panel
 
-`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 `Tabs.Item` component.
-
 #### Usage
 
+`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>
+```
+
+#### Props
+
+Undocumented props are spread to the underlying `<div>` element.
+
+<ArgsTable of={Tabs.Panel} />
+
+## Model
+
+If `Tabs` was stripped of all its markup, attributes, and styling, what would remain is the
+[model](/getting-started/for-developers/resources/compound-components/#models). The model is an
+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 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
-<Tabs.Panel name="first">{/* contents of the tab panel */}</Tabs.Panel>
+const model = useTabsModel({
+  onActivate({data}) {
+    console.log('Activated Tab', data);
+  },
+});
+
+<Tabs model={model}>{/* Child components */}</Tabs>;
 ```
 
-#### Component Props
+### Config
+
+`useTabsModel` accepts a configuration object with the following properties and returns a
+`TabsModel` with `state` and `events` properties.
+
+<ArgsTable of={TabsModelConfigComponent} />
+
+### State
+
+The `TabsModel` `state` is an object with the following properties.
+
+<ArgsTable of={TabsStateComponent} />
+
+### Events
+
+The `TabsModel` `events` is an object with the following properties.
 
-<PropsTable of={Tabs.Panel} />
+<ArgsTable of={TabsEventsComponent} />
 
 ## Specifications
 

package/dist/mdx/react/tabs/TabsModel.splitprops.tsx

@@ -0,0 +1,5 @@
+import {TabsModelConfig, TabsState, TabsEvents} from '@workday/canvas-kit-react/tabs';
+
+export const TabsModelConfigComponent = (_: TabsModelConfig) => <div />;
+export const TabsStateComponent = (_: TabsState) => <div />;
+export const TabsEventsComponent = (_: TabsEvents) => <div />;

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,22 +1,50 @@
 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';
 
 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'},
+    {tab: 'Tab 1', id: 'tab-1'},
+    {tab: 'Tab 2', id: 'tab-2'},
+    {tab: 'Tab 3', id: 'tab-3'},
   ]);
   const addedRef = React.useRef(tabs.length);
   const model = useTabsModel({
-    shouldActivate: ({data}) => data.tab !== 'last',
+    shouldSelect: ({data}) => data.id !== 'last',
   });
 
-  const onKeyDown = (e: React.KeyboardEvent<HTMLElement>, name: string) => {
-    if (e.key === 'Backspace') {
-      setTabs(tabs.filter(item => item.name !== name));
+  /**
+   * 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 = (id: string, model: SelectionModel) => {
+    const index = model.state.items.findIndex(item => model.getId(item) === model.state.cursorId);
+    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 = (e: React.KeyboardEvent<HTMLElement>, id: string) => {
+    if (e.key === 'Delete') {
+      setTabs(tabs.filter(item => item.id !== id));
+      removeItem(id, model);
     }
   };
 
@@ -25,10 +53,10 @@ export default () => {
       <Tabs.List>
         {tabs.map((item, index) => (
           <Tabs.Item
-            key={item.name}
-            name={item.name}
+            key={item.id}
+            name={item.id}
             index={index}
-            onKeyDown={e => onKeyDown(e, item.name)}
+            onKeyDown={e => onKeyDown(e, item.id)}
           >
             {item.tab}
           </Tabs.Item>
@@ -40,7 +68,7 @@ export default () => {
           onClick={() => {
             addedRef.current += 1;
             setTabs(tabs =>
-              tabs.concat({tab: `Tab ${addedRef.current}`, name: `tab-${addedRef.current}`})
+              tabs.concat({tab: `Tab ${addedRef.current}`, id: `tab-${addedRef.current}`})
             );
             model.events.goTo({id: 'last'});
           }}
@@ -50,7 +78,7 @@ export default () => {
       </Tabs.List>
       <div style={{marginTop: space.m}}>
         {tabs.map((item, index) => (
-          <Tabs.Panel key={item.name} name={item.name}>
+          <Tabs.Panel key={item.id} name={item.id}>
             Contents of {item.tab}
           </Tabs.Panel>
         ))}

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

@@ -168,7 +168,7 @@ example uses those parts directly while being functionally equivalent to the ori
 
 <ExampleCodeBlock code={UseTooltip} />
 
-## Properties
+## Props
 
 <ArgsTable of={Tooltip} />