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 `;