Skip to content

Commit

Permalink
Add z index const
Browse files Browse the repository at this point in the history
  • Loading branch information
cpcramer committed Jan 31, 2025
1 parent a642e6e commit 2a1017d
Show file tree
Hide file tree
Showing 4 changed files with 26 additions and 10 deletions.
4 changes: 3 additions & 1 deletion src/internal/components/primitives/Dialog.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { useTheme } from '@/internal/hooks/useTheme';
import { zIndex } from '@/styles/constants';
import { cn } from '@/styles/theme';
import type React from 'react';
import { useRef } from 'react';
Expand Down Expand Up @@ -43,7 +44,8 @@ export function Dialog({
<div
className={cn(
componentTheme,
'fixed inset-0 z-50 flex items-center justify-center',
zIndex.modal,
'fixed inset-0 flex items-center justify-center',
'bg-black/50 transition-opacity duration-200',
'fade-in animate-in duration-200',
)}
Expand Down
9 changes: 8 additions & 1 deletion src/internal/components/primitives/DropdownMenu.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { useTheme } from '@/internal/hooks/useTheme';
import { getHorizontalPosition } from '@/internal/utils/getHorizontalPosition';
import { zIndex } from '@/styles/constants';
import { cn } from '@/styles/theme';
import type React from 'react';
import { useCallback, useEffect, useRef } from 'react';
Expand Down Expand Up @@ -84,7 +85,13 @@ export function DropdownMenu({
}

const dropdownMenu = (
<div className={cn(componentTheme, 'pointer-events-none fixed z-50')}>
<div
className={cn(
componentTheme,
zIndex.dropdown,
'pointer-events-none fixed',
)}
>
<FocusTrap active={isOpen}>
<DismissableLayer onDismiss={onClose} triggerRef={trigger}>
<div
Expand Down
9 changes: 8 additions & 1 deletion src/internal/components/primitives/Popover.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { useTheme } from '@/internal/hooks/useTheme';
import { zIndex } from '@/styles/constants';
import { cn } from '@/styles/theme';
import type React from 'react';
import { useCallback, useEffect, useRef } from 'react';
Expand Down Expand Up @@ -169,7 +170,13 @@ export function Popover({
}

const popover = (
<div className={cn(componentTheme, 'pointer-events-none fixed z-50')}>
<div
className={cn(
componentTheme,
zIndex.dropdown,
'pointer-events-none fixed',
)}
>
<FocusTrap active={isOpen}>
<DismissableLayer onDismiss={onClose} triggerRef={trigger}>
<div
Expand Down
14 changes: 7 additions & 7 deletions src/styles/constants.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
export const zIndex = {
base: 0,
navigation: 1,
dropdown: 10,
tooltip: 20,
modal: 40,
notification: 50,
};
base: 'z-0',
navigation: 'z-1',
dropdown: 'z-10',
tooltip: 'z-20',
modal: 'z-40',
notification: 'z-50',
} as const;

0 comments on commit 2a1017d

Please sign in to comment.