Skip to content

Commit f85dfa7

Browse files
shiftpshshiftpsh
authored
Merge pull request #27 from solved-ac/feature/select
Select component
2 parents c5cf6d2 + 70ccf88 commit f85dfa7

File tree

7 files changed

+258
-146
lines changed

7 files changed

+258
-146
lines changed

‎example/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,12 @@
2222
"@types/jest": "link:../node_modules/@types/jest",
2323
"@types/node": "link:../node_modules/@types/node",
2424
"@types/react-dom": "link:../node_modules/@types/react-dom",
25+
"@types/react-icons": "link:../node_modules/@types/react-icons",
2526
"@types/react": "link:../node_modules/@types/react",
2627
"framer-motion": "link:../node_modules/framer-motion",
2728
"react-dom": "link:../node_modules/react-dom",
2829
"react-scripts": "link:../node_modules/react-scripts",
30+
"react-icons": "link:../node_modules/react-icons",
2931
"react": "link:../node_modules/react",
3032
"typescript": "link:../node_modules/typescript"
3133
},

‎example/src/stories/Select.stories.tsx‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Select } from '@solved-ac/ui-react'
1+
import { Centering, Select } from '@solved-ac/ui-react'
22
import { ComponentMeta, ComponentStory } from '@storybook/react'
33
import React from 'react'
44

@@ -18,25 +18,41 @@ export default {
1818
description:
1919
'Whether the selector should take up the full width of its container',
2020
},
21+
disableEllipsis: {
22+
control: 'boolean',
23+
description: 'Whether the selector should disable ellipsis',
24+
},
2125
},
2226
} as ComponentMeta<typeof Select>
2327

24-
const Template: ComponentStory<typeof Select> = (args) => <Select {...args} />
28+
const Template: ComponentStory<typeof Select> = (args) => (
29+
<Centering>
30+
<Select {...args} />
31+
</Centering>
32+
)
2533

2634
export const Default = Template.bind({})
2735
Default.args = {
2836
value: 'Select',
2937
items: Array(10)
3038
.fill(undefined)
31-
.map((_, i) => `Item ${i}`),
39+
.map((_, i) => `Item ${i + 1}`),
3240
}
3341

3442
export const LongEntries = Template.bind({})
3543
LongEntries.args = {
3644
value: 'Select',
3745
items: Array(256)
3846
.fill(undefined)
39-
.map((_, i) => `Item ${i}`),
47+
.map((_, i) => `Item ${i + 1}`),
48+
}
49+
50+
export const LongContents = Template.bind({})
51+
LongContents.args = {
52+
value: 'Select',
53+
items: Array(256)
54+
.fill(undefined)
55+
.map((_, i) => `Item ${i + 1} `.repeat(i + 1)),
4056
}
4157

4258
export const CustomRender = Template.bind({})

‎example/yarn.lock‎

Lines changed: 32 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2077,28 +2077,28 @@
20772077
minimatch "^3.1.2"
20782078
strip-json-comments "^3.1.1"
20792079

2080-
"@floating-ui/core@^1.0.1":
2081-
version "1.0.1"
2082-
resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.0.1.tgz#00e64d74e911602c8533957af0cce5af6b2e93c8"
2083-
integrity sha512-bO37brCPfteXQfFY0DyNDGB3+IMe4j150KFQcgJ5aBP295p9nBGeHEs/p0czrRbtlHq4Px/yoPXO/+dOCcF4uA==
2080+
"@floating-ui/core@^1.2.2":
2081+
version "1.2.2"
2082+
resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.2.2.tgz#66f62cf1b7de2ed23a09c101808536e68caffaec"
2083+
integrity sha512-FaO9KVLFnxknZaGWGmNtjD2CVFuc0u4yeGEofoyXO2wgRA7fLtkngT6UB0vtWQWuhH3iMTZZ/Y89CMeyGfn8pA==
20842084

2085-
"@floating-ui/dom@^1.0.0":
2086-
version "1.0.3"
2087-
resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.0.3.tgz#b439c8a66436c2cae8d97e889f0b76cce757a6ec"
2088-
integrity sha512-6H1kwjkOZKabApNtXRiYHvMmYJToJ1DV7rQ3xc/WJpOABhQIOJJOdz2AOejj8X+gcybaFmBpisVTZxBZAM3V0w==
2085+
"@floating-ui/dom@^1.2.1":
2086+
version "1.2.3"
2087+
resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.2.3.tgz#8dc6fbf799fbb5c29f705b54bdd51f3ab0ee03a2"
2088+
integrity sha512-lK9cZUrHSJLMVAdCvDqs6Ug8gr0wmqksYiaoj/bxj2gweRQkSuhg2/V6Jswz2KiQ0RAULbqw1oQDJIMpQ5GfGA==
20892089
dependencies:
2090-
"@floating-ui/core" "^1.0.1"
2090+
"@floating-ui/core" "^1.2.2"
20912091

20922092
"@floating-ui/react-dom-interactions@link:../node_modules/@floating-ui/react-dom-interactions":
20932093
version "0.0.0"
20942094
uid ""
20952095

2096-
"@floating-ui/react-dom@^1.0.0":
2097-
version "1.0.0"
2098-
resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-1.0.0.tgz#e0975966694433f1f0abffeee5d8e6bb69b7d16e"
2099-
integrity sha512-uiOalFKPG937UCLm42RxjESTWUVpbbatvlphQAU6bsv+ence6IoVG8JOUZcy8eW81NkU+Idiwvx10WFLmR4MIg==
2096+
"@floating-ui/react-dom@^1.0.1":
2097+
version "1.3.0"
2098+
resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-1.3.0.tgz#4d35d416eb19811c2b0e9271100a6aa18c1579b3"
2099+
integrity sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g==
21002100
dependencies:
2101-
"@floating-ui/dom" "^1.0.0"
2101+
"@floating-ui/dom" "^1.2.1"
21022102

21032103
"@gar/promisify@^1.0.1":
21042104
version "1.1.3"
@@ -4193,6 +4193,10 @@
41934193
version "0.0.0"
41944194
uid ""
41954195

4196+
"@types/react-icons@link:../node_modules/@types/react-icons":
4197+
version "0.0.0"
4198+
uid ""
4199+
41964200
"@types/react-syntax-highlighter@11.0.5":
41974201
version "11.0.5"
41984202
resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.5.tgz#0d546261b4021e1f9d85b50401c0a42acb106087"
@@ -12881,6 +12885,15 @@ react-helmet-async@^1.0.7:
1288112885
react-fast-compare "^3.2.0"
1288212886
shallowequal "^1.1.0"
1288312887

12888+
react-icons@*:
12889+
version "4.8.0"
12890+
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.8.0.tgz#621e900caa23b912f737e41be57f27f6b2bff445"
12891+
integrity sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==
12892+
12893+
"react-icons@link:../node_modules/react-icons":
12894+
version "0.0.0"
12895+
uid ""
12896+
1288412897
react-inspector@^5.1.0:
1288512898
version "5.1.1"
1288612899
resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-5.1.1.tgz#58476c78fde05d5055646ed8ec02030af42953c8"
@@ -14343,6 +14356,11 @@ synchronous-promise@^2.0.15:
1434314356
resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.15.tgz#07ca1822b9de0001f5ff73595f3d08c4f720eb8e"
1434414357
integrity sha512-k8uzYIkIVwmT+TcglpdN50pS2y1BDcUnBPK9iJeGu0Pl1lOI8pD6wtzgw91Pjpe+RxtTncw32tLxs/R0yNL2Mg==
1434514358

14359+
tabbable@^6.0.1:
14360+
version "6.1.1"
14361+
resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.1.1.tgz#40cfead5ed11be49043f04436ef924c8890186a0"
14362+
integrity sha512-4kl5w+nCB44EVRdO0g/UGoOp3vlwgycUVtkk/7DPyeLZUCuNFFKCFG6/t/DgHLrUPHjrZg6s5tNm+56Q2B0xyg==
14363+
1434614364
tailwindcss@^3.0.2:
1434714365
version "3.0.24"
1434814366
resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.0.24.tgz#22e31e801a44a78a1d9a81ecc52e13b69d85704d"

‎package.json‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,24 +31,26 @@
3131
"peerDependencies": {
3232
"@emotion/react": ">=11",
3333
"@emotion/styled": ">=11",
34-
"@floating-ui/react-dom-interactions": "^0.8.0",
34+
"@floating-ui/react-dom-interactions": "^0.13.3",
3535
"framer-motion": "6.x",
3636
"react": ">=17",
37-
"react-dom": ">=17"
37+
"react-dom": ">=17",
38+
"react-icons": "^4.8.0"
3839
},
3940
"devDependencies": {
4041
"@babel/plugin-proposal-decorators": "^7.17.9",
4142
"@babel/plugin-proposal-optional-chaining": "^7.16.7",
4243
"@emotion/react": "^11.1.5",
4344
"@emotion/styled": "^11.1.5",
44-
"@floating-ui/react-dom-interactions": "^0.8.0",
45+
"@floating-ui/react-dom-interactions": "^0.13.3",
4546
"@testing-library/jest-dom": "^4.2.4",
4647
"@testing-library/react": "^9.5.0",
4748
"@testing-library/user-event": "^7.2.1",
4849
"@types/jest": "^25.1.4",
4950
"@types/node": "^12.12.38",
5051
"@types/react": "^18.0.9",
5152
"@types/react-dom": "^18.0.3",
53+
"@types/react-icons": "^3.0.0",
5254
"@typescript-eslint/eslint-plugin": "^5.22.0",
5355
"@typescript-eslint/parser": "^5.22.0",
5456
"babel-eslint": "^10.0.3",
@@ -78,6 +80,7 @@
7880
"prettier": "^2.6.2",
7981
"react": "^17.0.1",
8082
"react-dom": "^17.0.1",
83+
"react-icons": "^4.8.0",
8184
"react-scripts": "^5.0.1",
8285
"typescript": "^4.6.4"
8386
}

‎src/components/$List/ListItem.tsx‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -83,17 +83,7 @@ export const ListItem: PC<'div', ListItemProps> = React.forwardRef(
8383
hoverColor || (backgroundColor && computeHoverColor(backgroundColor))
8484

8585
return (
86-
<ListItemWrapper
87-
style={{
88-
[vars.backgroundColor]: backgroundColor,
89-
[vars.hoverBackgroundColor]: computedHoverColor,
90-
[vars.textColor]:
91-
backgroundColor && readableColor(backgroundColor, solvedTheme),
92-
[vars.hoverTextColor]:
93-
computedHoverColor &&
94-
readableColor(computedHoverColor, solvedTheme),
95-
}}
96-
>
86+
<ListItemWrapper>
9787
<ListItemContainer
9888
ref={ref}
9989
as={as}
@@ -102,7 +92,16 @@ export const ListItem: PC<'div', ListItemProps> = React.forwardRef(
10292
disabled={disabled && clickable}
10393
clickable={clickable}
10494
padding={padding}
105-
style={style}
95+
style={{
96+
[vars.backgroundColor]: backgroundColor,
97+
[vars.hoverBackgroundColor]: computedHoverColor,
98+
[vars.textColor]:
99+
backgroundColor && readableColor(backgroundColor, solvedTheme),
100+
[vars.hoverTextColor]:
101+
computedHoverColor &&
102+
readableColor(computedHoverColor, solvedTheme),
103+
...style,
104+
}}
106105
{...rest}
107106
>
108107
{children}

0 commit comments

Comments
 (0)