refactor: checkbox and switch to ark

chakra-ui · Jun 19, 2024 · eb94ad2 · eb94ad2
1 parent 4478632
commit eb94ad2
Show file tree

Hide file tree

Showing 34 changed files with 339 additions and 1,805 deletions.
diff --git a/packages/react/__stories__/checkbox.stories.tsx b/packages/react/__stories__/checkbox.stories.tsx
@@ -22,7 +22,10 @@ export default {
 const DemoCheckbox = (props: Checkbox.RootProps) => {
   return (
     <Checkbox.Root {...props}>
-      <Checkbox.Control />
+      <Checkbox.HiddenInput />
+      <Checkbox.Control>
+        <Checkbox.Indicator />
+      </Checkbox.Control>
       <Checkbox.Label>{props.children}</Checkbox.Label>
     </Checkbox.Root>
   )
@@ -141,7 +144,7 @@ export const WithGroup = () => {
   return (
     <Checkbox.Group
       defaultValue={["one", "two"]}
-      onChange={(value) => console.log(value)}
+      onValueChange={(value) => console.log(value)}
     >
       <Stack align="start">
         <DemoCheckbox value="one">One</DemoCheckbox>

diff --git a/packages/react/__stories__/switch.stories.tsx b/packages/react/__stories__/switch.stories.tsx
@@ -1,13 +1,4 @@
-import {
-  Box,
-  Field,
-  For,
-  HStack,
-  Label,
-  Span,
-  Switch,
-  useSlotRecipe,
-} from "../src"
+import { Box, For, HStack, Span, Switch, useSlotRecipe } from "../src"
 import { colorPalettes } from "./shared/color-palettes"
 import { PlaygroundTable } from "./shared/playground-table"
 
@@ -19,10 +10,13 @@ export default {
 const DemoSwitch = (props: Switch.RootProps) => {
   return (
     <Switch.Root {...props}>
-      <Switch.Track>
+      <Switch.HiddenInput />
+      <Switch.Control>
         <Switch.Thumb />
-      </Switch.Track>
-      {props.children && <Switch.Label>{props.children}</Switch.Label>}
+      </Switch.Control>
+      {props.children && (
+        <Switch.Label fontWeight="medium">{props.children}</Switch.Label>
+      )}
     </Switch.Root>
   )
 }
@@ -112,10 +106,7 @@ export const Sizes = () => {
 }
 
 export const WithLabel = () => (
-  <Field id="email-alerts">
-    <HStack>
-      <DemoSwitch colorPalette="green" id="email-alerts" />
-      <Label htmlFor="email-alerts">Enable email alerts?</Label>
-    </HStack>
-  </Field>
+  <DemoSwitch colorPalette="green" id="email-alerts">
+    Enable email alerts?
+  </DemoSwitch>
 )