Merge branch 'fix/modal' into 'main'

fix(core/modal): update styling

See merge request siemens-ix/siemens-ix!59

packages/angular-test-app/src/preview-examples/modal.ts

@@ -27,6 +27,7 @@ import { ModalService } from '@siemens/ix-angular';
         <div class="modal-header">
           Message headline
           <ix-icon-button
+            data-button-close
             ghost
             icon="close"
             class="dismiss-modal"

packages/core/component-doc.json

@@ -4095,9 +4095,7 @@
       "docs": "<!--\nSPDX-FileCopyrightText: 2022 Siemens AG\n\nSPDX-License-Identifier: MIT\n-->",
       "docsTags": [],
       "encapsulation": "none",
-      "dependents": [
-        "my-component"
-      ],
+      "dependents": [],
       "dependencies": [
         "ix-menu-item",
         "ix-dropdown"
@@ -4106,9 +4104,6 @@
         "ix-menu": [
           "ix-menu-item",
           "ix-dropdown"
-        ],
-        "my-component": [
-          "ix-menu"
         ]
       },
       "props": [
@@ -8548,18 +8543,8 @@
       "docsTags": [],
       "encapsulation": "scoped",
       "dependents": [],
-      "dependencies": [
-        "ix-menu"
-      ],
-      "dependencyGraph": {
-        "my-component": [
-          "ix-menu"
-        ],
-        "ix-menu": [
-          "ix-menu-item",
-          "ix-dropdown"
-        ]
-      },
+      "dependencies": [],
+      "dependencyGraph": {},
       "props": [],
       "methods": [],
       "events": [],

packages/core/scss/components/_modal.scss

@@ -9,11 +9,21 @@
 
 @import './mixins/fonts';
 
+.modal {
+  --bs-modal-footer-gap: 1rem;
+  --bs-modal-box-shadow: var(--theme-modal--box-shadow);
+}
+
 .modal-header {
   @include text-default-title;
   padding: 0;
   padding-bottom: $tiny-space;
   border: none;
+  align-items: flex-start;
+
+  [data-close-button] {
+    margin-left: 1rem;
+  }
 }
 
 .modal-body {
@@ -23,5 +33,9 @@
 .modal-footer {
   border-top: none;
   padding: 0;
-  padding-block-start: $large-space;
+  padding-block-start: 2rem;
+
+  > * {
+    margin: 0 0 0 calc(var(--bs-modal-footer-gap) * 0.5);
+  }
 }

packages/core/scss/theme/classic-dark/_sizes.scss

@@ -41,6 +41,11 @@ $classic-dark-sizes: (
     0.5rem 0 1rem #000,
   ),
   modal--border-thickness: 1px,
+  modal--box-shadow: (
+    0 12px 16px rgba(0, 0, 0, 0.1),
+    0 4px 8px rgba(0, 0, 0, 0.1),
+    0 0 2px rgba(0, 0, 0, 0.1),
+  ),
   switch-thumb--box-shadow: none,
   tile--border-radius: 0.25rem,
   tile--box-shadow: (

packages/core/scss/theme/classic-light/_sizes.scss

@@ -41,6 +41,11 @@ $classic-light-sizes: (
     0.5rem 0 1rem rgba(0, 0, 0, 0.2),
   ),
   modal--border-thickness: 1px,
+  modal--box-shadow: (
+    0 12px 16px rgba(0, 0, 0, 0.1),
+    0 4px 8px rgba(0, 0, 0, 0.1),
+    0 0 2px rgba(0, 0, 0, 0.1),
+  ),
   switch-thumb--box-shadow: none,
   tile--border-radius: 0.25rem,
   tile--box-shadow: (

packages/core/src/components/modal/modal.scss

@@ -26,6 +26,7 @@
     }
 
     &.backdrop {
+      background-color: var(--theme-color-lightbox);
       backdrop-filter: blur(4px);
       transition: none;
 
@@ -48,7 +49,7 @@
     }
 
     .modal-content {
-      //@include box-shadow(4);
+      box-shadow: var(--theme-modal--box-shadow);
       flex-direction: row;
       background-color: var(--theme-modal--background);
       border: var(--modal--border-thickness) solid

packages/core/src/components/my-component/example-modal.tsx

@@ -31,6 +31,7 @@ export class ModalExample {
           <div class="modal-header">
             Message headline
             <ix-icon-button
+              data-close-button
               ghost
               icon="close"
               onClick={() => this.dismiss()}

packages/core/src/components/my-component/my-component.tsx

@@ -16,10 +16,6 @@ import { Component, h, Host } from '@stencil/core';
 })
 export class MyComponent {
   render() {
-    return (
-      <Host>
-        <ix-menu enableToggleTheme={true}></ix-menu>
-      </Host>
-    );
+    return <Host></Host>;
   }
 }

packages/documentation/docs/auto-generated/previews/angular/modal.md

@@ -35,6 +35,7 @@ import { ModalService } from '@siemens/ix-angular';
         <div class="modal-header">
           Message headline
           <ix-icon-button
+            data-button-close
             ghost
             icon="close"
             class="dismiss-modal"

packages/documentation/docs/auto-generated/previews/react/modal.md

@@ -16,11 +16,11 @@ SPDX-License-Identifier: MIT
  */
 
 import {
-    IxButton,
-    IxIconButton,
-    Modal,
-    ModalRef,
-    showModal
+  IxButton,
+  IxIconButton,
+  Modal,
+  ModalRef,
+  showModal,
 } from '@siemens/ix-react';
 import { useRef } from 'react';
 
@@ -39,6 +39,7 @@ function CustomModal() {
       <div className="modal-header">
         Message headline
         <IxIconButton
+          data-button-close
           ghost
           icon="close"
           onClick={() => dismiss()}

packages/documentation/docs/auto-generated/previews/web-component/modal.md

@@ -20,6 +20,7 @@ SPDX-License-Identifier: MIT
     <div class="modal-header">
       Message headline
       <ix-icon-button
+        data-button-close
         ghost
         icon="close"
         class="dismiss-modal"

packages/documentation/static/webcomponent-examples/modal.html

@@ -35,6 +35,7 @@
         <div class="modal-header">
           Message headline
           <ix-icon-button
+            data-button-close
             ghost
             icon="close"
             class="dismiss-modal"

packages/react-test-app/src/preview-examples/modal.tsx

@@ -8,11 +8,11 @@
  */
 
 import {
-    IxButton,
-    IxIconButton,
-    Modal,
-    ModalRef,
-    showModal
+  IxButton,
+  IxIconButton,
+  Modal,
+  ModalRef,
+  showModal,
 } from '@siemens/ix-react';
 import { useRef } from 'react';
 
@@ -31,6 +31,7 @@ function CustomModal() {
       <div className="modal-header">
         Message headline
         <IxIconButton
+          data-button-close
           ghost
           icon="close"
           onClick={() => dismiss()}