docs(checkbox): ✨ add more stories and fix grouping bug

adaptui · Aug 18, 2021 · b33aa0b · b33aa0b
1 parent 3f881a4
commit b33aa0b
Show file tree

Hide file tree

Showing 3 changed files with 258 additions and 87 deletions.
diff --git a/src/checkboxNew/Checkbox.tsx b/src/checkboxNew/Checkbox.tsx
@@ -2,16 +2,16 @@ import { useControllableState } from "@renderlesskit/react";
 import { CheckboxStateReturn as ReakitCheckboxStateReturn } from "reakit";
 
 import {
-  CheckboxDefaultIcon,
   CheckboxIcon,
-  CheckboxIconProps,
+  CheckboxDefaultIcon,
   CheckboxIconRenderProps,
 } from "./CheckboxIcon";
 import { CheckboxText } from "./CheckboxText";
 import { CheckboxLabel } from "./CheckboxLabel";
-import { forwardRefWithAs } from "../utils/types";
+import { forwardRefWithAs, RenderProp } from "../utils/types";
 import { CheckboxDescription } from "./CheckboxDescription";
 import { CheckboxInput, CheckboxInputProps } from "./CheckboxInput";
+import { runIfFn } from "../utils";
 
 export type CheckboxProps = Omit<CheckboxInputProps, "size"> & {
   /**
@@ -37,7 +37,7 @@ export type CheckboxProps = Omit<CheckboxInputProps, "size"> & {
    *
    * @default md
    */
-  size?: CheckboxIconProps["size"];
+  size?: keyof Renderlesskit.GetThemeValue<"checkboxNew", "icon", "size">;
 
   /**
    * Provide custom icons as a replacement for the default ones.
@@ -53,6 +53,11 @@ export type CheckboxProps = Omit<CheckboxInputProps, "size"> & {
    * Description for the Checkbox.
    */
   description?: string;
+
+  /**
+   * Children of the Checkbox.
+   */
+  children?: RenderProp<CheckboxProps>;
 };
 
 export const Checkbox = forwardRefWithAs<
@@ -65,6 +70,7 @@ export const Checkbox = forwardRefWithAs<
     defaultState = false,
     state: stateProp,
     onStateChange,
+    value,
     size = "md",
     invalid = false,
     icon = CheckboxDefaultIcon,
@@ -95,9 +101,10 @@ export const Checkbox = forwardRefWithAs<
           ref={ref}
           state={state}
           setState={setState}
+          value={value}
           {...inputProps}
         />
-        <CheckboxIcon state={state} size={size} invalid={invalid}>
+        <CheckboxIcon state={state} value={value} size={size} invalid={invalid}>
           {icon}
         </CheckboxIcon>
         {label && !description ? (
@@ -113,7 +120,7 @@ export const Checkbox = forwardRefWithAs<
     );
   }
 
-  return null;
+  return <>{runIfFn(children, { state, setState })};</>;
 });
 
 Checkbox.displayName = "Checkbox";
diff --git a/src/checkboxNew/CheckboxIcon.tsx b/src/checkboxNew/CheckboxIcon.tsx
@@ -7,22 +7,33 @@ import { runIfFn, withIconA11y } from "../utils";
 import { forwardRefWithAs } from "../utils/types";
 import { CheckIcon, IndeterminateIcon } from "../icons";
 
-export type CheckboxIconRenderProps = Pick<CheckboxProps, "state" | "invalid">;
+export type CheckboxIconRenderProps = Pick<
+  CheckboxProps,
+  "state" | "value" | "invalid"
+>;
 
 export type CheckboxIconProps = BoxProps &
-  Required<Pick<CheckboxProps, "state" | "invalid">> & {
-    size: keyof Renderlesskit.GetThemeValue<"checkboxNew", "icon", "size">;
-  };
+  Required<Pick<CheckboxProps, "state">> &
+  Pick<CheckboxProps, "value" | "size" | "invalid">;
 
 export const CheckboxIcon = forwardRefWithAs<
   CheckboxIconProps,
   HTMLSpanElement,
   "span"
 >((props, ref) => {
-  const { state, size, invalid, className, children, ...rest } = props;
-  const isChecked = state === true;
-  const isUnchecked = state === false;
+  const {
+    state,
+    value,
+    size = "md",
+    invalid = false,
+    className,
+    children,
+    ...rest
+  } = props;
+  const isChecked =
+    Array.isArray(state) && value ? state.includes(value) : state === true;
   const isIndeterminate = state === "indeterminate";
+  const isUnchecked = !isChecked && !isIndeterminate;
 
   const checkbox = useTheme("checkboxNew");
   const baseStyles = cx(
@@ -66,16 +77,17 @@ export const CheckboxIcon = forwardRefWithAs<
 
   return (
     <Box ref={ref} as="span" className={baseStyles} {...rest}>
-      {children ? runIfFn(children, { state, invalid }) : null}
+      {children ? runIfFn(children, { state, value, invalid }) : null}
     </Box>
   );
 });
 
 CheckboxIcon.displayName = "CheckboxIcon";
 
 export const CheckboxDefaultIcon = (props: CheckboxIconRenderProps) => {
-  const { state } = props;
-  const isChecked = state === true;
+  const { state, value } = props;
+  const isChecked =
+    Array.isArray(state) && value ? state.includes(value) : state === true;
   const isIndeterminate = state === "indeterminate";
 
   return (