fix(): bal-modal isClosable now hides close on top, fixes #806

baloise · Oct 28, 2022 · 122e90a · 122e90a
1 parent edaff93
commit 122e90a
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/packages/components/src/components/notice/bal-modal/bal-modal-header/bal-modal-header.tsx b/packages/components/src/components/notice/bal-modal/bal-modal-header/bal-modal-header.tsx
@@ -26,7 +26,14 @@ export class ModalHeader {
             <slot></slot>
           </h2>
         </div>
-        <bal-close class="bal-modal__header__close data-test-modal-close" onClick={this.closeHandler}></bal-close>
+        <bal-close
+          class={{
+            'bal-modal__header__close': true,
+            'data-test-modal-close': true,
+            'bal-modal__header--is-closable': !!this.parentModal?.isClosable,
+          }}
+          onClick={this.closeHandler}
+        ></bal-close>
       </Host>
     )
   }

diff --git a/packages/components/src/components/notice/bal-modal/bal-modal.sass b/packages/components/src/components/notice/bal-modal/bal-modal.sass
@@ -26,13 +26,16 @@ $modal-breakpoint: $tablet !default
       padding-right: 2.5rem
       line-height: 2rem
     +element(close)
+      display: none
       position: absolute
       right: 20px
       top: 24px
       min-width: 2rem
       max-width: 2rem
       min-height: 2rem
       max-height: 2rem
+    +modifier(is-closable)
+      display: block !important
 
   +element(container)
     position: fixed