Skip to content
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

Jump to bottom

[CheckboxGroup] Implement components and hooks #458

Merged
merged 19 commits into from
Sep 4, 2024
Merged

[CheckboxGroup] Implement components and hooks #458

Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
6c0a2ce
[CheckboxGroup] Component and Hook
atomiks Jun 13, 2024
44d40b0
Remove hook exports
atomiks Jun 19, 2024
de6e4f0
Set status to mixed on child change
atomiks Jun 19, 2024
973dd54
Add Form Label
atomiks Jun 26, 2024
86424f1
Fix span rendering
atomiks Jun 26, 2024
44c5771
Merge branch 'master' into feat/CheckboxGroup
atomiks Aug 21, 2024
e674de8
Fix merge
atomiks Aug 21, 2024
15af83b
Update APIs
atomiks Aug 21, 2024
9f899b9
Remove label
atomiks Aug 21, 2024
abfea6e
Feedback
atomiks Aug 23, 2024
e1614f7
Fix type
atomiks Aug 23, 2024
ede38b6
Fix lint
atomiks Aug 23, 2024
6f474a0
Add preserveChildStates prop
atomiks Aug 30, 2024
c709a9d
Fix lint
atomiks Sep 2, 2024
2ab5f64
Default preserveChildStates to false
atomiks Sep 3, 2024
bd3e2e2
Update preserveChildStates test
atomiks Sep 3, 2024
7c35c00
Update test and docs
atomiks Sep 3, 2024
1ba49c2
Add preserveChildStates prop and Checkbox import
atomiks Sep 3, 2024
bc302e7
Change wording
atomiks Sep 3, 2024
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
152 changes: 152 additions & 0 deletions docs/data/base/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.js
View file
Open in desktop
atomiks marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
'use client';

import * as React from 'react';
import * as Checkbox from '@base_ui/react/Checkbox';
import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
import * as Field from '@base_ui/react/Field';
import Check from '@mui/icons-material/Check';

export default function UnstyledCheckboxIndeterminateGroup() {
return (
<Field.Root>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<CheckboxGroup.Root defaultValue={['red']}>
<Field.Label className="CheckboxGroup-label">Colors</Field.Label>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<Field.Root>
<Checkbox.Root className="Checkbox" name="red">
<Checkbox.Indicator className="Checkbox-indicator">
<Check className="Check" />
</Checkbox.Indicator>
</Checkbox.Root>
<Field.Label className="Checkbox-label">Red</Field.Label>
</Field.Root>
<Field.Root>
<Checkbox.Root className="Checkbox" name="green">
<Checkbox.Indicator className="Checkbox-indicator">
<Check className="Check" />
</Checkbox.Indicator>
</Checkbox.Root>
<Field.Label className="Checkbox-label">Green</Field.Label>
</Field.Root>
<Field.Root>
<Checkbox.Root className="Checkbox" name="blue">
<Checkbox.Indicator className="Checkbox-indicator">
<Check className="Check" />
</Checkbox.Indicator>
</Checkbox.Root>
<Field.Label className="Checkbox-label">Blue</Field.Label>
</Field.Root>
</div>
</CheckboxGroup.Root>
<Styles />
</div>
</Field.Root>
);
}

const grey = {
100: '#E5EAF2',
300: '#C7D0DD',
500: '#9DA8B7',
600: '#6B7A90',
800: '#303740',
900: '#1C2025',
};

function Styles() {
return (
<style>
{`
.Check {
height: 100%;
width: 100%;
}

.CheckboxGroup-label {
display: flex;
font-weight: bold;
gap: 8px;
margin-bottom: 8px;
font-size: 17px;
}

.Checkbox-label {
display: flex;
font-weight: 500;
gap: 8px;
margin-bottom: 8px;
}

.Checkbox {
all: unset;
box-sizing: border-box;
text-align: center;
width: 24px;
height: 24px;
padding: 0;
border-radius: 4px;
border: 2px solid ${grey[600]};
background: none;
transition-property: background, border-color;
transition-duration: 0.15s;
}

.Checkbox[data-disabled] {
opacity: 0.4;
cursor: not-allowed;
}

.Checkbox:focus-visible {
outline: 2px solid ${grey[500]};
outline-offset: 2px;
}

.Checkbox[data-state="checked"] {
border-color: ${grey[800]};
background: ${grey[800]};
}

.Checkbox-indicator {
height: 100%;
display: inline-block;
visibility: hidden;
color: ${grey[100]};
}

.Checkbox-indicator[data-state="checked"] {
visibility: visible;
}

.Checkbox-icon {
width: 100%;
height: 100%;
}

@media (prefers-color-scheme: dark) {
.Checkbox {
border-color: ${grey[500]};
}

.Checkbox:focus-visible {
outline: 2px solid ${grey[600]};
outline-offset: 2px;
}

.Checkbox[data-state="checked"] {
border-color: ${grey[300]};
background: ${grey[300]};
}

.Checkbox:hover:not([data-disabled]) {
border-color: ${grey[100]};
}

.Checkbox-indicator {
color: ${grey[900]};
}
}
`}
</style>
);
}
152 changes: 152 additions & 0 deletions docs/data/base/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
'use client';

import * as React from 'react';
import * as Checkbox from '@base_ui/react/Checkbox';
import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
import * as Field from '@base_ui/react/Field';
import Check from '@mui/icons-material/Check';

export default function UnstyledCheckboxIndeterminateGroup() {
return (
<Field.Root>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<CheckboxGroup.Root defaultValue={['red']}>
<Field.Label className="CheckboxGroup-label">Colors</Field.Label>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<Field.Root>
<Checkbox.Root className="Checkbox" name="red">
<Checkbox.Indicator className="Checkbox-indicator">
<Check className="Check" />
</Checkbox.Indicator>
</Checkbox.Root>
<Field.Label className="Checkbox-label">Red</Field.Label>
</Field.Root>
<Field.Root>
<Checkbox.Root className="Checkbox" name="green">
<Checkbox.Indicator className="Checkbox-indicator">
<Check className="Check" />
</Checkbox.Indicator>
</Checkbox.Root>
<Field.Label className="Checkbox-label">Green</Field.Label>
</Field.Root>
<Field.Root>
<Checkbox.Root className="Checkbox" name="blue">
<Checkbox.Indicator className="Checkbox-indicator">
<Check className="Check" />
</Checkbox.Indicator>
</Checkbox.Root>
<Field.Label className="Checkbox-label">Blue</Field.Label>
</Field.Root>
</div>
</CheckboxGroup.Root>
<Styles />
</div>
</Field.Root>
);
}

const grey = {
100: '#E5EAF2',
300: '#C7D0DD',
500: '#9DA8B7',
600: '#6B7A90',
800: '#303740',
900: '#1C2025',
};

function Styles() {
return (
<style>
{`
.Check {
height: 100%;
width: 100%;
}

.CheckboxGroup-label {
display: flex;
font-weight: bold;
gap: 8px;
margin-bottom: 8px;
font-size: 17px;
}

.Checkbox-label {
display: flex;
font-weight: 500;
gap: 8px;
margin-bottom: 8px;
}

.Checkbox {
all: unset;
box-sizing: border-box;
text-align: center;
width: 24px;
height: 24px;
padding: 0;
border-radius: 4px;
border: 2px solid ${grey[600]};
background: none;
transition-property: background, border-color;
transition-duration: 0.15s;
}

.Checkbox[data-disabled] {
opacity: 0.4;
cursor: not-allowed;
}

.Checkbox:focus-visible {
outline: 2px solid ${grey[500]};
outline-offset: 2px;
}

.Checkbox[data-state="checked"] {
border-color: ${grey[800]};
background: ${grey[800]};
}

.Checkbox-indicator {
height: 100%;
display: inline-block;
visibility: hidden;
color: ${grey[100]};
}

.Checkbox-indicator[data-state="checked"] {
visibility: visible;
}

.Checkbox-icon {
width: 100%;
height: 100%;
}

@media (prefers-color-scheme: dark) {
.Checkbox {
border-color: ${grey[500]};
}

.Checkbox:focus-visible {
outline: 2px solid ${grey[600]};
outline-offset: 2px;
}

.Checkbox[data-state="checked"] {
border-color: ${grey[300]};
background: ${grey[300]};
}

.Checkbox:hover:not([data-disabled]) {
border-color: ${grey[100]};
}

.Checkbox-indicator {
color: ${grey[900]};
}
}
`}
</style>
);
}
Loading