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

Add activatable checkbox and radio variants with inactive opacity and remove action

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-19 11:05:17 +02:00
parent 0fa547cf70
commit 1a75bc6727
2 changed files with 74 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/interactive-elements.html
+70 -28
View File
@@ -390,23 +390,13 @@
<span>Standard Checkbox</span>
</label>
<label class="sg-checkbox-field-option sg-checkbox-field-option--inactive-selectable sg-body" data-component="checkbox-field" data-component-state="inactive-selectable">
<span class="sg-state-example__label sg-table-label">Variante aktivierbar: inaktiv</span>
<label class="sg-checkbox-field-option sg-checkbox-field-option--inactive-selectable sg-body" data-component="checkbox-field" data-component-state="inactive-selectable" data-activatable="true">
<span class="sg-state-example__label sg-table-label">Variante aktivierbar</span>
<button class="sg-checkbox-field sg-checkbox-field--inactive-selectable" type="button" role="checkbox" aria-checked="false" aria-label="Option wählen">
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
</button>
<span>Option nicht gewählt, aber auswählbar</span>
</label>
<label class="sg-checkbox-field-option sg-body" data-component="checkbox-field" data-component-state="active">
<span class="sg-state-example__label sg-table-label">Variante aktivierbar: aktiv</span>
<span class="sg-activatable-control">
<button class="sg-checkbox-field sg-form-active" type="button" role="checkbox" aria-checked="true" aria-label="Option gewählt">
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
</button>
<button class="sg-pulldown-panel__remove" type="button" aria-label="Checkbox entfernen">×</button>
</span>
<span>Option gewählt</span>
<span>Option wählbar</span>
<button class="sg-pulldown-panel__remove" type="button" aria-label="Checkbox entfernen" data-checkbox-activate-remove hidden>×</button>
</label>
<label class="sg-checkbox-field-option sg-checkbox-field-option--disabled sg-body" data-component="checkbox-field" data-component-state="disabled">
@@ -440,23 +430,13 @@
<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">
<span class="sg-state-example__label sg-table-label">Variante aktivierbar: inaktiv</span>
<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">
<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 nicht gewählt, aber auswählbar</span>
</label>
<label class="sg-checkbox-field-option sg-body" data-component="radio-field" data-component-state="active">
<span class="sg-state-example__label sg-table-label">Variante aktivierbar: aktiv</span>
<span class="sg-activatable-control">
<button class="sg-radio-field sg-form-active" type="button" role="radio" aria-checked="true" aria-label="Option gewählt">
<span class="sg-radio-field__mark" aria-hidden="true"></span>
</button>
<button class="sg-pulldown-panel__remove" type="button" aria-label="Radio-Auswahl entfernen">×</button>
</span>
<span>Option gewählt</span>
<span>Option wählbar</span>
<button class="sg-pulldown-panel__remove" type="button" aria-label="Radio-Auswahl entfernen" data-radio-activate-remove hidden>×</button>
</label>
<label class="sg-checkbox-field-option sg-checkbox-field-option--disabled sg-body" data-component="radio-field" data-component-state="disabled">
@@ -699,6 +679,19 @@
return;
}
const activatableOption = checkbox.closest('[data-component="checkbox-field"][data-activatable="true"]');
if (activatableOption) {
checkbox.setAttribute('aria-checked', 'true');
checkbox.classList.add('sg-form-active');
checkbox.classList.remove('sg-checkbox-field--inactive-selectable');
activatableOption.dataset.componentState = 'active';
const removeButton = activatableOption.querySelector('[data-checkbox-activate-remove]');
if (removeButton) {
removeButton.hidden = false;
}
return;
}
const nextState = checkbox.getAttribute('aria-checked') !== 'true';
checkbox.setAttribute('aria-checked', String(nextState));
@@ -745,6 +738,19 @@
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]');
if (removeButton) {
removeButton.hidden = false;
}
return;
}
const group = radio.closest('.sg-form-preview-area');
if (!group) {
return;
@@ -883,6 +889,42 @@
});
});
document.querySelectorAll('[data-checkbox-activate-remove]').forEach((removeButton) => {
removeButton.addEventListener('click', (event) => {
event.stopPropagation();
const option = removeButton.closest('[data-component="checkbox-field"][data-activatable="true"]');
const checkbox = option ? option.querySelector('.sg-checkbox-field') : null;
if (!option || !checkbox) {
return;
}
option.dataset.componentState = 'inactive-selectable';
checkbox.setAttribute('aria-checked', 'false');
checkbox.classList.remove('sg-form-active');
checkbox.classList.add('sg-checkbox-field--inactive-selectable');
removeButton.hidden = true;
});
});
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;
if (!option || !radio) {
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');
removeButton.hidden = true;
});
});
// Filter rows inside the opened pulldown start as inactive preselected rows.
// They are visually dimmed but remain operable; clicking or changing them activates the row.
document.querySelectorAll('[data-pulldown-filter-row]').forEach((row) => {
styleguide.css
+4
View File
@@ -1293,6 +1293,10 @@ section + section {
color: var(--text-control-default);
}
.sg-checkbox-field-option[data-activatable="true"][data-component-state="inactive-selectable"] {
opacity: var(--disabled-opacity);
}
.sg-checkbox-field-option--disabled {
color: var(--text-control-disabled);
opacity: var(--disabled-opacity);