Skip to content

Commit 3ae2d29

Browse files
belltalionbelltalion
committed
Fix select componenet
1 parent 147a487 commit 3ae2d29

File tree

3 files changed

+32
-21
lines changed

3 files changed

+32
-21
lines changed

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

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,18 @@ function DefaultComponent(
5454
props: Omit<ComponentProps<typeof Select>, 'children'>,
5555
) {
5656
return (
57-
<Select {...props} defaultValue={['Option 1']} onChange={() => {}}>
57+
<Select
58+
{...props}
59+
className={css({
60+
pos: 'fixed',
61+
bottom: '0px',
62+
right: '0px',
63+
})}
64+
defaultValue={['Option 1']}
65+
onChange={() => {}}
66+
>
5867
<SelectTrigger>Select2</SelectTrigger>
59-
<SelectContainer x={10} y={10}>
68+
<SelectContainer>
6069
<SelectOption disabled value="Option 1">
6170
Option 1
6271
</SelectOption>

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

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -28,28 +28,24 @@ exports[`Select > should render 1`] = `
2828
exports[`Select > should render with overflow screen 1`] = `
2929
<div>
3030
<div
31-
class="display-0-flex--0 align-items-0-flex-end--255 height-0-100vh--255 justify-content-0-center--255 width-0-100vw--255"
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"
3232
>
33-
<div
34-
class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-1137980104803605758-1 "
33+
<button
34+
aria-expanded="false"
35+
aria-label="Select toggle"
36+
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 "
37+
type="button"
3538
>
36-
<button
37-
aria-expanded="false"
38-
aria-label="Select toggle"
39-
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 "
40-
type="button"
39+
<div
40+
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"
4141
>
4242
<div
43-
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"
43+
class=" line-height-0-1.2--255 min-height-0-1.2em--255 "
4444
>
45-
<div
46-
class=" line-height-0-1.2--255 min-height-0-1.2em--255 "
47-
>
48-
Select
49-
</div>
45+
Select
5046
</div>
51-
</button>
52-
</div>
47+
</div>
48+
</button>
5349
</div>
5450
</div>
5551
`;

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

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -425,9 +425,15 @@ describe('Select', () => {
425425

426426
it('should render with overflow screen', () => {
427427
const { container } = render(
428-
<Flex alignItems="flex-end" h="100vh" justifyContent="center" w="100vw">
429-
<Select>{children}</Select>
430-
</Flex>,
428+
<Select
429+
className={css({
430+
pos: 'fixed',
431+
bottom: '0px',
432+
right: '0px',
433+
})}
434+
>
435+
{children}
436+
</Select>,
431437
)
432438
expect(container).toMatchSnapshot()
433439
})

0 commit comments

Comments
 (0)