fix(modal): change variable's name on modal to zindex (#617)

juntossomosmais · Nov 11, 2024 · 7d02f87 · 7d02f87
1 parent f35dfe5
commit 7d02f87
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/packages/core/src/components/modal/modal.scss b/packages/core/src/components/modal/modal.scss
@@ -1,12 +1,12 @@
 @import '~@atomium/scss-utils/index';
 
 :host {
-  --atom-modal-z-index: var(--zindex-1000);
+  --atom-modal-zindex: var(--zindex-1000);
 }
 
 .atom-modal {
   position: fixed;
-  z-index: var(--atom-modal-z-index) !important;
+  z-index: var(--atom-modal-zindex) !important;
 
   &__close {
     position: absolute;

diff --git a/packages/core/src/components/modal/stories/modal.args.ts b/packages/core/src/components/modal/stories/modal.args.ts
@@ -160,6 +160,14 @@ export const ModalStoryArgs = {
         category: Category.SLOTS,
       },
     },
+    '--atom-modal-zindex': {
+      description:
+        'The z-index of the modal, to change this value using CSS custom properties, change its value on root element. This needs to be done this way because the ion-modal is rendered on the body element.',
+      defaultValue: { summary: '--zindex-1000' },
+      table: {
+        category: Category.CSS_CUSTOM_PROPERTIES,
+      },
+    },
   },
 }
 

diff --git a/packages/core/src/components/steps-modal/stories/steps-modal.args.ts b/packages/core/src/components/steps-modal/stories/steps-modal.args.ts
@@ -152,6 +152,14 @@ export const ModalStoryArgs = {
         category: Category.SLOTS,
       },
     },
+    '--atom-modal-zindex': {
+      description:
+        'The z-index of the modal, to change this value using CSS custom properties, change its value on root element. This needs to be done this way because the ion-modal is rendered on the body element.',
+      defaultValue: { summary: '--zindex-1000' },
+      table: {
+        category: Category.CSS_CUSTOM_PROPERTIES,
+      },
+    },
   },
 }