refactor(radio): added radio icons with css

adaptui · Jan 29, 2021 · 5572582 · 5572582
1 parent 4fbcbc8
commit 5572582
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 24 deletions.
diff --git a/preset.js b/preset.js
@@ -57,6 +57,10 @@ const renderlesskitConfig = {
       border: {
         1.5: "1.5px",
       },
+      borderWidth: {
+        5: "5px",
+        6: "6px",
+      },
     },
   },
   variants: {

diff --git a/src/radio/Radio.tsx b/src/radio/Radio.tsx
@@ -22,7 +22,7 @@ export const Radio = forwardRefWithAs<
   HTMLInputElement,
   "input"
 >((props, ref) => {
-  const { className, size, ...rest } = props;
+  const { className, ...rest } = props;
 
   const theme = useTheme();
   const { radioState } = useRadioContext();

diff --git a/src/radio/RadioGroup.tsx b/src/radio/RadioGroup.tsx
@@ -27,7 +27,7 @@ export type RadioGroupProps = RadioInitialState &
 
 export const RadioGroup: React.FC<RadioGroupProps> = ({
   children,
-  size,
+  size = "sm",
   ...props
 }) => {
   const radioState = useRadioState(props);

diff --git a/src/radio/RadioIcon.tsx b/src/radio/RadioIcon.tsx
@@ -23,7 +23,7 @@ export const RadioIcon = forwardRefWithAs<
   const { value, size, disabled, ...mainProps } = props;
   const { className, children, ...rest } = mainProps;
 
-  const _size = size || radioSize || "md";
+  const _size = size || radioSize || "sm";
   const stateProp = radioState?.state === value;
 
   const theme = useTheme();
@@ -45,16 +45,6 @@ export const RadioIcon = forwardRefWithAs<
       aria-hidden="true"
       className={radioIconStyles}
       {...rest}
-    >
-      {children ? (
-        children
-      ) : disabled ? (
-        <RadioDisabledIcon />
-      ) : stateProp ? (
-        <RadioCheckedIcon />
-      ) : (
-        <RadioUncheckedIcon />
-      )}
-    </Box>
+    />
   );
 });
diff --git a/src/radio/RadioLabel.tsx b/src/radio/RadioLabel.tsx
@@ -19,7 +19,7 @@ export const RadioLabel = forwardRefWithAs<
   const { className, ...rest } = mainProps;
   const theme = useTheme();
   const { radioSize } = useRadioContext();
-  const _size = size || radioSize || "md";
+  const _size = size || radioSize || "sm";
 
   const radioStyles = cx(
     theme.radio.base,

diff --git a/src/radio/stories/Radio.stories.tsx b/src/radio/stories/Radio.stories.tsx
@@ -33,15 +33,15 @@ const base = storyTemplate<RadioGroupProps>(
     );
   },
   {
-    size: "lg",
+    size: "sm",
   },
 );
 
 export const Default = base({});
 
 export const States = () => {
   return (
-    <RadioGroup defaultState={"2"}>
+    <RadioGroup defaultState={"2"} size="sm">
       <div className="flex flex-col gap-2">
         <RadioLabel className="hover:bg-gray-100 p-2 rounded-md">
           <Radio value="1" />

diff --git a/src/theme/defaultTheme/radio.ts b/src/theme/defaultTheme/radio.ts
@@ -5,15 +5,15 @@ export const radio = {
   input: "lib:sr-only",
   icon: {
     base:
-      "lib:inline-flex lib:items-center lib:justify-center lib:flex-shrink-0 lib:align-top lib:select-none lib:transition-all lib:mr-2",
+      "lib:inline-flex lib:items-center lib:justify-center lib:flex-shrink-0 lib:align-top lib:select-none lib:transition-all lib:mr-2 lib:rounded-full",
     size: {
-      xs: "lib:w-3.5 lib:h-3.5 lib:text-xxs",
-      sm: "lib:w-4 lib:h-4 lib:text-xs",
-      lg: "lib:w-5 lib:h-5 lib:text-base",
+      xs: "lib:min-w-3.5 lib:min-h-3.5 lib:text-xxs",
+      sm: "lib:min-w-4 lib:min-h-4 lib:text-xs",
+      lg: "lib:min-w-5 lib:min-h-5 lib:text-base",
     },
-    unchecked: "lib:text-gray-400",
-    checked: "lib:text-gray-800",
-    disabled: "lib:text-gray-400",
+    unchecked: "lib:border-2 lib:border-gray-400",
+    checked: "lib:border-5 lib:bg-white lib:border-gray-800",
+    disabled: "lib:border-5 lib:bg-gray-400 lib:border-gray-200",
   },
   label: {
     base: "lib:text-gray-600 lib:select-none",