add a default z index for overlays as a variable

jpmorgan-payments · Mar 14, 2024 · 54ad4f2 · 54ad4f2
1 parent fe2ac75
commit 54ad4f2
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 9 deletions.
diff --git a/embedded-components/src/components/ui/alert-dialog.tsx b/embedded-components/src/components/ui/alert-dialog.tsx
@@ -16,7 +16,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      'eb-fixed eb-inset-0 eb-z-50 eb-bg-black/80 eb- data-[state=open]:eb-animate-in data-[state=closed]:eb-animate-out data-[state=closed]:eb-fade-out-0 data-[state=open]:eb-fade-in-0',
+      'eb-fixed eb-inset-0 eb-z-overlay eb-bg-black/80 eb- data-[state=open]:eb-animate-in data-[state=closed]:eb-animate-out data-[state=closed]:eb-fade-out-0 data-[state=open]:eb-fade-in-0',
       className
     )}
     {...props}
@@ -34,7 +34,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        'eb-fixed eb-left-[50%] eb-top-[50%] eb-z-50 eb-grid eb-w-full eb-max-w-lg eb-translate-x-[-50%] eb-translate-y-[-50%] eb-gap-4 eb-border eb-border-border eb-bg-background eb-p-6 eb-shadow-lg eb-duration-200 data-[state=open]:eb-animate-in data-[state=closed]:eb-animate-out data-[state=closed]:eb-fade-out-0 data-[state=open]:eb-fade-in-0 data-[state=closed]:eb-zoom-out-95 data-[state=open]:eb-zoom-in-95 data-[state=closed]:eb-slide-out-to-left-1/2 data-[state=closed]:eb-slide-out-to-top-[48%] data-[state=open]:eb-slide-in-from-left-1/2 data-[state=open]:eb-slide-in-from-top-[48%] sm:eb-rounded-lg',
+        'eb-fixed eb-left-[50%] eb-top-[50%] eb-z-overlay eb-grid eb-w-full eb-max-w-lg eb-translate-x-[-50%] eb-translate-y-[-50%] eb-gap-4 eb-border eb-border-border eb-bg-background eb-p-6 eb-shadow-lg eb-duration-200 data-[state=open]:eb-animate-in data-[state=closed]:eb-animate-out data-[state=closed]:eb-fade-out-0 data-[state=open]:eb-fade-in-0 data-[state=closed]:eb-zoom-out-95 data-[state=open]:eb-zoom-in-95 data-[state=closed]:eb-slide-out-to-left-1/2 data-[state=closed]:eb-slide-out-to-top-[48%] data-[state=open]:eb-slide-in-from-left-1/2 data-[state=open]:eb-slide-in-from-top-[48%] sm:eb-rounded-lg',
         className
       )}
       {...props}

diff --git a/embedded-components/src/components/ui/dialog.tsx b/embedded-components/src/components/ui/dialog.tsx
@@ -19,7 +19,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'eb-fixed eb-inset-0 eb-z-[100] eb-bg-black/80 eb- data-[state=open]:eb-animate-in data-[state=closed]:eb-animate-out data-[state=closed]:eb-fade-out-0 data-[state=open]:eb-fade-in-0',
+      'eb-fixed eb-inset-0 eb-z-overlay eb-bg-black/80 eb- data-[state=open]:eb-animate-in data-[state=closed]:eb-animate-out data-[state=closed]:eb-fade-out-0 data-[state=open]:eb-fade-in-0',
       className
     )}
     {...props}
@@ -36,7 +36,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'eb-fixed eb-left-[50%] eb-top-[50%] eb-z-[100] eb-grid eb-w-full eb-max-w-lg eb-translate-x-[-50%] eb-translate-y-[-50%] eb-gap-4 eb-border eb-border-border eb-bg-background eb-p-6 eb-shadow-lg eb-duration-200 data-[state=open]:eb-animate-in data-[state=closed]:eb-animate-out data-[state=closed]:eb-fade-out-0 data-[state=open]:eb-fade-in-0 data-[state=closed]:eb-zoom-out-95 data-[state=open]:eb-zoom-in-95 data-[state=closed]:eb-slide-out-to-left-1/2 data-[state=closed]:eb-slide-out-to-top-[48%] data-[state=open]:eb-slide-in-from-left-1/2 data-[state=open]:eb-slide-in-from-top-[48%] sm:eb-rounded-lg',
+        'eb-fixed eb-left-[50%] eb-top-[50%] eb-z-overlay eb-grid eb-w-full eb-max-w-lg eb-translate-x-[-50%] eb-translate-y-[-50%] eb-gap-4 eb-border eb-border-border eb-bg-background eb-p-6 eb-shadow-lg eb-duration-200 data-[state=open]:eb-animate-in data-[state=closed]:eb-animate-out data-[state=closed]:eb-fade-out-0 data-[state=open]:eb-fade-in-0 data-[state=closed]:eb-zoom-out-95 data-[state=open]:eb-zoom-in-95 data-[state=closed]:eb-slide-out-to-left-1/2 data-[state=closed]:eb-slide-out-to-top-[48%] data-[state=open]:eb-slide-in-from-left-1/2 data-[state=open]:eb-slide-in-from-top-[48%] sm:eb-rounded-lg',
         className
       )}
       {...props}

diff --git a/embedded-components/src/components/ui/popover.tsx b/embedded-components/src/components/ui/popover.tsx
@@ -17,7 +17,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        'eb-z-50 eb-w-72 eb-rounded-md eb-border eb-border-border eb-bg-popover eb-p-4 eb-text-popover-foreground eb-shadow-md eb-outline-none data-[state=open]:eb-animate-in data-[state=closed]:eb-animate-out data-[state=closed]:eb-fade-out-0 data-[state=open]:eb-fade-in-0 data-[state=closed]:eb-zoom-out-95 data-[state=open]:eb-zoom-in-95 data-[side=bottom]:eb-slide-in-from-top-2 data-[side=left]:eb-slide-in-from-right-2 data-[side=right]:eb-slide-in-from-left-2 data-[side=top]:eb-slide-in-from-bottom-2',
+        'eb-z-overlay eb-w-72 eb-rounded-md eb-border eb-border-border eb-bg-popover eb-p-4 eb-text-popover-foreground eb-shadow-md eb-outline-none data-[state=open]:eb-animate-in data-[state=closed]:eb-animate-out data-[state=closed]:eb-fade-out-0 data-[state=open]:eb-fade-in-0 data-[state=closed]:eb-zoom-out-95 data-[state=open]:eb-zoom-in-95 data-[side=bottom]:eb-slide-in-from-top-2 data-[side=left]:eb-slide-in-from-right-2 data-[side=right]:eb-slide-in-from-left-2 data-[side=top]:eb-slide-in-from-bottom-2',
         className
       )}
       {...props}

diff --git a/embedded-components/src/components/ui/select.tsx b/embedded-components/src/components/ui/select.tsx
@@ -73,7 +73,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'eb-relative eb-z-[100] eb-max-h-96 eb-min-w-[8rem] eb-overflow-hidden eb-rounded-md eb-border eb-border-border eb-bg-popover eb-text-popover-foreground eb-shadow-md data-[state=open]:eb-animate-in data-[state=closed]:eb-animate-out data-[state=closed]:eb-fade-out-0 data-[state=open]:eb-fade-in-0 data-[state=closed]:eb-zoom-out-95 data-[state=open]:eb-zoom-in-95 data-[side=bottom]:eb-slide-in-from-top-2 data-[side=left]:eb-slide-in-from-right-2 data-[side=right]:eb-slide-in-from-left-2 data-[side=top]:eb-slide-in-from-bottom-2',
+        'eb-relative eb-z-overlay eb-max-h-96 eb-min-w-[8rem] eb-overflow-hidden eb-rounded-md eb-border eb-border-border eb-bg-popover eb-text-popover-foreground eb-shadow-md data-[state=open]:eb-animate-in data-[state=closed]:eb-animate-out data-[state=closed]:eb-fade-out-0 data-[state=open]:eb-fade-in-0 data-[state=closed]:eb-zoom-out-95 data-[state=open]:eb-zoom-in-95 data-[side=bottom]:eb-slide-in-from-top-2 data-[side=left]:eb-slide-in-from-right-2 data-[side=right]:eb-slide-in-from-left-2 data-[side=top]:eb-slide-in-from-bottom-2',
         position === 'popper' &&
           'data-[side=bottom]:eb-translate-y-1 data-[side=left]:eb--translate-x-1 data-[side=right]:eb-translate-x-1 data-[side=top]:eb--translate-y-1',
         className

diff --git a/embedded-components/src/shared/EBComponentsProvider/config.types.ts b/embedded-components/src/shared/EBComponentsProvider/config.types.ts
@@ -21,6 +21,7 @@ export type EBThemeVariables = {
   borderColor?: string;
   inputColor?: string;
   ringColor?: string;
+  zIndexOverlay?: number;
 };
 
 export type EBTheme = {

diff --git a/embedded-components/src/shared/EBComponentsProvider/convert-theme-to-css-variables.ts b/embedded-components/src/shared/EBComponentsProvider/convert-theme-to-css-variables.ts
@@ -31,6 +31,9 @@ const convertThemeVariablesToCssVariables = (
     '--eb-border': variables.borderColor,
     '--eb-input': variables.inputColor,
     '--eb-ring': variables.ringColor,
+    '--eb-z-overlay': variables.zIndexOverlay
+      ? String(variables.zIndexOverlay)
+      : undefined,
   };
 
   Object.keys(cssVariablesObject).forEach(

diff --git a/embedded-components/src/shared/EBComponentsProvider/defaultTheme.ts b/embedded-components/src/shared/EBComponentsProvider/defaultTheme.ts
@@ -4,6 +4,7 @@ export const defaultTheme: EBTheme = {
   colorScheme: 'system',
   variables: {
     borderRadius: '0.5rem',
+    zIndexOverlay: 100,
   },
   light: {
     backgroundColor: 'hsl(0.0% 100%)',

diff --git a/embedded-components/tailwind.config.js b/embedded-components/tailwind.config.js
@@ -71,9 +71,9 @@ module.exports = {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
       },
-      // zIndex: {
-      //   overlay: 'var(--'
-      // }
+      zIndex: {
+        overlay: 'var(--eb-z-overlay)',
+      },
     },
   },
   plugins: [require('tailwindcss-animate')],