feat(Modal): update Modal styles to phase 3 spec

carbon-design-system · Mar 21, 2024 · 3fda6bb · 3fda6bb
1 parent afce28d
commit 3fda6bb
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);
   }