[Modal] Update stories and clean up Modal.Header

Author: laurkim

polaris-react/src/components/Modal/Modal.stories.tsx

@@ -7,6 +7,7 @@ import {
   DropZone,
   Modal,
   Stack,
+  Text,
   TextContainer,
   TextField,
 } from '@shopify/polaris';
@@ -42,11 +43,11 @@ export function Default() {
       >
         <Modal.Section>
           <TextContainer>
-            <p>
+            <Text variant="bodyMd" as="span">
               Use Instagram posts to share your products with millions of
               people. Let shoppers buy from your store without leaving
               Instagram.
-            </p>
+            </Text>
           </TextContainer>
         </Modal.Section>
       </Modal>
@@ -92,11 +93,11 @@ export function WithPrimaryAction() {
           <Stack vertical>
             <Stack.Item>
               <TextContainer>
-                <p>
+                <Text variant="bodyMd" as="span">
                   You can share this discount link with your customers via email
                   or social media. Your discount will be automatically applied
                   at checkout.
-                </p>
+                </Text>
               </TextContainer>
             </Stack.Item>
             <Stack.Item fill>
@@ -336,11 +337,11 @@ export function WithoutATitle() {
       >
         <Modal.Section titleHidden>
           <TextContainer>
-            <p>
+            <Text variant="bodyMd" as="span">
               Use Instagram posts to share your products with millions of
               people. Let shoppers buy from your store without leaving
               Instagram.
-            </p>
+            </Text>
           </TextContainer>
         </Modal.Section>
       </Modal>
@@ -372,9 +373,9 @@ export function WithScrollListener() {
         {Array.from({length: 50}, (_, index) => (
           <Modal.Section key={index}>
             <TextContainer>
-              <p>
+              <Text variant="bodyMd" as="span">
                 Item <a href="#Content">#{index}</a>
-              </p>
+              </Text>
             </TextContainer>
           </Modal.Section>
         ))}
@@ -421,11 +422,11 @@ export function WithActivatorRef() {
       >
         <Modal.Section>
           <TextContainer>
-            <p>
+            <Text variant="bodyMd" as="span">
               Use Instagram posts to share your products with millions of
               people. Let shoppers buy from your store without leaving
               Instagram.
-            </p>
+            </Text>
           </TextContainer>
         </Modal.Section>
       </Modal>
@@ -468,11 +469,11 @@ export function WithoutAnActivatorProp() {
       >
         <Modal.Section>
           <TextContainer>
-            <p>
+            <Text variant="bodyMd" as="span">
               Use Instagram posts to share your products with millions of
               people. Let shoppers buy from your store without leaving
               Instagram.
-            </p>
+            </Text>
           </TextContainer>
         </Modal.Section>
       </Modal>

polaris-react/src/components/Modal/components/Header/Header.scss

@@ -6,8 +6,6 @@ import {Columns} from '../../../Columns';
 import {Inline} from '../../../Inline';
 import {Text} from '../../../Text';
 
-import styles from './Header.scss';
-
 export interface HeaderProps {
   id: string;
   titleHidden: boolean;
@@ -24,11 +22,11 @@ export function Header({
   onClose,
 }: HeaderProps) {
   const titleHiddenMarkup = (
-    <div className={styles.titleHidden}>
+    <Box position="absolute" insetInlineEnd="0" zIndex="1">
       <Inline align="end">
         <CloseButton titleHidden={titleHidden} onClick={onClose} />
       </Inline>
-    </div>
+    </Box>
   );
 
   if (titleHidden || !children) {
@@ -49,13 +47,11 @@ export function Header({
             {children}
           </Text>
         </Inline>
-        <Inline>
-          <CloseButton
-            pressed={closing}
-            titleHidden={titleHidden}
-            onClick={onClose}
-          />
-        </Inline>
+        <CloseButton
+          pressed={closing}
+          titleHidden={titleHidden}
+          onClick={onClose}
+        />
       </Columns>
     </Box>
   );