Skip to content

Commit e81cdaf

Browse files
belltalionbelltalion
committed
Fix select componenet
1 parent a3199ff commit e81cdaf

File tree

4 files changed

+108
-115
lines changed

4 files changed

+108
-115
lines changed

‎packages/components/src/components/Select/Select.stories.tsx‎

Lines changed: 33 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -54,42 +54,39 @@ function DefaultComponent(
5454
props: Omit<ComponentProps<typeof Select>, 'children'>,
5555
) {
5656
return (
57-
<Select
58-
{...props}
59-
className={css({
60-
pos: 'fixed',
61-
bottom: '0px',
62-
right: '0px',
63-
})}
64-
defaultValue={['Option 1']}
65-
onChange={() => {}}
66-
>
67-
<SelectTrigger>Select2</SelectTrigger>
68-
<SelectContainer>
69-
<SelectOption disabled value="Option 1">
70-
Option 1
71-
</SelectOption>
72-
<SelectOption value="Option 2">Option 2</SelectOption>
73-
<SelectDivider />
74-
<SelectOption value="Option 3">Option 3</SelectOption>
75-
<SelectOption disabled value="Option 4">
76-
Option 4
77-
</SelectOption>
78-
<Select type="radio">
79-
<SelectTrigger asChild>
80-
<SelectOption>
81-
<Flex alignItems="center" justifyContent="space-between" w="100%">
82-
Option 5<IconArrow />
83-
</Flex>
84-
</SelectOption>
85-
</SelectTrigger>
86-
<SelectContainer>
87-
<SelectOption value="Option 6">Option 6</SelectOption>
88-
<SelectOption value="Option 7">Option 7</SelectOption>
89-
</SelectContainer>
90-
</Select>
91-
</SelectContainer>
92-
</Select>
57+
<Flex justifyContent="flex-end">
58+
<Select {...props} defaultValue={['Option 1']} onChange={() => {}}>
59+
<SelectTrigger>Select2</SelectTrigger>
60+
<SelectContainer>
61+
<SelectOption disabled value="Option 1">
62+
Option 1
63+
</SelectOption>
64+
<SelectOption value="Option 2">Option 2</SelectOption>
65+
<SelectDivider />
66+
<SelectOption value="Option 3">Option 3</SelectOption>
67+
<SelectOption disabled value="Option 4">
68+
Option 4
69+
</SelectOption>
70+
<Select type="radio">
71+
<SelectTrigger asChild>
72+
<SelectOption>
73+
<Flex
74+
alignItems="center"
75+
justifyContent="space-between"
76+
w="100%"
77+
>
78+
Option 5<IconArrow />
79+
</Flex>
80+
</SelectOption>
81+
</SelectTrigger>
82+
<SelectContainer>
83+
<SelectOption value="Option 6">Option 6</SelectOption>
84+
<SelectOption value="Option 7">Option 7</SelectOption>
85+
</SelectContainer>
86+
</Select>
87+
</SelectContainer>
88+
</Select>
89+
</Flex>
9390
)
9491
}
9592

‎packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap‎

Lines changed: 55 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,10 @@ exports[`Select > should render 1`] = `
2828
exports[`Select > should render with overflow screen 1`] = `
2929
<div>
3030
<div
31-
class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-1137980104803605758-1 position-0-fixed--255 bottom-0-0--255 right-0-0--255"
31+
class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-1137980104803605758-1 "
3232
>
3333
<button
34-
aria-expanded="false"
34+
aria-expanded="true"
3535
aria-label="Select toggle"
3636
class="border-radius-0-8px--2 outline-0-2px solid-17005923944751620165-1 box-sizing-0-border-box--1 cursor-0-pointer--1 font-weight-0-700--1 outline-offset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-var(--text,#272727)-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 background-color-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 border-color-0-var(--border,#E4E4E4)-14172363753176421546-1 outline-color-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 border-color-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 background-color-0-#47474A-878116160589243838-1 border-color-0-transparent-878116160589243838-1 border-color-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outline-color-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 border-radius-0-10px--1 color-0-var(--text,#272727)--1 font-size-0-14px--1 font-size-4-15px--1 letter-spacing-0--.02em--1 letter-spacing-4--.03em--1 padding-right-0-16px--1 padding-left-0-16px--1 padding-bottom-0-10px--1 padding-top-0-10px--1 "
3737
type="button"
@@ -46,56 +46,69 @@ exports[`Select > should render with overflow screen 1`] = `
4646
</div>
4747
</div>
4848
</button>
49-
</div>
50-
</div>
51-
`;
52-
53-
exports[`Select > should render with overflow screen 2`] = `
54-
<div>
55-
<div
56-
class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-1137980104803605758-1 position-0-fixed--255 bottom-0-0--255"
57-
>
58-
<button
59-
aria-expanded="false"
60-
aria-label="Select toggle"
61-
class="border-radius-0-8px--2 outline-0-2px solid-17005923944751620165-1 box-sizing-0-border-box--1 cursor-0-pointer--1 font-weight-0-700--1 outline-offset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-var(--text,#272727)-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 background-color-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 border-color-0-var(--border,#E4E4E4)-14172363753176421546-1 outline-color-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 border-color-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 background-color-0-#47474A-878116160589243838-1 border-color-0-transparent-878116160589243838-1 border-color-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outline-color-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 border-radius-0-10px--1 color-0-var(--text,#272727)--1 font-size-0-14px--1 font-size-4-15px--1 letter-spacing-0--.02em--1 letter-spacing-4--.03em--1 padding-right-0-16px--1 padding-left-0-16px--1 padding-bottom-0-10px--1 padding-top-0-10px--1 "
62-
type="button"
49+
<div
50+
aria-label="Select container"
51+
class="display-0-flex--0 flex-direction-0-column--0 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E4E4E4,#434343))--1 border-radius-0-8px--1 bottom-0--4px--1 box-shadow-0-0 2px 2px 0 var(--base10,light-dark(#0000001A,#FFFFFF1A))--1 height-0-fit-content--1 width-0-fit-content--1 gap-0-6px--1 min-width-0-232px--1 padding-0-10px--1 position-0-fixed--1 user-select-0-none--1 z-index-0-1--1 "
52+
style="top: 10px; left: -1100px; bottom: 778px;"
6353
>
6454
<div
65-
class="max-width-0-100%--255 margin-right-0-auto--255 margin-left-0-auto--255 position-0-relative--255 width-0-fit-content--255"
55+
class="display-0-flex--0 align-items-0-center--1 border-radius-0-6px--1 height-0-40px--1 padding-right-0-10px--1 padding-left-0-10px--1 transition-0-background-color .1s ease-in-out--1 color-0-var(--selectDisabled,light-dark(#C4C5D1,#45464D))--1 cursor-0-default--1 font-weight-0-400--1 gap-0-0--1 "
56+
data-value="Option 1"
6657
>
67-
<div
68-
class=" line-height-0-1.2--255 min-height-0-1.2em--255 "
69-
>
70-
Select
71-
</div>
58+
Option 1
7259
</div>
73-
</button>
74-
</div>
75-
</div>
76-
`;
77-
78-
exports[`Select > should render with overflow screen 3`] = `
79-
<div>
80-
<div
81-
class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-1137980104803605758-1 position-0-fixed--255 right-0-0--255"
82-
>
83-
<button
84-
aria-expanded="false"
85-
aria-label="Select toggle"
86-
class="border-radius-0-8px--2 outline-0-2px solid-17005923944751620165-1 box-sizing-0-border-box--1 cursor-0-pointer--1 font-weight-0-700--1 outline-offset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-var(--text,#272727)-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 background-color-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 border-color-0-var(--border,#E4E4E4)-14172363753176421546-1 outline-color-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 border-color-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 background-color-0-#47474A-878116160589243838-1 border-color-0-transparent-878116160589243838-1 border-color-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outline-color-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 border-radius-0-10px--1 color-0-var(--text,#272727)--1 font-size-0-14px--1 font-size-4-15px--1 letter-spacing-0--.02em--1 letter-spacing-4--.03em--1 padding-right-0-16px--1 padding-left-0-16px--1 padding-bottom-0-10px--1 padding-top-0-10px--1 "
87-
type="button"
88-
>
8960
<div
90-
class="max-width-0-100%--255 margin-right-0-auto--255 margin-left-0-auto--255 position-0-relative--255 width-0-fit-content--255"
61+
class="display-0-flex--0 align-items-0-center--1 border-radius-0-6px--1 height-0-40px--1 padding-right-0-10px--1 padding-left-0-10px--1 transition-0-background-color .1s ease-in-out--1 background-0-var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))-8380715471663921674-1 color-0-var(--title,light-dark(#1A1A1A,#FAFAFA))--1 cursor-0-pointer--1 font-weight-0-400--1 gap-0-0--1 "
62+
data-value="Option 2"
63+
>
64+
Option 2
65+
</div>
66+
<div
67+
class="background-0-var(--border,light-dark(#E4E4E4,#434343))--1 height-0-1px--1 width-0-100%--1 "
68+
/>
69+
<div
70+
class="display-0-flex--0 align-items-0-center--1 border-radius-0-6px--1 height-0-40px--1 padding-right-0-10px--1 padding-left-0-10px--1 transition-0-background-color .1s ease-in-out--1 background-0-var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))-8380715471663921674-1 color-0-var(--title,light-dark(#1A1A1A,#FAFAFA))--1 cursor-0-pointer--1 font-weight-0-400--1 gap-0-0--1 "
71+
data-value="Option 3"
72+
>
73+
Option 3
74+
</div>
75+
<div
76+
class="display-0-flex--0 align-items-0-center--1 border-radius-0-6px--1 height-0-40px--1 padding-right-0-10px--1 padding-left-0-10px--1 transition-0-background-color .1s ease-in-out--1 color-0-var(--selectDisabled,light-dark(#C4C5D1,#45464D))--1 cursor-0-default--1 font-weight-0-400--1 gap-0-0--1 "
77+
data-value="Option 4"
78+
>
79+
Option 4
80+
</div>
81+
<div
82+
class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-1137980104803605758-1 "
9183
>
9284
<div
93-
class=" line-height-0-1.2--255 min-height-0-1.2em--255 "
85+
aria-expanded="false"
86+
aria-label="Select toggle"
87+
class="display-0-flex--0 align-items-0-center--1 border-radius-0-6px--1 height-0-40px--1 padding-right-0-10px--1 padding-left-0-10px--1 transition-0-background-color .1s ease-in-out--1 background-0-var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))-8380715471663921674-1 color-0-var(--title,light-dark(#1A1A1A,#FAFAFA))--1 cursor-0-pointer--1 font-weight-0-400--1 gap-0-6px--1 "
9488
>
95-
Select
89+
<div
90+
class="display-0-flex--0 align-items-0-center--255 justify-content-0-space-between--255 width-0-100%--255"
91+
>
92+
Option 5
93+
<svg
94+
class="color-0-#8B8E9C--1"
95+
fill="none"
96+
height="16"
97+
viewBox="0 0 16 16"
98+
width="16"
99+
xmlns="http://www.w3.org/2000/svg"
100+
>
101+
<path
102+
clip-rule="evenodd"
103+
d="M6.1953 12.4714C5.93495 12.211 5.93495 11.7889 6.1953 11.5286L9.7239 7.99996L6.1953 4.47136C5.93495 4.21102 5.93495 3.78891 6.1953 3.52856C6.45565 3.26821 6.87776 3.26821 7.13811 3.52856L11.1381 7.52856C11.3985 7.7889 11.3985 8.21101 11.1381 8.47136L7.13811 12.4714C6.87776 12.7317 6.45565 12.7317 6.1953 12.4714Z"
104+
fill="currentColor"
105+
fill-rule="evenodd"
106+
/>
107+
</svg>
108+
</div>
96109
</div>
97110
</div>
98-
</button>
111+
</div>
99112
</div>
100113
</div>
101114
`;

‎packages/components/src/components/Select/__tests__/index.browser.test.tsx‎

Lines changed: 19 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -424,43 +424,25 @@ describe('Select', () => {
424424
})
425425

426426
it('should render with overflow screen', () => {
427-
const { container } = render(
428-
<Select
429-
className={css({
430-
pos: 'fixed',
431-
bottom: '0px',
432-
right: '0px',
433-
})}
434-
>
435-
{children}
436-
</Select>,
437-
)
438-
expect(container).toMatchSnapshot()
439-
})
440-
it('should render with overflow screen', () => {
441-
const { container } = render(
442-
<Select
443-
className={css({
444-
pos: 'fixed',
445-
bottom: '0px',
446-
})}
447-
>
448-
{children}
449-
</Select>,
450-
)
451-
expect(container).toMatchSnapshot()
452-
})
453-
it('should render with overflow screen', () => {
454-
const { container } = render(
455-
<Select
456-
className={css({
457-
pos: 'fixed',
458-
right: '0px',
459-
})}
460-
>
461-
{children}
462-
</Select>,
463-
)
427+
const { container, rerender } = render(<Select>{children}</Select>)
428+
429+
// open selectContainer
430+
const selectToggle = container.querySelector('[aria-label="Select toggle"]')
431+
fireEvent.click(selectToggle!)
432+
433+
const selectContainer = container.querySelector(
434+
'[aria-label="Select container"]',
435+
)! as HTMLDivElement
436+
437+
// happy-dom defualt viewport 1024x768
438+
// offsetHeight > 768px
439+
vi.spyOn(selectContainer, 'offsetHeight', 'get').mockReturnValue(800)
440+
// offsetWidth > 1024px
441+
vi.spyOn(selectContainer, 'offsetWidth', 'get').mockReturnValue(1100)
442+
443+
// rerender
444+
rerender(<Select>{children}</Select>)
445+
464446
expect(container).toMatchSnapshot()
465447
})
466448
})

‎packages/components/src/components/Select/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -236,6 +236,7 @@ export function SelectContainer({
236236
if (el.offsetHeight + comboboxY + y > window.innerHeight)
237237
el.style.bottom = `${window.innerHeight - comboboxY + 10}px`
238238
else el.style.top = `${comboboxY + height + 10 + y}px`
239+
239240
if (el.offsetWidth + comboboxX + x > window.innerWidth)
240241
el.style.left = `${comboboxX - el.offsetWidth + combobox.offsetWidth + x}px`
241242
else el.style.left = `${comboboxX + x}px`

0 commit comments

Comments
 (0)