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

Fix pulldown activatable variant behavior and restore normal pulldown appearance

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-19 11:01:50 +02:00
parent 981de5e058
commit fb2a893bf5
2 changed files with 42 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/interactive-elements.html
+42 -15
View File
@@ -118,17 +118,20 @@
</div>
<div class="sg-state-example">
<p class="sg-state-example__label sg-table-label">Variante aktivierbar: inaktiv</p>
<p class="sg-state-example__label sg-table-label">Variante aktivierbar</p>
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="multiple" data-component="pulldown" data-component-state="inactive-selectable">
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="multiple" data-component="pulldown" data-component-state="inactive-selectable" data-activatable="true">
<!--
The number in brackets shows the count of currently selected options inside this pulldown.
Initial state: no option is selected, therefore the trigger starts as inactive selectable.
Clicking an option activates the pulldown and shows the selected count in brackets.
-->
<button class="sg-interaction-element sg-pulldown sg-pulldown--inactive-selectable sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown ohne aktive Auswahl" data-label-base="Auswahl" data-component-part="pulldown-trigger">
Auswahl
</button>
<span class="sg-activatable-control">
<button class="sg-interaction-element sg-pulldown sg-pulldown--inactive-selectable sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown ohne aktive Auswahl" data-label-base="Auswahl" data-component-part="pulldown-trigger">
Auswahl
</button>
<button class="sg-pulldown-panel__remove" type="button" aria-label="Pulldown-Filter entfernen" data-pulldown-activate-remove hidden>×</button>
</span>
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown" data-component-part="pulldown-panel">
<!--
@@ -201,16 +204,6 @@
</div>
</div>
<div class="sg-state-example">
<p class="sg-state-example__label sg-table-label">Variante aktivierbar: aktiv</p>
<span class="sg-activatable-control">
<button class="sg-interaction-element sg-pulldown sg-pulldown--selected sg-form-active sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown mit aktiver Auswahl" data-label-base="Auswahl" data-component-part="pulldown-trigger">
Auswahl (1)
</button>
<button class="sg-pulldown-panel__remove" type="button" aria-label="Pulldown-Filter entfernen">×</button>
</span>
</div>
<div class="sg-state-example">
<p class="sg-state-example__label sg-table-label">form-disabled</p>
<select class="sg-interaction-element sg-pulldown sg-pulldown--disabled" aria-label="Deaktivierter Pulldown" disabled data-component="pulldown" data-component-state="disabled">
@@ -766,6 +759,7 @@
const updatePulldownSelectionState = (demo) => {
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
const selectableOptions = demo.querySelectorAll('[data-pulldown-option]');
const activatableRemove = demo.querySelector('[data-pulldown-activate-remove]');
if (!trigger || selectableOptions.length === 0) {
return;
@@ -793,6 +787,9 @@
trigger.classList.toggle('sg-pulldown--selected', selectedCount > 0);
trigger.classList.toggle('sg-form-active', selectedCount > 0);
trigger.classList.toggle('sg-pulldown--inactive-selectable', selectedCount === 0);
if (activatableRemove) {
activatableRemove.hidden = selectedCount === 0;
}
trigger.setAttribute(
'aria-label',
selectedCount > 0 ? 'Pulldown mit aktiver Auswahl' : 'Pulldown ohne aktive Auswahl'
@@ -815,6 +812,16 @@
event.stopPropagation();
const nextState = demo.dataset.open !== 'true';
if (demo.dataset.activatable === 'true') {
const activatableRemove = demo.querySelector('[data-pulldown-activate-remove]');
trigger.classList.add('sg-pulldown--selected', 'sg-form-active');
trigger.classList.remove('sg-pulldown--inactive-selectable');
trigger.setAttribute('aria-label', 'Pulldown mit aktiver Auswahl');
if (activatableRemove) {
activatableRemove.hidden = false;
}
}
document.querySelectorAll('.sg-pulldown-demo').forEach((otherDemo) => {
const otherTrigger = otherDemo.querySelector('.sg-pulldown-demo__trigger');
otherDemo.dataset.open = 'false';
@@ -856,6 +863,26 @@
});
});
document.querySelectorAll('[data-pulldown-activate-remove]').forEach((removeButton) => {
removeButton.addEventListener('click', (event) => {
event.stopPropagation();
const demo = removeButton.closest('.sg-pulldown-demo');
const trigger = demo ? demo.querySelector('.sg-pulldown-demo__trigger') : null;
if (!demo || !trigger) {
return;
}
demo.querySelectorAll('[data-pulldown-option]').forEach((option) => {
option.setAttribute('aria-checked', 'false');
});
demo.dataset.componentState = 'inactive-selectable';
demo.dataset.open = 'false';
trigger.setAttribute('aria-expanded', 'false');
updatePulldownSelectionState(demo);
});
});
// 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
-1
View File
@@ -608,7 +608,6 @@ section + section {
.sg-pulldown--inactive-selectable {
background-color: var(--surface-control-inactive);
color: var(--text-control-default);
opacity: var(--disabled-opacity);
}
.sg-pulldown--disabled {