From 3fda6bb5e74986da9091ccb49ac42523611ed56f Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Thu, 21 Mar 2024 11:54:38 -0400
Subject: [PATCH] feat(Modal): update Modal styles to phase 3 spec

---
 .../src/components/ComposedModal/ComposedModal.tsx    |  4 ++--
 packages/react/src/components/Modal/Modal.tsx         |  4 ++--
 .../src/components/Slug/Slug-examples.stories.js      | 11 +----------
 packages/styles/scss/components/modal/_modal.scss     |  8 ++------
 4 files changed, 7 insertions(+), 20 deletions(-)

diff --git a/packages/react/src/components/ComposedModal/ComposedModal.tsx b/packages/react/src/components/ComposedModal/ComposedModal.tsx
index 84edbabd9715..c31bbf2377f9 100644
--- a/packages/react/src/components/ComposedModal/ComposedModal.tsx
+++ b/packages/react/src/components/ComposedModal/ComposedModal.tsx
@@ -397,11 +397,11 @@ const ComposedModal = React.forwardRef<HTMLDivElement, ComposedModalProps>(
       }
     }, [open, selectorPrimaryFocus, isOpen]);
 
-    // Slug is always size `lg`
+    // Slug is always size `sm`
     let normalizedSlug;
     if (slug && slug['type']?.displayName === 'Slug') {
       normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
-        size: 'lg',
+        size: 'sm',
       });
     }
 
diff --git a/packages/react/src/components/Modal/Modal.tsx b/packages/react/src/components/Modal/Modal.tsx
index 2ae2148f43a4..5b89427378f7 100644
--- a/packages/react/src/components/Modal/Modal.tsx
+++ b/packages/react/src/components/Modal/Modal.tsx
@@ -473,11 +473,11 @@ const Modal = React.forwardRef(function Modal(
     };
   }, []);
 
-  // Slug is always size `lg`
+  // Slug is always size `sm`
   let normalizedSlug;
   if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
-      size: 'lg',
+      size: 'sm',
     });
   }
 
diff --git a/packages/react/src/components/Slug/Slug-examples.stories.js b/packages/react/src/components/Slug/Slug-examples.stories.js
index 3a465c790854..a77382082b4f 100644
--- a/packages/react/src/components/Slug/Slug-examples.stories.js
+++ b/packages/react/src/components/Slug/Slug-examples.stories.js
@@ -284,16 +284,12 @@ export const _Combobox = {
 export const _ComposedModal = {
   args: {
     showButtons: true,
-    hasScrollingContent: false,
   },
   argTypes: {
     slug: {
       description:
         '**Experimental**: Provide a `Slug` component to be rendered inside the component',
     },
-    hasScrollingContent: {
-      description: 'Add scrolling content indicator',
-    },
     showButtons: {
       description: 'Show or hide the Modal buttons',
     },
@@ -305,7 +301,7 @@ export const _ComposedModal = {
         <Button onClick={() => setOpen(true)}>Launch composed modal</Button>
         <ComposedModal open={open} onClose={() => setOpen(false)} slug={slug}>
           <ModalHeader label="Account resources" title="Add a custom domain" />
-          <ModalBody hasScrollingContent={args.hasScrollingContent}>
+          <ModalBody>
             <p style={{ marginBottom: '1rem' }}>
               Custom domains direct requests for your apps in this Cloud Foundry
               organization to a URL that you own. A custom domain can be a
@@ -428,16 +424,12 @@ export const _FilterableMultiselect = {
 export const _Modal = {
   args: {
     showButtons: true,
-    hasScrollingContent: false,
   },
   argTypes: {
     slug: {
       description:
         '**Experimental**: Provide a `Slug` component to be rendered inside the component',
     },
-    hasScrollingContent: {
-      description: 'Add scrolling content indicator',
-    },
     showButtons: {
       description: 'Show or hide the Modal buttons',
     },
@@ -455,7 +447,6 @@ export const _Modal = {
           primaryButtonText="Add"
           secondaryButtonText="Cancel"
           passiveModal={!args.showButtons}
-          hasScrollingContent={args.hasScrollingContent}
           slug={slug}>
           <p style={{ marginBottom: '1rem' }}>
             Custom domains direct requests for your apps in this Cloud Foundry
diff --git a/packages/styles/scss/components/modal/_modal.scss b/packages/styles/scss/components/modal/_modal.scss
index 1b715f4d2d13..9aa22748f31c 100644
--- a/packages/styles/scss/components/modal/_modal.scss
+++ b/packages/styles/scss/components/modal/_modal.scss
@@ -473,12 +473,6 @@
       0 24px 40px -24px $ai-drop-shadow;
   }
 
-  .#{$prefix}--modal--slug .#{$prefix}--slug {
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-end: 0;
-  }
-
   .#{$prefix}--modal--slug
     .#{$prefix}--modal-content.#{$prefix}--modal-scroll-content {
     mask-image: linear-gradient(
@@ -500,6 +494,8 @@
   .#{$prefix}--modal--slug
     .#{$prefix}--modal-container-body
     > .#{$prefix}--slug {
+    position: absolute;
+    inset-block-start: convert.to-rem(10px);
     inset-inline-end: convert.to-rem(48px);
   }