feat: improve RadioGroup and CheckboxGroup layout flexibility

Author: huijiewei

packages/react-ui/src/components/checkbox/checkbox-group.tsx

@@ -1,7 +1,8 @@
 import type { ChangeEvent } from "react";
 import { useControllableState } from "../../hooks";
 import type { PrimitiveProps } from "../../primitives";
-import { isInputEvent } from "../../utils";
+import type { Orientation } from "../../shared/types";
+import { isInputEvent, tx } from "../../utils";
 import { type CheckboxGroupBaseProps, CheckboxGroupContext } from "./checkbox-group-context";
 
 export type CheckboxGroupProps = {
@@ -14,6 +15,12 @@ export type CheckboxGroupProps = {
    * onChange 回调
    */
   onChange?: (value: (string | number)[]) => void;
+
+  /**
+   * 方向
+   * @default 'horizontal'
+   */
+  orientation?: Orientation;
 } & CheckboxGroupBaseProps;
 
 export const CheckboxGroup = (props: PrimitiveProps<"div", CheckboxGroupProps, "role">) => {
@@ -25,6 +32,8 @@ export const CheckboxGroup = (props: PrimitiveProps<"div", CheckboxGroupProps, "
     value,
     defaultValue = [],
     onChange,
+    orientation = "horizontal",
+    className,
     children,
     ...rest
   } = props;
@@ -63,7 +72,11 @@ export const CheckboxGroup = (props: PrimitiveProps<"div", CheckboxGroupProps, "
   };
 
   return (
-    <div role={"group"} {...rest}>
+    <div
+      role={"group"}
+      className={tx("inline-flex", orientation == "horizontal" ? "flex-row" : "flex-col", className)}
+      {...rest}
+    >
       <CheckboxGroupContext value={context}>{children}</CheckboxGroupContext>
     </div>
   );

packages/react-ui/src/components/radio/radio-group.tsx

@@ -1,7 +1,7 @@
 import { useControllableState } from "../../hooks";
 import type { PrimitiveProps } from "../../primitives";
 import type { Orientation } from "../../shared/types";
-import { ariaAttr } from "../../utils";
+import { ariaAttr, tx } from "../../utils";
 import { type RadioGroupBaseProps, RadioGroupContext } from "./radio-group-context";
 
 export type RadioGroupProps = RadioGroupBaseProps & {
@@ -35,6 +35,7 @@ export const RadioGroup = (props: PrimitiveProps<"div", RadioGroupProps, "role">
     value,
     defaultValue = "",
     onChange,
+    className,
     children,
     ...rest
   } = props;
@@ -73,6 +74,7 @@ export const RadioGroup = (props: PrimitiveProps<"div", RadioGroupProps, "role">
       aria-readonly={ariaAttr(readOnly)}
       aria-invalid={ariaAttr(invalid)}
       aria-orientation={orientation}
+      className={tx("inline-flex", orientation == "horizontal" ? "flex-row" : "flex-col", className)}
       {...rest}
     >
       <RadioGroupContext value={groupContext}>{children}</RadioGroupContext>

packages/react-ui/src/components/radio/radio.tsx

@@ -91,7 +91,7 @@ export const Radio = (
           checked ? ["text-fg-emphasized", colorStyle.checked] : "bg-bg-normal",
           sizeStyle,
           checked &&
-            "before:relative before:inline-block before:h-1/2 before:w-1/2 before:rounded-[50%] before:bg-current before:content-['']",
+            "before:h-5/9 before:w-5/9 before:relative before:inline-block before:rounded-full before:bg-current before:content-['']",
         )}
       />
       {children && <div className={tx("select-none", labelSizeStyle)}>{children}</div>}

website/src/routes/docs/_mdx/components/checkbox.mdx

@@ -76,7 +76,7 @@ export default function App() {
   return (
     <div className={"flex flex-col gap-2"}>
       <p>你选择了框架: {value.join(", ")}</p>
-      <CheckboxGroup value={value} onChange={setValue} className={"flex flex-row gap-5"}>
+      <CheckboxGroup value={value} onChange={setValue} className={"gap-5"}>
         <Checkbox value={"React"}>React</Checkbox>
         <Checkbox value={"Angular"}>Angular</Checkbox>
         <Checkbox value={"Vue"}>Vue</Checkbox>
@@ -111,7 +111,7 @@ export default function App() {
       >
         工作日
       </Checkbox>
-      <div className={"flex flex-row gap-5"}>
+      <div className={"inline-flex flex-row gap-5"}>
         {["周一", "周二", "周三", "周四", "周五"].map((day, index) => (
           <Checkbox
             key={day}

website/src/routes/docs/_mdx/components/radio-group.mdx

@@ -10,7 +10,7 @@ import { Radio, RadioGroup } from "@resolid/react-ui";
 
 export default function App() {
   return (
-    <RadioGroup name={"frameworksRadioGroup"} className={"flex flex-row items-center gap-5"}>
+    <RadioGroup name={"frameworksRadioGroup"} className={"gap-5"}>
       <Radio value={"React"}>React</Radio>
       <Radio value={"Angular"}>Angular</Radio>
       <Radio value={"Vue"}>Vue</Radio>
@@ -49,11 +49,7 @@ import { Radio, RadioGroup } from "@resolid/react-ui";
 
 export default function App() {
   return (
-    <RadioGroup
-      name={"frameworksRadioGroup"}
-      defaultValue={"React"}
-      className={"flex flex-row items-center gap-5"}
-    >
+    <RadioGroup name={"frameworksRadioGroup"} defaultValue={"React"} className={"gap-5"}>
       <Radio value={"React"}>React</Radio>
       <Radio value={"Angular"}>Angular</Radio>
       <Radio value={"Vue"}>Vue</Radio>
@@ -82,7 +78,7 @@ export default function App() {
         name={"frameworksRadioGroup"}
         value={value}
         onChange={setValue}
-        className={"flex flex-row items-center gap-5"}
+        className={"gap-5"}
       >
         <Radio value={"React"}>React</Radio>
         <Radio value={"Angular"}>Angular</Radio>
@@ -95,6 +91,26 @@ export default function App() {
 }
 ```
 
+### 垂直方向
+
+使用 `defaultValue` 属性来控制默认选定的单选项目
+
+```jsx demo
+import { Radio, RadioGroup } from "@resolid/react-ui";
+
+export default function App() {
+  return (
+    <RadioGroup name={"frameworksRadioGroup"} orientation={"vertical"} className={"gap-3"}>
+      <Radio value={"React"}>React</Radio>
+      <Radio value={"Angular"}>Angular</Radio>
+      <Radio value={"Vue"}>Vue</Radio>
+      <Radio value={"SolidJS"}>SolidJS</Radio>
+      <Radio value={"Svelte"}>Svelte</Radio>
+    </RadioGroup>
+  );
+}
+```
+
 ## 属性
 
 ### RadioGroup