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>
</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>
<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-field__mark" aria-hidden="true"></span>
</button>
<span>Option wählbar</span>
<span class="sg-radio-activatable-group__choices">
<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 1 wählen">
<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>
</label>
@@ -738,13 +748,31 @@
return;
}
const activatableOption = radio.closest('[data-component="radio-field"][data-activatable="true"]');
if (activatableOption) {
radio.setAttribute('aria-checked', 'true');
radio.classList.add('sg-form-active');
radio.classList.remove('sg-radio-field--inactive-selectable');
activatableOption.dataset.componentState = 'active';
const removeButton = activatableOption.querySelector('[data-radio-activate-remove]');
const activatableGroup = radio.closest('[data-activatable-radio-group="true"]');
if (activatableGroup) {
const radios = activatableGroup.querySelectorAll('.sg-radio-field');
const defaultRadio = radios[0];
const removeButton = activatableGroup.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) {
removeButton.hidden = false;
}
@@ -910,17 +938,19 @@
document.querySelectorAll('[data-radio-activate-remove]').forEach((removeButton) => {
removeButton.addEventListener('click', (event) => {
event.stopPropagation();
const option = removeButton.closest('[data-component="radio-field"][data-activatable="true"]');
const radio = option ? option.querySelector('.sg-radio-field') : null;
const option = removeButton.closest('[data-activatable-radio-group="true"]');
const radios = option ? option.querySelectorAll('.sg-radio-field') : null;
if (!option || !radio) {
if (!option || !radios || radios.length === 0) {
return;
}
option.dataset.componentState = 'inactive-selectable';
radio.setAttribute('aria-checked', 'false');
radio.classList.remove('sg-form-active');
radio.classList.add('sg-radio-field--inactive-selectable');
radios.forEach((radio) => {
radio.setAttribute('aria-checked', 'false');
radio.classList.remove('sg-form-active');
radio.classList.add('sg-radio-field--inactive-selectable');
});
removeButton.hidden = true;
});
});
styleguide.css
+12
View File
@@ -1297,6 +1297,18 @@ section + section {
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 {
color: var(--text-control-disabled);
opacity: var(--disabled-opacity);