From dfb0646d1b9fc3f63f17d0ef77ac8ae4c0ed8e69 Mon Sep 17 00:00:00 2001
From: Chris Cedrone <chris.cedrone@cengage.com>
Date: Wed, 3 Jan 2024 11:16:13 -0500
Subject: [PATCH 1/7] fixing padding on Modal Header

---
 .../src/components/Modal/Modal.tsx                | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/react-magma-dom/src/components/Modal/Modal.tsx b/packages/react-magma-dom/src/components/Modal/Modal.tsx
index 69c76d94a..127e1d01e 100644
--- a/packages/react-magma-dom/src/components/Modal/Modal.tsx
+++ b/packages/react-magma-dom/src/components/Modal/Modal.tsx
@@ -160,6 +160,17 @@ const ModalContent = styled.div<ModalProps & { isExiting?: boolean }>`
   }
 `;
 
+const ModalHeader = styled.div<{ theme?: ThemeInterface }>`
+  padding: ${props => props.theme.spaceScale.spacing05}
+    ${props => props.theme.spaceScale.spacing05} 0
+    ${props => props.theme.spaceScale.spacing05};
+  @media (min-width: ${props => props.theme.breakpoints.small}px) {
+    padding: ${props => props.theme.spaceScale.spacing06}
+      ${props => props.theme.spaceScale.spacing06} 0
+      ${props => props.theme.spaceScale.spacing06};
+  }
+`;
+
 const ModalWrapper = styled.div<{ theme?: ThemeInterface }>`
   padding: ${props => props.theme.spaceScale.spacing05};
   @media (min-width: ${props => props.theme.breakpoints.small}px) {
@@ -366,7 +377,7 @@ export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
                 theme={theme}
               >
                 {header && (
-                  <ModalWrapper theme={theme}>
+                  <ModalHeader theme={theme}>
                     {header && (
                       <H1
                         id={headingId}
@@ -380,7 +391,7 @@ export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
                         {header}
                       </H1>
                     )}
-                  </ModalWrapper>
+                  </ModalHeader>
                 )}
                 <ModalWrapper ref={bodyRef} theme={theme}>
                   {children}

From 593f28e4913ec9c960791140a319ffefce8e97ee Mon Sep 17 00:00:00 2001
From: Chris Cedrone <chris.cedrone@cengage.com>
Date: Wed, 3 Jan 2024 11:24:07 -0500
Subject: [PATCH 2/7] changey-set

---
 .changeset/fix-modalPadding.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/fix-modalPadding.md

diff --git a/.changeset/fix-modalPadding.md b/.changeset/fix-modalPadding.md
new file mode 100644
index 000000000..dee3c756e
--- /dev/null
+++ b/.changeset/fix-modalPadding.md
@@ -0,0 +1,5 @@
+---
+'react-magma-dom': minor
+---
+
+fix(Modal): Fixed bottom padding on the Modal header.

From 99587e4bf777c6722ad435395ff8e05bb8a59301 Mon Sep 17 00:00:00 2001
From: ccedrone <77400920+ccedrone@users.noreply.github.com>
Date: Wed, 3 Jan 2024 13:35:50 -0500
Subject: [PATCH 3/7] Changing changeset description

---
 .changeset/fix-modalPadding.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/fix-modalPadding.md b/.changeset/fix-modalPadding.md
index dee3c756e..e9e70eede 100644
--- a/.changeset/fix-modalPadding.md
+++ b/.changeset/fix-modalPadding.md
@@ -1,5 +1,5 @@
 ---
-'react-magma-dom': minor
+'react-magma-dom': patch
 ---
 
 fix(Modal): Fixed bottom padding on the Modal header.

From 3c32ad037181d3082dfbd93798341e91f992a3cd Mon Sep 17 00:00:00 2001
From: Chris Cedrone <chris.cedrone@cengage.com>
Date: Thu, 4 Jan 2024 09:16:52 -0500
Subject: [PATCH 4/7] Changing examples on docs and storybook to use Paragraph
 component

---
 .../src/components/Modal/Modal.stories.tsx    | 81 ++++++++++---------
 .../react-magma-docs/src/pages/api/modal.mdx  | 79 +++++++++++-------
 2 files changed, 93 insertions(+), 67 deletions(-)

diff --git a/packages/react-magma-dom/src/components/Modal/Modal.stories.tsx b/packages/react-magma-dom/src/components/Modal/Modal.stories.tsx
index 4608706b4..6682cd66e 100644
--- a/packages/react-magma-dom/src/components/Modal/Modal.stories.tsx
+++ b/packages/react-magma-dom/src/components/Modal/Modal.stories.tsx
@@ -9,6 +9,7 @@ import { DatePicker } from '../DatePicker';
 import { ButtonGroup, ButtonGroupAlignment } from '../ButtonGroup';
 import { Container } from '../Container';
 import { NativeSelect } from '../NativeSelect';
+import { Paragraph } from '../Paragraph';
 import { Spacer } from '../Spacer';
 import { Combobox } from '../Combobox';
 import {
@@ -40,7 +41,7 @@ export const Default = () => {
         }}
         isOpen={showModal}
       >
-        <p>This is a modal, doing modal things.</p>
+        <Paragraph noMargins>This is a modal, doing modal things.</Paragraph>
         <ButtonGroup alignment={ButtonGroupAlignment.right}>
           <Button color={ButtonColor.secondary}>Cancel</Button>
           <Button>Save</Button>
@@ -70,11 +71,11 @@ export const LongContentWithScrolling = () => {
   return (
     <>
       <Modal header="Modal Title" onClose={onModalClose} isOpen={showModal}>
-        <p>This is a modal, doing modal things.</p>
-        <p>
+        <Paragraph noMargins>This is a modal, doing modal things.</Paragraph>
+        <Paragraph>
           This is <a href="/">linked text</a> in the modal
-        </p>
-        <p>
+        </Paragraph>
+        <Paragraph>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
           eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
           minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -82,12 +83,12 @@ export const LongContentWithScrolling = () => {
           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
           pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
           culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-        <p>This is a modal, doing modal things.</p>
-        <p>
+        </Paragraph>
+        <Paragraph>This is a modal, doing modal things.</Paragraph>
+        <Paragraph>
           This is <a href="/"> some more linked text</a> in the modal
-        </p>
-        <p>
+        </Paragraph>
+        <Paragraph>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
           eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
           minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -95,12 +96,12 @@ export const LongContentWithScrolling = () => {
           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
           pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
           culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-        <p>This is a modal, doing modal things.</p>
-        <p>
+        </Paragraph>
+        <Paragraph>This is a modal, doing modal things.</Paragraph>
+        <Paragraph>
           <Button>This is a button</Button>
-        </p>
-        <p>
+        </Paragraph>
+        <Paragraph>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
           eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
           minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -108,7 +109,7 @@ export const LongContentWithScrolling = () => {
           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
           pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
           culpa qui officia deserunt mollit anim id est laborum.
-        </p>
+        </Paragraph>
       </Modal>
       <Button onClick={onModalShow} ref={buttonRef}>
         Show Modal
@@ -184,10 +185,10 @@ export const ModalContentUpdate = () => {
         <div id="attachToMe">
           {page === 1 && (
             <>
-              <p>Page one</p>
-              <p>
+              <Paragraph noMargins>Page one</Paragraph>
+              <Paragraph>
                 This is <a href="/">linked text</a> in the modal
-              </p>
+              </Paragraph>
               <Toggle
                 checked={!goToNextPageEnabled}
                 id="goToNextPageEnabled"
@@ -210,11 +211,11 @@ export const ModalContentUpdate = () => {
 
           {page === 2 && (
             <>
-              <p>Page two</p>
-              <p>
+              <Paragraph>Page two</Paragraph>
+              <Paragraph>
                 <Button color={ButtonColor.secondary}>Random button 1</Button>{' '}
                 <Button color={ButtonColor.secondary}>Random button 2</Button>
-              </p>
+              </Paragraph>
               <Button onClick={goToPage1}>Go to Page 1</Button>
             </>
           )}
@@ -248,11 +249,13 @@ export const NoHeaderOrFocusableContent = () => {
         onClose={onModalNoFocusClose}
         isOpen={showModalNoFocus}
       >
-        <p>This modal has no header and nothing focusable.</p>
-        <p>
+        <Paragraph noMargins>
+          This modal has no header and nothing focusable.
+        </Paragraph>
+        <Paragraph>
           Consider the usability implications before implementing a modal like
           this. A modal should have something actionable inside it.
-        </p>
+        </Paragraph>
       </Modal>
       <Button onClick={onModalNoFocusShow} ref={buttonRef}>
         Show Modal with nothing focusable
@@ -276,16 +279,16 @@ export const ModalInAModal = () => {
         }}
         isOpen={showModal}
       >
-        <p>This is a modal, doing modal things.</p>
-        <p>
+        <Paragraph noMargins>This is a modal, doing modal things.</Paragraph>
+        <Paragraph>
           This is <a href="/">linked text</a> in the modal
-        </p>
-        <p>
+        </Paragraph>
+        <Paragraph>
           <Button>This is a button</Button>
-        </p>
-        <p>
+        </Paragraph>
+        <Paragraph>
           This is <a href="/"> some more linked text</a> in the modal
-        </p>
+        </Paragraph>
         <Combobox
           id="comboboxId3"
           isMulti
@@ -311,9 +314,9 @@ export const ModalInAModal = () => {
           ]}
           isClearable
         />
-        <p>
+        <Paragraph>
           <Button onClick={() => setShowModal2(true)}>Show Modal 2</Button>
-        </p>
+        </Paragraph>
       </Modal>
       <Button onClick={() => setShowModal(true)} ref={buttonRef}>
         Show Modal
@@ -324,7 +327,7 @@ export const ModalInAModal = () => {
         onClose={() => setShowModal2(false)}
         isOpen={showModal2}
       >
-        <p>This is modal 2</p>
+        <Paragraph noMargins>This is modal 2</Paragraph>
         <NativeSelect fieldId="">
           <option>1</option>
           <option>2</option>
@@ -418,10 +421,12 @@ export const Inverse = () => {
         isOpen={showModal}
         isInverse
       >
-        <p>This is an inverse modal, doing modal things.</p>
-        <p>
+        <Paragraph noMargins>
+          This is an inverse modal, doing modal things.
+        </Paragraph>
+        <Paragraph>
           <Button isInverse>This is a button</Button>
-        </p>
+        </Paragraph>
       </Modal>
       <Container isInverse style={{ padding: '12px' }}>
         <Button onClick={() => setShowModal(true)} ref={buttonRef} isInverse>
diff --git a/website/react-magma-docs/src/pages/api/modal.mdx b/website/react-magma-docs/src/pages/api/modal.mdx
index b670e794e..dc21a7916 100644
--- a/website/react-magma-docs/src/pages/api/modal.mdx
+++ b/website/react-magma-docs/src/pages/api/modal.mdx
@@ -27,7 +27,13 @@ This can be done by supplementing the button label or link text with "(opens mod
 
 ```tsx
 import React from 'react';
-import { Button, Hyperlink, Modal, VisuallyHidden } from 'react-magma-dom';
+import {
+  Button,
+  Hyperlink,
+  Modal,
+  Paragraph,
+  VisuallyHidden,
+} from 'react-magma-dom';
 export function Example() {
   const [showModal, setShowModal] = React.useState(false);
   const buttonRef = React.useRef();
@@ -40,17 +46,17 @@ export function Example() {
   return (
     <>
       <Modal header="Modal Title" onClose={handleOnClose} isOpen={showModal}>
-        <p>This is a modal, doing modal things.</p>
-        <p>
+        <Paragraph noMargin>This is a modal, doing modal things.</Paragraph>
+        <Paragraph>
           This is <Hyperlink to="#">linked text</Hyperlink> in the modal
-        </p>
-        <p>
+        </Paragraph>
+        <Paragraph>
           <Button>This is a button</Button>
-        </p>
-        <p>
+        </Paragraph>
+        <Paragraph>
           This is <Hyperlink to="#">some more linked text</Hyperlink> in the
           modal
-        </p>
+        </Paragraph>
       </Modal>
       <Button onClick={() => setShowModal(true)} ref={buttonRef}>
         Show Modal
@@ -72,6 +78,7 @@ import {
   ButtonSize,
   Modal,
   ModalSize,
+  Paragraph,
   VisuallyHidden,
   ButtonGroup,
 } from 'react-magma-dom';
@@ -92,7 +99,9 @@ export function Example() {
         }}
         isOpen={showSmallModal}
       >
-        <p>This is a small modal, doing small modal things.</p>
+        <Paragraph noMargin>
+          This is a small modal, doing small modal things.
+        </Paragraph>
       </Modal>
 
       <Modal
@@ -104,7 +113,9 @@ export function Example() {
         }}
         isOpen={showLargeModal}
       >
-        <p>This is a large modal, doing large modal things.</p>
+        <Paragraph noMargin>
+          This is a large modal, doing large modal things.
+        </Paragraph>
       </Modal>
 
       <ButtonGroup>
@@ -142,6 +153,7 @@ import {
   Button,
   Modal,
   ModalSize,
+  Paragraph,
   VisuallyHidden,
   ButtonGroup,
   ButtonGroupAlignment,
@@ -162,7 +174,7 @@ export function Example() {
         }}
         isOpen={showModal}
       >
-        <p>This modal has no header.</p>
+        <Paragraph noMargin>This modal has no header.</Paragraph>
         <ButtonGroup alignment={ButtonGroupAlignment.center}>
           <Button onClick={() => setShowModal(false)}>OK</Button>
         </ButtonGroup>
@@ -176,7 +188,7 @@ export function Example() {
         }}
         isOpen={showModalHeader}
       >
-        <p>This modal has no header.</p>
+        <Paragraph noMargin>This modal has no header.</Paragraph>
         <ButtonGroup alignment={ButtonGroupAlignment.center}>
           <Button onClick={() => setShowModalHeader(false)}>OK</Button>
         </ButtonGroup>
@@ -202,7 +214,7 @@ The close button can be hidden by using the `isCloseButtonHidden` prop. If this
 
 ```tsx
 import React from 'react';
-import { Button, Modal } from 'react-magma-dom';
+import { Button, Modal, Paragraph } from 'react-magma-dom';
 export function Example() {
   const [showModal, setShowModal] = React.useState(false);
   const buttonRef = React.useRef();
@@ -218,7 +230,9 @@ export function Example() {
         }}
         isOpen={showModal}
       >
-        <p>The standard modal close button is hidden.</p>
+        <Paragraph noMargin>
+          The standard modal close button is hidden.
+        </Paragraph>
         <Button onClick={() => setShowModal(false)}>Close this Dialog</Button>
       </Modal>
       <Button onClick={() => setShowModal(true)} ref={buttonRef}>
@@ -235,7 +249,7 @@ If you would like to add a custom close button to the `Modal` be sure not to use
 
 ```tsx
 import React from 'react';
-import { Button, Modal, VisuallyHidden } from 'react-magma-dom';
+import { Button, Modal, Paragraph, VisuallyHidden } from 'react-magma-dom';
 export function Example() {
   const [showModal, setShowModal] = React.useState(false);
   const [magmaCloseCalledTimes, setMagmaCloseCalledTimes] = React.useState(0);
@@ -261,12 +275,12 @@ export function Example() {
         Lorem ipsum dolar sit amet
         <Button onClick={customCloseModal}>Close Modal</Button>
       </Modal>
-      <p>
+      <Paragraph noMargin>
         <strong>Magma Close Called Times:</strong> {magmaCloseCalledTimes}
-      </p>
-      <p>
+      </Paragraph>
+      <Paragraph>
         <strong>Internal Close Called Times:</strong> {internalCloseCalledTimes}
-      </p>
+      </Paragraph>
       <Button onClick={() => setShowModal(true)} ref={buttonRef}>
         Show Modal <VisuallyHidden>(opens modal dialog)</VisuallyHidden>
       </Button>
@@ -281,7 +295,13 @@ Although we don't recommend using nested modals, the ability for one nested moda
 
 ```tsx
 import React from 'react';
-import { Button, Modal, ModalSize, VisuallyHidden } from 'react-magma-dom';
+import {
+  Button,
+  Modal,
+  ModalSize,
+  Paragraph,
+  VisuallyHidden,
+} from 'react-magma-dom';
 export function Example() {
   const [showModal, setShowModal] = React.useState(false);
   const [showModal2, setShowModal2] = React.useState(false);
@@ -295,7 +315,7 @@ export function Example() {
         }}
         isOpen={showModal}
       >
-        <p>This is a modal, doing modal things.</p>
+        <Paragraph noMargin>This is a modal, doing modal things.</Paragraph>
 
         <Button onClick={() => setShowModal2(true)}>Show Modal 2</Button>
       </Modal>
@@ -309,7 +329,7 @@ export function Example() {
         onClose={() => setShowModal2(false)}
         isOpen={showModal2}
       >
-        <p>This is modal 2</p>
+        <Paragraph>This is modal 2</Paragraph>
       </Modal>
     </>
   );
@@ -324,6 +344,7 @@ import {
   Button,
   Hyperlink,
   Modal,
+  Paragraph,
   VisuallyHidden,
   Card,
   CardBody,
@@ -343,24 +364,24 @@ export function Example() {
         isOpen={showModal}
         isInverse
       >
-        <p>This is a modal, doing modal things.</p>
-        <p>
+        <Paragraph noMargin>This is a modal, doing modal things.</Paragraph>
+        <Paragraph>
           This is{' '}
           <Hyperlink to="#" isInverse>
             linked text
           </Hyperlink>{' '}
           in the modal
-        </p>
-        <p>
+        </Paragraph>
+        <Paragraph>
           <Button isInverse>This is a button</Button>
-        </p>
-        <p>
+        </Paragraph>
+        <Paragraph>
           This is{' '}
           <Hyperlink to="#" isInverse>
             some more linked text
           </Hyperlink>{' '}
           in the modal
-        </p>
+        </Paragraph>
       </Modal>
       <Card isInverse>
         <CardBody>

From 45fc96ff73a50bb790ae0a9cf48e9a1a329a54c4 Mon Sep 17 00:00:00 2001
From: Chris Cedrone <chris.cedrone@cengage.com>
Date: Thu, 4 Jan 2024 09:51:14 -0500
Subject: [PATCH 5/7] correcting prop name in Paragraph for docs

---
 .../react-magma-docs/src/pages/api/modal.mdx   | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/website/react-magma-docs/src/pages/api/modal.mdx b/website/react-magma-docs/src/pages/api/modal.mdx
index dc21a7916..c6900e4a0 100644
--- a/website/react-magma-docs/src/pages/api/modal.mdx
+++ b/website/react-magma-docs/src/pages/api/modal.mdx
@@ -46,7 +46,7 @@ export function Example() {
   return (
     <>
       <Modal header="Modal Title" onClose={handleOnClose} isOpen={showModal}>
-        <Paragraph noMargin>This is a modal, doing modal things.</Paragraph>
+        <Paragraph noMargins>This is a modal, doing modal things.</Paragraph>
         <Paragraph>
           This is <Hyperlink to="#">linked text</Hyperlink> in the modal
         </Paragraph>
@@ -99,7 +99,7 @@ export function Example() {
         }}
         isOpen={showSmallModal}
       >
-        <Paragraph noMargin>
+        <Paragraph noMargins>
           This is a small modal, doing small modal things.
         </Paragraph>
       </Modal>
@@ -113,7 +113,7 @@ export function Example() {
         }}
         isOpen={showLargeModal}
       >
-        <Paragraph noMargin>
+        <Paragraph noMargins>
           This is a large modal, doing large modal things.
         </Paragraph>
       </Modal>
@@ -174,7 +174,7 @@ export function Example() {
         }}
         isOpen={showModal}
       >
-        <Paragraph noMargin>This modal has no header.</Paragraph>
+        <Paragraph noMargins>This modal has no header.</Paragraph>
         <ButtonGroup alignment={ButtonGroupAlignment.center}>
           <Button onClick={() => setShowModal(false)}>OK</Button>
         </ButtonGroup>
@@ -188,7 +188,7 @@ export function Example() {
         }}
         isOpen={showModalHeader}
       >
-        <Paragraph noMargin>This modal has no header.</Paragraph>
+        <Paragraph noMargins>This modal has no header.</Paragraph>
         <ButtonGroup alignment={ButtonGroupAlignment.center}>
           <Button onClick={() => setShowModalHeader(false)}>OK</Button>
         </ButtonGroup>
@@ -230,7 +230,7 @@ export function Example() {
         }}
         isOpen={showModal}
       >
-        <Paragraph noMargin>
+        <Paragraph noMargins>
           The standard modal close button is hidden.
         </Paragraph>
         <Button onClick={() => setShowModal(false)}>Close this Dialog</Button>
@@ -275,7 +275,7 @@ export function Example() {
         Lorem ipsum dolar sit amet
         <Button onClick={customCloseModal}>Close Modal</Button>
       </Modal>
-      <Paragraph noMargin>
+      <Paragraph noMargins>
         <strong>Magma Close Called Times:</strong> {magmaCloseCalledTimes}
       </Paragraph>
       <Paragraph>
@@ -315,7 +315,7 @@ export function Example() {
         }}
         isOpen={showModal}
       >
-        <Paragraph noMargin>This is a modal, doing modal things.</Paragraph>
+        <Paragraph noMargins>This is a modal, doing modal things.</Paragraph>
 
         <Button onClick={() => setShowModal2(true)}>Show Modal 2</Button>
       </Modal>
@@ -364,7 +364,7 @@ export function Example() {
         isOpen={showModal}
         isInverse
       >
-        <Paragraph noMargin>This is a modal, doing modal things.</Paragraph>
+        <Paragraph noMargins>This is a modal, doing modal things.</Paragraph>
         <Paragraph>
           This is{' '}
           <Hyperlink to="#" isInverse>

From 53d0e1aa1d6deab9a0beecbe6eb984d68acbec12 Mon Sep 17 00:00:00 2001
From: Chris Cedrone <chris.cedrone@cengage.com>
Date: Fri, 5 Jan 2024 11:04:02 -0500
Subject: [PATCH 6/7] tweaking examples for better aesthetics with new props

---
 .../src/components/Modal/Modal.stories.tsx      | 17 +++++++++--------
 .../react-magma-docs/src/pages/api/modal.mdx    |  8 ++++----
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/packages/react-magma-dom/src/components/Modal/Modal.stories.tsx b/packages/react-magma-dom/src/components/Modal/Modal.stories.tsx
index 6682cd66e..232207001 100644
--- a/packages/react-magma-dom/src/components/Modal/Modal.stories.tsx
+++ b/packages/react-magma-dom/src/components/Modal/Modal.stories.tsx
@@ -41,7 +41,7 @@ export const Default = () => {
         }}
         isOpen={showModal}
       >
-        <Paragraph noMargins>This is a modal, doing modal things.</Paragraph>
+        <Paragraph noTopMargin>This is a modal, doing modal things.</Paragraph>
         <ButtonGroup alignment={ButtonGroupAlignment.right}>
           <Button color={ButtonColor.secondary}>Cancel</Button>
           <Button>Save</Button>
@@ -71,7 +71,7 @@ export const LongContentWithScrolling = () => {
   return (
     <>
       <Modal header="Modal Title" onClose={onModalClose} isOpen={showModal}>
-        <Paragraph noMargins>This is a modal, doing modal things.</Paragraph>
+        <Paragraph noTopMargin>This is a modal, doing modal things.</Paragraph>
         <Paragraph>
           This is <a href="/">linked text</a> in the modal
         </Paragraph>
@@ -185,7 +185,7 @@ export const ModalContentUpdate = () => {
         <div id="attachToMe">
           {page === 1 && (
             <>
-              <Paragraph noMargins>Page one</Paragraph>
+              <Paragraph noTopMargin>Page one</Paragraph>
               <Paragraph>
                 This is <a href="/">linked text</a> in the modal
               </Paragraph>
@@ -203,6 +203,7 @@ export const ModalContentUpdate = () => {
               />
 
               {showHidden && <Button>Hidden Button</Button>}
+              <Spacer size={10} />
               <Button disabled={!goToNextPageEnabled} onClick={goToPage2}>
                 Go to Page 2
               </Button>
@@ -211,7 +212,7 @@ export const ModalContentUpdate = () => {
 
           {page === 2 && (
             <>
-              <Paragraph>Page two</Paragraph>
+              <Paragraph noTopMargin>Page two</Paragraph>
               <Paragraph>
                 <Button color={ButtonColor.secondary}>Random button 1</Button>{' '}
                 <Button color={ButtonColor.secondary}>Random button 2</Button>
@@ -249,7 +250,7 @@ export const NoHeaderOrFocusableContent = () => {
         onClose={onModalNoFocusClose}
         isOpen={showModalNoFocus}
       >
-        <Paragraph noMargins>
+        <Paragraph noTopMargin>
           This modal has no header and nothing focusable.
         </Paragraph>
         <Paragraph>
@@ -279,7 +280,7 @@ export const ModalInAModal = () => {
         }}
         isOpen={showModal}
       >
-        <Paragraph noMargins>This is a modal, doing modal things.</Paragraph>
+        <Paragraph noTopMargin>This is a modal, doing modal things.</Paragraph>
         <Paragraph>
           This is <a href="/">linked text</a> in the modal
         </Paragraph>
@@ -327,7 +328,7 @@ export const ModalInAModal = () => {
         onClose={() => setShowModal2(false)}
         isOpen={showModal2}
       >
-        <Paragraph noMargins>This is modal 2</Paragraph>
+        <Paragraph noTopMargin>This is modal 2</Paragraph>
         <NativeSelect fieldId="">
           <option>1</option>
           <option>2</option>
@@ -421,7 +422,7 @@ export const Inverse = () => {
         isOpen={showModal}
         isInverse
       >
-        <Paragraph noMargins>
+        <Paragraph noTopMargin>
           This is an inverse modal, doing modal things.
         </Paragraph>
         <Paragraph>
diff --git a/website/react-magma-docs/src/pages/api/modal.mdx b/website/react-magma-docs/src/pages/api/modal.mdx
index c6900e4a0..3aab44854 100644
--- a/website/react-magma-docs/src/pages/api/modal.mdx
+++ b/website/react-magma-docs/src/pages/api/modal.mdx
@@ -174,7 +174,7 @@ export function Example() {
         }}
         isOpen={showModal}
       >
-        <Paragraph noMargins>This modal has no header.</Paragraph>
+        <Paragraph noTopMargin>This modal has no header.</Paragraph>
         <ButtonGroup alignment={ButtonGroupAlignment.center}>
           <Button onClick={() => setShowModal(false)}>OK</Button>
         </ButtonGroup>
@@ -188,7 +188,7 @@ export function Example() {
         }}
         isOpen={showModalHeader}
       >
-        <Paragraph noMargins>This modal has no header.</Paragraph>
+        <Paragraph noTopMargin>This modal has no header.</Paragraph>
         <ButtonGroup alignment={ButtonGroupAlignment.center}>
           <Button onClick={() => setShowModalHeader(false)}>OK</Button>
         </ButtonGroup>
@@ -230,7 +230,7 @@ export function Example() {
         }}
         isOpen={showModal}
       >
-        <Paragraph noMargins>
+        <Paragraph noTopMargin>
           The standard modal close button is hidden.
         </Paragraph>
         <Button onClick={() => setShowModal(false)}>Close this Dialog</Button>
@@ -329,7 +329,7 @@ export function Example() {
         onClose={() => setShowModal2(false)}
         isOpen={showModal2}
       >
-        <Paragraph>This is modal 2</Paragraph>
+        <Paragraph noMargins>This is modal 2</Paragraph>
       </Modal>
     </>
   );

From 451d8f8f61b66bc52de1027efd0dbf783c965cda Mon Sep 17 00:00:00 2001
From: Chris Cedrone <chris.cedrone@cengage.com>
Date: Fri, 5 Jan 2024 11:39:55 -0500
Subject: [PATCH 7/7] more example tweaks

---
 website/react-magma-docs/src/pages/api/modal.mdx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/website/react-magma-docs/src/pages/api/modal.mdx b/website/react-magma-docs/src/pages/api/modal.mdx
index 3aab44854..7135a58f0 100644
--- a/website/react-magma-docs/src/pages/api/modal.mdx
+++ b/website/react-magma-docs/src/pages/api/modal.mdx
@@ -315,7 +315,7 @@ export function Example() {
         }}
         isOpen={showModal}
       >
-        <Paragraph noMargins>This is a modal, doing modal things.</Paragraph>
+        <Paragraph noTopMargin>This is a modal, doing modal things.</Paragraph>
 
         <Button onClick={() => setShowModal2(true)}>Show Modal 2</Button>
       </Modal>
@@ -364,18 +364,20 @@ export function Example() {
         isOpen={showModal}
         isInverse
       >
-        <Paragraph noMargins>This is a modal, doing modal things.</Paragraph>
-        <Paragraph>
+        <Paragraph isInverse noMargins>
+          This is a modal, doing modal things.
+        </Paragraph>
+        <Paragraph isInverse>
           This is{' '}
           <Hyperlink to="#" isInverse>
             linked text
           </Hyperlink>{' '}
           in the modal
         </Paragraph>
-        <Paragraph>
+        <Paragraph isInverse>
           <Button isInverse>This is a button</Button>
         </Paragraph>
-        <Paragraph>
+        <Paragraph isInverse>
           This is{' '}
           <Hyperlink to="#" isInverse>
             some more linked text