fix(core/modal): figma - code mismatch (#1499)

Co-authored-by: Lukas Maurer <[email protected]>
Co-authored-by: Andreas Berliner <[email protected]>

.changeset/clever-rings-sneeze.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+fix(core/modal): figma - code mismatch

packages/core/component-doc.json

@@ -11736,7 +11736,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -11757,7 +11757,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         }
       ],

packages/core/src/components.d.ts

@@ -1676,11 +1676,11 @@ export namespace Components {
         /**
           * Icon of the Header
          */
-        "icon": string;
+        "icon"?: string;
         /**
           * Icon color
          */
-        "iconColor": string;
+        "iconColor"?: string;
     }
     interface IxModalLoading {
     }

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

@@ -14,5 +14,5 @@
   display: block;
   position: relative;
   overflow: auto;
-  padding: 0.25rem 0.75rem;
+  padding: 0 0.5rem 0.5rem;
 }

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

@@ -12,7 +12,6 @@
   @include ix-component;
   display: flex;
   padding: 0.5rem;
-  padding-bottom: 0rem;
   justify-content: flex-end;
   align-items: center;
   gap: 0.5rem;

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

@@ -6,21 +6,21 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 @import 'mixins/shadow-dom/component';
 
 :host {
   @include ix-component;
   display: flex;
-  padding: 0.5rem;
+  padding: 0.5rem 0 0.5rem 0.5rem;
   align-items: center;
-  align-self: stretch;
+  gap: 1rem;
 
-  .modal-close {
-    margin-left: auto;
-    margin-right: -1rem;
+  .modal-title {
+    flex-grow: 1;
   }
 
-  .modal-icon {
-    margin-right: 1rem;
+  .modal-close  {
+    align-self: flex-start;
   }
 }

packages/core/src/components/modal-header/modal-header.tsx

@@ -38,10 +38,10 @@ export class ModalHeader {
   /**
    * Icon of the Header
    */
-  @Prop() icon: string;
+  @Prop() icon?: string;
 
   @Watch('icon')
-  onIconChange(icon: string) {
+  onIconChange(icon?: string) {
     if (this.parentDialog) {
       if (icon) {
         this.parentDialog.classList.add('with-icon');
@@ -54,15 +54,15 @@ export class ModalHeader {
   /**
    * Icon color
    */
-  @Prop() iconColor: string;
+  @Prop() iconColor?: string;
 
   /**
    * Emits when close icon is clicked and closes the modal
    * Can be prevented, in which case only the event is triggered, and the modal remains open
    */
-  @Event() closeClick: EventEmitter<MouseEvent>;
+  @Event() closeClick!: EventEmitter<MouseEvent>;
 
-  private parentDialog: HTMLIxModalElement;
+  private parentDialog!: HTMLIxModalElement;
 
   componentDidLoad() {
     this.parentDialog = closestPassShadow(
@@ -85,21 +85,19 @@ export class ModalHeader {
     return (
       <Host>
         {this.icon ? (
-          <ix-icon
-            class={'modal-icon'}
-            name={this.icon}
-            color={this.iconColor}
-          ></ix-icon>
+          <ix-icon name={this.icon} color={this.iconColor} size="32"></ix-icon>
         ) : null}
-        <ix-typography format="h5">
-          <slot></slot>
-        </ix-typography>
+        <div class="modal-title">
+          <ix-typography format="h5">
+            <slot></slot>
+          </ix-typography>
+        </div>
         {!this.hideClose ? (
           <ix-icon-button
+            class="modal-close"
             onClick={(event) => this.onCloseClick(event)}
             ghost
             icon="close"
-            class={'modal-close'}
           ></ix-icon-button>
         ) : null}
       </Host>

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

@@ -139,6 +139,6 @@
 :host(.with-icon) {
   ::slotted(ix-modal-footer),
   ::slotted(ix-modal-content) {
-    margin-left: 2.5rem;
+    margin-left: 3rem;
   }
 }

packages/core/src/tests/modal/icon/index.html

@@ -17,8 +17,8 @@
   <body>
     <ix-modal>
       <ix-modal-header icon="rocket"
-        >Dialog title Dialog titleDialog titleDialog titleDialog titleDialog
-        titleDialog title</ix-modal-header
+        >Dialog title Dialog title Dialog title Dialog title Dialog title
+      </ix-modal-header
       >
       <ix-modal-content>
         My Content My Content My Content My Content My Content My Content My