Skip to content

Commit f08a667

Browse files
Copilotmfranzke
Copilot
and
mfranzke
committed
refactor: extract shared select dropdown/list styles into central placeholders
Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com>
1 parent ea3cfea commit f08a667

File tree

5 files changed

+73
-75
lines changed

5 files changed

+73
-75
lines changed

‎packages/components/src/components/custom-select-dropdown/custom-select-dropdown.scss‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,12 @@
44
@use "@db-ux/core-foundations/build/styles/helpers";
55
@use "@db-ux/core-foundations/build/styles/animation";
66
@use "../../styles/internal/form-components";
7+
@use "../../styles/internal/select-dropdown-components";
78

89
.db-custom-select-dropdown {
910
@extend %db-neutral-variables;
11+
@extend %select-dropdown-container;
1012

11-
position: absolute;
12-
z-index: 32;
13-
box-shadow: variables.$db-elevation-md;
14-
min-inline-size: variables.$db-sizing-xl;
15-
max-inline-size: calc(100vw - 2 * #{variables.$db-spacing-fixed-sm});
1613
max-block-size: calc(100vh - 2 * #{variables.$db-spacing-fixed-sm});
1714

1815
&:not([data-width]),

‎packages/components/src/components/custom-select-list-item/custom-select-list-item.scss‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
@use "@db-ux/core-foundations/build/styles/icons";
66
@use "@db-ux/core-foundations/build/styles/screen-sizes";
77
@use "../../styles/internal/form-components";
8+
@use "../../styles/internal/select-dropdown-components";
89

910
// web-component workaround
1011
db-custom-select-list-item:not(:last-of-type) {
@@ -15,23 +16,13 @@ db-custom-select-list-item:not(:last-of-type) {
1516

1617
.db-custom-select-list-item {
1718
@include helpers.display(flex);
19+
@extend %select-list-item;
1820

1921
block-size: 100%;
20-
position: relative;
21-
padding: variables.$db-spacing-fixed-sm;
22-
background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
23-
border-radius: variables.$db-border-radius-xs;
24-
box-sizing: border-box;
2522

2623
&:has(> label) {
2724
&:not(:has(input[type="radio"]:checked)) {
28-
@include helpers.hover {
29-
background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
30-
}
31-
32-
@include helpers.active {
33-
background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed;
34-
}
25+
@extend %select-list-item-interaction;
3526
}
3627
}
3728

‎packages/components/src/components/custom-select-list/custom-select-list.scss‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,20 @@
11
@use "@db-ux/core-foundations/build/styles/variables";
22
@use "../../styles/internal/form-components";
33
@use "@db-ux/core-foundations/build/styles/helpers";
4+
@use "../../styles/internal/select-dropdown-components";
45

56
.db-custom-select-list {
67
all: unset;
8+
9+
@extend %select-list-container;
10+
711
padding: variables.$db-spacing-fixed-sm;
812
overflow-y: auto;
9-
overflow-block: auto;
1013

1114
&::-webkit-scrollbar-button:single-button:vertical:decrement {
1215
border-start-end-radius: 0;
1316
}
1417

15-
/* (checkbox height + list-item padding) * 6 items + list padding */
16-
max-block-size: calc(
17-
5.5 *
18-
(
19-
(
20-
#{form-components.$font-size-height} - 2 *
21-
#{variables.$db-border-width-3xs}
22-
) +
23-
2 * #{variables.$db-spacing-fixed-sm}
24-
) +
25-
(#{variables.$db-spacing-fixed-sm} * 2)
26-
);
27-
2818
> ul {
2919
all: unset;
3020
display: flex;

‎packages/components/src/components/select/select.scss‎

Lines changed: 6 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
@use "../../styles/internal/form-components";
88
@use "../../styles/internal/component";
99
@use "../../styles/internal/select-components";
10+
@use "../../styles/internal/select-dropdown-components";
1011

1112
.db-select-placeholder {
1213
@extend %select-absolute-placeholder;
@@ -67,45 +68,13 @@
6768

6869
/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
6970
:is(::picker(select)) {
70-
@extend %default-card;
71-
72-
// Adapted from .db-custom-select-dropdown
73-
position: absolute;
74-
z-index: 32;
75-
box-shadow: variables.$db-elevation-md;
76-
min-inline-size: variables.$db-sizing-xl;
77-
max-inline-size: calc(
78-
100vw - 2 * #{variables.$db-spacing-fixed-sm}
79-
);
80-
81-
// Adapted from .db-card
82-
background-color: colors.$db-adaptive-bg-basic-level-1-default;
83-
padding: variables.$db-spacing-fixed-sm;
84-
85-
// Adapted from .db-custom-select-list
86-
overflow-block: auto;
87-
88-
/* (option height + padding) * 5.5 items (showing partial item to indicate more content) + list padding */
89-
max-block-size: calc(
90-
5.5 *
91-
(
92-
(
93-
#{form-components.$font-size-height} - 2 *
94-
#{variables.$db-border-width-3xs}
95-
) +
96-
2 * #{variables.$db-spacing-fixed-sm}
97-
) +
98-
(#{variables.$db-spacing-fixed-sm} * 2)
99-
);
71+
@extend %select-dropdown-container;
72+
@extend %select-list-container;
10073
}
10174

10275
option {
103-
// Adapted from .db-custom-select-list-item
104-
position: relative;
105-
padding: variables.$db-spacing-fixed-sm;
106-
background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
107-
border-radius: variables.$db-border-radius-xs;
108-
box-sizing: border-box;
76+
@extend %select-list-item;
77+
10978
justify-content: space-between;
11079

11180
// change order of the included text and pseudo-element within this flexbox item, to make sure the icon is always on the right
@@ -115,15 +84,8 @@
11584
font-weight: 700;
11685
}
11786

118-
// Hover states adapted from .db-custom-select-list-item
11987
&:not(:checked) {
120-
@include helpers.hover {
121-
background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
122-
}
123-
124-
@include helpers.active {
125-
background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed;
126-
}
88+
@extend %select-list-item-interaction;
12789
}
12890

12991
/* stylelint-disable-next-line selector-pseudo-element-no-unknown */

‎packages/components/src/styles/internal/_select-dropdown-components.scss‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
@use "@db-ux/core-foundations/build/styles/variables";
2+
@use "@db-ux/core-foundations/build/styles/colors";
3+
@use "@db-ux/core-foundations/build/styles/helpers";
4+
@use "./form-components";
5+
@use "./component";
6+
7+
// Shared styles for dropdown container (used by both CustomSelect and native select ::picker)
8+
%select-dropdown-container {
9+
@extend %default-card;
10+
11+
position: absolute;
12+
z-index: 32;
13+
box-shadow: variables.$db-elevation-md;
14+
min-inline-size: variables.$db-sizing-xl;
15+
max-inline-size: calc(100vw - 2 * #{variables.$db-spacing-fixed-sm});
16+
17+
// Adapted from .db-card
18+
background-color: colors.$db-adaptive-bg-basic-level-1-default;
19+
padding: variables.$db-spacing-fixed-sm;
20+
}
21+
22+
// Shared styles for list container (used by both CustomSelect list and native select ::picker)
23+
%select-list-container {
24+
overflow-block: auto;
25+
26+
/* (option height + padding) * 5.5 items (showing partial item to indicate more content) + list padding */
27+
max-block-size: calc(
28+
5.5 *
29+
(
30+
(
31+
#{form-components.$font-size-height} - 2 *
32+
#{variables.$db-border-width-3xs}
33+
) +
34+
2 * #{variables.$db-spacing-fixed-sm}
35+
) +
36+
(#{variables.$db-spacing-fixed-sm} * 2)
37+
);
38+
}
39+
40+
// Shared styles for list items (used by both CustomSelect list items and native select options)
41+
%select-list-item {
42+
position: relative;
43+
padding: variables.$db-spacing-fixed-sm;
44+
background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
45+
border-radius: variables.$db-border-radius-xs;
46+
box-sizing: border-box;
47+
}
48+
49+
// Shared hover/active states for list items
50+
%select-list-item-interaction {
51+
@include helpers.hover {
52+
background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
53+
}
54+
55+
@include helpers.active {
56+
background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed;
57+
}
58+
}

0 commit comments

Comments
 (0)