From 06360237977fd4850a29b3f927922cfe57b0a495 Mon Sep 17 00:00:00 2001
From: konnorrogers <konnor5456@gmail.com>
Date: Tue, 22 Oct 2024 16:46:17 -0400
Subject: [PATCH] fix checkbox layout shift

---
 src/components/checkbox/checkbox.styles.ts |  4 ++++
 src/components/checkbox/checkbox.ts        | 21 ++++++---------------
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/src/components/checkbox/checkbox.styles.ts b/src/components/checkbox/checkbox.styles.ts
index 829eded88..59b026e74 100644
--- a/src/components/checkbox/checkbox.styles.ts
+++ b/src/components/checkbox/checkbox.styles.ts
@@ -72,6 +72,10 @@ export default css`
     width: 100%;
   }
 
+  .checkbox__icon--invisible {
+    visibility: hidden;
+  }
+
   .checkbox__checked-icon,
   .checkbox__indeterminate-icon {
     display: inline-flex;
diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts
index 608a723c5..23335f422 100644
--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@@ -212,6 +212,11 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
   render() {
     const hasHelpTextSlot = isServer ? true : this.hasSlotController.test('help-text');
     const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    const isIndeterminate = !this.checked && this.indeterminate
+
+    const iconName = isIndeterminate ? "indeterminate" : "check"
+    const iconState = isIndeterminate ? "indeterminate" : "check"
+    const iconVisible = this.checked || this.indeterminate
 
     //
     // NOTE: we use a `<div>` around the label slot because of this Chrome bug.
@@ -265,21 +270,7 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
               @focus=${this.handleFocus}
             />
 
-            ${this.checked
-              ? html`
-                  <wa-icon part="checked-icon" class="checkbox__checked-icon" library="system" name="check"></wa-icon>
-                `
-              : html``}
-            ${!this.checked && this.indeterminate
-              ? html`
-                  <wa-icon
-                    part="indeterminate-icon"
-                    class="checkbox__indeterminate-icon"
-                    library="system"
-                    name="indeterminate"
-                  ></wa-icon>
-                `
-              : html``}
+            <wa-icon part=${`${iconState}-icon`} class=${`checkbox__${iconState}-icon ${iconVisible ? "" : "checkbox__icon--invisible"}`} library="system" name=${iconName}></wa-icon>
           </span>
 
           <div part="label" class="checkbox__label">