fix: popover is clipping in modal (#17840)

carbon-design-system · Oct 23, 2024 · abde1a4 · abde1a4
1 parent 66c14c2
commit abde1a4
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/packages/react/src/components/Modal/Modal.stories.js b/packages/react/src/components/Modal/Modal.stories.js
@@ -45,6 +45,7 @@ export default {
 
 export const Default = () => {
   const [open, setOpen] = useState(true);
+  const [openPopover, setOpenPopover] = useState(false);
   const menuTargetref = useRef(null);
   return (
     <>
@@ -61,7 +62,26 @@ export const Default = () => {
           organization to a URL that you own. A custom domain can be a shared
           domain, a shared subdomain, or a shared domain and host.
         </p>
-
+        <Popover open={openPopover} autoAlign>
+          <div className="playground-trigger">
+            <CheckboxIcon
+              onClick={() => {
+                setOpenPopover(!openPopover);
+              }}
+            />
+          </div>
+          <PopoverContent className="p-3">
+            <div>
+              <p className="popover-title">This popover uses autoAlign</p>
+              <p className="popover-details">
+                Scroll the container up, down, left or right to observe how the
+                popover will automatically change its position in attempt to
+                stay within the viewport. This works on initial render in
+                addition to on scroll.
+              </p>
+            </div>
+          </PopoverContent>
+        </Popover>
         <TextInput
           data-modal-primary-focus
           id="text-input-1"

diff --git a/packages/styles/scss/components/popover/_popover.scss b/packages/styles/scss/components/popover/_popover.scss
@@ -104,11 +104,10 @@ $popover-caret-height: custom-property.get-var(
   }
 
   // Drop shadow modifier
-  .#{$prefix}--popover--drop-shadow .#{$prefix}--popover {
-    @include custom-property.declaration(
-      'popover-drop-shadow',
-      drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2))
-    );
+  .#{$prefix}--popover--drop-shadow
+    .#{$prefix}--popover
+    > .#{$prefix}--popover-content {
+    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
   }
 
   // Caret tip modifier