Skip to content

Commit e56aa7c

Browse files
DreaminDaniDreaminDani
committed
chore(Checkbox): migrate styling from styled-components to CSS Modules
1 parent e2161f6 commit e56aa7c

3 files changed

Lines changed: 149 additions & 59 deletions

File tree

‎.changeset/migrate-checkbox-to-css-modules.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@clickhouse/click-ui': patch
3+
---
4+
5+
Migrate Checkbox from styled-components to css modules with no change in behavior

‎src/components/Checkbox/Checkbox.module.css‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
/* The wrapper class is applied alongside FormRoot's styled-components class.
2+
The .wrapper.wrapper double-class boost matches the specificity behavior of
3+
the original `styled(FormRoot)` chain so these overrides reliably beat
4+
FormRoot's `align-items: flex-start` regardless of stylesheet insertion
5+
order between CSS Modules and the runtime-injected styled-components. */
6+
.wrapper.wrapper {
7+
/* stylelint-disable-next-line plugin/no-unsupported-browser-features -- `fit-content`
8+
keyword on `max-width` is widely supported on evergreen browsers; the original
9+
styled-components rule used the same value. */
10+
max-width: fit-content;
11+
align-items: center;
12+
}
13+
14+
.checkinput {
15+
display: flex;
16+
width: var(--click-checkbox-size-all);
17+
height: var(--click-checkbox-size-all);
18+
flex-shrink: 0;
19+
justify-content: center;
20+
align-items: center;
21+
border: 1px solid var(--checkbox-stroke-default);
22+
border-radius: var(--click-checkbox-radii-all);
23+
background: var(--checkbox-bg-default);
24+
cursor: pointer;
25+
}
26+
27+
.checkinput_variant_default {
28+
--checkbox-bg-default: var(--click-checkbox-color-variations-default-background-default);
29+
--checkbox-bg-hover: var(--click-checkbox-color-variations-default-background-hover);
30+
--checkbox-bg-active: var(--click-checkbox-color-variations-default-background-active);
31+
--checkbox-stroke-default: var(--click-checkbox-color-variations-default-stroke-default);
32+
--checkbox-stroke-active: var(--click-checkbox-color-variations-default-stroke-active);
33+
}
34+
35+
.checkinput_variant_var1 {
36+
--checkbox-bg-default: var(--click-checkbox-color-variations-var1-background-default);
37+
--checkbox-bg-hover: var(--click-checkbox-color-variations-var1-background-hover);
38+
--checkbox-bg-active: var(--click-checkbox-color-variations-var1-background-active);
39+
--checkbox-stroke-default: var(--click-checkbox-color-variations-var1-stroke-default);
40+
--checkbox-stroke-active: var(--click-checkbox-color-variations-var1-stroke-active);
41+
}
42+
43+
.checkinput_variant_var2 {
44+
--checkbox-bg-default: var(--click-checkbox-color-variations-var2-background-default);
45+
--checkbox-bg-hover: var(--click-checkbox-color-variations-var2-background-hover);
46+
--checkbox-bg-active: var(--click-checkbox-color-variations-var2-background-active);
47+
--checkbox-stroke-default: var(--click-checkbox-color-variations-var2-stroke-default);
48+
--checkbox-stroke-active: var(--click-checkbox-color-variations-var2-stroke-active);
49+
}
50+
51+
.checkinput_variant_var3 {
52+
--checkbox-bg-default: var(--click-checkbox-color-variations-var3-background-default);
53+
--checkbox-bg-hover: var(--click-checkbox-color-variations-var3-background-hover);
54+
--checkbox-bg-active: var(--click-checkbox-color-variations-var3-background-active);
55+
--checkbox-stroke-default: var(--click-checkbox-color-variations-var3-stroke-default);
56+
--checkbox-stroke-active: var(--click-checkbox-color-variations-var3-stroke-active);
57+
}
58+
59+
.checkinput_variant_var4 {
60+
--checkbox-bg-default: var(--click-checkbox-color-variations-var4-background-default);
61+
--checkbox-bg-hover: var(--click-checkbox-color-variations-var4-background-hover);
62+
--checkbox-bg-active: var(--click-checkbox-color-variations-var4-background-active);
63+
--checkbox-stroke-default: var(--click-checkbox-color-variations-var4-stroke-default);
64+
--checkbox-stroke-active: var(--click-checkbox-color-variations-var4-stroke-active);
65+
}
66+
67+
.checkinput_variant_var5 {
68+
--checkbox-bg-default: var(--click-checkbox-color-variations-var5-background-default);
69+
--checkbox-bg-hover: var(--click-checkbox-color-variations-var5-background-hover);
70+
--checkbox-bg-active: var(--click-checkbox-color-variations-var5-background-active);
71+
--checkbox-stroke-default: var(--click-checkbox-color-variations-var5-stroke-default);
72+
--checkbox-stroke-active: var(--click-checkbox-color-variations-var5-stroke-active);
73+
}
74+
75+
.checkinput_variant_var6 {
76+
--checkbox-bg-default: var(--click-checkbox-color-variations-var6-background-default);
77+
--checkbox-bg-hover: var(--click-checkbox-color-variations-var6-background-hover);
78+
--checkbox-bg-active: var(--click-checkbox-color-variations-var6-background-active);
79+
--checkbox-stroke-default: var(--click-checkbox-color-variations-var6-stroke-default);
80+
--checkbox-stroke-active: var(--click-checkbox-color-variations-var6-stroke-active);
81+
}
82+
83+
.checkinput:hover {
84+
background: var(--checkbox-bg-hover);
85+
}
86+
87+
.checkinput[data-state='checked'],
88+
.checkinput[data-state='indeterminate'] {
89+
border-color: var(--checkbox-stroke-active);
90+
background: var(--checkbox-bg-active);
91+
}
92+
93+
/* stylelint-disable no-descending-specificity -- disabled state intentionally
94+
defined after checked/indeterminate to mirror the source cascade order;
95+
matches the styled-components rule which used a nested `&[data-disabled]`
96+
block placed after the state selectors. */
97+
.checkinput[data-disabled] {
98+
border-color: var(--click-checkbox-color-stroke-disabled);
99+
background: var(--click-checkbox-color-background-disabled);
100+
cursor: not-allowed;
101+
}
102+
103+
.checkinput[data-disabled][data-state='checked'],
104+
.checkinput[data-disabled][data-state='indeterminate'] {
105+
border-color: var(--click-checkbox-color-stroke-disabled);
106+
background: var(--click-checkbox-color-background-disabled);
107+
}
108+
/* stylelint-enable no-descending-specificity */
109+
110+
.checkicon {
111+
color: var(--click-checkbox-color-check-active);
112+
}
113+
114+
.checkicon[data-disabled] {
115+
color: var(--click-checkbox-color-check-disabled);
116+
}

‎src/components/Checkbox/Checkbox.tsx‎

Lines changed: 28 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,27 @@ import { Icon } from '@/components/Icon';
33

44
import * as RadixCheckbox from '@radix-ui/react-checkbox';
55
import { useId } from 'react';
6-
import { styled } from 'styled-components';
76
import { FormRoot } from '@/components/FormContainer';
8-
import { CheckboxProps, CheckboxVariants } from './Checkbox.types';
7+
import { cn, cva } from '@/lib/cva';
8+
import styles from './Checkbox.module.css';
9+
import { CheckboxProps } from './Checkbox.types';
910

10-
const Wrapper = styled(FormRoot)`
11-
align-items: center;
12-
max-width: fit-content;
13-
`;
11+
const checkInputVariants = cva(styles.checkinput, {
12+
variants: {
13+
variant: {
14+
default: styles['checkinput_variant_default'],
15+
var1: styles['checkinput_variant_var1'],
16+
var2: styles['checkinput_variant_var2'],
17+
var3: styles['checkinput_variant_var3'],
18+
var4: styles['checkinput_variant_var4'],
19+
var5: styles['checkinput_variant_var5'],
20+
var6: styles['checkinput_variant_var6'],
21+
},
22+
},
23+
defaultVariants: {
24+
variant: 'default',
25+
},
26+
});
1427

1528
export const Checkbox = ({
1629
id,
@@ -20,30 +33,32 @@ export const Checkbox = ({
2033
orientation = 'horizontal',
2134
dir = 'end',
2235
checked,
36+
className,
2337
...delegated
2438
}: CheckboxProps) => {
2539
const defaultId = useId();
2640
return (
27-
<Wrapper
41+
<FormRoot
2842
$orientation={orientation}
2943
$dir={dir}
44+
className={styles.wrapper}
3045
>
31-
<CheckInput
46+
<RadixCheckbox.Root
3247
id={id ?? defaultId}
3348
data-testid="checkbox"
34-
variant={variant}
3549
disabled={disabled}
3650
aria-label={`${label}`}
3751
checked={checked}
3852
{...delegated}
53+
className={cn(checkInputVariants({ variant }), className)}
3954
>
40-
<CheckIconWrapper>
55+
<RadixCheckbox.Indicator className={styles.checkicon}>
4156
<Icon
4257
name={checked === 'indeterminate' ? 'minus' : 'check'}
4358
size="sm"
4459
/>
45-
</CheckIconWrapper>
46-
</CheckInput>
60+
</RadixCheckbox.Indicator>
61+
</RadixCheckbox.Root>
4762
{label && (
4863
<GenericLabel
4964
htmlFor={id ?? defaultId}
@@ -52,52 +67,6 @@ export const Checkbox = ({
5267
{label}
5368
</GenericLabel>
5469
)}
55-
</Wrapper>
70+
</FormRoot>
5671
);
5772
};
58-
59-
const CheckInput = styled(RadixCheckbox.Root)<{
60-
variant: CheckboxVariants;
61-
}>`
62-
display: flex;
63-
align-items: center;
64-
justify-content: center;
65-
flex-shrink: 0;
66-
67-
${({ theme, variant }) => `
68-
border-radius: ${theme.click.checkbox.radii.all};
69-
width: ${theme.click.checkbox.size.all};
70-
height: ${theme.click.checkbox.size.all};
71-
background: ${theme.click.checkbox.color.variations[variant].background.default};
72-
border: 1px solid ${theme.click.checkbox.color.variations[variant].stroke.default};
73-
cursor: pointer;
74-
75-
&:hover {
76-
background: ${theme.click.checkbox.color.variations[variant].background.hover};
77-
}
78-
&[data-state="checked"],
79-
&[data-state="indeterminate"] {
80-
border-color: ${theme.click.checkbox.color.variations[variant].stroke.active};
81-
background: ${theme.click.checkbox.color.variations[variant].background.active};
82-
}
83-
&[data-disabled] {
84-
background: ${theme.click.checkbox.color.background.disabled};
85-
border-color: ${theme.click.checkbox.color.stroke.disabled};
86-
cursor: not-allowed;
87-
&[data-state="checked"],
88-
&[data-state="indeterminate"] {
89-
background: ${theme.click.checkbox.color.background.disabled};
90-
border-color: ${theme.click.checkbox.color.stroke.disabled};
91-
}
92-
}
93-
`};
94-
`;
95-
96-
const CheckIconWrapper = styled(RadixCheckbox.Indicator)`
97-
${({ theme }) => `
98-
color: ${theme.click.checkbox.color.check.active};
99-
&[data-disabled] {
100-
color: ${theme.click.checkbox.color.check.disabled};
101-
}
102-
`}
103-
`;

0 commit comments

Comments
 (0)