From fb0362aa01a7b33165ac148f9f3189cf5adddf9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= <oliver.schuerch@post.ch>
Date: Wed, 22 May 2024 12:53:06 +0200
Subject: [PATCH] fix(components): update card-control grid template and
 columns behaviour

---
 .../post-card-control/post-card-control.scss        |  6 +++++-
 .../post-card-control/post-card-control.tsx         | 13 ++++++++++---
 packages/styles/src/components/card-control.scss    |  6 +++++-
 3 files changed, 20 insertions(+), 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
index 5220df0e36..df6630f9ff 100644
--- 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
index d5a7b06a18..8c2ce14a38 100644
--- 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
index 8302ad3372..9ab6ae8af5 100644
--- 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 {