diff --git a/packages/docs/pages/modal.tsx b/packages/docs/pages/modal.tsx
index 0c4ab20de..95e68c09b 100644
--- a/packages/docs/pages/modal.tsx
+++ b/packages/docs/pages/modal.tsx
@@ -1,106 +1,126 @@
import { Button, H1, Modal, Panel, Text } from '@bigcommerce/big-design';
import React, { useState } from 'react';
-import { Code, CodePreview, PageNavigation } from '../components';
+import { Code, CodePreview, ContentRoutingTabs, List } from '../components';
import { ModalPropTable } from '../PropTables';
const ModalPage = () => {
- const items = [
- {
- id: 'examples',
- title: 'Examples',
- render: () => (
- <>
-
-
- A modal appears as a layer on top of the primary interface. Modals disrupt users from interacting with the
- page until they complete a specific task.
-
-
- {/* jsx-to-string:start */}
- {function Example() {
- const [isOpen, setIsOpen] = useState(false);
+ return (
+ <>
+
Modal
- return (
- <>
-
+
+
+ Modals sit on top of the page, containing additional content or functionality without leaving the context of a
+ page.
+
+ When to use it:
+
+ To focus on a particular on an specific task or content.
+ To confirm high impact actions (e.g. deleting a configuration).
+
+
- setIsOpen(false) },
- { text: 'Apply', onClick: () => setIsOpen(false) },
- ]}
- header="Modal title"
- isOpen={isOpen}
- onClose={() => setIsOpen(false)}
- closeOnEscKey={true}
- closeOnClickOutside={false}
- >
-
- Ea tempor sunt amet labore proident dolor proident commodo in exercitation ea nulla sunt
- pariatur. Nulla sunt ipsum do eu consectetur exercitation occaecat labore aliqua. Aute elit
- occaecat esse ea fugiat esse. Reprehenderit sunt ea ea mollit commodo tempor amet fugiat.
-
-
-
- );
- }}
- {/* jsx-to-string:end */}
-
-
-
-
- Setting the variant prop to dialog results in a simplified version of a Modal. The
- purpose of a dialog is to act as a safety net for a user attempting a destructive action.
-
+
+ (
+ <>
+
+ A modal appears as a layer on top of the primary interface. Modals disrupt users from interacting
+ with the page until they complete a specific task.
+
-
- {/* jsx-to-string:start */}
- {function Example() {
- const [isOpen, setIsOpen] = useState(false);
+
+ {/* jsx-to-string:start */}
+ {function Example() {
+ const [isOpen, setIsOpen] = useState(false);
- return (
- <>
-
+ return (
+ <>
+
- setIsOpen(false) },
- { text: 'Apply', onClick: () => setIsOpen(false) },
- ]}
- header="Dialog title"
- isOpen={isOpen}
- onClose={() => setIsOpen(false)}
- closeOnEscKey={true}
- closeOnClickOutside={false}
- variant="dialog"
- >
-
- Ea tempor sunt amet labore proident dolor proident commodo in exercitation ea nulla sunt
- pariatur.
-
-
-
- );
- }}
- {/* jsx-to-string:end */}
-
-
-
- ),
- },
- {
- id: 'props',
- title: 'Props',
- render: () => ,
- },
- ];
+ setIsOpen(false) },
+ { text: 'Apply', onClick: () => setIsOpen(false) },
+ ]}
+ header="Modal title"
+ isOpen={isOpen}
+ onClose={() => setIsOpen(false)}
+ closeOnEscKey={true}
+ closeOnClickOutside={false}
+ >
+
+ Ea tempor sunt amet labore proident dolor proident commodo in exercitation ea nulla sunt
+ pariatur. Nulla sunt ipsum do eu consectetur exercitation occaecat labore aliqua. Aute
+ elit occaecat esse ea fugiat esse. Reprehenderit sunt ea ea mollit commodo tempor amet
+ fugiat.
+
+
+
+ );
+ }}
+ {/* jsx-to-string:end */}
+
+
+ ),
+ },
+ {
+ id: 'dialog',
+ title: 'Dialog',
+ render: () => (
+ <>
+
+ Setting the variant prop to dialog results in a simplified version of a Modal.
+ The purpose of a dialog is to act as a safety net for a user attempting a destructive action.
+
- return (
- <>
-