diff --git a/__snapshots__/select/component/chromium/DBSelect-should-match-screenshot.png b/__snapshots__/select/component/chromium/DBSelect-should-match-screenshot.png index 0307f8f68439..c599ba461d47 100644 Binary files a/__snapshots__/select/component/chromium/DBSelect-should-match-screenshot.png and b/__snapshots__/select/component/chromium/DBSelect-should-match-screenshot.png differ diff --git a/__snapshots__/select/component/mobile-chrome/DBSelect-should-match-screenshot.png b/__snapshots__/select/component/mobile-chrome/DBSelect-should-match-screenshot.png index 0307f8f68439..562a77933798 100644 Binary files a/__snapshots__/select/component/mobile-chrome/DBSelect-should-match-screenshot.png and b/__snapshots__/select/component/mobile-chrome/DBSelect-should-match-screenshot.png differ diff --git a/__snapshots__/select/showcase/chromium-highContrast/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png b/__snapshots__/select/showcase/chromium-highContrast/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png index 458c3fa96138..10344af40956 100644 Binary files a/__snapshots__/select/showcase/chromium-highContrast/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png and b/__snapshots__/select/showcase/chromium-highContrast/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png differ diff --git a/__snapshots__/select/showcase/chromium/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png b/__snapshots__/select/showcase/chromium/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png index 2628101830c3..fb8e67c7cfa5 100644 Binary files a/__snapshots__/select/showcase/chromium/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png and b/__snapshots__/select/showcase/chromium/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png differ diff --git a/__snapshots__/select/showcase/mobile-chrome/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png b/__snapshots__/select/showcase/mobile-chrome/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png index 068dc74a141f..7cc8d4c009c1 100644 Binary files a/__snapshots__/select/showcase/mobile-chrome/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png and b/__snapshots__/select/showcase/mobile-chrome/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png differ diff --git a/packages/components/src/components/select/select.scss b/packages/components/src/components/select/select.scss index 5f3b081a8520..946b1bbf78ba 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"; @@ -49,4 +50,87 @@ display: none; } } + + // enable customized styling + @supports (appearance: base-select) { + select, + /* stylelint-disable-next-line selector-pseudo-element-no-unknown */ + ::picker(select) { + /* stylelint-disable-next-line declaration-property-value-no-unknown */ + appearance: base-select; + } + + /* stylelint-disable-next-line selector-pseudo-element-no-unknown */ + &::picker-icon { + display: none; + } + + /* 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-block: auto; + + /* (option height + padding) * 5.5 items (showing partial item to indicate more content) + 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; + + &:checked { + 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; + @include icons.icon-content("check"); + } + } + } } diff --git a/showcases/patternhub/tests/default.spec.ts b/showcases/patternhub/tests/default.spec.ts index efdbc8d4a374..de527ecf7ff1 100644 --- a/showcases/patternhub/tests/default.spec.ts +++ b/showcases/patternhub/tests/default.spec.ts @@ -24,8 +24,8 @@ for (const group of Components) { `docs`, `.${group.path}/${component.name}/docs/Angular`, async (page) => { - const firstH2 = page.locator('h2').first(); - await expect(firstH2).toBeVisible(); + const firstHeading = page.locator('h1, h2').first(); + await expect(firstHeading).toBeVisible(); } ); });