fix(components): update card-control grid template and columns behaviour

swisspost · May 22, 2024 · fb0362a · fb0362a
1 parent c84c0a0
commit fb0362a
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/packages/components/src/components/post-card-control/post-card-control.scss b/packages/components/src/components/post-card-control/post-card-control.scss
@@ -29,7 +29,7 @@
 
   flex-basis: 100%;
   display: grid;
-  grid-template: 'input label icon' 'input content icon' / min-content auto min-content;
+  grid-template: 'input label icon' 'input content content' / min-content auto min-content;
   gap: 0 post.$size-mini;
   margin: 0;
   padding: post.$size-regular;
@@ -68,6 +68,10 @@
     color: inherit !important;
     pointer-events: none;
     transition: none;
+
+    &:not(:has(+ .card-control--icon)) {
+      grid-area: 1 / label / 1 / icon;
+    }
   }
 
   .card-control--description {

diff --git a/packages/components/src/components/post-card-control/post-card-control.tsx b/packages/components/src/components/post-card-control/post-card-control.tsx
@@ -61,6 +61,7 @@ export class PostCardControl {
   private control: HTMLInputElement;
   private controlId = `PostCardControl_${cardControlIds++}`;
   private initialChecked: boolean;
+  private hasIcon: boolean;
 
   @Element() host: HTMLPostCardControlElement;
 
@@ -350,6 +351,10 @@ export class PostCardControl {
     this.initialChecked = this.checked;
   }
 
+  componentWillRender() {
+    this.hasIcon = Boolean(this.host.querySelector('[slot="icon"]') || this.icon);
+  }
+
   render() {
     return (
       <Host data-version={version} onClick={this.cardClickHandler}>
@@ -395,9 +400,11 @@ export class PostCardControl {
             ) : null}
           </label>
 
-          <div class="card-control--icon">
-            <slot name="icon">{this.icon ? <post-icon name={this.icon}></post-icon> : null}</slot>
-          </div>
+          {this.hasIcon ? (
+            <div class="card-control--icon">
+              <slot name="icon">{this.icon ? <post-icon name={this.icon}></post-icon> : null}</slot>
+            </div>
+          ) : null}
 
           <div id={`${this.controlId}_content`} class="card-control--content">
             <slot></slot>

diff --git a/packages/styles/src/components/card-control.scss b/packages/styles/src/components/card-control.scss
@@ -28,7 +28,7 @@ fieldset {
   --post-card-control-input-bg: #{color.$white};
 
   display: grid;
-  grid-template: 'input label icon' 'input content icon' / min-content auto min-content;
+  grid-template: 'input label icon' 'input content content' / min-content auto min-content;
   gap: 0 spacing.$size-mini;
   position: relative;
   padding: spacing.$size-regular;
@@ -81,6 +81,10 @@ fieldset {
       position: relative;
       z-index: 2;
     }
+
+    &:not(:has(+ post-icon)) {
+      grid-area: 1 / label / 1 / icon;
+    }
   }
 
   .card-control--content {