From d6a5da55598690363d986d601d277ad16812b7e7 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 5 Dec 2025 18:37:32 +0000 Subject: [PATCH 1/4] Initial plan From 20ea6571c1456d000e7aa7955d5e64d46e0d529f Mon Sep 17 00:00:00 2001 From: GitHub Copilot Date: Fri, 5 Dec 2025 18:43:19 +0000 Subject: [PATCH 2/4] feat: adapt CustomSelect styles to native select picker Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com> --- .../src/components/select/select.scss | 50 ++++++++++++++++++- 1 file changed, 49 insertions(+), 1 deletion(-) diff --git a/packages/components/src/components/select/select.scss b/packages/components/src/components/select/select.scss index 8fbf824bf8eb..c236d47b755a 100644 --- a/packages/components/src/components/select/select.scss +++ b/packages/components/src/components/select/select.scss @@ -3,6 +3,7 @@ @use "@db-ux/core-foundations/build/styles/colors"; @use "@db-ux/core-foundations/build/styles/icons"; @use "@db-ux/core-foundations/build/styles/fonts"; +@use "@db-ux/core-foundations/build/styles/helpers"; @use "../../styles/internal/form-components"; @use "../../styles/internal/component"; @use "../../styles/internal/select-components"; @@ -67,11 +68,47 @@ /* stylelint-disable-next-line selector-pseudo-element-no-unknown */ :is(::picker(select)) { @extend %default-card; + + // Adapted from .db-custom-select-dropdown + position: absolute; + z-index: 32; + box-shadow: variables.$db-elevation-md; + min-inline-size: variables.$db-sizing-xl; + max-inline-size: calc( + 100vw - 2 * #{variables.$db-spacing-fixed-sm} + ); + + // Adapted from .db-card + background-color: colors.$db-adaptive-bg-basic-level-1-default; + padding: variables.$db-spacing-fixed-sm; + + // Adapted from .db-custom-select-list + overflow-y: auto; + overflow-block: auto; + + /* (checkbox height + list-item padding) * 6 items + list padding */ + max-block-size: calc( + 5.5 * + ( + ( + #{form-components.$font-size-height} - 2 * + #{variables.$db-border-width-3xs} + ) + + 2 * #{variables.$db-spacing-fixed-sm} + ) + + (#{variables.$db-spacing-fixed-sm} * 2) + ); } option { + // Adapted from .db-custom-select-list-item + position: relative; + padding: variables.$db-spacing-fixed-sm; + background-color: colors.$db-adaptive-bg-basic-transparent-full-default; + border-radius: variables.$db-border-radius-xs; + box-sizing: border-box; justify-content: space-between; - + // change order of the included text and pseudo-element within this flexbox item, to make sure the icon is always on the right flex-direction: row-reverse; @@ -79,6 +116,17 @@ font-weight: 700; } + // Hover states adapted from .db-custom-select-list-item + &:not(:checked) { + @include helpers.hover { + background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered; + } + + @include helpers.active { + background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed; + } + } + /* stylelint-disable-next-line selector-pseudo-element-no-unknown */ :is(&::checkmark) { @extend %icon; From be950f3848df98a05079dc57d549ede33559cad2 Mon Sep 17 00:00:00 2001 From: GitHub Copilot Date: Fri, 5 Dec 2025 18:45:14 +0000 Subject: [PATCH 3/4] refactor: remove redundant overflow-y property Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com> --- packages/components/src/components/select/select.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/src/components/select/select.scss b/packages/components/src/components/select/select.scss index c236d47b755a..c4ad300af602 100644 --- a/packages/components/src/components/select/select.scss +++ b/packages/components/src/components/select/select.scss @@ -83,7 +83,6 @@ padding: variables.$db-spacing-fixed-sm; // Adapted from .db-custom-select-list - overflow-y: auto; overflow-block: auto; /* (checkbox height + list-item padding) * 6 items + list padding */ From 2ce6e697e595b8befdeea0a831f36c32a882607d Mon Sep 17 00:00:00 2001 From: GitHub Copilot Date: Fri, 5 Dec 2025 18:47:12 +0000 Subject: [PATCH 4/4] docs: improve comments for option height calculation Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com> --- packages/components/src/components/select/select.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/components/select/select.scss b/packages/components/src/components/select/select.scss index c4ad300af602..946b1bbf78ba 100644 --- a/packages/components/src/components/select/select.scss +++ b/packages/components/src/components/select/select.scss @@ -85,7 +85,7 @@ // Adapted from .db-custom-select-list overflow-block: auto; - /* (checkbox height + list-item padding) * 6 items + list padding */ + /* (option height + padding) * 5.5 items (showing partial item to indicate more content) + list padding */ max-block-size: calc( 5.5 * (