gitea_admin/Styleguide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update activatable radio variant to horizontal two-option group with shared remove

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-19 11:08:31 +02:00
parent 1a75bc6727
commit 7457dd34ee
2 changed files with 60 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/interactive-elements.html
+48 -18
View File
@@ -430,12 +430,22 @@
<span>Standard Radio</span> <span>Standard Radio</span>
</label> </label>
<label class="sg-checkbox-field-option sg-checkbox-field-option--inactive-selectable sg-body" data-component="radio-field" data-component-state="inactive-selectable" data-activatable="true"> <label class="sg-checkbox-field-option sg-checkbox-field-option--inactive-selectable sg-body sg-radio-activatable-group" data-component="radio-field" data-component-state="inactive-selectable" data-activatable="true" data-activatable-radio-group="true">
<span class="sg-state-example__label sg-table-label">Variante aktivierbar</span> <span class="sg-state-example__label sg-table-label">Variante aktivierbar</span>
<button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="Option wählen"> <span class="sg-radio-activatable-group__choices">
<span class="sg-radio-field__mark" aria-hidden="true"></span> <span class="sg-radio-activatable-group__choice">
</button> <button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="Option 1 wählen">
<span>Option wählbar</span> <span class="sg-radio-field__mark" aria-hidden="true"></span>
</button>
<span>Option 1</span>
</span>
<span class="sg-radio-activatable-group__choice">
<button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="Option 2 wählen">
<span class="sg-radio-field__mark" aria-hidden="true"></span>
</button>
<span>Option 2</span>
</span>
</span>
<button class="sg-pulldown-panel__remove" type="button" aria-label="Radio-Auswahl entfernen" data-radio-activate-remove hidden>×</button> <button class="sg-pulldown-panel__remove" type="button" aria-label="Radio-Auswahl entfernen" data-radio-activate-remove hidden>×</button>
</label> </label>
@@ -738,13 +748,31 @@
return; return;
} }
const activatableOption = radio.closest('[data-component="radio-field"][data-activatable="true"]'); const activatableGroup = radio.closest('[data-activatable-radio-group="true"]');
if (activatableOption) { if (activatableGroup) {
radio.setAttribute('aria-checked', 'true'); const radios = activatableGroup.querySelectorAll('.sg-radio-field');
radio.classList.add('sg-form-active'); const defaultRadio = radios[0];
radio.classList.remove('sg-radio-field--inactive-selectable'); const removeButton = activatableGroup.querySelector('[data-radio-activate-remove]');
activatableOption.dataset.componentState = 'active';
const removeButton = activatableOption.querySelector('[data-radio-activate-remove]'); if (activatableGroup.dataset.componentState === 'inactive-selectable' && defaultRadio) {
radios.forEach((otherRadio) => {
otherRadio.setAttribute('aria-checked', String(otherRadio === defaultRadio));
otherRadio.classList.remove('sg-radio-field--inactive-selectable');
otherRadio.classList.toggle('sg-form-active', otherRadio === defaultRadio);
});
activatableGroup.dataset.componentState = 'active';
if (removeButton) {
removeButton.hidden = false;
}
return;
}
radios.forEach((otherRadio) => {
otherRadio.setAttribute('aria-checked', String(otherRadio === radio));
otherRadio.classList.remove('sg-radio-field--inactive-selectable');
otherRadio.classList.toggle('sg-form-active', otherRadio === radio);
});
activatableGroup.dataset.componentState = 'active';
if (removeButton) { if (removeButton) {
removeButton.hidden = false; removeButton.hidden = false;
} }
@@ -910,17 +938,19 @@
document.querySelectorAll('[data-radio-activate-remove]').forEach((removeButton) => { document.querySelectorAll('[data-radio-activate-remove]').forEach((removeButton) => {
removeButton.addEventListener('click', (event) => { removeButton.addEventListener('click', (event) => {
event.stopPropagation(); event.stopPropagation();
const option = removeButton.closest('[data-component="radio-field"][data-activatable="true"]'); const option = removeButton.closest('[data-activatable-radio-group="true"]');
const radio = option ? option.querySelector('.sg-radio-field') : null; const radios = option ? option.querySelectorAll('.sg-radio-field') : null;
if (!option || !radio) { if (!option || !radios || radios.length === 0) {
return; return;
} }
option.dataset.componentState = 'inactive-selectable'; option.dataset.componentState = 'inactive-selectable';
radio.setAttribute('aria-checked', 'false'); radios.forEach((radio) => {
radio.classList.remove('sg-form-active'); radio.setAttribute('aria-checked', 'false');
radio.classList.add('sg-radio-field--inactive-selectable'); radio.classList.remove('sg-form-active');
radio.classList.add('sg-radio-field--inactive-selectable');
});
removeButton.hidden = true; removeButton.hidden = true;
}); });
}); });
styleguide.css
+12
View File
@@ -1297,6 +1297,18 @@ section + section {
opacity: var(--disabled-opacity); opacity: var(--disabled-opacity);
} }
.sg-radio-activatable-group__choices {
display: inline-flex;
align-items: center;
gap: var(--spacing-small);
}
.sg-radio-activatable-group__choice {
display: inline-flex;
align-items: center;
gap: var(--spacing-small);
}
.sg-checkbox-field-option--disabled { .sg-checkbox-field-option--disabled {
color: var(--text-control-disabled); color: var(--text-control-disabled);
opacity: var(--disabled-opacity); opacity: var(--disabled-opacity);