Checkbox Group Checkbox addition fix (#837)

* Checkbox Group Checkbox addition fix

* Update src/checkbox-group.test.basics.ts

Co-authored-by: clintcs <[email protected]>

---------

Co-authored-by: clintcs <[email protected]>

Author: ynotdraw

.changeset/thick-zoos-hug.md

@@ -0,0 +1,5 @@
+---
+'@crowdstrike/glide-core': patch
+---
+
+Checkboxes added to a Checkbox Group after the initial render now follow the design guidelines.

src/checkbox-group.test.basics.ts

@@ -66,6 +66,28 @@ it('does not include in its `value` disabled checkboxes that are checked', async
   expect(checkboxes[1]?.checked).to.be.true;
 });
 
+it('sets `privateVariant` on Checkboxes added after initial render', async () => {
+  const host = await fixture<GlideCoreCheckboxGroup>(
+    html`<glide-core-checkbox-group label="Label">
+      <glide-core-checkbox label="One" value="one"></glide-core-checkbox>
+      <glide-core-checkbox label="Two" value="two"></glide-core-checkbox>
+    </glide-core-checkbox-group>`,
+  );
+
+  const checkbox = document.createElement('glide-core-checkbox');
+  checkbox.label = 'Three';
+  checkbox.value = 'three';
+
+  host.append(checkbox);
+
+  await host.updateComplete;
+
+  const checkboxes = host.querySelectorAll('glide-core-checkbox');
+
+  expect(checkboxes.length).to.equal(3);
+  expect(checkboxes[2]?.privateVariant).to.equal('minimal');
+});
+
 it('throws when `label` is empty', async () => {
   const spy = sinon.spy();
 

src/checkbox-group.ts

@@ -222,7 +222,6 @@ export default class GlideCoreCheckboxGroup
     );
 
     for (const checkbox of this.#checkboxElements) {
-      checkbox.privateVariant = 'minimal';
       checkbox.addEventListener('blur', this.#onCheckboxBlur.bind(this));
 
       // When `value` is set on initial render, its setter is called before
@@ -595,6 +594,10 @@ export default class GlideCoreCheckboxGroup
   }
 
   #onDefaultSlotChange() {
+    for (const checkbox of this.#checkboxElements) {
+      checkbox.privateVariant = 'minimal';
+    }
+
     this.#value = this.#checkboxElements
       .filter(
         ({ checked, disabled, value }) => checked && !disabled && value !== '',