fix: added RaioGroupItemLabel (#42)

stefan-karger · Nov 19, 2023 · fb995e4 · fb995e4
1 parent f9a86fe
commit fb995e4
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 7 deletions.
diff --git a/.changeset/selfish-laws-accept.md b/.changeset/selfish-laws-accept.md
@@ -0,0 +1,5 @@
+---
+"docs": patch
+---
+
+fix: added RadioGroupItemLabel
diff --git a/apps/docs/public/registry/ui/radio-group.json b/apps/docs/public/registry/ui/radio-group.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "radio-group.tsx",
-      "content": "import type { Component } from \"solid-js\"\r\nimport { splitProps } from \"solid-js\"\r\n\r\nimport { RadioGroup as RadioGroupPrimitive } from \"@kobalte/core\"\r\nimport { TbCircle } from \"solid-icons/tb\"\r\n\r\nimport { cn } from \"~/lib/utils\"\r\n\r\nconst RadioGroup: Component<RadioGroupPrimitive.RadioGroupRootProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return <RadioGroupPrimitive.Root class={cn(\"grid gap-2\", props.class)} {...rest} />\r\n}\r\n\r\nconst RadioGroupItem: Component<RadioGroupPrimitive.RadioGroupItemProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\", \"children\"])\r\n  return (\r\n    <RadioGroupPrimitive.Item class={cn(\"flex items-center space-x-2\", props.class)} {...rest}>\r\n      <RadioGroupPrimitive.ItemInput />\r\n      <RadioGroupPrimitive.ItemControl class=\"border-primary text-primary ring-offset-background focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\">\r\n        <RadioGroupPrimitive.ItemIndicator class=\"flex h-full items-center justify-center \">\r\n          <TbCircle class=\"h-2.5 w-2.5 fill-current text-current\" />\r\n        </RadioGroupPrimitive.ItemIndicator>\r\n      </RadioGroupPrimitive.ItemControl>\r\n      {props.children}\r\n    </RadioGroupPrimitive.Item>\r\n  )\r\n}\r\n\r\nexport { RadioGroup, RadioGroupItem }\r\n"
+      "content": "import type { Component } from \"solid-js\"\r\nimport { splitProps } from \"solid-js\"\r\n\r\nimport { RadioGroup as RadioGroupPrimitive } from \"@kobalte/core\"\r\nimport { TbCircle } from \"solid-icons/tb\"\r\n\r\nimport { cn } from \"~/lib/utils\"\r\n\r\nconst RadioGroup: Component<RadioGroupPrimitive.RadioGroupRootProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return <RadioGroupPrimitive.Root class={cn(\"grid gap-2\", props.class)} {...rest} />\r\n}\r\n\r\nconst RadioGroupItem: Component<RadioGroupPrimitive.RadioGroupItemProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\", \"children\"])\r\n  return (\r\n    <RadioGroupPrimitive.Item class={cn(\"flex items-center space-x-2\", props.class)} {...rest}>\r\n      <RadioGroupPrimitive.ItemInput />\r\n      <RadioGroupPrimitive.ItemControl class=\"border-primary text-primary ring-offset-background focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\">\r\n        <RadioGroupPrimitive.ItemIndicator class=\"flex h-full items-center justify-center \">\r\n          <TbCircle class=\"h-2.5 w-2.5 fill-current text-current\" />\r\n        </RadioGroupPrimitive.ItemIndicator>\r\n      </RadioGroupPrimitive.ItemControl>\r\n      {props.children}\r\n    </RadioGroupPrimitive.Item>\r\n  )\r\n}\r\n\r\nconst RadioGroupItemLabel: Component<RadioGroupPrimitive.RadioGroupItemLabelProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return (\r\n    <RadioGroupPrimitive.ItemLabel\r\n      class={cn(\r\n        \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\r\n        props.class\r\n      )}\r\n      {...rest}\r\n    />\r\n  )\r\n}\r\n\r\nexport { RadioGroup, RadioGroupItem, RadioGroupItemLabel }\r\n"
     }
   ],
   "type": "ui"

diff --git a/apps/docs/src/registry/example/radio-group-demo.tsx b/apps/docs/src/registry/example/radio-group-demo.tsx
@@ -1,15 +1,14 @@
 import { For } from "solid-js"
 
-import { Label } from "~/registry/ui/label"
-import { RadioGroup, RadioGroupItem } from "~/registry/ui/radio-group"
+import { RadioGroup, RadioGroupItem, RadioGroupItemLabel } from "~/registry/ui/radio-group"
 
 export default function RadioGroupDemo() {
   return (
     <RadioGroup>
       <For each={["Apple", "Orange", "Watermelon"]}>
         {(fruit) => (
           <RadioGroupItem value={fruit}>
-            <Label>{fruit}</Label>
+            <RadioGroupItemLabel>{fruit}</RadioGroupItemLabel>
           </RadioGroupItem>
         )}
       </For>

diff --git a/apps/docs/src/registry/ui/radio-group.tsx b/apps/docs/src/registry/ui/radio-group.tsx
@@ -26,4 +26,17 @@ const RadioGroupItem: Component<RadioGroupPrimitive.RadioGroupItemProps> = (prop
   )
 }
 
-export { RadioGroup, RadioGroupItem }
+const RadioGroupItemLabel: Component<RadioGroupPrimitive.RadioGroupItemLabelProps> = (props) => {
+  const [, rest] = splitProps(props, ["class"])
+  return (
+    <RadioGroupPrimitive.ItemLabel
+      class={cn(
+        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        props.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export { RadioGroup, RadioGroupItem, RadioGroupItemLabel }
diff --git a/apps/docs/src/routes/docs/components/radio-group.mdx b/apps/docs/src/routes/docs/components/radio-group.mdx
@@ -44,15 +44,15 @@ pnpm install @kobalte/core solid-icons
 ## Usage
 
 ```tsx
-import { RadioGroup, RadioGroupItem } from "~/components/ui/radio-group"
+import { RadioGroup, RadioGroupItem, RadioGroupItemLabel } from "~/components/ui/radio-group"
 ```
 
 ```tsx
 <RadioGroup>
   <For each={["Apple", "Orange", "Watermelon"]}>
     {(fruit) => (
       <RadioGroupItem value={fruit}>
-        <Label>{fruit}</Label>
+        <RadioGroupItemLabel>{fruit}</RadioGroupItemLabel>
       </RadioGroupItem>
     )}
   </For>