fix(modal): use correct z-index variable, default footer align to flex-end #301

Author: m2rt

tedi/components/overlay/modal/modal.component.scss

@@ -2,6 +2,7 @@
 
 @mixin modal-heading($size) {
   .tedi-modal-header__head {
+
     h1,
     h2,
     h3,
@@ -13,12 +14,18 @@
   }
 }
 
-$modal-widths: (xs, sm, md, lg, xl);
+$modal-widths: (
+  xs,
+  sm,
+  md,
+  lg,
+  xl
+);
 
 .tedi-modal {
   position: fixed;
   inset: 0;
-  z-index: 1000;
+  z-index: var(--z-index-modal);
   display: none;
 
   &--open {
@@ -95,8 +102,7 @@ $modal-widths: (xs, sm, md, lg, xl);
   }
 
   tedi-modal-header {
-    padding: var(--_tedi-modal-heading-padding-y)
-      var(--_tedi-modal-heading-padding-x);
+    padding: var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x);
     border-bottom: var(--borders-01) solid var(--modal-border-inner);
 
     .tedi-modal-header__head {
@@ -121,8 +127,8 @@ $modal-widths: (xs, sm, md, lg, xl);
   tedi-modal-footer {
     display: flex;
     gap: var(--layout-grid-gutters-16);
-    padding: var(--_tedi-modal-footer-padding-y)
-      var(--_tedi-modal-footer-padding-x);
+    justify-content: flex-end;
+    padding: var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);
     border-top: var(--borders-01) solid var(--modal-border-inner);
   }
 }

tedi/components/overlay/modal/modal.stories.ts

@@ -174,7 +174,7 @@ export const Default: DefaultStory = {
             </tedi-select>
           </div>
         </tedi-modal-content>
-        <tedi-modal-footer style="justify-content: flex-end;">
+        <tedi-modal-footer>
           <button tedi-button variant="secondary" (click)="open = false">Cancel</button>
           <button tedi-button (click)="open = false">Continue</button>
         </tedi-modal-footer>
@@ -224,7 +224,7 @@ export const Size: StoryObj<ModalComponent> = {
             </tedi-select>
           </div>
         </tedi-modal-content>
-        <tedi-modal-footer style="justify-content: flex-end;">
+        <tedi-modal-footer>
           <button tedi-button variant="secondary" (click)="openSmall = false">Cancel</button>
           <button tedi-button (click)="openSmall = false">Continue</button>
         </tedi-modal-footer>
@@ -251,7 +251,7 @@ export const Size: StoryObj<ModalComponent> = {
             </tedi-select>
           </div>
         </tedi-modal-content>
-        <tedi-modal-footer style="justify-content: flex-end;">
+        <tedi-modal-footer>
           <button tedi-button variant="secondary" (click)="openDefault = false">Cancel</button>
           <button tedi-button (click)="openDefault = false">Continue</button>
         </tedi-modal-footer>
@@ -305,7 +305,7 @@ export const FooterVariants: StoryObj<ModalComponent> = {
             </tedi-select>
           </div>
         </tedi-modal-content>
-        <tedi-modal-footer style="justify-content: flex-end;">
+        <tedi-modal-footer>
           <button tedi-button variant="secondary" (click)="openDefault = false">Cancel</button>
           <button tedi-button (click)="openDefault = false">Continue</button>
         </tedi-modal-footer>