Skip to content

CORE-1121: indeterminate styles for TreeCheckbox #98

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 10, 2025
Merged

CORE-1121: indeterminate styles for TreeCheckbox #98

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b4a351a
indeterminate styles for TreeCheckbox
jomcarvajal Sep 9, 2025
a474f0a
fix typo
jomcarvajal Sep 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions src/components/Tree/TreeCheckbox.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,13 @@ describe('TreeCheckbox', () => {
expect(tree).toMatchSnapshot();
});

it('handles indeterminate state', () => {
const tree = renderer.create(
<TreeCheckbox isIndeterminate>Click Me</TreeCheckbox>
).toJSON();
expect(tree).toMatchSnapshot();
});

it('supports slot="selection"', () => {
const tree = renderer.create(
<TreeCheckbox slot="selection">Click Me</TreeCheckbox>
Expand Down
18 changes: 14 additions & 4 deletions src/components/Tree/TreeCheckbox.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,16 @@ type CheckboxProps = React.ComponentProps<typeof TreeCheckbox>;

const renderCheckboxes = (
variant: CheckboxProps['variant'],
size: CheckboxProps['size']
size: CheckboxProps['size'],
isIndeterminate = false,
) => (
<CheckboxGroup>
<h2>Size {size}</h2>
<TreeCheckbox slot='selection' {...{ size, variant }}>Checkbox label</TreeCheckbox>
<TreeCheckbox slot='selection' {...{ size, variant }} defaultSelected>
<TreeCheckbox slot='selection' {...{ size, variant, isIndeterminate }}>Checkbox label</TreeCheckbox>
<TreeCheckbox slot='selection' {...{ size, variant, isIndeterminate }} defaultSelected>
Checkbox label
</TreeCheckbox>
<TreeCheckbox slot='selection' {...{ size, variant }} defaultSelected bold>
<TreeCheckbox slot='selection' {...{ size, variant, isIndeterminate }} defaultSelected bold>
Checkbox label
</TreeCheckbox>
</CheckboxGroup>
Expand All @@ -49,6 +50,15 @@ export const Light = () => (
</>
);

export const IsIndeterminate = () => (
<>
{renderCheckboxes("primary", 1.4, true)}
{renderCheckboxes("primary", 1.6, true)}
{renderCheckboxes("primary", 1.8, true)}
{renderCheckboxes("primary", 2, true)}
</>
);

export const Error = () => (
<>
{renderCheckboxes("error", 1.4)}
Expand Down
13 changes: 13 additions & 0 deletions src/components/Tree/TreeCheckbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import {
CheckboxSize,
CheckboxVariant
} from "../Checkbox/sharedCheckboxStyles";
import { checkedMixIcon } from "../svgs/checkmarksvgs";
import theme from '../../../src/theme';

export interface TreeCheckboxProps
extends PropsWithChildren<Omit<RACCheckboxProps, "children">> {
Expand All @@ -34,6 +36,17 @@ const StyledCheckbox = styled(RACCheckbox) <{
&[data-selected] [data-slot="selection"]::before {
${checkboxSelectionSlotCheckedStyles}
}

&[data-indeterminate="true"] {
[data-slot="selection"]::before {
content: "";
position: relative;
transform: scale(1);
background-color: ${theme.colors.palette.mediumBlue};
border: none;
background-image: url('${checkedMixIcon}');
}
}
`;

export const TreeCheckbox = ({
Expand Down
71 changes: 67 additions & 4 deletions src/components/Tree/__snapshots__/TreeCheckbox.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`TreeCheckbox handles disabled state 1`] = `
<label
className="sc-bczRLJ gRqfxl"
className="sc-bczRLJ hkykfJ"
data-disabled={true}
data-rac=""
data-react-aria-pressable={true}
Expand Down Expand Up @@ -62,9 +62,72 @@ exports[`TreeCheckbox handles disabled state 1`] = `
</label>
`;

exports[`TreeCheckbox handles indeterminate state 1`] = `
<label
className="sc-bczRLJ estYWl"
data-indeterminate={true}
data-rac=""
data-react-aria-pressable={true}
onClick={[Function]}
onDragStart={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
onMouseUp={[Function]}
onTouchCancel={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
>
<span
style={
Object {
"border": 0,
"clip": "rect(0 0 0 0)",
"clipPath": "inset(50%)",
"height": "1px",
"margin": "-1px",
"overflow": "hidden",
"padding": 0,
"position": "absolute",
"whiteSpace": "nowrap",
"width": "1px",
}
}
>
<input
checked={false}
data-react-aria-pressable={true}
disabled={false}
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onDragStart={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
onMouseUp={[Function]}
onTouchCancel={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
tabIndex={0}
type="checkbox"
/>
</span>
<div
data-slot="selection"
/>
Click Me
</label>
`;

exports[`TreeCheckbox handles options 1`] = `
<label
className="sc-bczRLJ jaaPJI"
className="sc-bczRLJ iwkggw"
data-rac=""
data-react-aria-pressable={true}
onClick={[Function]}
Expand Down Expand Up @@ -126,7 +189,7 @@ exports[`TreeCheckbox handles options 1`] = `

exports[`TreeCheckbox matches snapshot 1`] = `
<label
className="sc-bczRLJ brkWAJ"
className="sc-bczRLJ estYWl"
data-rac=""
data-react-aria-pressable={true}
onClick={[Function]}
Expand Down Expand Up @@ -188,7 +251,7 @@ exports[`TreeCheckbox matches snapshot 1`] = `

exports[`TreeCheckbox supports slot="selection" 1`] = `
<label
className="sc-bczRLJ brkWAJ"
className="sc-bczRLJ estYWl"
data-rac=""
data-react-aria-pressable={true}
onClick={[Function]}
Expand Down
4 changes: 3 additions & 1 deletion src/components/svgs/checkmarksvgs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,6 @@ export const whiteCheckmark = 'data:image/svg+xml,<svg height="125px" width="125

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>'

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>'
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>'

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>'
Loading