Skip to content

Commit b90586b

Browse files
belltalionbelltalion
authored
Merge pull request #311 from belltalion/fix-select
Fix select
2 parents e90377a + f7a1d7f commit b90586b

File tree

10 files changed

+337
-56
lines changed

10 files changed

+337
-56
lines changed

‎.changeset/fruity-aliens-crash.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@devup-ui/components": patch
3+
---
4+
5+
Fix select component container

‎packages/components/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@
2222
"lint": "eslint",
2323
"build": "tsc && vite build",
2424
"storybook": "storybook dev -p 6006",
25-
"build-storybook": "storybook build"
25+
"build-storybook": "storybook build",
26+
"package": "pnpm pack --pack-destination \"../../dist\""
2627
},
2728
"publishConfig": {
2829
"access": "public"

‎packages/components/src/__tests__/index.browser.test.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,9 @@ describe('export', () => {
1414
StepperDecreaseButton: expect.any(Function),
1515
StepperIncreaseButton: expect.any(Function),
1616
StepperInput: expect.any(Function),
17-
useSelect: expect.any(Function),
1817
useStepper: expect.any(Function),
18+
SelectContext: expect.any(Object),
19+
useSelect: expect.any(Function),
1920
})
2021
})
2122
})

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

Lines changed: 34 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -43,14 +43,19 @@ export const ControlledCheckboxStory: Story = {
4343
render: () => <ControlledCheckbox />,
4444
}
4545

46+
export const SelectWithOptionsStory: Story = {
47+
args: {},
48+
render: () => <SelectWithOptions />,
49+
}
50+
4651
export default meta
4752

4853
function DefaultComponent(
4954
props: Omit<ComponentProps<typeof Select>, 'children'>,
5055
) {
5156
return (
52-
<Select {...props} defaultValue={['Option 1']} onValueChange={() => {}}>
53-
<SelectTrigger>Select</SelectTrigger>
57+
<Select {...props} defaultValue={['Option 1']} onChange={() => {}}>
58+
<SelectTrigger>Select2</SelectTrigger>
5459
<SelectContainer>
5560
<SelectOption disabled value="Option 1">
5661
Option 1
@@ -69,13 +74,7 @@ function DefaultComponent(
6974
</Flex>
7075
</SelectOption>
7176
</SelectTrigger>
72-
<SelectContainer
73-
className={css({
74-
right: '0',
75-
top: '0',
76-
transform: 'translateX(100%)',
77-
})}
78-
>
77+
<SelectContainer>
7978
<SelectOption value="Option 6">Option 6</SelectOption>
8079
<SelectOption value="Option 7">Option 7</SelectOption>
8180
</SelectContainer>
@@ -105,19 +104,15 @@ function ControlledCheckbox() {
105104
}
106105

107106
return (
108-
<Select onValueChange={handleChange} type="checkbox" value={value}>
107+
<Select onChange={handleChange} type="checkbox" value={value}>
109108
<SelectTrigger>Select {value}</SelectTrigger>
110109
<SelectContainer showConfirmButton>
111110
<SelectOption value="Option 1">Option 1</SelectOption>
112111
<SelectOption value="Option 2">Option 2</SelectOption>
113112
<SelectDivider />
114113
<SelectOption value="Option 3">Option 3</SelectOption>
115114
<SelectOption value="Option 4">Option 4</SelectOption>
116-
<Select
117-
onValueChange={handleSubChange}
118-
type="checkbox"
119-
value={subValue}
120-
>
115+
<Select onChange={handleSubChange} type="checkbox" value={subValue}>
121116
<SelectTrigger asChild>
122117
<SelectOption showCheck={false}>
123118
<Flex alignItems="center" justifyContent="space-between" w="100%">
@@ -151,15 +146,15 @@ function ControlledRadio() {
151146
setSubValue(value)
152147
}
153148
return (
154-
<Select onValueChange={handleChange} type="radio" value={value}>
149+
<Select onChange={handleChange} type="radio" value={value}>
155150
<SelectTrigger>Select {value}</SelectTrigger>
156151
<SelectContainer>
157152
<SelectOption value="Option 1">Option 1</SelectOption>
158153
<SelectOption value="Option 2">Option 2</SelectOption>
159154
<SelectDivider />
160155
<SelectOption value="Option 3">Option 3</SelectOption>
161156
<SelectOption value="Option 4">Option 4</SelectOption>
162-
<Select onValueChange={handleSubChange} type="radio" value={subValue}>
157+
<Select onChange={handleSubChange} type="radio" value={subValue}>
163158
<SelectTrigger asChild>
164159
<SelectOption showCheck={false}>
165160
<Flex alignItems="center" justifyContent="space-between" w="100%">
@@ -200,3 +195,25 @@ function ControlledRadio() {
200195
</Select>
201196
)
202197
}
198+
199+
function SelectWithOptions() {
200+
return (
201+
<>
202+
<Select
203+
options={[
204+
{ label: 'Option 1', value: 'Option 1' },
205+
{ label: 'Option 2', value: 'Option 2', disabled: true },
206+
{
207+
label: 'Option 3',
208+
value: 'Option 3',
209+
onClick: () => {
210+
console.info('Option 3')
211+
},
212+
},
213+
]}
214+
>
215+
title
216+
</Select>
217+
</>
218+
)
219+
}

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

Lines changed: 114 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,120 @@
33
exports[`Select > should render 1`] = `
44
<div>
55
<div
6-
class="display-0-inline-block--1 position-0-relative--1 box-sizing-0-border-box-1137980104803605758-1 "
6+
class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-1137980104803605758-1 "
7+
>
8+
<button
9+
aria-expanded="false"
10+
aria-label="Select toggle"
11+
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 "
12+
type="button"
13+
>
14+
<div
15+
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"
16+
>
17+
<div
18+
class=" line-height-0-1.2--255 min-height-0-1.2em--255 "
19+
>
20+
Select
21+
</div>
22+
</div>
23+
</button>
24+
</div>
25+
</div>
26+
`;
27+
28+
exports[`Select > should render with overflow screen 1`] = `
29+
<div>
30+
<div
31+
class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-1137980104803605758-1 "
32+
>
33+
<button
34+
aria-expanded="true"
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"
38+
>
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"
41+
>
42+
<div
43+
class=" line-height-0-1.2--255 min-height-0-1.2em--255 "
44+
>
45+
Select
46+
</div>
47+
</div>
48+
</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;"
53+
>
54+
<div
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"
57+
>
58+
Option 1
59+
</div>
60+
<div
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 "
83+
>
84+
<div
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 "
88+
>
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>
109+
</div>
110+
</div>
111+
</div>
112+
</div>
113+
</div>
114+
`;
115+
116+
exports[`Select > should render with x and y properties 1`] = `
117+
<div>
118+
<div
119+
class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-1137980104803605758-1 "
7120
>
8121
<button
9122
aria-expanded="false"

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

Lines changed: 75 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ describe('Select', () => {
9494
it('should call onValueChange function when it is provided', () => {
9595
const onValueChange = vi.fn()
9696
const { container } = render(
97-
<Select onValueChange={onValueChange} type="radio">
97+
<Select onChange={onValueChange} type="radio">
9898
{children}
9999
</Select>,
100100
)
@@ -371,4 +371,78 @@ describe('Select', () => {
371371
const svg = container.querySelector('svg')
372372
expect(svg).not.toBeInTheDocument()
373373
})
374+
375+
it('should render with options properties', () => {
376+
const { container } = render(
377+
<Select
378+
options={[
379+
{ label: 'Option 1', value: 'Option 1' },
380+
{ value: 'Option 2' },
381+
]}
382+
>
383+
Select
384+
</Select>,
385+
)
386+
const selectToggle = container.querySelector('[aria-label="Select toggle"]')
387+
fireEvent.click(selectToggle!)
388+
const option1 = container.querySelector('[data-value="Option 1"]')
389+
expect(option1).toBeInTheDocument()
390+
})
391+
392+
it('should call onChange function when it is provided to SelectOption', () => {
393+
const onValueChange = vi.fn()
394+
const { container } = render(
395+
<Select
396+
onChange={onValueChange}
397+
options={[
398+
{ label: 'Option 1', value: 'Option 1' },
399+
{ value: 'Option 2' },
400+
]}
401+
>
402+
Select
403+
</Select>,
404+
)
405+
const selectToggle = container.querySelector('[aria-label="Select toggle"]')
406+
fireEvent.click(selectToggle!)
407+
const option2 = container.querySelector('[data-value="Option 2"]')
408+
expect(option2).toBeInTheDocument()
409+
fireEvent.click(option2!)
410+
expect(onValueChange).toHaveBeenCalledWith('Option 2')
411+
})
412+
413+
it('should render with x and y properties', () => {
414+
const { container } = render(
415+
<Select>
416+
<SelectTrigger>Select</SelectTrigger>
417+
<SelectContainer x={10} y={10}>
418+
<SelectOption value="Option 1">Option 1</SelectOption>
419+
<SelectOption value="Option 2">Option 2</SelectOption>
420+
</SelectContainer>
421+
</Select>,
422+
)
423+
expect(container).toMatchSnapshot()
424+
})
425+
426+
it('should render with overflow screen', () => {
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+
446+
expect(container).toMatchSnapshot()
447+
})
374448
})

0 commit comments

Comments
 (0)