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

Unify activatable pulldown state handling and remove double-toggle legacy

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-25 07:49:31 +02:00
parent 825091cb28
commit 0868ec8fe0
1 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/interactive-elements.html
+14 -7
View File
@@ -704,11 +704,6 @@
if (isActive && !hasSelectedOption) { if (isActive && !hasSelectedOption) {
options[0].setAttribute('aria-checked', 'true'); options[0].setAttribute('aria-checked', 'true');
} }
options.forEach((option) => {
option.classList.toggle('sg-checkbox-field--inactive-selectable', !isActive);
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');
updatePulldownSelectionState(target); updatePulldownSelectionState(target);
@@ -840,6 +835,9 @@
if (checkbox.disabled) { if (checkbox.disabled) {
return; return;
} }
if (checkbox.matches('[data-pulldown-option]')) {
return;
}
const activatableOption = checkbox.closest('[data-component="checkbox-field"][data-activatable="true"]'); const activatableOption = checkbox.closest('[data-component="checkbox-field"][data-activatable="true"]');
if (activatableOption) { if (activatableOption) {
@@ -926,6 +924,7 @@
const updatePulldownSelectionState = (demo) => { const updatePulldownSelectionState = (demo) => {
const trigger = demo.querySelector('.sg-pulldown-demo__trigger'); const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
const selectableOptions = demo.querySelectorAll('[data-pulldown-option]'); const selectableOptions = demo.querySelectorAll('[data-pulldown-option]');
const isActivatableInactive = demo.dataset.activatable === 'true' && demo.dataset.componentState !== 'active';
if (!trigger || selectableOptions.length === 0) { if (!trigger || selectableOptions.length === 0) {
return; return;
@@ -936,22 +935,30 @@
}).length; }).length;
selectableOptions.forEach((option) => { selectableOptions.forEach((option) => {
const isSelected = option.getAttribute('aria-checked') === 'true';
const optionRow = option.closest('.sg-pulldown-option'); const optionRow = option.closest('.sg-pulldown-option');
if (!optionRow) { if (!optionRow) {
if (option.classList.contains('sg-checkbox-field')) {
option.classList.toggle('sg-form-active', !isActivatableInactive && isSelected);
option.classList.toggle('sg-checkbox-field--inactive-selectable', isActivatableInactive || !isSelected);
}
return; return;
} }
optionRow.classList.toggle( optionRow.classList.toggle(
'sg-pulldown-option--selected', 'sg-pulldown-option--selected',
option.getAttribute('aria-checked') === 'true' isSelected
); );
if (option.classList.contains('sg-checkbox-field')) {
option.classList.toggle('sg-form-active', !isActivatableInactive && isSelected);
option.classList.toggle('sg-checkbox-field--inactive-selectable', isActivatableInactive || !isSelected);
}
}); });
const labelBase = trigger.dataset.labelBase || 'Auswahl'; const labelBase = trigger.dataset.labelBase || 'Auswahl';
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';
const isActivatableInactive = demo.dataset.activatable === 'true' && demo.dataset.componentState !== 'active';
const showActiveState = !isActivatableInactive && (selectedCount > 0 || isActivatableActive); const showActiveState = !isActivatableInactive && (selectedCount > 0 || isActivatableActive);
trigger.classList.toggle('sg-pulldown--selected', showActiveState); trigger.classList.toggle('sg-pulldown--selected', showActiveState);
trigger.classList.toggle('sg-form-active', showActiveState); trigger.classList.toggle('sg-form-active', showActiveState);