feat: APP-2761 - Introduce z-index component customisations for the Dropdown and Dialogs components

CHANGELOG.md

@@ -12,6 +12,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 -   Implement animations for `Dialog` and `DialogAlert` components
 -   Implement `DaoAvatar` and `MemberAvatar` module components
 -   Implement `OdsModulesProvider` for using wagmi hooks on modules components
+-   Introduce component customisations for the z-index property of the `Dropdown` and `Dialogs` components
 
 ### Changed
 

index.css

@@ -1,4 +1,4 @@
-@import "./src/theme/index.css";
+@import "./src";
 
 @tailwind base;
 @tailwind components;

src/core/components/dialogs/dialog/dialogRoot/dialogRoot.tsx

@@ -74,7 +74,11 @@ export const DialogRoot: React.FC<IDialogRootProps> = (props) => {
                 {rootProps.open && (
                     <Portal forceMount key="portal">
                         <Overlay
-                            className={classNames('fixed inset-0 bg-modal-overlay backdrop-blur-md', overlayClassName)}
+                            className={classNames(
+                                'fixed inset-0 bg-modal-overlay backdrop-blur-md',
+                                'z-[var(--ods-dialog-overlay-z-index)]',
+                                overlayClassName,
+                            )}
                             asChild
                         >
                             <motion.div
@@ -88,6 +92,7 @@ export const DialogRoot: React.FC<IDialogRootProps> = (props) => {
                             className={classNames(
                                 'fixed inset-x-2 bottom-2 mx-auto max-h-[calc(100vh-80px)] lg:bottom-auto lg:top-[120px] lg:max-h-[calc(100vh-200px)]',
                                 'flex max-w-[480px] flex-col rounded-xl border border-neutral-100 bg-neutral-0 shadow-neutral-md md:min-w-[480px]',
+                                'z-[var(--ods-dialog-content-z-index)]',
                                 containerClassName,
                             )}
                             onCloseAutoFocus={onCloseAutoFocus}

src/core/components/dialogs/dialog/dialogRoot/index.css

@@ -0,0 +1,7 @@
+:root {
+  /* Z-index property of the dialog overlay */
+  --ods-dialog-overlay-z-index: auto;
+
+  /* Z-index property of the dialog content */
+  --ods-dialog-content-z-index: auto;
+}

src/core/components/dialogs/dialog/index.css

@@ -0,0 +1 @@
+@import "./dialogRoot";

src/core/components/dialogs/dialogAlert/dialogAlertRoot/dialogAlertRoot.tsx

@@ -82,7 +82,11 @@ export const DialogAlertRoot: React.FC<IDialogAlertRootProps> = (props) => {
                 {rootProps.open && (
                     <Portal forceMount key="portal">
                         <Overlay
-                            className={classNames('fixed inset-0 bg-modal-overlay backdrop-blur-md', overlayClassName)}
+                            className={classNames(
+                                'fixed inset-0 bg-modal-overlay backdrop-blur-md',
+                                'z-[var(--ods-dialog-alert-overlay-z-index)]',
+                                overlayClassName,
+                            )}
                             asChild
                         >
                             <motion.div
@@ -96,6 +100,7 @@ export const DialogAlertRoot: React.FC<IDialogAlertRootProps> = (props) => {
                             className={classNames(
                                 'fixed inset-x-2 bottom-2 mx-auto max-h-[calc(100vh-80px)] lg:bottom-auto lg:top-[120px] lg:max-h-[calc(100vh-200px)]',
                                 'flex max-w-[480px] flex-col rounded-xl border border-neutral-100 bg-neutral-0 shadow-neutral-md md:min-w-[480px]',
+                                'z-[var(--ods-dialog-alert-content-z-index)]',
                                 containerClassName,
                             )}
                             onCloseAutoFocus={onCloseAutoFocus}

src/core/components/dialogs/dialogAlert/dialogAlertRoot/index.css

@@ -0,0 +1,7 @@
+:root {
+  /* Z-index property of the dialog overlay */
+  --ods-dialog-alert-overlay-z-index: auto;
+
+  /* Z-index property of the dialog content */
+  --ods-dialog-alert-content-z-index: auto;
+}

src/core/components/dialogs/dialogAlert/index.css

@@ -0,0 +1 @@
+@import "./dialogAlertRoot";

src/core/components/dialogs/index.css

@@ -0,0 +1,2 @@
+@import "./dialog";
+@import "./dialogAlert";

src/core/components/dropdown/dropdownContainer.tsx

@@ -91,6 +91,7 @@ export const DropdownContainer: React.FC<IDropdownContainerProps> = (props) => {
                     className={classNames(
                         'flex min-w-48 flex-col gap-1.5 overflow-auto rounded-xl border border-neutral-100 bg-neutral-0 p-2 shadow-neutral-sm',
                         'max-h-[var(--radix-dropdown-menu-content-available-height)] max-w-[var(--radix-dropdown-menu-content-available-width)]',
+                        'z-[var(--ods-dropdown-container-content-z-index)]',
                     )}
                     onCloseAutoFocus={(event) => event.preventDefault()}
                     align={align}

src/core/components/dropdown/index.css

@@ -0,0 +1,4 @@
+:root {
+  /* Z-index property of the content insdie the dropdown container */
+  --ods-dropdown-container-content-z-index: auto;
+}

src/core/components/index.css

@@ -0,0 +1,2 @@
+@import "./dialogs";
+@import "./dropdown";

src/core/index.css

@@ -0,0 +1 @@
+@import "./components";

src/index.css

@@ -0,0 +1,2 @@
+@import "./core";
+@import "./theme";