From 23b1c4b47dd671183ca83ef2b7f781b3dbbb3934 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Wed, 14 Oct 2026 13:15:40 +0200 Subject: [PATCH] Make multiselect pulldown desktop match mobile --- patterns/multiselektions-pulldown.html | 27 ----- semantic-tokens-patterns.html | 1 - styles/01-foundations.css | 1 - styles/25-patterns-form-sections.css | 143 ++++++++----------------- 4 files changed, 47 insertions(+), 125 deletions(-) diff --git a/patterns/multiselektions-pulldown.html b/patterns/multiselektions-pulldown.html index 6d0e1f1..3e5f62a 100644 --- a/patterns/multiselektions-pulldown.html +++ b/patterns/multiselektions-pulldown.html @@ -390,28 +390,6 @@ ); }; - const updateMultiselectLabelAlignment = () => { - document.querySelectorAll('.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel').forEach((panel) => { - const labels = panel.querySelectorAll( - '.sg-slider-row[data-activatable="true"] > .sg-label, .sg-radio-activatable-group > .sg-label, [data-pulldown-filter-row] > .sg-pulldown-panel__label' - ); - - let maxWidth = 0; - labels.forEach((label) => { - const width = Math.ceil(label.scrollWidth || label.getBoundingClientRect().width); - if (width > maxWidth) { - maxWidth = width; - } - }); - - if (maxWidth > 0) { - panel.style.setProperty('--sg-multiselect-label-column-width', `${maxWidth}px`); - } else { - panel.style.removeProperty('--sg-multiselect-label-column-width'); - } - }); - }; - document.querySelectorAll('.sg-slider-row').forEach((row) => { const slider = row.querySelector('.sg-slider'); const valueOutput = row.querySelector('.sg-slider-value'); @@ -500,9 +478,6 @@ }); }); - updateMultiselectLabelAlignment(); - window.addEventListener('resize', updateMultiselectLabelAlignment); - document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => { const trigger = demo.querySelector('.sg-pulldown-demo__trigger'); @@ -535,8 +510,6 @@ return; } - updateMultiselectLabelAlignment(); - const panel = demo.querySelector('.sg-pulldown-panel'); if (!panel) { return; diff --git a/semantic-tokens-patterns.html b/semantic-tokens-patterns.html index 83b8520..fc49664 100644 --- a/semantic-tokens-patterns.html +++ b/semantic-tokens-patterns.html @@ -129,7 +129,6 @@

Multiselektions-Pulldown

-
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
layout-multiselect-pulldown-label-column-width-fallbackmax-contentFallback-Breite der gemeinsamen Labelspalte im Panel, bis die längste Labelbreite per Pattern-Logik ermittelt wurde.

Overlay Card

diff --git a/styles/01-foundations.css b/styles/01-foundations.css index 5f2fcd4..a7fa680 100644 --- a/styles/01-foundations.css +++ b/styles/01-foundations.css @@ -82,7 +82,6 @@ --layout-pulldown-panel-form-mobile-width: 90%; --layer-pulldown-panel: var(--dimension-layer-pulldown-panel); --layout-multiselect-pulldown-panel-desktop-width: var(--dimension-multiselect-pulldown-panel-desktop-width); - --layout-multiselect-pulldown-label-column-width-fallback: max-content; --layout-input-label-width: var(--dimension-input-label-width); --layout-input-field-desktop-width: var(--dimension-input-field-desktop-width); --layout-input-field-max-width: var(--dimension-input-field-max-width); diff --git a/styles/25-patterns-form-sections.css b/styles/25-patterns-form-sections.css index d1a864e..17aff8d 100644 --- a/styles/25-patterns-form-sections.css +++ b/styles/25-patterns-form-sections.css @@ -93,21 +93,43 @@ margin-top: var(--spacing-large); } +.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-options-row__left > .sg-pulldown-demo { + flex: 1 1 100%; + min-width: 0; +} + +.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-options-row__left > .sg-pulldown-demo .sg-pulldown { + width: 100%; +} + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel { - --sg-multiselect-label-column-width: var(--layout-multiselect-pulldown-label-column-width-fallback); + width: min( + var(--layout-pulldown-panel-form-mobile-width), + calc(100vw - (2 * var(--spacing-large))) + ); + min-width: 0; + max-width: calc(100vw - (2 * var(--spacing-large))); +} + +.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel .sg-form-sections-card-wrapper, +.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel .sg-form-sections-card { + min-width: 0; + width: 100%; + max-width: 100%; } .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] > .sg-label, .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-label, .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__label { - white-space: nowrap; + white-space: normal; } .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] { display: grid; - grid-template-columns: max-content var(--sg-multiselect-label-column-width) minmax(0, 1fr) auto; + grid-template-columns: max-content minmax(0, 1fr) auto; align-items: center; column-gap: var(--spacing-large); + row-gap: var(--spacing-small); } .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"].sg-slider-row--inactive-selectable { @@ -127,25 +149,31 @@ .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-mode-toggle { grid-column: 1; + grid-row: 1; } .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-label { grid-column: 2; + grid-row: 1; min-width: 0; } .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-slider { - grid-column: 3; + grid-column: 1 / 3; + grid-row: 2; min-width: 0; + max-width: 100%; width: 100%; - max-width: none; } .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-slider-value { - grid-column: 4; + grid-column: 3; + grid-row: 2; margin: 0; - min-width: 0; + min-width: calc(var(--interaction-height) * 1.25); line-height: 1; + align-self: center; + white-space: nowrap; } .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] { @@ -154,22 +182,26 @@ .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group { display: grid; - grid-template-columns: max-content var(--sg-multiselect-label-column-width) minmax(0, 1fr); + grid-template-columns: max-content minmax(0, 1fr); align-items: center; column-gap: var(--spacing-large); + row-gap: var(--spacing-small); } .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-label { grid-column: 2; + grid-row: 1; margin: 0; } .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-mode-toggle { grid-column: 1; + grid-row: 1; } .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-radio-activatable-group__choices { - grid-column: 3; + grid-column: 1 / -1; + grid-row: 2; } .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group[data-component-state="inactive-selectable"] > .sg-radio-activatable-group__choices { @@ -183,20 +215,24 @@ } .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] { - grid-template-columns: max-content var(--sg-multiselect-label-column-width) minmax(0, 1fr); + grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--spacing-large); + row-gap: var(--spacing-small); } .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-mode-toggle { grid-column: 1; + grid-row: 1; } .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__label { grid-column: 2; + grid-row: 1; } .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown { - grid-column: 3; + grid-column: 1 / -1; + grid-row: 2; } .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row].sg-pulldown-panel__row--disabled { @@ -208,91 +244,6 @@ opacity: var(--disabled-opacity); } -.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-demo .sg-pulldown-panel { - min-width: 100%; - width: max-content; - max-width: calc(100vw - (2 * var(--spacing-large))); -} - -@media (max-width: 48rem) { - .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel { - min-width: 100%; - width: max-content; - max-width: calc(100vw - (2 * var(--spacing-large))); - } - - .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] { - grid-template-columns: max-content minmax(0, 1fr) auto; - row-gap: var(--spacing-small); - } - - .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] > .sg-label, - .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-label, - .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__label { - white-space: normal; - } - - .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-mode-toggle { - grid-column: 1; - grid-row: 1; - } - - .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-label { - grid-column: 2; - grid-row: 1; - } - - .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-slider { - grid-column: 1 / 3; - grid-row: 2; - } - - .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-slider-value { - grid-column: 3; - grid-row: 2; - } - - .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group { - grid-template-columns: max-content minmax(0, 1fr); - row-gap: var(--spacing-small); - } - - .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-label { - grid-column: 2; - grid-row: 1; - } - - .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-mode-toggle { - grid-column: 1; - grid-row: 1; - } - - .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-radio-activatable-group__choices { - grid-column: 1 / -1; - grid-row: 2; - } - - .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] { - grid-template-columns: max-content minmax(0, 1fr); - row-gap: var(--spacing-small); - } - - .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-mode-toggle { - grid-column: 1; - grid-row: 1; - } - - .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__label { - grid-column: 2; - grid-row: 1; - } - - .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown { - grid-column: 1 / -1; - grid-row: 2; - } -} - .sg-form-sections-card__actions { display: flex; width: 100%;