Skip to content

Commit 598c745

Browse files
SharonStratsSharonStrats
committed
Match select styling to combobox
1 parent 674eea6 commit 598c745

1 file changed

Lines changed: 60 additions & 61 deletions

File tree

‎src/v2/components/forms/select/Select.ts‎

Lines changed: 60 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -79,22 +79,18 @@ export class Select extends LitElement {
7979
box-sizing: border-box;
8080
--select-open-z-index: 1000;
8181
--select-popup-z-index: 1001;
82-
--select-popup-extra-width: 2px;
8382
--select-popup-background: var(--color-background, #f8f9fb);
8483
--select-trigger-background: var(--color-background, #f8f9fb);
85-
--select-trigger-hover-background: var(
86-
--color-surface-subtle,
87-
rgba(15, 23, 43, 0.04)
88-
);
8984
--select-trigger-toggle-hover-background: var(
9085
--color-header-menu-item-hover,
9186
#e6dcff
9287
);
93-
--select-trigger-border: 1px solid var(--gray-400, #99a1af);
94-
--select-trigger-hover-border: 1px solid var(--gray-400, #99a1af);
95-
--select-trigger-text: var(--color-text-subheading, #101828);
96-
--select-trigger-hover-text: var(--color-text-subheading, #101828);
97-
--select-popup-width: 100%;
88+
--input-background: var(--color-background, #f8f9fb);
89+
--input-text: var(--color-text, #1a1a1a);
90+
--input-border: var(--color-text, #1a1a1a);
91+
--label-color: var(--grey-purple-700, #1a1a1a);
92+
--placeholder-color: var(--grey-purple-700, #5e546d);
93+
--select-trigger-text: var(--input-text);
9894
--popup-background: var(--select-popup-background);
9995
--popup-text: var(--color-text, #1a1a1a);
10096
--popup-border: var(--color-border, #e5e7eb);
@@ -114,22 +110,18 @@ export class Select extends LitElement {
114110
box-sizing: border-box;
115111
--select-open-z-index: 1000;
116112
--select-popup-z-index: 1001;
117-
--select-popup-extra-width: 2px;
118113
--select-popup-background: var(--color-background, #1a1a1a);
119114
--select-trigger-background: var(--color-background, #1a1a1a);
120-
--select-trigger-hover-background: var(
121-
--color-surface-subtle,
122-
rgba(15, 23, 43, 0.04)
123-
);
124115
--select-trigger-toggle-hover-background: var(
125116
--color-header-menu-item-hover,
126117
#e6dcff
127118
);
128-
--select-trigger-border: 1px solid var(--gray-400, #99a1af);
129-
--select-trigger-hover-border: 1px solid var(--gray-400, #99a1af);
130-
--select-trigger-text: var(--color-text-subheading, #f8f9fb);
131-
--select-trigger-hover-text: var(--color-text-subheading, #f8f9fb);
132-
--select-popup-width: 100%;
119+
--input-background: var(--color-background, #1a1a1a);
120+
--input-text: var(--color-text, #f8f9fb);
121+
--input-border: var(--color-text, #f8f9fb);
122+
--label-color: var(--grey-purple-700, #f8f9fb);
123+
--placeholder-color: var(--grey-purple-700, #c7bfd3);
124+
--select-trigger-text: var(--input-text);
133125
--popup-background: var(--select-popup-background);
134126
--popup-text: var(--color-text, #f8f9fb);
135127
--popup-border: var(--color-border, #e5e7eb);
@@ -143,24 +135,31 @@ export class Select extends LitElement {
143135
z-index: var(--select-open-z-index);
144136
}
145137
146-
.select-trigger {
138+
.select-field-row {
147139
display: flex;
140+
flex-direction: row;
141+
position: relative;
142+
width: 100%;
143+
min-width: 0;
144+
}
145+
146+
.select-trigger {
147+
display: block;
148148
width: 100%;
149+
min-width: 0;
149150
min-height: var(--select-trigger-height, var(--min-touch-target, 44px));
150151
height: var(--select-trigger-height, var(--min-touch-target, 44px));
151152
padding: var(--spacing-xxs, 0.3125rem)
153+
calc(26px + (var(--select-trigger-inline-padding, var(--spacing-2xs, 0.625rem)) * 2) + 6px)
154+
var(--spacing-xxs, 0.3125rem)
152155
var(--select-trigger-inline-padding, var(--spacing-2xs, 0.625rem));
153-
align-items: center;
154-
justify-content: space-between;
155-
gap: var(--spacing-xxs, 0.3125rem);
156156
border-radius: var(--border-radius-base, 0.3125rem);
157157
background: var(--select-trigger-background);
158-
border: var(
159-
--select-trigger-border,
160-
1px solid var(--gray-400, #99a1af)
161-
);
158+
border: 1px solid var(--input-border);
162159
color: var(--select-trigger-text);
163160
cursor: pointer;
161+
appearance: none;
162+
-webkit-appearance: none;
164163
font-family: inherit;
165164
font-size: var(--font-size-sm, 0.875rem);
166165
font-weight: var(--font-weight-md, 500);
@@ -169,11 +168,6 @@ export class Select extends LitElement {
169168
white-space: nowrap;
170169
text-decoration: none;
171170
box-sizing: border-box;
172-
transition: transform 0.2s ease;
173-
}
174-
175-
.select-trigger:active {
176-
transform: translateY(1px);
177171
}
178172
179173
.select-trigger:focus-visible {
@@ -182,21 +176,28 @@ export class Select extends LitElement {
182176
}
183177
184178
.select-trigger-label {
185-
flex: 1 1 auto;
186-
min-width: 0;
179+
display: block;
187180
text-align: left;
188181
overflow: hidden;
189182
text-overflow: ellipsis;
190183
}
191184
192185
.select-trigger-toggle {
193-
display: inline-flex;
194-
flex: 0 0 auto;
186+
position: absolute;
187+
right: 6px;
188+
top: 50%;
189+
transform: translateY(-50%);
190+
display: flex;
195191
align-items: center;
196192
justify-content: center;
197193
width: 26px;
198194
height: 26px;
195+
padding: 0;
196+
border: none;
197+
background: transparent;
198+
cursor: pointer;
199199
border-radius: var(--border-radius-base, 0.3125rem);
200+
flex-shrink: 0;
200201
}
201202
202203
.select-trigger-toggle:hover {
@@ -206,7 +207,7 @@ export class Select extends LitElement {
206207
);
207208
}
208209
209-
.select-trigger:focus-visible .select-trigger-toggle {
210+
.select-field-row:focus-within .select-trigger-toggle {
210211
background: var(
211212
--select-trigger-toggle-hover-background,
212213
var(--color-header-menu-item-hover, #e6dcff)
@@ -238,21 +239,17 @@ export class Select extends LitElement {
238239
239240
.popup-box {
240241
position: absolute;
241-
top: calc(100% - 1px);
242-
left: calc(var(--select-popup-extra-width) / -2);
243-
width: calc(
244-
var(--select-popup-width) + var(--select-popup-extra-width)
245-
);
246-
min-width: calc(
247-
var(--select-popup-width) + var(--select-popup-extra-width)
248-
);
242+
top: 0;
243+
left: 0;
244+
width: 100%;
245+
min-width: 100%;
249246
background: var(--popup-background);
250247
opacity: 1;
251248
overflow: hidden;
252249
color: var(--popup-text);
253250
box-shadow: var(--popup-shadow);
254251
border: 1px solid var(--popup-border);
255-
border-radius: var(--border-radius-sm, 0.2rem);
252+
border-radius: var(--border-radius-md, 0.5rem);
256253
box-sizing: border-box;
257254
isolation: isolate;
258255
z-index: var(--select-popup-z-index);
@@ -550,26 +547,28 @@ export class Select extends LitElement {
550547
: undefined
551548

552549
return html`
553-
<button
554-
class="select-trigger"
555-
type="button"
556-
aria-haspopup="listbox"
557-
aria-expanded="${this._popupOpen}"
558-
aria-controls="${this._listboxId}"
559-
aria-activedescendant="${activeDescendant ?? ''}"
560-
part="select-trigger"
561-
@click="${() => this._openPopup()}"
562-
@keydown="${this._handleTriggerKeydown}"
563-
>
564-
<span class="select-trigger-label" part="trigger-label"
565-
>${triggerLabel}</span
550+
<div class="select-field-row">
551+
<button
552+
class="select-trigger"
553+
type="button"
554+
aria-haspopup="listbox"
555+
aria-expanded="${this._popupOpen}"
556+
aria-controls="${this._listboxId}"
557+
aria-activedescendant="${activeDescendant ?? ''}"
558+
part="select-trigger"
559+
@click="${() => this._popupOpen ? this._closePopup() : this._openPopup()}"
560+
@keydown="${this._handleTriggerKeydown}"
566561
>
562+
<span class="select-trigger-label" part="trigger-label"
563+
>${triggerLabel}</span
564+
>
565+
</button>
567566
<span class="select-trigger-toggle" part="trigger-toggle">
568567
<span class="select-trigger-icon" part="trigger-icon" aria-hidden="true"
569568
>${downArrowIcon}</span
570569
>
571570
</span>
572-
</button>
571+
</div>
573572
574573
<div
575574
class="select-root"

0 commit comments

Comments
 (0)