@patternfly/react-core 5.0.0-alpha.47 → 5.0.0-alpha.49

package/src/components/Hint/examples/HintBasicWithoutTitle.tsx

@@ -1,14 +1,11 @@
 import React from 'react';
+import { Hint, HintBody, HintFooter, Button } from '@patternfly/react-core';
 import {
-  Hint,
-  HintBody,
-  HintFooter,
-  Button,
-  Dropdown,
-  DropdownItem,
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   DropdownSeparator,
   KebabToggle
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 
 export const HintBasicWithoutTitle: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
@@ -22,24 +19,24 @@ export const HintBasicWithoutTitle: React.FunctionComponent = () => {
   };
 
   const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
+    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="action" component="button">
       Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled>
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled link" isDisabled>
       Disabled Link
-    </DropdownItem>,
-    <DropdownItem key="disabled action" isDisabled component="button">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled action" isDisabled component="button">
       Disabled Action
-    </DropdownItem>,
+    </DropdownItemDeprecated>,
     <DropdownSeparator key="separator" />,
-    <DropdownItem key="separated link">Separated Link</DropdownItem>,
-    <DropdownItem key="separated action" component="button">
+    <DropdownItemDeprecated key="separated link">Separated Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="separated action" component="button">
       Separated Action
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
   const actions = (
-    <Dropdown
+    <DropdownDeprecated
       onSelect={onSelect}
       toggle={<KebabToggle onToggle={onToggle} id="hint-notitle-kebab-toggle" />}
       isOpen={isOpen}

package/src/components/InputGroup/examples/InputGroup.md

@@ -4,28 +4,45 @@ section: components
 cssPrefix: null
 propComponents: ['InputGroup', 'InputGroupText']
 ---
+
+import {
+Dropdown as DropdownDeprecated,
+DropdownToggle,
+DropdownItem as DropdownItemDeprecated
+} from '@patternfly/react-core/deprecated';
 import AtIcon from '@patternfly/react-icons/dist/esm/icons/at-icon';
 import DollarSignIcon from '@patternfly/react-icons/dist/esm/icons/dollar-sign-icon';
 import CalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/calendar-alt-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 
 ## Examples
+
 ### Basic
+
 ```ts file='./InputGroupBasic.tsx'
+
 ```
 
 ### With textarea
+
 ```ts file='./InputGroupWithTextarea.tsx'
+
 ```
 
 ### With dropdown
+
 ```ts file='./InputGroupWithDropdown.tsx'
+
 ```
 
 ### With popover
+
 ```ts file ='./InputGroupWithPopover.tsx'
+
 ```
 
 ### With multiple group siblings
+
 ```ts file='./InputGroupWithSiblings.tsx'
+
 ```

package/src/components/InputGroup/examples/InputGroupWithDropdown.tsx

@@ -1,5 +1,10 @@
 import React from 'react';
-import { Button, InputGroup, TextInput, Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core';
+import { Button, InputGroup, TextInput } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownToggle,
+  DropdownItem as DropdownItemDeprecated
+} from '@patternfly/react-core/deprecated';
 
 export const InputGroupWithDropdown: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
@@ -13,21 +18,21 @@ export const InputGroupWithDropdown: React.FunctionComponent = () => {
   };
 
   const dropdownItems = [
-    <DropdownItem key="opt-1" value="Option 1" component="button">
+    <DropdownItemDeprecated key="opt-1" value="Option 1" component="button">
       Option 1
-    </DropdownItem>,
-    <DropdownItem key="opt-2" value="Option 2" component="button">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="opt-2" value="Option 2" component="button">
       Option 2
-    </DropdownItem>,
-    <DropdownItem key="opt-3" value="Option 3" component="button">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="opt-3" value="Option 3" component="button">
       Option 3
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   return (
     <React.Fragment>
       <InputGroup>
-        <Dropdown
+        <DropdownDeprecated
           onSelect={onSelect}
           toggle={<DropdownToggle onToggle={onToggle}>Dropdown</DropdownToggle>}
           isOpen={isOpen}

package/src/components/Menu/examples/Menu.md

@@ -1,11 +1,17 @@
 ---
 id: Menu
 section: components
+subsection: menus
 cssPrefix: pf-c-menu
 propComponents: ['Menu', 'MenuList', 'MenuItem', 'MenuItemAction', 'MenuContent', 'MenuInput', 'MenuGroup']
 ouia: true
 ---
 
+import {
+Dropdown as DropdownDeprecated,
+DropdownItem as DropdownItemDeprecated,
+BadgeToggle
+} from '@patternfly/react-core/deprecated';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
@@ -28,6 +34,7 @@ A menu may contain multiple variations of `<MenuItem>` components. The following
 - Use the `isPlain` property to remove the outer box shadow and style the menu plainly instead.
 
 ```ts file="MenuBasic.tsx"
+
 ```
 
 ### Danger menu item
@@ -35,6 +42,7 @@ A menu may contain multiple variations of `<MenuItem>` components. The following
 To indicate that a `<MenuItem>` is connected to a potentially destructive action, use the `isDanger` property. The "Delete" item in the following example demonstrates how danger items look.
 
 ```ts file="MenuDangerMenuItem.tsx"
+
 ```
 
 ### With icons
@@ -42,6 +50,7 @@ To indicate that a `<MenuItem>` is connected to a potentially destructive action
 Use the `icon` property to add a familiar icon before a `<MenuItem>` to accelerate text label recognition.
 
 ```ts file="MenuWithIcons.tsx"
+
 ```
 
 ### With actions
@@ -53,6 +62,7 @@ To trigger an action when any menu action icon is selected, pass a callback to t
 To trigger an action when a specific item's action icon is selected, pass in the `onClick` property to that `<MenuItemAction>`. The following example logs "clicked on code icon" to the console when the "code" icon is selected.
 
 ```ts file="MenuWithActions.tsx"
+
 ```
 
 ### With links
@@ -60,6 +70,7 @@ To trigger an action when a specific item's action icon is selected, pass in the
 Use the `to` property to add a link to a `<MenuItem>` that directs users to a new page when the item is selected. Use the `isExternalLink` property when linking to external resources. This will annotate a menu item link with an external link icon when they navigate to the link or hover over it.
 
 ```ts file="MenuWithLinks.tsx"
+
 ```
 
 ### With descriptions
@@ -67,6 +78,7 @@ Use the `to` property to add a link to a `<MenuItem>` that directs users to a ne
 Use the `description` property to add short descriptive text below any menu item that needs additional context.
 
 ```ts file="MenuWithDescription.tsx"
+
 ```
 
 ### Item checkbox
@@ -74,6 +86,7 @@ Use the `description` property to add short descriptive text below any menu item
 Use the `hasCheck` property to add a checkbox to a `<MenuItem>`. Use the `isSelected` property to indicate when a `<MenuItem>` is selected.
 
 ```ts file="./MenuWithCheckbox.tsx" isBeta
+
 ```
 
 ### Menu footer
@@ -81,6 +94,7 @@ Use the `hasCheck` property to add a checkbox to a `<MenuItem>`. Use the `isSele
 Add a `<MenuFooter>` that contains separate, but related actions at the bottom of a menu.
 
 ```ts file="MenuWithFooter.tsx"
+
 ```
 
 ### Separated items
@@ -88,6 +102,7 @@ Add a `<MenuFooter>` that contains separate, but related actions at the bottom o
 Use a [divider](/components/divider) to visually separate `<MenuContent>`. Use the `component` property to specify the type of divider component to use.
 
 ```ts file="MenuWithSeparators.tsx"
+
 ```
 
 ### Titled groups of items
@@ -95,6 +110,7 @@ Use a [divider](/components/divider) to visually separate `<MenuContent>`. Use t
 Add a `<MenuGroup>` to organize `<MenuContent>` and use the `label` property to title a group of menu items. Use the `labelHeadingLevel` property to assign a heading level to the menu group label.
 
 ```ts file="MenuWithTitledGroups.tsx"
+
 ```
 
 ### With favorites
@@ -102,6 +118,7 @@ Add a `<MenuGroup>` to organize `<MenuContent>` and use the `label` property to
 The following menu example allows users to favorite menu items, an action that duplicates a menu item and places it in a separate group at the top of the menu. The `isFavorited` property identifies items that a user has favorited.
 
 ```ts file="MenuWithFavorites.tsx"
+
 ```
 
 ### Filtering with search input
@@ -109,6 +126,7 @@ The following menu example allows users to favorite menu items, an action that d
 A [search input](/components/search-input) component can be placed within `<MenuInput>` to render a search input at the top of the menu. In the following example, the `onChange` property of the text input is passed a callback that filters menu items as a user types.
 
 ```ts file="MenuFilteringWithSearchInput.tsx"
+
 ```
 
 ### Option single select menu
@@ -118,6 +136,7 @@ The following example demonstrates a single option select menu that persists a s
 You must also use the `role` property on the `<Menu>` with a value of `"listbox"` when using a non-checkbox select menu.
 
 ```ts file="MenuOptionSingleSelect.tsx"
+
 ```
 
 ### Option multi select menu
@@ -127,6 +146,7 @@ To persist multiple selections that a user makes, use a multiple option select m
 Similar to a single select menu, you must also pass `role="listbox"` to the `<Menu>`.
 
 ```ts file="MenuOptionMultiSelect.tsx"
+
 ```
 
 ### Scrollable menus
@@ -134,6 +154,7 @@ Similar to a single select menu, you must also pass `role="listbox"` to the `<Me
 Use the `isScrollable` property to make a long `<Menu>` scrollable and visually condensed.
 
 ```ts file="MenuScrollable.tsx"
+
 ```
 
 ### Scrollable menu with custom height
@@ -141,6 +162,7 @@ Use the `isScrollable` property to make a long `<Menu>` scrollable and visually
 Adjust the visual size of a scrollable menu by using the `menuHeight` property within `<MenuContent>`. This example adjusts the height to 200px.
 
 ```ts file="MenuScrollableCustomMenuHeight.tsx"
+
 ```
 
 ### With view more
@@ -150,6 +172,7 @@ If you want to initially render only a certain number of menu items within a lar
 In this example, 3 additional menu items are revealed each time the "view more" option is selected, with a loading icon simulating a network call to fetch more items. After all items are visible, the "view more" link disappears.
 
 ```ts file="MenuWithViewMore.tsx"
+
 ```
 
 ### With drilldown
@@ -163,6 +186,7 @@ Use a drilldown menu to contain different levels of menu items. When a parent me
 - To account for updated heights as menus drill in and out of use, use the `onGetMenuHeight` property. When starting from a drilled-in state, the `onGetMenuHeight` property must define the height of the root menu.
 
 ```ts file="./MenuWithDrilldown.tsx" isBeta
+
 ```
 
 ### Initially drilled-in menu
@@ -170,6 +194,7 @@ Use a drilldown menu to contain different levels of menu items. When a parent me
 To render an initially drilled-in menu, the `drilldownItemPath`, `drilledInMenus`, and `activeMenu` properties must be set to default values.
 
 ```ts file="./MenuWithDrilldownInitialState.tsx" isBeta
+
 ```
 
 ### With drilldown - submenu functions
@@ -177,6 +202,7 @@ To render an initially drilled-in menu, the `drilldownItemPath`, `drilledInMenus
 For added flexibility with large menus, you may create a menu by passing a function to `drilldownMenu`. This approach allows you to create menu items dynamically, rather than creating everything up front.
 
 ```ts file="./MenuWithDrilldownSubmenuFunctions.tsx" isBeta
+
 ```
 
 ### With drilldown breadcrumbs
@@ -186,9 +212,11 @@ Use [breadcrumbs](/components/breadcrumb) when a drilldown menu has more than 2
 To control the height of a menu, use the `maxMenuHeight` property. Selecting the "Set max menu height" checkbox in the following example sets the menu height to "100px" and makes the menu scrollable.
 
 ```ts file="MenuWithDrilldownBreadcrumbs.tsx" isBeta
+
 ```
 
 ### With drilldown and inline filter
 
 ```ts file="MenuFilterDrilldown.tsx"
+
 ```

package/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx

@@ -10,11 +10,13 @@ import {
   BreadcrumbItem,
   BreadcrumbHeading,
   MenuBreadcrumb,
-  Dropdown,
-  DropdownItem,
-  BadgeToggle,
   Checkbox
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  BadgeToggle
+} from '@patternfly/react-core/deprecated';
 import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-icon';
@@ -58,11 +60,11 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     fromPathId: string,
     breadcrumb: JSX.Element | null
   ) => {
-    setMenuDrilledIn(prevMenuDrilledIn => {
+    setMenuDrilledIn((prevMenuDrilledIn) => {
       const indexOfMenuId = prevMenuDrilledIn.indexOf(toMenuId);
       return prevMenuDrilledIn.slice(0, indexOfMenuId);
     });
-    setDrilldownPath(prevDrilldownPath => {
+    setDrilldownPath((prevDrilldownPath) => {
       const indexOfMenuIdPath = prevDrilldownPath.indexOf(fromPathId);
       return prevDrilldownPath.slice(0, indexOfMenuIdPath);
     });
@@ -91,7 +93,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     <Breadcrumb>
       <BreadcrumbItem
         component="button"
-        onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}
+        onClick={(event) => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}
       >
         Root
       </BreadcrumbItem>
@@ -103,12 +105,12 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     <Breadcrumb>
       <BreadcrumbItem
         component="button"
-        onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}
+        onClick={(event) => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}
       >
         Root
       </BreadcrumbItem>
       <BreadcrumbItem isDropdown>
-        <Dropdown
+        <DropdownDeprecated
           toggle={
             <BadgeToggle id="toggle-id" onToggle={(_event: any, open: boolean) => onToggle(open, 'app')}>
               1
@@ -116,16 +118,16 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
           }
           isOpen={isOpen}
           dropdownItems={[
-            <DropdownItem
+            <DropdownItemDeprecated
               key="dropdown-start"
               component="button"
               icon={<AngleLeftIcon />}
-              onClick={event =>
+              onClick={(event) =>
                 drillOut(event, 'breadcrumbs-drilldownMenuStart', 'group:app_grouping_start', startRolloutBreadcrumb)
               }
             >
               Start rollout
-            </DropdownItem>
+            </DropdownItemDeprecated>
           ]}
         />
       </BreadcrumbItem>
@@ -137,12 +139,12 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     <Breadcrumb>
       <BreadcrumbItem
         component="button"
-        onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}
+        onClick={(event) => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}
       >
         Root
       </BreadcrumbItem>
       <BreadcrumbItem isDropdown>
-        <Dropdown
+        <DropdownDeprecated
           toggle={
             <BadgeToggle id="toggle-id" onToggle={(_event: any, open: boolean) => onToggle(open, 'label')}>
               1
@@ -150,16 +152,16 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
           }
           isOpen={isOpen}
           dropdownItems={[
-            <DropdownItem
+            <DropdownItemDeprecated
               key="dropdown-start"
               component="button"
               icon={<AngleLeftIcon />}
-              onClick={event =>
+              onClick={(event) =>
                 drillOut(event, 'breadcrumbs-drilldownMenuStart', 'group:labels_start', startRolloutBreadcrumb)
               }
             >
               Start rollout
-            </DropdownItem>
+            </DropdownItemDeprecated>
           ]}
         />
       </BreadcrumbItem>
@@ -171,7 +173,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     <Breadcrumb>
       <BreadcrumbItem
         component="button"
-        onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}
+        onClick={(event) => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}
       >
         Root
       </BreadcrumbItem>
@@ -183,12 +185,12 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     <Breadcrumb>
       <BreadcrumbItem
         component="button"
-        onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}
+        onClick={(event) => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}
       >
         Root
       </BreadcrumbItem>
       <BreadcrumbItem isDropdown>
-        <Dropdown
+        <DropdownDeprecated
           toggle={
             <BadgeToggle id="toggle-id" onToggle={(_event: any, open: boolean) => onToggle(open, 'pause-app')}>
               1
@@ -196,16 +198,16 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
           }
           isOpen={isOpen}
           dropdownItems={[
-            <DropdownItem
+            <DropdownItemDeprecated
               key="dropdown-pause"
               component="button"
               icon={<AngleLeftIcon />}
-              onClick={event =>
+              onClick={(event) =>
                 drillOut(event, 'breadcrumbs-drilldownMenuPause', 'group:app_grouping', pauseRolloutsBreadcrumb)
               }
             >
               Pause rollouts
-            </DropdownItem>
+            </DropdownItemDeprecated>
           ]}
         />
       </BreadcrumbItem>
@@ -217,12 +219,12 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     <Breadcrumb>
       <BreadcrumbItem
         component="button"
-        onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}
+        onClick={(event) => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}
       >
         Root
       </BreadcrumbItem>
       <BreadcrumbItem isDropdown>
-        <Dropdown
+        <DropdownDeprecated
           toggle={
             <BadgeToggle id="toggle-id" onToggle={(_event: any, open: boolean) => onToggle(open, 'pause-label')}>
               1
@@ -230,16 +232,16 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
           }
           isOpen={isOpen}
           dropdownItems={[
-            <DropdownItem
+            <DropdownItemDeprecated
               key="dropdown-pause"
               component="button"
               icon={<AngleLeftIcon />}
-              onClick={event =>
+              onClick={(event) =>
                 drillOut(event, 'breadcrumbs-drilldownMenuPause', 'group:labels', pauseRolloutsBreadcrumb)
               }
             >
               Pause rollouts
-            </DropdownItem>
+            </DropdownItemDeprecated>
           ]}
         />
       </BreadcrumbItem>
@@ -251,7 +253,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     <Breadcrumb>
       <BreadcrumbItem
         component="button"
-        onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:storage', null)}
+        onClick={(event) => drillOut(event, 'breadcrumbs-rootMenu', 'group:storage', null)}
       >
         Root
       </BreadcrumbItem>

package/src/components/MenuToggle/examples/MenuToggle.md

@@ -1,6 +1,7 @@
 ---
 id: Menu toggle
 section: components
+subsection: menus
 cssPrefix: pf-c-menu-toggle
 propComponents: ['MenuToggle', 'MenuToggleAction', 'MenuToggleCheckbox', 'SplitButtonOptions']
 ---

package/src/components/Modal/examples/Modal.md

@@ -6,6 +6,11 @@ propComponents: ['Modal']
 ouia: true
 ---
 
+import {
+Dropdown as DropdownDeprecated,
+DropdownToggle,
+DropdownItem as DropdownItemDeprecated
+} from '@patternfly/react-core/deprecated';
 import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
@@ -18,6 +23,7 @@ import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 Basic modals give users the option to either confirm or cancel an action. To flag an open modal, use the `isOpen` property. To execute a callback when a modal is closed, use the `onClose` property.
 
 ```ts file="./ModalBasic.tsx"
+
 ```
 
 ### Scrollable modals
@@ -25,6 +31,7 @@ Basic modals give users the option to either confirm or cancel an action. To fla
 To enable keyboard-accessible scrolling of a modal’s content, pass `tabIndex={0}` to the `<Modal>`.
 
 ```ts file="ModalWithOverflowingContent.tsx"
+
 ```
 
 ### With a static description
@@ -32,6 +39,7 @@ To enable keyboard-accessible scrolling of a modal’s content, pass `tabIndex={
 To provide additional information about a modal, use the `description` property. Descriptions are static and do not scroll with other modal content.
 
 ```ts file="./ModalWithDescription.tsx"
+
 ```
 
 ### Top aligned
@@ -39,15 +47,17 @@ To provide additional information about a modal, use the `description` property.
 To override a modal's default center alignment, use the `position` property. In this example, `position` is set to "top", which moves the modal to the top of the screen.
 
 ```ts file="./ModalTopAligned.tsx"
+
 ```
 
 ### Small modal
 
-To adjust the size of a modal, use the `variant` property. Modal variants include "small", "medium", "large", and "default". 
+To adjust the size of a modal, use the `variant` property. Modal variants include "small", "medium", "large", and "default".
 
 The following example displays a "small" modal by passing in `variant={ModalVariant.small}`.
 
 ```ts file="./ModalSmall.tsx"
+
 ```
 
 ### Medium modal
@@ -55,6 +65,7 @@ The following example displays a "small" modal by passing in `variant={ModalVari
 The following example displays a "medium" modal by passing in `variant={ModalVariant.medium}`.
 
 ```ts file="./ModalMedium.tsx"
+
 ```
 
 ### Large modal
@@ -62,6 +73,7 @@ The following example displays a "medium" modal by passing in `variant={ModalVar
 The following example displays a "large" modal by passing in `variant={ModalVariant.large}`.
 
 ```ts file="./ModalLarge.tsx"
+
 ```
 
 ### Custom width
@@ -69,6 +81,7 @@ The following example displays a "large" modal by passing in `variant={ModalVari
 To choose a specific width for a modal, use the `width` property. The following example has a `width` of "50%".
 
 ```ts file="./ModalCustomWidth.tsx"
+
 ```
 
 ### Custom header and footer
@@ -76,6 +89,7 @@ To choose a specific width for a modal, use the `width` property. The following
 To add a custom header and footer to a modal, set the `header` and `footer` properties to a custom implementation. The following example passes title components into both the header and the footer and also passes an icon to the footer.
 
 ```ts file="./ModalCustomHeaderFooter.tsx"
+
 ```
 
 ### No header or footer
@@ -83,6 +97,7 @@ To add a custom header and footer to a modal, set the `header` and `footer` prop
 To exclusively present information in a modal, remove the `header` and/or `footer`.
 
 ```ts file="./ModalNoHeaderFooter.tsx"
+
 ```
 
 ### Title icon
@@ -90,6 +105,7 @@ To exclusively present information in a modal, remove the `header` and/or `foote
 To add an icon before a modal’s title, use the `titleIconVariant`, which can be set to one of the predefined variants -- "success", "danger", "warning", "info", and "default" -- or to an imported custom icon. The following example uses a "warning" variant.
 
 ```ts file="./ModalTitleIcon.tsx"
+
 ```
 
 ### Custom title icon
@@ -97,6 +113,7 @@ To add an icon before a modal’s title, use the `titleIconVariant`, which can b
 To add a custom icon before a modal’s title, set `titleIconVariant` to an imported custom icon. The following example imports and uses a bullhorn icon.
 
 ```ts file="./ModalCustomTitleIcon.tsx"
+
 ```
 
 ### With wizard
@@ -104,6 +121,7 @@ To add a custom icon before a modal’s title, set `titleIconVariant` to an impo
 To guide users through a series of steps in a modal, you can add a [wizard](/components/wizard) to a modal. To configure the `<Wizard>`, pass an array that contains a “name” and “component” value for each step into the `steps` property.
 
 ```ts file="./ModalWithWizard.tsx"
+
 ```
 
 ### With dropdown
@@ -111,6 +129,7 @@ To guide users through a series of steps in a modal, you can add a [wizard](/com
 To present a menu of actions or links to a user, you can add a [dropdown](/components/dropdown) to a modal. To allow the dropdown to visually break out of the modal container, set the `menuAppendTo` property to “parent”. Handle the modal’s closing behavior by listening to the `onEscapePress` callback on the `<Modal>` component. This allows the "escape" key to collapse the dropdown without closing the entire modal.
 
 ```ts file="./ModalWithDropdown.tsx"
+
 ```
 
 ### With help
@@ -118,14 +137,15 @@ To present a menu of actions or links to a user, you can add a [dropdown](/compo
 To help simplify and explain complex models, add a help [popover](/components/popover). Only place a help icon at the modal level if its information applies to all content in the modal. If the help popover is specific to a particular modal section, place the help icon beside that section instead.
 
 ```ts file="./ModalWithHelp.tsx"
+
 ```
 
 ### With form
 
-To collect user input within a modal, you can add a [form](/components/form). 
+To collect user input within a modal, you can add a [form](/components/form).
 
-To submit the form from a button in the modal's footer (outside of the `<Form>`), set the button's `form` property equal to the form's id. 
+To submit the form from a button in the modal's footer (outside of the `<Form>`), set the button's `form` property equal to the form's id.
 
 ```ts file="ModalWithForm.tsx"
-```
 
+```