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

Pulldown: move stable trigger width to generic component rules

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-29 14:55:18 +02:00
parent c1fb1a74a2
commit bc522af2a5
2 changed files with 22 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/interactive-elements.html
+1 -28
View File
@@ -111,7 +111,7 @@
</li> </li>
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option> <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
<span>Menüpunkt 4 mit sehr langem Optionstext zur Verifikation von Umbruch und Panelbreite im geöffneten Zustand</span> <span>Menüpunkt 4</span>
</li> </li>
<li class="sg-pulldown-option sg-pulldown-option--disabled"> <li class="sg-pulldown-option sg-pulldown-option--disabled">
@@ -186,33 +186,6 @@
</div> </div>
</div> </div>
<div class="sg-state-example">
<p class="sg-state-example__label sg-table-label">form-active / selected (lang)</p>
<div 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="active">
<button class="sg-interaction-element sg-pulldown sg-pulldown--selected sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown mit aktiver Auswahl" data-component-part="pulldown-trigger">
Sehr langer ausgewählter Wert mit bewusst überlanger Bezeichnung für die Ellipsis-Verifikation im geschlossenen Trigger
</button>
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown mit langem Wert" data-component-part="pulldown-panel">
<ul class="sg-pulldown-option-list" aria-label="Verfügbare Optionen mit langen Texten">
<li class="sg-pulldown-option sg-pulldown-option--selected" role="checkbox" aria-checked="true" data-pulldown-option>
<span>Sehr langer ausgewählter Wert mit bewusst überlanger Bezeichnung für die Ellipsis-Verifikation im geschlossenen Trigger</span>
</li>
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
<span>Lange Alternative mit mehreren Worten zur Prüfung von Umbruch, Lesbarkeit und stabiler Triggerbreite</span>
</li>
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
<span>Kurz</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="sg-state-example"> <div class="sg-state-example">
<p class="sg-state-example__label sg-table-label">form-disabled</p> <p class="sg-state-example__label sg-table-label">form-disabled</p>
<label class="sg-labeled-input-row"> <label class="sg-labeled-input-row">
styles/10-components-interactive-elements.css
+21
View File
@@ -206,6 +206,20 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.sg-pulldown-demo[data-component-context="form"],
.sg-pulldown-demo[data-component-context="overlay"] {
width: 100%;
min-width: 0;
max-width: var(--layout-input-field-max-width);
}
.sg-pulldown-demo[data-component-context="form"] .sg-pulldown-demo__trigger,
.sg-pulldown-demo[data-component-context="overlay"] .sg-pulldown-demo__trigger {
width: 100%;
min-width: 0;
max-width: var(--layout-input-field-max-width);
}
.sg-pulldown--selected { .sg-pulldown--selected {
background-color: var(--surface-control-active); background-color: var(--surface-control-active);
color: var(--text-control-default); color: var(--text-control-default);
@@ -223,6 +237,13 @@
opacity: var(--disabled-opacity); opacity: var(--disabled-opacity);
} }
.sg-labeled-input-row .sg-pulldown-demo,
.sg-labeled-input-row .sg-pulldown-demo .sg-pulldown {
width: 100%;
min-width: 0;
max-width: var(--layout-input-field-max-width);
}
.sg-pulldown--disabled { .sg-pulldown--disabled {
background-color: var(--surface-control-disabled); background-color: var(--surface-control-disabled);
color: var(--text-control-disabled); color: var(--text-control-disabled);