feat(Modal): [BLA-803] Add slot for icons in modal header

otto-de · Jul 11, 2024 · ac21728 · ac21728
1 parent 5709fa4
commit ac21728
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 18 deletions.
diff --git a/packages/core-components/src/components/modal/modal.scss b/packages/core-components/src/components/modal/modal.scss
@@ -53,8 +53,18 @@
       align-items: center;
       margin-bottom: var(--b2b-size-space-75);
 
-      b2b-icon {
-        padding-left: 8px;
+      &-left {
+        display: flex;
+        justify-content: flex-start;
+
+        b2b-headline {
+          padding-right: 8px;
+        }
+      }
+
+      &-right {
+        display: flex;
+        justify-content: flex-end;
       }
     }
 

diff --git a/packages/core-components/src/components/modal/modal.tsx b/packages/core-components/src/components/modal/modal.tsx
@@ -161,22 +161,26 @@ export class ModalComponent {
               [`b2b-modal__dialog--${this.variant}`]: true,
             }}>
             <div class="b2b-modal__dialog__header">
-              <b2b-headline align="center" size="200" noMargin={true}>
-                {this.heading}
-              </b2b-headline>
-              <slot name="header-icon"></slot>
-              <button
-                type="button"
-                class="b2b-modal__dialog__close"
-                onMouseEnter={this.toggleIconHover}
-                onMouseLeave={this.toggleIconHover}
-                onClick={this.handleClickDismiss}
-                ref={el => (this.closeButton = el)}>
-                <b2b-icon
-                  clickable
-                  icon="b2b_icon-close"
-                  color={this.iconHover ? 'primary' : 'secondary'}></b2b-icon>
-              </button>
+              <div class="b2b-modal__dialog__header-left">
+                <b2b-headline align="center" size="200" noMargin={true}>
+                  {this.heading}
+                </b2b-headline>
+                <slot name="header-icon"></slot>
+              </div>
+              <div class="b2b-modal__dialog__header-right">
+                <button
+                  type="button"
+                  class="b2b-modal__dialog__close"
+                  onMouseEnter={this.toggleIconHover}
+                  onMouseLeave={this.toggleIconHover}
+                  onClick={this.handleClickDismiss}
+                  ref={el => (this.closeButton = el)}>
+                  <b2b-icon
+                    clickable
+                    icon="b2b_icon-close"
+                    color={this.iconHover ? 'primary' : 'secondary'}></b2b-icon>
+                </button>
+              </div>
             </div>
             <div class="b2b-modal__dialog__body">
               <slot></slot>

diff --git a/packages/core-components/src/html/status.html b/packages/core-components/src/html/status.html
@@ -92,6 +92,7 @@
           backdrop-dismiss
           esc-dismiss="false">
           <div>This is a test modal</div>
+          <b2b-icon slot="header-icon" icon="b2b_icon-info"></b2b-icon>
           <b2b-paragraph slot="footer-left">* Mandatory</b2b-paragraph>
           <b2b-button id="modal-close-button" slot="footer-right"
             >Close</b2b-button