fix(components): change popover default zIndex

trezor · Feb 4, 2025 · 9ab315a · 9ab315a
1 parent f145707
commit 9ab315a
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 10 deletions.
diff --git a/packages/components/src/components/Popover/Popover.stories.tsx b/packages/components/src/components/Popover/Popover.stories.tsx
@@ -57,14 +57,20 @@ export const Popover: StoryObj<PopoverStoryProps> = {
                 >
                     <Button>Uncontrolled</Button>
                 </PopoverComponent>
-                <PopoverComponent isOpen={args.isOpen} placement={placement} content={<Content />}>
+                <PopoverComponent
+                    isOpen={args.isOpen}
+                    popoverOffset={args.popoverOffset}
+                    placement={placement}
+                    content={<Content />}
+                >
                     <Button onClick={() => updateArgs({ isOpen: !args.isOpen })}>Controlled</Button>
                 </PopoverComponent>
             </Container>
         );
     },
     args: {
         isOpen: false,
+        popoverOffset: 5,
         placementPosition: 'center',
         placementAlignment: 'center',
     },
@@ -79,6 +85,11 @@ export const Popover: StoryObj<PopoverStoryProps> = {
                 type: 'boolean',
             },
         },
+        popoverOffset: {
+            control: {
+                type: 'number',
+            },
+        },
         placementPosition: {
             control: {
                 type: 'select',

diff --git a/packages/components/src/components/Popover/Popover.tsx b/packages/components/src/components/Popover/Popover.tsx
@@ -36,14 +36,16 @@ export type PopoverProps = {
     content?: React.ReactNode;
     onOpenChange?: (isOpen: boolean) => void;
     onInteraction?: () => void;
-    offset?: number;
+    popoverOffset?: number;
+    zIndex?: number;
 };
 
 export function usePopover({
     isInitialOpen = false,
     placement = DEFAULT_POPOVER_PLACEMENT,
     isOpen: controlledOpen,
     onOpenChange: setControlledOpen,
+    popoverOffset = DEFAULT_POPOVER_OFFSET,
 }: PopoverProps) {
     const [uncontrolledOpen, setUncontrolledOpen] = React.useState(isInitialOpen);
     const [labelId, setLabelId] = React.useState<string | undefined>();
@@ -60,7 +62,7 @@ export function usePopover({
         onOpenChange: setOpen,
         whileElementsMounted: autoUpdate,
         middleware: [
-            offset(DEFAULT_POPOVER_OFFSET),
+            offset(popoverOffset),
             flip({
                 crossAxis: calculatedPlacement.includes('-'),
                 fallbackAxisSideDirection: 'end',
@@ -142,16 +144,19 @@ export const PopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>((p
     const { children, ...htmlProps } = props;
     const { context: floatingContext, ...context } = usePopoverContext();
     const ref = useMergeRefs([context.refs.setFloating, propRef]);
+
+    // When the popover is rendered in a separate root (e.g. outside the main DOM like Storybook)
+    // it doesn't inherit text color, so we set it explicitly.
     const theme = useTheme();
+    const themeVariant: keyof typeof intermediaryTheme =
+        theme.variant === 'standard' ? 'light' : theme.variant;
+
+    const color = intermediaryTheme[themeVariant]?.textDefault;
 
     if (!floatingContext.open) return null;
 
     const floatingProps = context.getFloatingProps(htmlProps);
 
-    // When the popover is rendered in a separate root (e.g. outside the main DOM like Storybook)
-    // it doesn't inherit text color, so we set it explicitly.
-    const color = intermediaryTheme[theme.variant as 'dark' | 'light'].textDefault;
-
     return (
         <FloatingPortal>
             <FloatingFocusManager context={floatingContext}>
@@ -178,14 +183,16 @@ export function Popover({
     isInitialOpen,
     placement,
     isOpen,
+    popoverOffset,
+    zIndex = zIndices.popover,
     children,
 }: PopoverProps & { children: React.ReactNode }) {
-    const popover = usePopover({ isInitialOpen, placement, isOpen });
+    const popover = usePopover({ isInitialOpen, placement, isOpen, popoverOffset });
 
     return (
         <PopoverContext.Provider value={popover}>
             <PopoverTrigger>{children}</PopoverTrigger>
-            <PopoverContent style={{ zIndex: zIndices.popover }}>{content}</PopoverContent>
+            <PopoverContent style={{ zIndex }}>{content}</PopoverContent>
         </PopoverContext.Provider>
     );
 }
diff --git a/packages/theme/src/zIndices.ts b/packages/theme/src/zIndices.ts
@@ -4,7 +4,6 @@
 export const zIndices = {
     windowControls: 100,
     tooltip: 60, // above all content to be always fully visible when toggled
-    popover: 55, // above other content to be fully visible
     guide: 50, // above MODAL to stay accessible when modal is open
     guideButton: 49, // below GUIDE to get covered by the guide when it is opening
 
@@ -14,6 +13,7 @@ export const zIndices = {
 
     modal: 40, // above other suite content to disable interacting with it
     legacyModal: 39, // below MODAL in case another modal overlaps it, e.g. ReconnectDevicePrompt
+    popover: 35,
     draggableComponent: 30, // sidebar, above other content to be visible when dragged, resized
     navigationBar: 30,
     expandableNavigationHeader: 21, // above EXPANDABLE_NAVIGATION to cover its box-shadow