fix(header): adjust edge-aligned popover positioning (#20322)

Author: adamalston

packages/react/src/components/Popover/Popover.stories.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -373,68 +373,6 @@ export const ExperimentalAutoAlignBoundary = () => {
   );
 };
 
-export const Test = () => {
-  const [open, setOpen] = useState();
-  const align = document?.dir === 'rtl' ? 'bottom-right' : 'bottom-left';
-  const alignTwo = document?.dir === 'rtl' ? 'bottom-left' : 'bottom-right';
-  return (
-    <div style={{ display: 'flex', gap: '8rem' }}>
-      <OverflowMenu
-        flipped={document?.dir === 'rtl'}
-        aria-label="overflow-menu">
-        <OverflowMenuItem itemText="Stop app" />
-        <OverflowMenuItem itemText="Restart app" />
-        <OverflowMenuItem itemText="Rename app" />
-        <OverflowMenuItem itemText="Clone and move app" disabled requireTitle />
-        <OverflowMenuItem itemText="Edit routes and access" requireTitle />
-        <OverflowMenuItem hasDivider isDelete itemText="Delete app" />
-      </OverflowMenu>
-
-      <Popover
-        align={align}
-        open={open}
-        onKeyDown={(evt) => {
-          if (match(evt, keys.Escape)) {
-            setOpen(false);
-          }
-        }}
-        isTabTip
-        onRequestClose={() => setOpen(false)}>
-        <button
-          aria-label="Settings"
-          type="button"
-          aria-expanded={open}
-          onClick={() => {
-            setOpen(!open);
-          }}>
-          <Settings />
-        </button>
-        <PopoverContent className="p-3">
-          <RadioButtonGroup
-            style={{ alignItems: 'flex-start', flexDirection: 'column' }}
-            legendText="Row height"
-            name="radio-button-group"
-            defaultSelected="small">
-            <RadioButton labelText="Small" value="small" id="radio-small" />
-            <RadioButton labelText="Large" value="large" id="radio-large" />
-          </RadioButtonGroup>
-          <hr />
-          <fieldset className={`cds--fieldset`}>
-            <legend className={`cds--label`}>Edit columns</legend>
-            <Checkbox defaultChecked labelText="Name" id="checkbox-label-1" />
-            <Checkbox defaultChecked labelText="Type" id="checkbox-label-2" />
-            <Checkbox
-              defaultChecked
-              labelText="Location"
-              id="checkbox-label-3"
-            />
-          </fieldset>
-        </PopoverContent>
-      </Popover>
-    </div>
-  );
-};
-
 export const TabTipExperimentalAutoAlign = () => {
   const [open, setOpen] = useState(true);
   const ref = useRef();

packages/styles/scss/components/ui-shell/header/_header.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2023
+// Copyright IBM Corp. 2016, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -57,6 +57,26 @@
     z-index: z('header') + 1;
   }
 
+  .#{$prefix}--header {
+    .#{$prefix}--popover--bottom-start:not(.#{$prefix}--popover--auto-align) {
+      > .#{$prefix}--popover {
+        > .#{$prefix}--popover-caret,
+        > .#{$prefix}--popover-content {
+          inset-inline-start: $spacing-05;
+        }
+      }
+    }
+
+    .#{$prefix}--popover--bottom-end:not(.#{$prefix}--popover--auto-align) {
+      > .#{$prefix}--popover {
+        > .#{$prefix}--popover-caret,
+        > .#{$prefix}--popover-content {
+          inset-inline-end: $spacing-05;
+        }
+      }
+    }
+  }
+
   .#{$prefix}--header__action > :first-child {
     margin-block-start: 0;
   }