update radio size when group size changes

docs/resources/changelog.md

@@ -6,6 +6,11 @@ Components with the <sl-badge variant="warning" pill>Experimental</sl-badge> bad
 
 New versions of Shoelace are released as-needed and generally occur when a critical mass of changes have accumulated. At any time, you can see what's coming in the next release by visiting [next.shoelace.style](https://next.shoelace.style).
 
+## Next
+
+- Fixed a bug where changing the size of `<sl-radio-group>` wouldn't update the size of child elements
+- Improved the docs to more clearly explain sizing radios and radio buttons
+
 ## 2.4.0
 
 - Added the `discover()` function to the experimental autoloader's exports [#1236](https://github.com/shoelace-style/shoelace/pull/1236)

src/components/radio-group/radio-group.test.ts

@@ -278,6 +278,25 @@ describe('when a size is applied', () => {
     expect(radio1.size).to.equal('large');
     expect(radio2.size).to.equal('large');
   });
+
+  it('should update the size of all radio buttons when size changes', async () => {
+    const radioGroup = await fixture<SlRadioGroup>(html`
+      <sl-radio-group size="small">
+        <sl-radio-button id="radio-1" value="1"></sl-radio-button>
+        <sl-radio-button id="radio-2" value="2"></sl-radio-button>
+      </sl-radio-group>
+    `);
+    const [radio1, radio2] = radioGroup.querySelectorAll('sl-radio-button')!;
+
+    expect(radio1.size).to.equal('small');
+    expect(radio2.size).to.equal('small');
+
+    radioGroup.size = 'large';
+    await radioGroup.updateComplete;
+
+    expect(radio1.size).to.equal('large');
+    expect(radio2.size).to.equal('large');
+  });
 });
 
 describe('when the value changes', () => {

src/components/radio-group/radio-group.ts

@@ -199,7 +199,12 @@ export default class SlRadioGroup extends ShoelaceElement implements ShoelaceFor
     }
   }
 
-  private handleSlotChange() {
+  private handleInvalid(event: Event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+
+  private syncRadios() {
     if (customElements.get('sl-radio') || customElements.get('sl-radio-button')) {
       const radios = this.getAllRadios();
 
@@ -232,22 +237,22 @@ export default class SlRadioGroup extends ShoelaceElement implements ShoelaceFor
       }
     } else {
       // Rerun this handler when <sl-radio> or <sl-radio-button> is registered
-      customElements.whenDefined('sl-radio').then(() => this.handleSlotChange());
-      customElements.whenDefined('sl-radio-button').then(() => this.handleSlotChange());
+      customElements.whenDefined('sl-radio').then(() => this.syncRadios());
+      customElements.whenDefined('sl-radio-button').then(() => this.syncRadios());
     }
   }
 
-  private handleInvalid(event: Event) {
-    this.formControlController.setValidity(false);
-    this.formControlController.emitInvalidEvent(event);
-  }
-
   private updateCheckedRadio() {
     const radios = this.getAllRadios();
     radios.forEach(radio => (radio.checked = radio.value === this.value));
     this.formControlController.setValidity(this.validity.valid);
   }
 
+  @watch('size', { waitUntilFirstUpdate: true })
+  handleSizeChange() {
+    this.syncRadios();
+  }
+
   @watch('value')
   handleValueChange() {
     if (this.hasUpdated) {
@@ -310,7 +315,7 @@ export default class SlRadioGroup extends ShoelaceElement implements ShoelaceFor
       <slot
         @click=${this.handleRadioClick}
         @keydown=${this.handleKeyDown}
-        @slotchange=${this.handleSlotChange}
+        @slotchange=${this.syncRadios}
         role="presentation"
       ></slot>
     `;