radio component

actifyjs · Nov 18, 2024 · 2db9672 · 2db9672
1 parent add1371
commit 2db9672
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 29 deletions.
diff --git a/apps/docs/content/components/radio.md b/apps/docs/content/components/radio.md
@@ -9,8 +9,9 @@ description: Radio buttons let people select one option from a set of options
 
 ## Props
 
-| Props        | Type        | Description                                                       | Default     |
-| ------------ | ----------- | ----------------------------------------------------------------- | ----------- |
-| `value`      | `string`    | The value of the radio button, used when submitting an HTML form. | `null`      |
-| `children`   | `ReactNode` | The label for the Radio. Accepts any renderable node.             | `undefined` |
-| `isDisabled` | `boolean`   | Whether the radio button is disabled or not.                      | `undefined` |
+| Props         | Type                    | Description                                                       | Default     |
+| ------------- | ----------------------- | ----------------------------------------------------------------- | ----------- |
+| `value`       | `string`                | The value of the radio button, used when submitting an HTML form. | `null`      |
+| `children`    | `ReactNode`             | The label for the Radio. Accepts any renderable node.             | `undefined` |
+| `isDisabled`  | `boolean`               | Whether the radio button is disabled or not.                      | `undefined` |
+| `orientation` | `horizontal` `vertical` | The axis the Radio should align with.                             | `vertical`  |
diff --git a/apps/docs/src/usages/radio.tsx b/apps/docs/src/usages/radio.tsx
@@ -3,32 +3,27 @@ import { Radio, RadioGroup } from 'actify'
 export default () => {
   return (
     <div className="flex flex-col gap-4">
+      <h2>Radio With label</h2>
+
+      <RadioGroup name="project" aria-label="project" defaultValue="actify">
+        <Radio value="actify">Actify</Radio>
+        <Radio value="ngroker">Ngroker</Radio>
+        <Radio value="taildoor">Taildoor</Radio>
+        <Radio value="hugola">Hugola</Radio>
+      </RadioGroup>
+
       <h2>RadioGroup With label</h2>
       <RadioGroup
         label="project"
         name="project"
         defaultValue="taildoor"
-        className="flex items-center gap-4"
+        orientation="horizontal"
       >
         <Radio value="actify" aria-label="actify" />
         <Radio value="ngroker" aria-label="ngroker" />
         <Radio value="taildoor" aria-label="taildoor" />
         <Radio value="hugola" aria-label="hugola" />
       </RadioGroup>
-
-      <h2>Radio With label</h2>
-
-      <RadioGroup
-        orientation="vertical"
-        aria-label="project"
-        name="project"
-        defaultValue="actify"
-      >
-        <Radio value="actify">Actify</Radio>
-        <Radio value="ngroker">Ngroker</Radio>
-        <Radio value="taildoor">Taildoor</Radio>
-        <Radio value="hugola">Hugola</Radio>
-      </RadioGroup>
     </div>
   )
 }
diff --git a/packages/actify/src/components/Radio/RadioGroup.tsx b/packages/actify/src/components/Radio/RadioGroup.tsx
@@ -3,32 +3,43 @@ import { RadioGroupState, useRadioGroupState } from 'react-stately'
 
 import { Label } from '../Label'
 import React from 'react'
+import { StyleProps } from '../../utils'
+import clsx from 'clsx'
+import styles from './radio-group.module.css'
 
 export const RadioContext = React.createContext<RadioGroupState | {}>({})
 
-interface RadioGroupProps extends AriaRadioGroupProps {
-  style?: React.CSSProperties
-  className?: string
+interface RadioGroupProps extends AriaRadioGroupProps, StyleProps {
   children?: React.ReactNode
 }
 
 const RadioGroup = (props: RadioGroupProps) => {
-  const { style, className, description, errorMessage } = props
+  const {
+    style,
+    className,
+    description,
+    errorMessage,
+    orientation = 'vertical'
+  } = props
   const state = useRadioGroupState(props)
   const { radioGroupProps, labelProps, descriptionProps, errorMessageProps } =
-    useRadioGroup(props, state)
+    useRadioGroup({ ...props, orientation }, state)
 
   return (
-    <div {...radioGroupProps} style={style} className={className}>
+    <div
+      {...radioGroupProps}
+      style={style}
+      className={clsx(styles['radio-group'], className)}
+    >
       {props.label && <Label {...labelProps}>{props.label}</Label>}
       <RadioContext value={state}>{props.children}</RadioContext>
       {description && (
-        <div {...descriptionProps} style={{ fontSize: 12 }}>
+        <div {...descriptionProps} className={styles['description']}>
           {description}
         </div>
       )}
       {errorMessage && state.isInvalid && (
-        <div {...errorMessageProps} style={{ color: 'red', fontSize: 12 }}>
+        <div {...errorMessageProps} className={styles['error-message']}>
           <>{errorMessage}</>
         </div>
       )}

diff --git a/packages/actify/src/components/Radio/radio-group.module.css b/packages/actify/src/components/Radio/radio-group.module.css
@@ -0,0 +1,17 @@
+.radio-group {
+  display: flex;
+}
+.radio-group[aria-orientation='horizontal'] {
+  gap: 8px;
+  align-items: center;
+}
+.radio-group[aria-orientation='vertical'] {
+  flex-direction: column;
+}
+.description {
+  font-size: 12px;
+}
+.error-message {
+  font-size: 12px;
+  color: rgb(var(--md-sys-color-error));
+}
diff --git a/packages/actify/src/components/Radio/radio.module.css b/packages/actify/src/components/Radio/radio.module.css
@@ -1,7 +1,7 @@
 .radio-wrapper {
   gap: 8px;
   height: 48px;
-  display: flex;
+  display: inline-flex;
   align-items: center;
 }
 .radio {