Skip to content

Commit be1d004

Browse files
jkettmannjkettmann
committed
Clean up styles
1 parent d820654 commit be1d004

File tree

5 files changed

+76
-111
lines changed

5 files changed

+76
-111
lines changed

‎features/ui/select/option.styled.ts

Lines changed: 10 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,24 @@
1-
import styled, { css } from "styled-components";
1+
import styled from "styled-components";
22

3-
export const ListItem = styled.li.attrs(() => ({
4-
tabIndex: 0,
5-
}))<{ isCurrentlySelected: boolean }>`
6-
margin: 0;
7-
padding: 0;
3+
export const ListItem = styled.li<{ isSelected: boolean }>`
84
display: flex;
9-
width: 100%;
105
justify-content: space-between;
116
align-items: center;
7+
width: 100%;
8+
margin: 0;
9+
padding: 0;
10+
box-sizing: border-box;
1211
list-style-type: none;
13-
padding-inline: 0.75rem;
14-
padding-block: calc(0.75rem - 0.1rem);
15-
font-size: 1rem;
16-
line-height: 1.5rem;
17-
font-weight: 400;
12+
padding: 0.625rem 0.75rem;
1813
cursor: pointer;
19-
z-index: 100;
2014
color: #1d2939;
21-
background-color: #fff;
22-
box-sizing: border-box;
23-
${({ isCurrentlySelected }) =>
24-
isCurrentlySelected &&
25-
css`
26-
background-color: #fcfaff;
27-
`};
28-
15+
background-color: ${({ isSelected }) => (isSelected ? "#fcfaff" : "#ffffff")};
2916
&:hover {
30-
background: #f4ebff;
17+
background-color: #f4ebff;
3118
}
3219
`;
3320

34-
export const ListItemIcon = styled.img<{ isCurrentlySelected: boolean }>`
35-
display: ${({ isCurrentlySelected }) =>
36-
isCurrentlySelected ? "block" : "none"};
37-
padding: 0;
21+
export const ListItemIcon = styled.img`
3822
width: 1rem;
3923
height: 1rem;
4024
`;

‎features/ui/select/option.tsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,18 +18,15 @@ export function Option<P>({
1818
}: OptionProps<P>) {
1919
return (
2020
<S.ListItem
21-
isCurrentlySelected={isSelected}
21+
isSelected={isSelected}
2222
aria-selected={isSelected}
2323
onClick={() => onClick(value)}
2424
onKeyDown={(event) => onKeyDown(event, value)}
2525
role="option"
2626
tabIndex={0}
2727
>
2828
{children}
29-
<S.ListItemIcon
30-
isCurrentlySelected={isSelected}
31-
src="/icons/checked.svg"
32-
/>
29+
{isSelected && <S.ListItemIcon src="/icons/checked.svg" />}
3330
</S.ListItem>
3431
);
3532
}

‎features/ui/select/select.stories.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const options = [
2020
const Template: ComponentStory<typeof Select> = (props) => {
2121
const [selectedValue, setSelectedValue] = useState<number>();
2222
return (
23-
<div style={{ padding: 50, height: 400 }}>
23+
<div style={{ padding: 50, height: 400, width: 320 }}>
2424
<Select
2525
{...props}
2626
options={options}
@@ -40,7 +40,6 @@ Default.args = {
4040
hint: "This is a hint text to help user.",
4141
defaultValue: "Demi Wilkinson",
4242
errorMessage: "",
43-
width: "",
4443
};
4544
Default.parameters = {
4645
viewMode: "docs",

‎features/ui/select/select.styled.ts

Lines changed: 56 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,116 +1,104 @@
11
import styled, { css } from "styled-components";
22

3-
export const Container = styled.div<any>`
3+
export const Container = styled.div`
44
position: relative;
5-
display: block;
6-
width: ${({ width }) => width || `calc(5rem * 4)`};
7-
background-color: #fff;
5+
letter-spacing: 0.04rem;
86
`;
97

10-
export const SelectedOption = styled.div.attrs(() => ({
11-
tabIndex: 0,
12-
ariaHasPopup: "listbox",
13-
}))<any>`
14-
border: 1px solid;
15-
border-color: ${({ disabled, errorMessage }) =>
16-
!disabled && errorMessage ? "#FDA29B" : "#D0D5DD"};
17-
border-radius: 7px;
18-
width: ${({ width }) => width || `calc(5rem * 4 - 1.5rem)`};
19-
padding: 0.5rem 0.75rem;
20-
color: ${({ selectedOption }) => (selectedOption ? "#101828" : "#667085")};
21-
cursor: pointer;
8+
export const SelectedOption = styled.div<{
9+
disabled: boolean;
10+
hasError: boolean;
11+
hasValue: boolean;
12+
}>`
2213
display: flex;
23-
justify-content: space-between;
24-
letter-spacing: 0.052rem;
25-
font-size: 1rem;
26-
line-height: 1.5rem;
27-
font-weight: 400;
14+
align-items: center;
15+
padding: 0.6875rem 0.875rem;
16+
border: 1px solid #d0d5dd;
17+
border-radius: 8px;
18+
cursor: pointer;
19+
color: #667085;
20+
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
2821
&:focus {
29-
outline: 3px solid;
30-
outline-color: ${({ disabled, errorMessage }) =>
31-
!disabled && errorMessage ? "#FEE4E2" : "#E9D7FE"};
22+
outline: none;
23+
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #f4ebff;
3224
}
33-
${({ disabled }) =>
34-
disabled &&
35-
css`
36-
color: #667085;
37-
background-color: #f2f4f7;
38-
pointer-events: none;
39-
`}
25+
${({ hasValue, hasError, disabled }) => {
26+
if (disabled) {
27+
return css`
28+
color: #667085;
29+
background-color: #f2f4f7;
30+
pointer-events: none;
31+
`;
32+
}
33+
if (hasError) {
34+
return css`
35+
border-color: #fda29b;
36+
&:focus {
37+
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05),
38+
0px 0px 0px 4px #fee4e2;
39+
}
40+
`;
41+
}
42+
if (hasValue) {
43+
return css`
44+
color: #101828;
45+
`;
46+
}
47+
}}
4048
`;
4149

4250
export const SelectArrowIcon = styled.img<{
4351
showDropdown: boolean;
4452
}>`
4553
transform: ${({ showDropdown }) =>
4654
showDropdown ? "rotate(180deg)" : "none"};
47-
padding-inline: 0.25rem;
4855
`;
4956

5057
export const OptionalIcon = styled.img`
5158
width: 1.25rem;
5259
height: 1.25rem;
53-
padding-inline: 0.25rem 0.5rem;
5460
`;
5561

56-
export const LeftContainer = styled.div`
57-
display: flex;
58-
align-items: center;
62+
export const SelectedText = styled.span`
63+
flex: 1;
64+
padding: 0 0.5rem;
5965
`;
6066

61-
export const Label = styled.p`
62-
margin: 0;
67+
export const Label = styled.div`
6368
margin-bottom: 0.25rem;
6469
color: #344054;
65-
font-size: 1rem;
66-
line-height: 1.5rem;
67-
font-weight: 400;
70+
font-size: 0.875rem;
71+
line-height: 1.25rem;
72+
letter-spacing: 0.025rem;
6873
`;
6974

7075
export const List = styled.ul<{ showDropdown: boolean }>`
71-
display: block;
76+
display: none;
77+
position: absolute;
7278
width: 100%;
7379
margin: 0.5rem 0 0;
7480
padding: 0;
75-
position: absolute;
81+
z-index: 1;
7682
background: white;
77-
box-shadow: 0 7px 12px -6px #d0d5dd;
7883
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.1),
7984
0px 4px 6px -2px rgba(16, 24, 40, 0.05);
8085
border-radius: 8px;
8186
overflow: hidden;
82-
8387
${({ showDropdown }) =>
84-
showDropdown
85-
? css`
86-
opacity: 1;
87-
visibility: visible;
88-
position: absolute;
89-
height: auto;
90-
z-index: 200;
91-
`
92-
: css`
93-
opacity: 0;
94-
visibility: hidden;
95-
`};
88+
showDropdown &&
89+
css`
90+
display: block;
91+
`}
9692
`;
9793

98-
export const Hint = styled.p`
99-
margin: 0;
94+
export const Hint = styled.div`
10095
margin-top: 0.25rem;
10196
color: #667085;
10297
font-size: 0.875rem;
10398
line-height: 1.25rem;
104-
font-weight: 400;
105-
letter-spacing: 0.05rem;
99+
letter-spacing: 0.025rem;
106100
`;
107101

108-
export const ErrorMessage = styled.p`
109-
margin: 0;
110-
margin-top: 0.25rem;
102+
export const ErrorMessage = styled(Hint)`
111103
color: #f04438;
112-
font-size: 0.875rem;
113-
line-height: 1.25rem;
114-
font-weight: 400;
115-
letter-spacing: 0.05rem;
116104
`;

‎features/ui/select/select.tsx

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ type SelectProps<T> = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & {
1717
placeholder?: string;
1818
disabled?: boolean;
1919
iconSrc?: string;
20-
width?: string | number;
2120
label?: string;
2221
hint?: string;
2322
};
@@ -33,7 +32,6 @@ export function Select<T>({
3332
label = "",
3433
hint = "",
3534
errorMessage = "",
36-
width = "",
3735
...props
3836
}: SelectProps<T>) {
3937
const [showDropdown, setShowDropdown] = useState(false);
@@ -77,7 +75,7 @@ export function Select<T>({
7775
);
7876

7977
return (
80-
<S.Container ref={ref} width={width} {...props}>
78+
<S.Container ref={ref} {...props}>
8179
{label && <S.Label>{label}</S.Label>}
8280

8381
<S.SelectedOption
@@ -86,23 +84,22 @@ export function Select<T>({
8684
hasError={!!errorMessage}
8785
disabled={disabled}
8886
aria-expanded={showDropdown}
89-
width={width}
9087
onKeyDown={onKeyDown}
88+
tabIndex={disabled ? -1 : 0}
89+
aria-haspopup="listbox"
9190
>
92-
<S.LeftContainer>
93-
{iconSrc && <S.OptionalIcon src={iconSrc} />}
94-
{selectedOption?.label || placeholder}
95-
</S.LeftContainer>
91+
{iconSrc && <S.OptionalIcon src={iconSrc} />}
92+
<S.SelectedText>{selectedOption?.label || placeholder}</S.SelectedText>
9693

9794
<S.SelectArrowIcon
9895
src="/icons/chevron-down.svg"
9996
showDropdown={showDropdown}
10097
/>
10198
</S.SelectedOption>
10299

103-
{hint && !showDropdown && !errorMessage && <S.Hint>{hint}</S.Hint>}
100+
{hint && !errorMessage && <S.Hint>{hint}</S.Hint>}
104101

105-
{errorMessage && !showDropdown && !disabled && (
102+
{errorMessage && !disabled && (
106103
<S.ErrorMessage>{errorMessage}</S.ErrorMessage>
107104
)}
108105

0 commit comments

Comments
 (0)