diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 55764fb8a..72c73cbb7 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -6,6 +6,11 @@ Components with the Experimental 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 `` 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)
diff --git a/src/components/radio-group/radio-group.test.ts b/src/components/radio-group/radio-group.test.ts
index 124a0c841..760eca0bb 100644
--- a/src/components/radio-group/radio-group.test.ts
+++ b/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(html`
+
+
+
+
+ `);
+ 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', () => {
diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts
index 4c22b55a8..ca6d9a501 100644
--- a/src/components/radio-group/radio-group.ts
+++ b/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 or 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
`;