From 9a7947debd92de53b0207c55fd714c5c06dea3e7 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 25 Aug 2025 14:30:59 -0400 Subject: [PATCH] fix radio group styles; closes #1178 (#1360) --- .../docs/docs/resources/changelog.md | 1 + .../components/radio-group/radio-group.css | 14 +---- .../src/components/radio-group/radio-group.ts | 10 +-- .../webawesome/src/components/radio/radio.css | 61 +++++++++++++------ .../webawesome/src/components/radio/radio.ts | 1 - 5 files changed, 46 insertions(+), 41 deletions(-) diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md index 41ab9ec31..6a9b80dfb 100644 --- a/packages/webawesome/docs/docs/resources/changelog.md +++ b/packages/webawesome/docs/docs/resources/changelog.md @@ -31,6 +31,7 @@ Components with the Experimental badge sh - Fixed a bug in `` that caused it to expand/collapse when clicking on interactive elements in the summary [issue:1252] - Fixed `` to have `static` positioning by default and `relative` positioning only when used with `` [pr:1346] - Fixed spacing in `` when both clear and password toggle icons are present [issue:1325] +- Fixed a bug in `` and `` where changing appearances dynamically would render incorrectly [issue:1178] - Fixed a bug in `` that prevented the value from changing when assigning non-string values to `value` [issue:1323] ## 3.0.0-beta.4 diff --git a/packages/webawesome/src/components/radio-group/radio-group.css b/packages/webawesome/src/components/radio-group/radio-group.css index a1922647c..8b60d8ab2 100644 --- a/packages/webawesome/src/components/radio-group/radio-group.css +++ b/packages/webawesome/src/components/radio-group/radio-group.css @@ -18,31 +18,19 @@ margin-inline-start: var(--wa-form-control-required-content-offset); } -.button-group { - display: flex; -} - [part~='form-control-input'] { display: flex; flex-direction: column; flex-wrap: wrap; - gap: 0.75em; + gap: 0; /* Radios handle their own spacing */ } /* Horizontal */ :host([orientation='horizontal']) [part~='form-control-input'] { flex-direction: row; - gap: 1em; } /* Help text */ [part~='hint'] { margin-block-start: 0.5em; } - -/* Radios have the "button" appearance */ -:host fieldset.has-radio-buttons { - [part~='form-control-input'] { - gap: 0; - } -} diff --git a/packages/webawesome/src/components/radio-group/radio-group.ts b/packages/webawesome/src/components/radio-group/radio-group.ts index cbcba6684..7e39a0872 100644 --- a/packages/webawesome/src/components/radio-group/radio-group.ts +++ b/packages/webawesome/src/components/radio-group/radio-group.ts @@ -57,8 +57,6 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement { private readonly hasSlotController = new HasSlotController(this, 'hint', 'label'); - @state() hasRadioButtons = false; - @query('slot:not([name])') defaultSlot: HTMLSlotElement; /** @@ -197,11 +195,9 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement { private async syncRadioElements() { const radios = this.getAllRadios(); - let hasRadioButtons = false; - // Add data attributes to support styling + // Set positioning data attributes and properties radios.forEach((radio, index) => { - if (radio.appearance === 'button') hasRadioButtons = true; radio.setAttribute('size', this.size); radio.toggleAttribute('data-wa-radio-horizontal', this.orientation !== 'vertical'); radio.toggleAttribute('data-wa-radio-vertical', this.orientation === 'vertical'); @@ -213,9 +209,6 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement { (radio as WaRadio).forceDisabled = this.disabled; }); - // If at least one radio button exists, we assume it's a radio button group - this.hasRadioButtons = hasRadioButtons; - await Promise.all( radios.map(async radio => { await radio.updateComplete; @@ -349,7 +342,6 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement { 'form-control': true, 'form-control-radio-group': true, 'form-control-has-label': hasLabel, - 'has-radio-buttons': this.hasRadioButtons, })} role="radiogroup" aria-labelledby="label" diff --git a/packages/webawesome/src/components/radio/radio.css b/packages/webawesome/src/components/radio/radio.css index 4a7d7493a..617b297ad 100644 --- a/packages/webawesome/src/components/radio/radio.css +++ b/packages/webawesome/src/components/radio/radio.css @@ -31,6 +31,41 @@ margin-block-start: 0.5em; } +/* Default spacing for default appearance radios */ +:host([appearance='default']) { + margin-block: 0.375em; /* Half of the original 0.75em gap on each side */ +} + +:host([appearance='default'][data-wa-radio-horizontal]) { + margin-block: 0; + margin-inline: 0.5em; /* Half of the original 1em gap on each side */ +} + +/* Remove margin from first/last items to prevent extra space */ +:host([appearance='default'][data-wa-radio-first]) { + margin-block-start: 0; + margin-inline-start: 0; +} + +:host([appearance='default'][data-wa-radio-last]) { + margin-block-end: 0; + margin-inline-end: 0; +} + +/* Button appearance have no spacing, they get handled by the overlap margins below */ +:host([appearance='button']) { + margin: 0; + align-items: center; + min-height: var(--wa-form-control-height); + background-color: var(--wa-color-surface-default); + border: var(--wa-form-control-border-width) var(--wa-form-control-border-style) var(--wa-form-control-border-color); + border-radius: var(--wa-border-radius-m); + padding: 0 var(--wa-form-control-padding-inline); + transition: + background-color var(--wa-transition-fast), + border-color var(--wa-transition-fast); +} + /* Default appearance */ :host([appearance='default']) { .control { @@ -66,6 +101,13 @@ } } +/* Button appearance */ +:host([appearance='button']) { + .control { + display: none; + } +} + /* Checked */ :host(:state(checked)) .control { color: var(--checked-icon-color); @@ -85,23 +127,6 @@ cursor: not-allowed; } -/* Button appearance */ -:host([appearance='button']) { - align-items: center; - min-height: var(--wa-form-control-height); - background-color: var(--wa-color-surface-default); - border: var(--wa-form-control-border-width) var(--wa-form-control-border-style) var(--wa-form-control-border-color); - border-radius: var(--wa-border-radius-m); - padding: 0 var(--wa-form-control-padding-inline); - transition: - background-color var(--wa-transition-fast), - border-color var(--wa-transition-fast); - - .control { - display: none; - } -} - /* Horizontal grouping - remove inner border radius */ :host([appearance='button'][data-wa-radio-horizontal][data-wa-radio-inner]) { border-radius: 0; @@ -153,7 +178,7 @@ outline-offset: var(--wa-focus-ring-offset); } -/* Remove inner borders and handle overlap */ +/* Button overlap margins */ :host([appearance='button'][data-wa-radio-horizontal]:not([data-wa-radio-first])) { margin-inline-start: calc(-1 * var(--wa-form-control-border-width)); } diff --git a/packages/webawesome/src/components/radio/radio.ts b/packages/webawesome/src/components/radio/radio.ts index e1c05753e..6b79faa21 100644 --- a/packages/webawesome/src/components/radio/radio.ts +++ b/packages/webawesome/src/components/radio/radio.ts @@ -111,7 +111,6 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement { // We override `setValue` because we don't want to set form values from here. We want to do that in "RadioGroup" itself. } - // Update the handleClick method (around line 75) private handleClick = () => { if (!this.disabled && !this.forceDisabled) { this.checked = true;