fix: modal overflow of dropdown (#16544)

* fix: modal overfloww of dropdown * feat: added example of floating ui in modal --------- Co-authored-by: Gururaj J <[email protected]>
carbon-design-system · Jun 26, 2024 · a06df26 · a06df26
1 parent b28d8be
commit a06df26
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 0 deletions.
diff --git a/packages/react/src/components/Modal/Modal.stories.js b/packages/react/src/components/Modal/Modal.stories.js
@@ -322,6 +322,61 @@ export const Playground = ({ numberOfButtons, ...args }) => {
           <SelectItem value="us-south" text="US South" />
           <SelectItem value="us-east" text="US East" />
         </Select>
+
+        <Dropdown
+          autoAlign={true}
+          id="default"
+          style={{ margin: '1rem 0' }}
+          titleText="Dropdown Example of Floating ui"
+          helperText="This is some helper text"
+          // initialSelectedItem={items[1]}
+          label="Option 1"
+          items={[
+            {
+              id: 'option-0',
+              text: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.',
+            },
+            {
+              id: 'option-1',
+              text: 'Option 1',
+            },
+            {
+              id: 'option-2',
+              text: 'Option 2',
+            },
+            {
+              id: 'option-3',
+              text: 'Option 3 - a disabled item',
+              disabled: true,
+            },
+            {
+              id: 'option-4',
+              text: 'Option 4',
+            },
+            {
+              id: 'option-5',
+              text: 'Option 5',
+            },
+          ]}
+          itemToString={(item) => (item ? item.text : '')}
+          direction="top"
+        />
+
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
+          accumsan augue. Phasellus consequat augue vitae tellus tincidunt
+          posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
+          condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
+          Quisque consectetur non risus eu rutrum.{' '}
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
+          accumsan augue. Phasellus consequat augue vitae tellus tincidunt
+          posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
+          condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
+          Quisque consectetur non risus eu rutrum.{' '}
+        </p>
+
         {args.hasScrollingContent && (
           <>
             <p>

diff --git a/packages/styles/scss/components/modal/_modal.scss b/packages/styles/scss/components/modal/_modal.scss
@@ -320,6 +320,11 @@
       linear-gradient(to top, $layer 0, 2px, transparent 2px);
   }
 
+  //removing mask image in case we have dropdown in modal
+  .#{$prefix}--modal-scroll-content:has(.#{$prefix}--dropdown--autoalign) {
+    mask-image: none;
+  }
+
   // Required so overflow-indicator disappears at end of content
   .#{$prefix}--modal-scroll-content > *:last-child {
     margin-block-end: $spacing-06;