testing checkbox update

src/components/Checkbox/Checkbox.tsx

@@ -61,14 +61,14 @@ function CheckboxIcon(props: CheckboxIconProps) {
   // before passing all the props to the `Icon` component.
   const { isIndeterminate, isChecked, ...rest } = props;
 
-  return (
-    <Icon viewBox="0 0 24 24" {...rest}>
+  return isChecked || isIndeterminate ? (
+    <Icon viewBox="0 0 24 24" {...rest} id="test">
       <path
         fill="currentColor"
         d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
       />
     </Icon>
-  );
+  ) : null;
 }
 
 export const Checkbox: React.FC<any> = chakra(
@@ -108,6 +108,7 @@ export const Checkbox: React.FC<any> = chakra(
         "NYPL Reservoir Checkbox: This component's required `id` prop was not passed."
       );
     }
+    console.log("ischecked", isChecked);
 
     return (
       <ComponentWrapper
@@ -136,7 +137,7 @@ export const Checkbox: React.FC<any> = chakra(
                 onChange,
               }
             : {
-                defaultIsChecked: false,
+                defaultChecked: false,
               })}
           alignItems="flex-start"
           __css={styles}

src/theme/components/checkbox.ts

@@ -1,3 +1,6 @@
+import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
+import { defineStyle } from "@chakra-ui/system";
+
 // @see https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/components/checkbox.ts
 // for available theme override options.
 
@@ -8,16 +11,27 @@ import {
   checkboxRadioHoverStyles,
 } from "./global";
 
+// This function creates a set of function that helps us
+// create multipart component styles.
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers([
+    "helperErrorText",
+    "icon",
+    "control",
+    "label",
+    "container",
+  ]);
+
 // Style object for the Checkbox's visual icon.
-const baseStyleIcon = {
+const baseStyleIcon = defineStyle({
   transitionProperty: "transform",
   transitionDuration: "normal",
   width: "22px",
   height: "22px",
-};
+});
 
 // Style object for the Checkbox's "control."
-const baseStyleControl = {
+const baseStyleControl = defineStyle({
   border: "2px solid",
   borderRadius: "sm",
   borderColor: "ui.gray.dark",
@@ -121,21 +135,23 @@ const baseStyleControl = {
       color: "dark.ui.error.primary",
     },
   },
-};
+});
 
 // Style object for the Checkbox's label
-const baseStyleLabel = checkboxRadioLabelStyles;
+const baseStyleLabel = {
+  ...checkboxRadioLabelStyles,
+};
 
 // Style object for the Checkbox's helper text
 const baseStyleHelperErrorText = checkboxRadioHelperErrorTextStyle;
 
-const baseStyle = {
+const baseStyle = definePartsStyle({
+  helperErrorText: baseStyleHelperErrorText,
   icon: baseStyleIcon,
+  container: checkboxRadioHoverStyles,
   control: baseStyleControl,
   label: baseStyleLabel,
-  helperErrorText: baseStyleHelperErrorText,
-  ...checkboxRadioHoverStyles,
-};
+});
 
 // Sticking to "lg" for the default size.
 const sizes = {
@@ -150,15 +166,14 @@ const sizes = {
   },
 };
 
-const Checkbox = {
-  parts: ["helperErrorText", "icon", "control", "label"],
+const Checkbox = defineMultiStyleConfig({
   baseStyle,
   sizes,
   // Default values
   defaultProps: {
     size: "lg",
     colorScheme: "white",
   },
-};
+});
 
 export default Checkbox;