feat(radio): added radio v2 (#49)

* feat(radio): migrate radio to use conditional rendering * refactor(radio): added size support and refactored all types * chore: radio controlled state * chore: review updates * fix(radio): fixed radio controlled state * fix(radio): fixed radio controlled state * refactor: rearrange imports * refactor(radio): added radio icons with css * Revert "refactor(radio): added radio icons with css" This reverts commit 5572582. * refactor(radio): minor updates * feat(radio): added icon props in radio
adaptui · anuraghazra · Feb 1, 2021 · Jan 21, 2021 · Jan 22, 2021 · Jan 22, 2021
commit 8869b8fee1af761c149f738124c17c4ad1a348a0
diff --git a/.storybook/storybookUtils.tsx b/.storybook/storybookUtils.tsx
@@ -14,7 +14,10 @@ export const storyTemplate = <ComponentProps,>(
 
 export const createUnionControl = (keys: any) => {
   return {
-    control: { type: "inline-radio", options: Object.keys(keys) },
+    control: {
+      type: "inline-radio",
+      options: Array.isArray(keys) ? keys : Object.keys(keys),
+    },
   };
 };
 

diff --git a/src/icons/RadioIcons.tsx b/src/icons/RadioIcons.tsx
@@ -0,0 +1,41 @@
+import * as React from "react";
+import { createIcon } from "../icon";
+
+export const RadioCheckedIcon = createIcon({
+  displayName: "RadioChecked",
+  viewBox: "0 0 16 16",
+  path: (
+    <>
+      <circle cx="8" cy="8" r="8" fill="currentColor" />
+      <circle cx="8" cy="8" r="3" fill="white" />
+    </>
+  ),
+});
+
+export const RadioUncheckedIcon = createIcon({
+  displayName: "RadioUnchecked",
+  viewBox: "0 0 16 16",
+  path: (
+    <>
+      <circle
+        cx="8"
+        cy="8"
+        r="7"
+        fill="white"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+    </>
+  ),
+});
+
+export const RadioDisabledIcon = createIcon({
+  displayName: "RadioDisabled",
+  viewBox: "0 0 16 16",
+  path: (
+    <>
+      <circle cx="8" cy="8" r="8" fill="#E4E4E7" />
+      <circle cx="8" cy="8" r="3" fill="currentColor" />
+    </>
+  ),
+});
diff --git a/src/radio/Radio.tsx b/src/radio/Radio.tsx
@@ -1,92 +1,55 @@
 import React from "react";
 import {
+  RadioHTMLProps,
   Radio as ReakitRadio,
   RadioProps as ReakitRadioProps,
-  RadioGroup as ReakitRadioGroup,
-  RadioGroupProps as ReakitRadioGroupProps,
 } from "reakit";
 import { cx } from "@renderlesskit/react";
 
 import { useTheme } from "../theme";
-import { BoxProps, Box } from "../box";
-import { createContext } from "../utils";
+import { RadioIcon, RadioIconProps } from "./RadioIcon";
+import { useRadioContext } from "./RadioGroup";
 import { forwardRefWithAs } from "../utils/types";
-import {
-  useRadioState,
-  RadioInitialState,
-  RadioStateReturn,
-} from "./useRadioState";
-
-const [RadioProvider, useRadioContext] = createContext<{
-  radioState: RadioStateReturn;
-  radioSize?: RadioLabelProps["size"];
-}>({
-  name: "RadioContext",
-  strict: true,
-  errorMessage: "Radio must be used within RadioContextProvider",
-});
 
-export interface RadioLabelProps extends BoxProps {
-  /**
-   * How large should the radio be?
-   */
-  size?: keyof Renderlesskit.GetThemeValue<"radio", "size">;
-}
+export type RadioCommonProps = Partial<
+  Pick<ReakitRadioProps, "value" | "disabled">
+> & {
+  size?: keyof Renderlesskit.GetThemeValue<"radio", "icon">["size"];
+};
 
-export const RadioLabel = forwardRefWithAs<
-  RadioLabelProps,
-  HTMLLabelElement,
-  "label"
->(({ children, className, size, ...props }, ref) => {
+export const RadioInput: React.FC<RadioHTMLProps & RadioCommonProps> = ({
+  className,
+  ...rest
+}) => {
   const theme = useTheme();
-  const { radioSize } = useRadioContext();
-  const _size = size || radioSize || "sm";
+  const { radioState } = useRadioContext();
 
-  return (
-    <Box
-      as="label"
-      ref={ref}
-      className={cx(theme.radio.base, theme.radio.size[_size], className)}
-      {...props}
-    >
-      {children}
-    </Box>
-  );
-});
+  const radioStyles = cx(theme.radio.input, className);
+
+  return <ReakitRadio className={radioStyles} {...radioState} {...rest} />;
+};
 
 export const Radio = forwardRefWithAs<
-  Partial<ReakitRadioProps>,
+  RadioHTMLProps &
+    RadioCommonProps & {
+      checkedIcon?: React.ReactNode;
+      uncheckedIcon?: React.ReactNode;
+      disabledIcon?: React.ReactNode;
+    },
   HTMLInputElement,
   "input"
->(({ children, className, ...props }, ref) => {
-  const { radioState } = useRadioContext();
-  const theme = useTheme();
-
-  return (
-    <ReakitRadio
-      className={theme.radio.input}
-      {...radioState}
-      {...props}
-      ref={ref}
-    />
-  );
-});
-
-type RadioGroupProps = Partial<ReakitRadioGroupProps & RadioInitialState> &
-  Partial<Pick<RadioLabelProps, "size">>;
-
-export const RadioGroup = forwardRefWithAs<
-  RadioGroupProps,
-  HTMLDivElement,
-  "div"
->(({ children, size, ...props }, ref) => {
-  const radio = useRadioState(props);
-
+>((props, ref) => {
+  const { checkedIcon, uncheckedIcon, disabledIcon } = props;
   return (
-    <RadioProvider value={{ radioState: radio, radioSize: size }}>
-      <ReakitRadioGroup {...radio} ref={ref}>
-        {children}
-      </ReakitRadioGroup>
-    </RadioProvider>
+    <>
+      <RadioInput ref={ref} {...props} />
+      <RadioIcon
+        value={props.value}
+        disabled={props.disabled}
+        checkedIcon={checkedIcon}
+        uncheckedIcon={uncheckedIcon}
+        disabledIcon={disabledIcon}
+      />
+    </>
   );
 });
diff --git a/src/radio/RadioGroup.tsx b/src/radio/RadioGroup.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import { RadioInitialState, RadioStateReturn } from "reakit";
+
+import { createContext } from "../utils";
+import { RadioCommonProps } from "./Radio";
+import { useRadioState } from "./useRadioState";
+
+type RadioContextType = {
+  radioState?: RadioStateReturn;
+  radioSize?: RadioCommonProps["size"];
+};
+
+const [RadioProvider, useRadioContext] = createContext<RadioContextType>({
+  errorMessage: "Radio must be used within RadioProvider",
+  name: "RadioContext",
+  strict: true,
+});
+
+export { RadioProvider, useRadioContext };
+
+export type RadioGroupProps = RadioInitialState &
+  Pick<RadioCommonProps, "size"> & {
+    onStateChange?: (state: RadioCommonProps["value"]) => void;
+    state?: RadioCommonProps["value"];
+    defaultState?: RadioCommonProps["value"];
+  };
+
+export const RadioGroup: React.FC<RadioGroupProps> = ({
+  children,
+  size = "sm",
+  ...props
+}) => {
+  const radioState = useRadioState(props);
+
+  return (
+    <RadioProvider value={{ radioState: radioState, radioSize: size }}>
+      {children}
+    </RadioProvider>
+  );
+};
diff --git a/src/radio/RadioIcon.tsx b/src/radio/RadioIcon.tsx
@@ -0,0 +1,70 @@
+import React from "react";
+import { cx } from "@renderlesskit/react";
+import { Box, BoxProps, RadioState } from "reakit";
+
+import {
+  RadioCheckedIcon,
+  RadioDisabledIcon,
+  RadioUncheckedIcon,
+} from "../icons/RadioIcons";
+import { useTheme } from "..";
+import { RadioCommonProps } from "./Radio";
+import { useRadioContext } from "./RadioGroup";
+import { forwardRefWithAs } from "../utils/types";
+
+export type RadioIconProps = BoxProps &
+  RadioState &
+  RadioCommonProps & {
+    checkedIcon?: React.ReactNode;
+    uncheckedIcon?: React.ReactNode;
+    disabledIcon?: React.ReactNode;
+  };
+
+export const RadioIcon = forwardRefWithAs<
+  Partial<RadioIconProps>,
+  HTMLDivElement,
+  "div"
+>((props, ref) => {
+  const { radioState, radioSize } = useRadioContext();
+  const { value, size, disabled, ...mainProps } = props;
+  const { className, children, ...rest } = mainProps;
+
+  const _size = size || radioSize || "sm";
+  const stateProp = radioState?.state === value;
+
+  const theme = useTheme();
+  const radioIconStyles = cx(
+    theme.radio.icon.base,
+    theme.radio.icon.size[_size],
+    disabled
+      ? theme.radio.icon.disabled
+      : stateProp
+      ? theme.radio.icon.checked
+      : theme.radio.icon.unchecked,
+    className,
+  );
+
+  const iconMap = {
+    checked: props.checkedIcon || <RadioCheckedIcon />,
+    unchecked: props.uncheckedIcon || <RadioUncheckedIcon />,
+    disabled: props.disabledIcon || <RadioDisabledIcon />,
+  };
+
+  return (
+    <Box
+      ref={ref}
+      role="img"
+      aria-hidden="true"
+      className={radioIconStyles}
+      {...rest}
+    >
+      {children
+        ? children
+        : disabled
+        ? iconMap.disabled
+        : stateProp
+        ? iconMap.checked
+        : iconMap.unchecked}
+    </Box>
+  );
+});
diff --git a/src/radio/RadioLabel.tsx b/src/radio/RadioLabel.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { BoxProps } from "reakit";
+import { cx } from "@renderlesskit/react";
+
+import { Box } from "../box";
+import { useTheme } from "..";
+import { RadioCommonProps } from "./Radio";
+import { useRadioContext } from "./RadioGroup";
+import { forwardRefWithAs } from "../utils/types";
+
+export type RadioLabelProps = BoxProps & Omit<RadioCommonProps, "value">;
+
+export const RadioLabel = forwardRefWithAs<
+  RadioLabelProps,
+  HTMLLabelElement,
+  "label"
+>((props, ref) => {
+  const { size, disabled = false, ...mainProps } = props;
+  const { className, ...rest } = mainProps;
+  const theme = useTheme();
+  const { radioSize } = useRadioContext();
+  const _size = size || radioSize || "sm";
+
+  const radioStyles = cx(
+    theme.radio.base,
+    theme.radio.label.base,
+    theme.radio.label.size[_size],
+    disabled ? theme.radio.disabled : "",
+    className,
+  );
+
+  return <Box as="label" ref={ref} className={radioStyles} {...rest} />;
+});
diff --git a/src/radio/index.tsx b/src/radio/index.tsx
@@ -0,0 +1,5 @@
+export * from "./Radio";
+export * from "./RadioIcon";
+export * from "./RadioLabel";
+export * from "./RadioGroup";
+export * from "./useRadioState";