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

package/dist/mdx/react/popup/Popup.mdx

@@ -52,7 +52,7 @@ The `Popup` component is a generic
 [Compound Component](/getting-started/for-developers/resources/compound-components/) that is used to
 build popup UIs that are not already covered by Canvas Kit.
 
-### Basic
+### Basic Example
 
 The Popup has no pre-defined behaviors built in, therefore the `usePopupModel` must always be used
 to create a new `model`. This `model` is then used by all behavior hooks to apply additional popup
@@ -63,7 +63,7 @@ popup behaviors. For accessibility, these behaviors should be included most of t
 
 <ExampleCodeBlock code={Basic} />
 
-### Initial focus
+### Initial Focus
 
 If you want focus to move to a specific element when the popup is opened, set the `initialFocusRef`
 of the model. Check with accessibility before doing this. The following example sets the focus on
@@ -153,7 +153,7 @@ The Popup component automatically handles right-to-left rendering.
 
 ## Components
 
-## Popper
+### Popper
 
 A thin wrapper component around the Popper.js positioning engine. For reference:
 https://popper.js.org/. `Popper` also automatically works with the `PopupStack` system. `Popper` has
@@ -169,7 +169,7 @@ PopupModel or any associate popup [hooks](#hooks).
 > element was rendered and that's where extra props were spread to. In v5+, you can provide your own
 > element if you wish.
 
-## Popup
+### Popup
 
 This component is a container component that has no semantic element. It provides a React Context
 model for all Popup subcomponents. If you manually pass a `model` to all subcomponents, this
@@ -189,7 +189,7 @@ container component isn't needed.
 
 <ArgsTable of={Popup} />
 
-## Popup.Target
+### Popup.Target
 
 A `Popup.Target` is any element that is meant to show the Popup. The default component rendered by
 this component is a `SecondaryButton` element. You can override this by passing the desired
@@ -217,7 +217,7 @@ used, which is `SecondaryButton`. If you don't want any styling, you can do the
 To add your own styling, you could either add a `css` prop, or make a styled button and pass that
 styled component via the `as` prop.
 
-## Popup.Popper
+### Popup.Popper
 
 A `Popup.Popper` is a [Popper](#popper) component that is hooked up to the `PopupModel`
 automatically. The behavior hook used is called `usePopupPopper`.
@@ -229,7 +229,7 @@ automatically. The behavior hook used is called `usePopupPopper`.
 
 <ArgsTable of={Popup.Popper} />
 
-## Popup.Card
+### Popup.Card
 
 A `Popup.Card` is a wrapper around the `Card` component, but hooked up to a `PopupModel`. By
 default, this element has a `role=dialog` and an `aria-labelledby`. The behavior hook used is called
@@ -237,7 +237,7 @@ default, this element has a `role=dialog` and an `aria-labelledby`. The behavior
 
 <ArgsTable of={Popup.Card} />
 
-## Popup.CloseButton
+### Popup.CloseButton
 
 A `Popup.CloseButton` is a button that will hide a popup. By default, this is a `SecondaryButton`
 component, but `as` can be used to render any button element (i.e `<DeleteButton>` or
@@ -245,14 +245,14 @@ component, but `as` can be used to render any button element (i.e `<DeleteButton
 
 <ArgsTable of={Popup.CloseButton} />
 
-## Popup.CloseIcon
+### Popup.CloseIcon
 
 A `Popup.CloseIcon` is an icon button that is the `X` in the top of a popup. It will hide a popup
 when clicked. The behavior hook used is called `usePopupCloseButton`.
 
 <ArgsTable of={Popup.CloseIcon} />
 
-## Popup.Heading
+### Popup.Heading
 
 A `Popup.Heading` is a wrapper around `Card.Heading` that connect the heading to a `PopupModel`. It
 will add an `id` to the element that match the `aria-labelledby` that is applied to the `Popup.Card`
@@ -260,29 +260,29 @@ element for accessibility. The behavior hook used is called `usePopupHeading`.
 
 <ArgsTable of={Popup.Heading} />
 
-## Popup.Body
+### Popup.Body
 
 A `Popup.Body` is a thin wrapper around `Card.Body` and doesn't actually take a model. It adds
 `body` styling and nothing else.
 
 <ArgsTable of={Popup.Body} />
 
-## Popup Model
+## Model
 
 The PopupModel contains all state and events needed for Popup behaviors and components. It composes
 a `DisclosureModel` for showing and hiding content.
 
-### Popup Model State
+### Config
 
-<ArgsTable of={PopupStateComponent} />
+<ArgsTable of={PopupModelConfigComponent} />
 
-### Popup Model Events
+### State
 
-<ArgsTable of={PopupEventsComponent} />
+<ArgsTable of={PopupStateComponent} />
 
-### Popup Model Config
+### Events
 
-<ArgsTable of={PopupModelConfigComponent} />
+<ArgsTable of={PopupEventsComponent} />
 
 ## Hooks
 
@@ -325,7 +325,7 @@ return (
 );
 ```
 
-## useAssistiveHideSiblings
+### useAssistiveHideSiblings
 
 ```ts
 useAssistiveHideSiblings(model: PopupModel): {}
@@ -341,7 +341,7 @@ VoiceOver for example.
 
 This should be used on popup elements that need to hide content (i.e. Modals).
 
-## useBringToTopOnClick
+### useBringToTopOnClick
 
 ```ts
 useBringToTopOnClick(model: PopupModel): {}
@@ -355,7 +355,7 @@ like a Modal.
 
 This should be used on popup elements that are meant to persist (i.e. Windows).
 
-## useCloseOnEscape
+### useCloseOnEscape
 
 ```ts
 useCloseOnEscape(model: PopupModel): {}
@@ -367,7 +367,7 @@ provided model's `state.stackRef` element is the topmost in the stack.
 This should be used with popup elements that are dismissible like Tooltips, Modals, non-modal
 dialogs, dropdown menus, etc.
 
-## useCloseOnOutsideClick
+### useCloseOnOutsideClick
 
 ```ts
 useCloseOnOutsideClick(model: PopupModel): {}
@@ -382,7 +382,7 @@ This should be used with popup elements that are dismissible like Modals, non-mo
 dropdown menus, etc. Tooltips and hierarchical menus should use `useAlwaysCloseOnClickOutside`
 instead.
 
-## useAlwaysCloseOnOutsideClick
+### useAlwaysCloseOnOutsideClick
 
 ```ts
 useAlwaysCloseOnOutsideClick(model: PopupModel): {}
@@ -396,7 +396,7 @@ stack. This is useful for Tooltips or hierarchical menus. Adds a
 This should be used with popup elements that should close no matter their position in the stack
 (i.e. Tooltips).
 
-## useDisableBodyScroll
+### useDisableBodyScroll
 
 ```ts
 useDisableBodyScroll(model: PopupModel): {}
@@ -408,7 +408,7 @@ page scrolling while the popup is visible.
 This should be used with popup elements that hide all other content and force the user to accept or
 dismiss the popup before continuing (i.e. Modals).
 
-## useFocusRedirect
+### useFocusRedirect
 
 ```ts
 useFocusRedirect(model: PopupModel): {}
@@ -426,7 +426,7 @@ hook does no provide `aria-owns` and this must be provided yourself. Requires
 
 This should be used with non-modal dialogs.
 
-## useFocusTrap
+### useFocusTrap
 
 ```ts
 useFocusTrap(model: PopupModel): {}
@@ -440,7 +440,7 @@ with [useInitialFocus](#useinitialfocus) and [useReturnFocus](#usereturnfocus).
 
 This should be used on popup elements that need to hide content (i.e. Modals).
 
-## useInitialFocus
+### useInitialFocus
 
 Moves focus within the popup when the popup becomes visible. This is useful for keyboard and screen
 reader users alike. This should be used with [useFocusRedirect](#usefocusredirect) or
@@ -449,7 +449,7 @@ reader users alike. This should be used with [useFocusRedirect](#usefocusredirec
 This should be used for popups that have focusable elements inside, like Modals, non-modal dialogs,
 menus, etc.
 
-## useReturnFocus
+### useReturnFocus
 
 Returns focus to the target element when the popup is hidden. This works well with
 [useInitialFocus](#useinitialfocus). This should be used with [useFocusRedirect](#usefocusredirect)
@@ -457,7 +457,7 @@ or [useFocusTrap](#usefocustrap) for a complete focus management solution.
 
 This should ble used on popup elements that use [useInitialFocus](#useinitialfocus).
 
-## usePopupPopper
+### usePopupPopper
 
 ```ts
 usePopupPopper(model: PopupModel, elemProps: {}, ref: React.Ref<any>): {}
@@ -466,7 +466,7 @@ usePopupPopper(model: PopupModel, elemProps: {}, ref: React.Ref<any>): {}
 Adds the necessary props to a `Popper` component. Used by the [Popup.Popper](#popuppopper)
 subcomponent.
 
-## usePopupCard
+### usePopupCard
 
 ```ts
 usePopupCard(model: PopupModel, elemProps: {}, ref: React.Ref<any>): {}
@@ -474,7 +474,7 @@ usePopupCard(model: PopupModel, elemProps: {}, ref: React.Ref<any>): {}
 
 Adds the necessary props to a `Card` component. Used by the [Popup.Card](#popupcard) subcomponent.
 
-## usePopupCloseButton
+### usePopupCloseButton
 
 ```ts
 usePopupCloseButton(model: PopupModel, elemProps: {}, ref: React.Ref<any>): {}
@@ -484,18 +484,16 @@ Adds the necessary props to a close button component. Used by the
 [Popup.CloseButton](#popupclosebutton) subcomponent and [Popup.CloseIcon](#popupcloseicon)
 subcomponent.
 
-````
-
-## usePopupHeading
+### usePopupHeading
 
 ```ts
 usePopupHeading(model: PopupModel, elemProps: {}, ref: React.Ref<any>): {}
-````
+```
 
 Adds the necessary props to a `Heading` component. Used by the [Popup.Heading](#popupheading)
 subcomponent.
 
-## usePopupTarget
+### usePopupTarget
 
 ```ts
 usePopupTarget(model: PopupModel, elemProps: {}, ref: React.Ref<any>): {}

package/dist/mdx/react/radio/examples/Alert.tsx

@@ -14,13 +14,13 @@ export default () => {
       error={FormField.ErrorType.Alert}
       hintId="hint-alert"
       hintText="Deep Dish is no longer available. Please select a different crust."
-      label="Choose your pizza crust"
+      label="Choose Your Pizza Crust"
       useFieldset={true}
     >
       <RadioGroup name="crust" onChange={handleChange} value={value}>
-        <Radio disabled={true} label="Deep Dish (Sold Out)" value="deep-dish" />
+        <Radio disabled={true} label="Deep dish (sold out)" value="deep-dish" />
         <Radio label="Thin" value="thin" />
-        <Radio label="Gluten Free" value="gluten-free" />
+        <Radio label="Gluten free" value="gluten-free" />
         <Radio label="Cauliflower" value="cauliflower" />
       </RadioGroup>
     </FormField>

package/dist/mdx/react/radio/examples/Basic.tsx

@@ -10,11 +10,11 @@ export default () => {
   };
 
   return (
-    <FormField label="Choose your pizza crust" useFieldset={true}>
+    <FormField label="Choose Your Pizza Crust" useFieldset={true}>
       <RadioGroup name="crust" onChange={handleChange} value={value}>
-        <Radio label="Deep Dish" value="deep-dish" />
+        <Radio label="Deep dish" value="deep-dish" />
         <Radio label="Thin" value="thin" />
-        <Radio label="Gluten Free" value="gluten-free" />
+        <Radio label="Gluten free" value="gluten-free" />
         <Radio label="Cauliflower" value="cauliflower" />
       </RadioGroup>
     </FormField>

package/dist/mdx/react/radio/examples/Disabled.tsx

@@ -10,11 +10,11 @@ export default () => {
   };
 
   return (
-    <FormField label="Choose your pizza crust" useFieldset={true}>
+    <FormField label="Choose Your Pizza Crust" useFieldset={true}>
       <RadioGroup name="crust" onChange={handleChange} value={value}>
-        <Radio label="Deep Dish" value="deep-dish" />
+        <Radio label="Deep dish" value="deep-dish" />
         <Radio label="Thin" value="thin" />
-        <Radio disabled={true} label="Gluten Free (Sold Out)" value="gluten-free" />
+        <Radio disabled={true} label="Gluten free (sold out)" value="gluten-free" />
         <Radio label="Cauliflower" value="cauliflower" />
       </RadioGroup>
     </FormField>

package/dist/mdx/react/radio/examples/Error.tsx

@@ -14,13 +14,13 @@ export default () => {
       error={FormField.ErrorType.Error}
       hintId="hint-error"
       hintText="Deep Dish is no longer available. Please select a different crust."
-      label="Choose your pizza crust"
+      label="Choose Your Pizza Crust"
       useFieldset={true}
     >
       <RadioGroup name="crust" onChange={handleChange} value={value}>
-        <Radio disabled={true} label="Deep Dish (Sold Out)" value="deep-dish" />
+        <Radio disabled={true} label="Deep dish (sold out)" value="deep-dish" />
         <Radio label="Thin" value="thin" />
-        <Radio label="Gluten Free" value="gluten-free" />
+        <Radio label="Gluten free" value="gluten-free" />
         <Radio label="Cauliflower" value="cauliflower" />
       </RadioGroup>
     </FormField>

package/dist/mdx/react/radio/examples/LabelPosition.tsx

@@ -11,14 +11,14 @@ export default () => {
 
   return (
     <FormField
-      label="Choose your pizza crust"
+      label="Choose Your Pizza Crust"
       labelPosition={FormField.LabelPosition.Left}
       useFieldset={true}
     >
       <RadioGroup name="crust" onChange={handleChange} value={value}>
-        <Radio label="Deep Dish" value="deep-dish" />
+        <Radio label="Deep dish" value="deep-dish" />
         <Radio label="Thin" value="thin" />
-        <Radio label="Gluten Free" value="gluten-free" />
+        <Radio label="Gluten free" value="gluten-free" />
         <Radio label="Cauliflower" value="cauliflower" />
       </RadioGroup>
     </FormField>

package/dist/mdx/react/radio/examples/NoValue.tsx

@@ -12,11 +12,11 @@ export default () => {
 
   return (
     <>
-      <FormField label="Choose your pizza crust" useFieldset={true}>
+      <FormField label="Choose Your Pizza Crust" useFieldset={true}>
         <RadioGroup name="crust" onChange={handleChange} value={value}>
-          <Radio label="Deep Dish" />
+          <Radio label="Deep dish" />
           <Radio label="Thin" />
-          <Radio label="Gluten Free" />
+          <Radio label="Gluten free" />
           <Radio label="Cauliflower" />
         </RadioGroup>
       </FormField>

package/dist/mdx/react/radio/examples/RefForwarding.tsx

@@ -17,11 +17,11 @@ export default () => {
 
   return (
     <>
-      <FormField label="Choose your pizza crust" useFieldset={true}>
+      <FormField label="Choose Your Pizza Crust" useFieldset={true}>
         <RadioGroup name="crust" onChange={handleChange} value={value}>
-          <Radio label="Deep Dish" value="deep-dish" />
+          <Radio label="Deep dish" value="deep-dish" />
           <Radio label="Thin" value="thin" />
-          <Radio label="Gluten Free" ref={glutenFreeRef} value="gluten-free" />
+          <Radio label="Gluten free" ref={glutenFreeRef} value="gluten-free" />
           <Radio label="Cauliflower" value="cauliflower" />
         </RadioGroup>
       </FormField>

package/dist/mdx/react/radio/examples/Required.tsx

@@ -10,11 +10,11 @@ export default () => {
   };
 
   return (
-    <FormField label="Choose your pizza crust" required={true} useFieldset={true}>
+    <FormField label="Choose Your Pizza Crust" required={true} useFieldset={true}>
       <RadioGroup name="crust" onChange={handleChange} value={value}>
-        <Radio label="Deep Dish" value="deep-dish" />
+        <Radio label="Deep dish" value="deep-dish" />
         <Radio label="Thin" value="thin" />
-        <Radio label="Gluten Free" value="gluten-free" />
+        <Radio label="Gluten free" value="gluten-free" />
         <Radio label="Cauliflower" value="cauliflower" />
       </RadioGroup>
     </FormField>

package/dist/mdx/react/segmented-control/SegmentedControl.mdx

@@ -27,6 +27,6 @@ indexes and omit the `value` field. It is strongly recommended to not mix these
 
 ## Props
 
-Undocumented props are spread to the underlying container `div` element.
+Undocumented props are spread to the underlying container `<div>` element.
 
 <ArgsTable of={SegmentedControl} />

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

@@ -19,8 +19,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,8 +34,11 @@ 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.
 
 <ExampleCodeBlock code={Basic} />
 
@@ -43,8 +46,9 @@ yarn add @workday/canvas-kit-react
 
 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.
@@ -59,9 +63,9 @@ trigger an event to change the active tab.
 
 <ExampleCodeBlock code={NamedKeys} />
 
-### 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} />
 
@@ -93,9 +97,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 +110,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 +141,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 +149,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 +157,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 +175,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 +185,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 +196,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 +209,7 @@ const model = useTabsModel({
   },
 });
 
-<Tabs model={model}>{/* Subcomponents */}</Tabs>;
+<Tabs model={model}>{/* Child components */}</Tabs>;
 ```
 
 ### Config

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

@@ -30,7 +30,7 @@ export default () => {
           model.events.activate({tab: 'third'});
         }}
       >
-        Activate third tab
+        Activate Third Tab
       </SecondaryButton>
     </>
   );

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} />
 

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={{