feat(components): add pulldown labels and activatable wrap behavior
This commit is contained in:
@@ -82,52 +82,58 @@
|
|||||||
<div class="sg-state-example">
|
<div class="sg-state-example">
|
||||||
<p class="sg-state-example__label sg-table-label">Komponente normal</p>
|
<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">
|
<label class="sg-labeled-input-row">
|
||||||
<!--
|
<span class="sg-label">Label</span>
|
||||||
Inactive selectable pulldowns use the same overlay behavior as active pulldowns.
|
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-state="inactive-selectable">
|
||||||
The option panel opens below the trigger and may be aligned left or right to remain visible inside the viewport.
|
<!--
|
||||||
-->
|
Inactive selectable pulldowns use the same overlay behavior as active pulldowns.
|
||||||
<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">
|
The option panel opens below the trigger and may be aligned left or right to remain visible inside the viewport.
|
||||||
Auswahl
|
-->
|
||||||
</button>
|
<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">
|
<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">
|
<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>
|
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||||
<span>Menüpunkt 1</span>
|
<span>Menüpunkt 1</span>
|
||||||
</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 2</span>
|
<span>Menüpunkt 2</span>
|
||||||
</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 3</span>
|
<span>Menüpunkt 3</span>
|
||||||
</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</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">
|
||||||
<span>Menüpunkt 5</span>
|
<span>Menüpunkt 5</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="sg-state-example">
|
<div class="sg-state-example">
|
||||||
<p class="sg-state-example__label sg-table-label">Variante aktivierbar</p>
|
<p class="sg-state-example__label sg-table-label">Variante aktivierbar</p>
|
||||||
|
|
||||||
<div class="sg-activatable-row">
|
<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">
|
<div class="sg-pulldown-activatable-header">
|
||||||
<span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
|
<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-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
|
<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--right">an</span>
|
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
|
||||||
<span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
|
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
|
||||||
</span>
|
<span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
|
||||||
</button>
|
</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">
|
<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">
|
<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>
|
||||||
<select class="sg-interaction-element sg-pulldown sg-pulldown--disabled" aria-label="Deaktivierter Pulldown" disabled data-component="pulldown" data-component-state="disabled">
|
<label class="sg-labeled-input-row">
|
||||||
<option>Nicht verfügbar</option>
|
<span class="sg-label">Label</span>
|
||||||
</select>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -811,6 +811,18 @@ section + section {
|
|||||||
max-width: var(--layout-input-field-max-width);
|
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-pulldown-demo__trigger,
|
||||||
#component-pulldown .sg-state-example > .sg-pulldown {
|
#component-pulldown .sg-state-example > .sg-pulldown {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -819,8 +831,35 @@ section + section {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#component-pulldown .sg-activatable-row {
|
#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%;
|
width: 100%;
|
||||||
max-width: var(--layout-input-field-max-width);
|
max-width: var(--layout-input-field-max-width);
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sg-input-component .sg-state-example {
|
.sg-input-component .sg-state-example {
|
||||||
@@ -862,6 +901,13 @@ section + section {
|
|||||||
min-width: 0;
|
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 {
|
#component-pulldown .sg-activatable-row {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
|||||||
Reference in New Issue
Block a user