Skip to content

Commit 4921fb3

Browse files
jomcarvajaljomcarvajal
authored
Merge branch 'main' into v1.18.5
2 parents c737533 + 9fcb70e commit 4921fb3

File tree

5 files changed

+104
-9
lines changed

5 files changed

+104
-9
lines changed

‎src/components/Tree/TreeCheckbox.spec.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,13 @@ describe('TreeCheckbox', () => {
2323
expect(tree).toMatchSnapshot();
2424
});
2525

26+
it('handles indeterminate state', () => {
27+
const tree = renderer.create(
28+
<TreeCheckbox isIndeterminate>Click Me</TreeCheckbox>
29+
).toJSON();
30+
expect(tree).toMatchSnapshot();
31+
});
32+
2633
it('supports slot="selection"', () => {
2734
const tree = renderer.create(
2835
<TreeCheckbox slot="selection">Click Me</TreeCheckbox>

‎src/components/Tree/TreeCheckbox.stories.tsx‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,16 @@ type CheckboxProps = React.ComponentProps<typeof TreeCheckbox>;
1717

1818
const renderCheckboxes = (
1919
variant: CheckboxProps['variant'],
20-
size: CheckboxProps['size']
20+
size: CheckboxProps['size'],
21+
isIndeterminate = false,
2122
) => (
2223
<CheckboxGroup>
2324
<h2>Size {size}</h2>
24-
<TreeCheckbox slot='selection' {...{ size, variant }}>Checkbox label</TreeCheckbox>
25-
<TreeCheckbox slot='selection' {...{ size, variant }} defaultSelected>
25+
<TreeCheckbox slot='selection' {...{ size, variant, isIndeterminate }}>Checkbox label</TreeCheckbox>
26+
<TreeCheckbox slot='selection' {...{ size, variant, isIndeterminate }} defaultSelected>
2627
Checkbox label
2728
</TreeCheckbox>
28-
<TreeCheckbox slot='selection' {...{ size, variant }} defaultSelected bold>
29+
<TreeCheckbox slot='selection' {...{ size, variant, isIndeterminate }} defaultSelected bold>
2930
Checkbox label
3031
</TreeCheckbox>
3132
</CheckboxGroup>
@@ -49,6 +50,15 @@ export const Light = () => (
4950
</>
5051
);
5152

53+
export const IsIndeterminate = () => (
54+
<>
55+
{renderCheckboxes("primary", 1.4, true)}
56+
{renderCheckboxes("primary", 1.6, true)}
57+
{renderCheckboxes("primary", 1.8, true)}
58+
{renderCheckboxes("primary", 2, true)}
59+
</>
60+
);
61+
5262
export const Error = () => (
5363
<>
5464
{renderCheckboxes("error", 1.4)}

‎src/components/Tree/TreeCheckbox.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import {
1111
CheckboxSize,
1212
CheckboxVariant
1313
} from "../Checkbox/sharedCheckboxStyles";
14+
import { checkedMixIcon } from "../svgs/checkmarksvgs";
15+
import theme from '../../../src/theme';
1416

1517
export interface TreeCheckboxProps
1618
extends PropsWithChildren<Omit<RACCheckboxProps, "children">> {
@@ -34,6 +36,17 @@ const StyledCheckbox = styled(RACCheckbox) <{
3436
&[data-selected] [data-slot="selection"]::before {
3537
${checkboxSelectionSlotCheckedStyles}
3638
}
39+
40+
&[data-indeterminate="true"] {
41+
[data-slot="selection"]::before {
42+
content: "";
43+
position: relative;
44+
transform: scale(1);
45+
background-color: ${theme.colors.palette.mediumBlue};
46+
border: none;
47+
background-image: url('${checkedMixIcon}');
48+
}
49+
}
3750
`;
3851

3952
export const TreeCheckbox = ({

‎src/components/Tree/__snapshots__/TreeCheckbox.spec.tsx.snap‎

Lines changed: 67 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
exports[`TreeCheckbox handles disabled state 1`] = `
44
<label
5-
className="sc-bczRLJ gRqfxl"
5+
className="sc-bczRLJ hkykfJ"
66
data-disabled={true}
77
data-rac=""
88
data-react-aria-pressable={true}
@@ -62,9 +62,72 @@ exports[`TreeCheckbox handles disabled state 1`] = `
6262
</label>
6363
`;
6464

65+
exports[`TreeCheckbox handles indeterminate state 1`] = `
66+
<label
67+
className="sc-bczRLJ estYWl"
68+
data-indeterminate={true}
69+
data-rac=""
70+
data-react-aria-pressable={true}
71+
onClick={[Function]}
72+
onDragStart={[Function]}
73+
onKeyDown={[Function]}
74+
onMouseDown={[Function]}
75+
onMouseEnter={[Function]}
76+
onMouseLeave={[Function]}
77+
onMouseUp={[Function]}
78+
onTouchCancel={[Function]}
79+
onTouchEnd={[Function]}
80+
onTouchMove={[Function]}
81+
onTouchStart={[Function]}
82+
>
83+
<span
84+
style={
85+
Object {
86+
"border": 0,
87+
"clip": "rect(0 0 0 0)",
88+
"clipPath": "inset(50%)",
89+
"height": "1px",
90+
"margin": "-1px",
91+
"overflow": "hidden",
92+
"padding": 0,
93+
"position": "absolute",
94+
"whiteSpace": "nowrap",
95+
"width": "1px",
96+
}
97+
}
98+
>
99+
<input
100+
checked={false}
101+
data-react-aria-pressable={true}
102+
disabled={false}
103+
onBlur={[Function]}
104+
onChange={[Function]}
105+
onClick={[Function]}
106+
onDragStart={[Function]}
107+
onFocus={[Function]}
108+
onKeyDown={[Function]}
109+
onMouseDown={[Function]}
110+
onMouseEnter={[Function]}
111+
onMouseLeave={[Function]}
112+
onMouseUp={[Function]}
113+
onTouchCancel={[Function]}
114+
onTouchEnd={[Function]}
115+
onTouchMove={[Function]}
116+
onTouchStart={[Function]}
117+
tabIndex={0}
118+
type="checkbox"
119+
/>
120+
</span>
121+
<div
122+
data-slot="selection"
123+
/>
124+
Click Me
125+
</label>
126+
`;
127+
65128
exports[`TreeCheckbox handles options 1`] = `
66129
<label
67-
className="sc-bczRLJ jaaPJI"
130+
className="sc-bczRLJ iwkggw"
68131
data-rac=""
69132
data-react-aria-pressable={true}
70133
onClick={[Function]}
@@ -126,7 +189,7 @@ exports[`TreeCheckbox handles options 1`] = `
126189

127190
exports[`TreeCheckbox matches snapshot 1`] = `
128191
<label
129-
className="sc-bczRLJ brkWAJ"
192+
className="sc-bczRLJ estYWl"
130193
data-rac=""
131194
data-react-aria-pressable={true}
132195
onClick={[Function]}
@@ -188,7 +251,7 @@ exports[`TreeCheckbox matches snapshot 1`] = `
188251

189252
exports[`TreeCheckbox supports slot="selection" 1`] = `
190253
<label
191-
className="sc-bczRLJ brkWAJ"
254+
className="sc-bczRLJ estYWl"
192255
data-rac=""
193256
data-react-aria-pressable={true}
194257
onClick={[Function]}

‎src/components/svgs/checkmarksvgs.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,6 @@ export const whiteCheckmark = 'data:image/svg+xml,<svg height="125px" width="125
22

33
export const grayCheckmark = 'data:image/svg+xml,<svg height="125px" width="125px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 17.837 17.837" xml:space="preserve" fill="%23000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><g><path style="fill:%235e5e5e;" d="M16.145,2.571c-0.272-0.273-0.718-0.273-0.99,0L6.92,10.804l-4.241-4.27 c-0.272-0.274-0.715-0.274-0.989,0L0.204,8.019c-0.272,0.271-0.272,0.717,0,0.99l6.217,6.258c0.272,0.271,0.715,0.271,0.99,0 L17.63,5.047c0.276-0.273,0.276-0.72,0-0.994L16.145,2.571z"></path></g></g></svg>'
44

5-
export const redCheckmark = 'data:image/svg+xml,<svg height="125px" width="125px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 17.837 17.837" xml:space="preserve" fill="%23000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><g><path style="fill:%23C22032;" d="M16.145,2.571c-0.272-0.273-0.718-0.273-0.99,0L6.92,10.804l-4.241-4.27 c-0.272-0.274-0.715-0.274-0.989,0L0.204,8.019c-0.272,0.271-0.272,0.717,0,0.99l6.217,6.258c0.272,0.271,0.715,0.271,0.99,0 L17.63,5.047c0.276-0.273,0.276-0.72,0-0.994L16.145,2.571z"></path></g></g></svg>'
5+
export const redCheckmark = 'data:image/svg+xml,<svg height="125px" width="125px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 17.837 17.837" xml:space="preserve" fill="%23000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><g><path style="fill:%23C22032;" d="M16.145,2.571c-0.272-0.273-0.718-0.273-0.99,0L6.92,10.804l-4.241-4.27 c-0.272-0.274-0.715-0.274-0.989,0L0.204,8.019c-0.272,0.271-0.272,0.717,0,0.99l6.217,6.258c0.272,0.271,0.715,0.271,0.99,0 L17.63,5.047c0.276-0.273,0.276-0.72,0-0.994L16.145,2.571z"></path></g></g></svg>'
6+
7+
export const checkedMixIcon = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 4" width="12" height="4"><path d="M10.5.965a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75H1.5a.75.75 0 0 1-.75-.75v-.75a.75.75 0 0 1 .75-.75Z" fill="%23fff"/></svg>'

0 commit comments

Comments
 (0)