Skip to content

Commit

Permalink
CheckBox: VR certification fixes (#3895)
Browse files Browse the repository at this point in the history
Co-authored-by: eniomoura <[email protected]>
  • Loading branch information
AlbertCarreras and eniomoura authored Nov 27, 2024
1 parent ee52d05 commit f18200f
Show file tree
Hide file tree
Showing 19 changed files with 630 additions and 200 deletions.
29 changes: 29 additions & 0 deletions docs/examples/checkbox/checked.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { Box, Checkbox, Flex } from 'gestalt';

const noop = () => {};

export default function Example() {
return (
<Box padding={4}>
<Flex direction="column" gap={4} height="100%" width="100%">
<Checkbox
checked
helperText="Helper Text"
id="Checked sm"
label="Checked"
onChange={noop}
size="sm"
/>

<Checkbox
checked
helperText="Helper Text"
id="Checked md"
label="Checked"
onChange={noop}
size="md"
/>
</Flex>
</Box>
);
}
70 changes: 70 additions & 0 deletions docs/examples/checkbox/disabled.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import { Box, Checkbox, Flex } from 'gestalt';

const noop = () => {};

export default function Example() {
return (
<Box padding={4}>
<Flex gap={8} height="100%" width="100%">
<Flex direction="column" gap={6}>
<Checkbox
checked={false}
disabled
helperText="Helper Text"
id="Disabled sm"
label="Disabled"
onChange={noop}
size="sm"
/>
<Checkbox
checked
disabled
helperText="Helper Text"
id="Disabled Checked sm"
label="Disabled Checked"
onChange={noop}
size="sm"
/>
<Checkbox
disabled
helperText="Helper Text"
id="Disabled indeterminate sm"
indeterminate
label="Disabled indeterminate "
onChange={noop}
size="sm"
/>
</Flex>
<Flex direction="column" gap={6}>
<Checkbox
checked={false}
disabled
helperText="Helper Text"
id="Disabled md"
label="Disabled"
onChange={noop}
size="md"
/>
<Checkbox
checked
disabled
helperText="Helper Text"
id="Disabled Checked md"
label="Disabled Checked"
onChange={noop}
size="md"
/>
<Checkbox
disabled
helperText="Helper Text"
id="Disabled Indeterminate md"
indeterminate
label="Disabled indeterminate"
onChange={noop}
size="md"
/>
</Flex>
</Flex>
</Box>
);
}
70 changes: 70 additions & 0 deletions docs/examples/checkbox/error.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import { Box, Checkbox, Flex } from 'gestalt';

const noop = () => {};

export default function Example() {
return (
<Box padding={4}>
<Flex gap={8} height="100%" width="100%">
<Flex direction="column" gap={6}>
<Checkbox
checked={false}
errorMessage="Error Message"
helperText="Helper Text"
id="Error sm"
label="Error"
onChange={noop}
size="sm"
/>
<Checkbox
checked
errorMessage="Error Message"
helperText="Helper Text"
id="Error Checked sm"
label="Error Checked"
onChange={noop}
size="sm"
/>
<Checkbox
errorMessage="Error Message"
helperText="Helper Text"
id="Error Indeterminate sm"
indeterminate
label="Error indeterminate"
onChange={noop}
size="sm"
/>
</Flex>
<Flex direction="column" gap={6}>
<Checkbox
checked={false}
errorMessage="Error Message"
helperText="Helper Text"
id="Error md"
label="Error"
onChange={noop}
size="md"
/>
<Checkbox
checked
errorMessage="Error Message"
helperText="Helper Text"
id="Error Checked md"
label="Error Checked"
onChange={noop}
size="md"
/>
<Checkbox
errorMessage="Error Message"
helperText="Helper Text"
id="Error Indeterminate md"
indeterminate
label="Error indeterminate"
onChange={noop}
size="md"
/>
</Flex>
</Flex>
</Box>
);
}
30 changes: 30 additions & 0 deletions docs/examples/checkbox/indeterminate.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { Box, Checkbox, Flex } from 'gestalt';

const noop = () => {};

export default function Example() {
return (
<Box padding={4}>
<Flex direction="column" gap={4} height="100%" width="100%">
<Checkbox
checked
helperText="Helper Text"
id="Indeterminate sm"
indeterminate
label="Indeterminate"
onChange={noop}
size="sm"
/>
<Checkbox
checked
helperText="Helper Text"
id="Indeterminate md"
indeterminate
label="Indeterminate"
onChange={noop}
size="md"
/>
</Flex>
</Box>
);
}
80 changes: 0 additions & 80 deletions docs/examples/checkbox/stateExample.tsx

This file was deleted.

28 changes: 28 additions & 0 deletions docs/examples/checkbox/unchecked.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { Box, Checkbox, Flex } from 'gestalt';

const noop = () => {};

export default function Example() {
return (
<Box padding={4}>
<Flex direction="column" gap={4} height="100%" width="100%">
<Checkbox
checked={false}
helperText="Helper Text"
id="Unchecked sm"
label="Unchecked"
onChange={noop}
size="sm"
/>
<Checkbox
checked={false}
helperText="Helper Text"
id="Unchecked md"
label="Unchecked"
onChange={noop}
size="md"
/>
</Flex>
</Box>
);
}
40 changes: 37 additions & 3 deletions docs/pages/web/checkbox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,22 @@ import Page from '../../docs-components/Page';
import PageHeader from '../../docs-components/PageHeader';
import QualityChecklist from '../../docs-components/QualityChecklist';
import SandpackExample from '../../docs-components/SandpackExample';
import checked from '../../examples/checkbox/checked';
import disabled from '../../examples/checkbox/disabled';
import dontUseForOneSelection from '../../examples/checkbox/dontUseForOneSelection';
import dontUseNumerousInTableRows from '../../examples/checkbox/dontUseNumerousInTableRows';
import dontUseToToggleState from '../../examples/checkbox/dontUseToToggleState';
import dontUseTruncatedText from '../../examples/checkbox/dontUseTruncatedText';
import dontVerticallyCenterInputs from '../../examples/checkbox/dontVerticallyCenterInputs';
import error from '../../examples/checkbox/error';
import errorMessageExample from '../../examples/checkbox/errorMessageExample';
import indeterminate from '../../examples/checkbox/indeterminate';
import keepLabelsAndLegendsClear from '../../examples/checkbox/keepLabelsAndLegendsClear';
import labelVisibilityExample from '../../examples/checkbox/labelVisibilityExample';
import legendsExample from '../../examples/checkbox/legendsExample';
import main from '../../examples/checkbox/main';
import sizeExample from '../../examples/checkbox/sizeExample';
import stateExample from '../../examples/checkbox/stateExample';
import unchecked from '../../examples/checkbox/unchecked';
import useAtStartOfTableRow from '../../examples/checkbox/useAtStartOfTableRow';
import useForMultiSelection from '../../examples/checkbox/useForMultiSelection';
import useSingleInForms from '../../examples/checkbox/useSingleInForms';
Expand Down Expand Up @@ -266,6 +270,7 @@ If Checkbox is labeled by content elsewhere on the page, or a more complex label
/>
</MainSection.Subsection>
<MainSection.Subsection
columns={2}
description={`Checkbox has unchecked, checked, error, indeterminate and disabled states.
Indeterminate is a state that is neither checked nor unchecked — e.g. a "Select all" checkbox when not all items are selected or unselected. Indeterminism is purely presentational - the value of a checkbox and its indeterminism are independent.
Expand All @@ -274,10 +279,39 @@ Indeterminate is a state that is neither checked nor unchecked — e.g. a "Selec
>
<MainSection.Card
cardSize="lg"
sandpackExample={<SandpackExample code={stateExample} name="State example" />}
sandpackExample={
<SandpackExample code={unchecked} layout="column" name="Unchecked example" />
}
title="Unchecked"
/>
<MainSection.Card
cardSize="lg"
sandpackExample={
<SandpackExample code={checked} layout="column" name="Checked example" />
}
title="Checked"
/>
<MainSection.Card
cardSize="lg"
sandpackExample={
<SandpackExample code={indeterminate} layout="column" name="Indeterminate example" />
}
title="Indeterminate"
/>
<MainSection.Card
cardSize="lg"
sandpackExample={
<SandpackExample code={disabled} layout="column" name="State example" />
}
title="Disabled"
/>
<MainSection.Card
cardSize="lg"
sandpackExample={<SandpackExample code={error} layout="column" name="State example" />}
title="Error"
/>
</MainSection.Subsection>
<MainSection.Subsection description="Checkbox supports helperText" title="With helperText">
<MainSection.Subsection description="Checkbox supports helperText" title="Helper text">
<MainSection.Card
cardSize="lg"
sandpackExample={
Expand Down
Loading

0 comments on commit f18200f

Please sign in to comment.