CheckBox: VR certification fixes (#3895)

Co-authored-by: eniomoura <[email protected]>
pinterest · Nov 27, 2024 · f18200f · f18200f
1 parent ee52d05
commit f18200f
Show file tree

Hide file tree

Showing 19 changed files with 630 additions and 200 deletions.
diff --git a/docs/examples/checkbox/checked.tsx b/docs/examples/checkbox/checked.tsx
@@ -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>
+  );
+}
diff --git a/docs/examples/checkbox/disabled.tsx b/docs/examples/checkbox/disabled.tsx
@@ -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>
+  );
+}
diff --git a/docs/examples/checkbox/error.tsx b/docs/examples/checkbox/error.tsx
@@ -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>
+  );
+}
diff --git a/docs/examples/checkbox/indeterminate.tsx b/docs/examples/checkbox/indeterminate.tsx
@@ -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>
+  );
+}
diff --git a/docs/examples/checkbox/stateExample.tsx b/docs/examples/checkbox/stateExample.tsx
diff --git a/docs/examples/checkbox/unchecked.tsx b/docs/examples/checkbox/unchecked.tsx
@@ -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>
+  );
+}
diff --git a/docs/pages/web/checkbox.tsx b/docs/pages/web/checkbox.tsx
@@ -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';
@@ -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.
@@ -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={