-
-
Notifications
You must be signed in to change notification settings - Fork 74
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[CheckboxGroup] Implement components and hooks (#458)
- Loading branch information
Showing
39 changed files
with
2,212 additions
and
33 deletions.
There are no files selected for viewing
152 changes: 152 additions & 0 deletions
152
docs/data/base/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
152
docs/data/base/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> | ||
| ); | ||
| } |
Oops, something went wrong.