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

feat(components): add pulldown labels and activatable wrap behavior

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-25 07:11:40 +02:00
parent 793878c92a
commit 102e391977
2 changed files with 92 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/interactive-elements.html
+46 -37
View File
@@ -82,52 +82,58 @@
<div class="sg-state-example">
<p class="sg-state-example__label sg-table-label">Komponente normal</p>
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-state="inactive-selectable">
<!--
Inactive selectable pulldowns use the same overlay behavior as active pulldowns.
The option panel opens below the trigger and may be aligned left or right to remain visible inside the viewport.
-->
<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-component-part="pulldown-trigger">
Auswahl
</button>
<label class="sg-labeled-input-row">
<span class="sg-label">Label</span>
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-state="inactive-selectable">
<!--
Inactive selectable pulldowns use the same overlay behavior as active pulldowns.
The option panel opens below the trigger and may be aligned left or right to remain visible inside the viewport.
-->
<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-component-part="pulldown-trigger">
Auswahl
</button>
<div class="sg-pulldown-panel" aria-label="Geöffnetes inaktives Pulldown" data-component-part="pulldown-panel">
<ul class="sg-pulldown-option-list" aria-label="Verfügbare Optionen im inaktiven Pulldown">
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
<span>Menüpunkt 1</span>
</li>
<div class="sg-pulldown-panel" aria-label="Geöffnetes inaktives Pulldown" data-component-part="pulldown-panel">
<ul class="sg-pulldown-option-list" aria-label="Verfügbare Optionen im inaktiven Pulldown">
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
<span>Menüpunkt 1</span>
</li>
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
<span>Menüpunkt 2</span>
</li>
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
<span>Menüpunkt 2</span>
</li>
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
<span>Menüpunkt 3</span>
</li>
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
<span>Menüpunkt 3</span>
</li>
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
<span>Menüpunkt 4</span>
</li>
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
<span>Menüpunkt 4</span>
</li>
<li class="sg-pulldown-option sg-pulldown-option--disabled">
<span>Menüpunkt 5</span>
</li>
</ul>
<li class="sg-pulldown-option sg-pulldown-option--disabled">
<span>Menüpunkt 5</span>
</li>
</ul>
</div>
</div>
</div>
</label>
</div>
<div class="sg-state-example">
<p class="sg-state-example__label sg-table-label">Variante aktivierbar</p>
<div class="sg-activatable-row">
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung: aus" data-activation-target="component-pulldown-activatable">
<span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
<span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
</span>
</button>
<div class="sg-pulldown-activatable-header">
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung: aus" data-activation-target="component-pulldown-activatable">
<span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
<span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
</span>
</button>
<span class="sg-label">Label</span>
</div>
<div class="sg-pulldown-demo" id="component-pulldown-activatable" data-open="false" data-align="left" data-selection-mode="multiple" data-component="pulldown" data-component-state="inactive-selectable" data-activatable="true">
<!--
@@ -215,9 +221,12 @@
<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">
<option>Nicht verfügbar</option>
</select>
<label class="sg-labeled-input-row">
<span class="sg-label">Label</span>
<select class="sg-interaction-element sg-pulldown sg-pulldown--disabled" aria-label="Deaktivierter Pulldown" disabled data-component="pulldown" data-component-state="disabled">
<option>Nicht verfügbar</option>
</select>
</label>
</div>
</div>
styleguide.css
+46
View File
@@ -811,6 +811,18 @@ section + section {
max-width: var(--layout-input-field-max-width);
}
#component-pulldown .sg-labeled-input-row {
width: 100%;
max-width: none;
}
#component-pulldown .sg-labeled-input-row .sg-pulldown,
#component-pulldown .sg-labeled-input-row .sg-pulldown-demo {
width: 100%;
min-width: 0;
max-width: var(--layout-input-field-max-width);
}
#component-pulldown .sg-pulldown-demo__trigger,
#component-pulldown .sg-state-example > .sg-pulldown {
width: 100%;
@@ -819,8 +831,35 @@ section + section {
}
#component-pulldown .sg-activatable-row {
display: grid;
grid-template-columns: 1fr;
align-items: start;
row-gap: var(--spacing-small);
width: 100%;
}
#component-pulldown .sg-pulldown-activatable-header {
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: var(--spacing-large);
width: 100%;
justify-content: start;
}
#component-pulldown .sg-pulldown-activatable-header .sg-mode-toggle {
grid-column: 1;
}
#component-pulldown .sg-pulldown-activatable-header .sg-label {
grid-column: 2;
min-width: 0;
}
#component-pulldown .sg-activatable-row .sg-pulldown-demo {
width: 100%;
max-width: var(--layout-input-field-max-width);
min-width: 0;
}
.sg-input-component .sg-state-example {
@@ -862,6 +901,13 @@ section + section {
min-width: 0;
}
#component-pulldown .sg-labeled-input-row .sg-pulldown,
#component-pulldown .sg-labeled-input-row .sg-pulldown-demo {
width: 100%;
min-width: 0;
max-width: 100%;
}
#component-pulldown .sg-activatable-row {
width: 100%;
max-width: 100%;