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

Enforce inactive pulldown visuals while preserving selection

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-25 07:44:01 +02:00
parent 9e97501b5c
commit 825091cb28
1 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/interactive-elements.html
+7 -5
View File
@@ -707,7 +707,7 @@
options.forEach((option) => { options.forEach((option) => {
option.classList.toggle('sg-checkbox-field--inactive-selectable', !isActive); option.classList.toggle('sg-checkbox-field--inactive-selectable', !isActive);
option.classList.toggle('sg-form-active', option.getAttribute('aria-checked') === 'true'); option.classList.toggle('sg-form-active', isActive && option.getAttribute('aria-checked') === 'true');
}); });
target.dataset.open = 'false'; target.dataset.open = 'false';
trigger.setAttribute('aria-expanded', 'false'); trigger.setAttribute('aria-expanded', 'false');
@@ -951,12 +951,14 @@
trigger.textContent = selectedCount > 0 ? `${labelBase} (${selectedCount})` : labelBase; trigger.textContent = selectedCount > 0 ? `${labelBase} (${selectedCount})` : labelBase;
const isActivatableActive = demo.dataset.activatable === 'true' && demo.dataset.componentState === 'active'; const isActivatableActive = demo.dataset.activatable === 'true' && demo.dataset.componentState === 'active';
trigger.classList.toggle('sg-pulldown--selected', selectedCount > 0 || isActivatableActive); const isActivatableInactive = demo.dataset.activatable === 'true' && demo.dataset.componentState !== 'active';
trigger.classList.toggle('sg-form-active', selectedCount > 0 || isActivatableActive); const showActiveState = !isActivatableInactive && (selectedCount > 0 || isActivatableActive);
trigger.classList.toggle('sg-pulldown--inactive-selectable', selectedCount === 0 && !isActivatableActive); trigger.classList.toggle('sg-pulldown--selected', showActiveState);
trigger.classList.toggle('sg-form-active', showActiveState);
trigger.classList.toggle('sg-pulldown--inactive-selectable', !showActiveState);
trigger.setAttribute( trigger.setAttribute(
'aria-label', 'aria-label',
selectedCount > 0 || isActivatableActive ? 'Pulldown mit aktiver Auswahl' : 'Pulldown ohne aktive Auswahl' showActiveState ? 'Pulldown mit aktiver Auswahl' : 'Pulldown ohne aktive Auswahl'
); );
}; };