feat: expose wrapper radio item level

lerna.json

@@ -2,7 +2,7 @@
     "packages": ["packages/*"],
     "npmClient": "yarn",
     "useWorkspaces": true,
-    "version": "0.11.1",
+    "version": "0.11.2",
     "command": {
         "version": {
             "message": "chore(release): publish %s"

packages/apsara-icons/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@goto-company/icons",
-    "version": "0.11.1",
+    "version": "0.11.2",
     "description": "Apsara icons",
     "scripts": {
         "build": "node scripts/build.js",

packages/apsara-ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@goto-company/apsara",
-    "version": "0.11.1",
+    "version": "0.11.2",
     "description": "A list of base components for apsara",
     "author": "Praveen Yadav <[email protected]>",
     "license": "Apache-2.0",

packages/apsara-ui/src/Radio/Radio.stories.mdx

@@ -1,16 +1,21 @@
 import { Meta, Preview, Canvas, Story, ArgsTable, IconGallery, IconItem } from "@storybook/addon-docs/blocks";
 import Radio from "./Radio";
+import Tooltip from "../Tooltip";
 
 export const items = [
-    {label: 'Apple',value: 'Apple'},
-    {label: 'Pear',value: 'Pear'},
-    {disabled: true,label: 'Orange',value: 'Orange'}
-]
+    { label: "Apple", value: "Apple" },
+    { label: "Pear", value: "Pear" },
+    {
+        disabled: true,
+        label: "Orange",
+        value: "Orange",
+        wrapper: ({ children }) => <Tooltip title="Will coming soon!">{children}</Tooltip>,
+    },
+];
 
-export const orientationTypes = ['horizontal','vertical',undefined]
-
-export const dirTypes = ['ltr', 'rtl', undefined]
+export const orientationTypes = ["horizontal", "vertical", undefined];
 
+export const dirTypes = ["ltr", "rtl", undefined];
 
 <Meta
     title="General/Radio"
@@ -22,7 +27,7 @@ export const dirTypes = ['ltr', 'rtl', undefined]
                 type: { summary: "{label?: string, value: string, disabled?: boolean, required?: boolean}[]" },
             },
         },
-        defaultValue:{
+        defaultValue: {
             control: { type: "text" },
             description: "Used when value is not controlled",
             table: {
@@ -41,25 +46,25 @@ export const dirTypes = ['ltr', 'rtl', undefined]
             control: { type: "select", options: orientationTypes },
             description: "Set Radio Orientation",
             table: {
-                type: { summary: 'horizontal | vertical | undefined' },
+                type: { summary: "horizontal | vertical | undefined" },
                 defaultValue: { summary: undefined },
             },
         },
-        dir:{
+        dir: {
             control: { type: "select", options: dirTypes },
             description: "Set Radio Items Direction",
             table: {
-                type: { summary: 'ltr | rtl | undefined' },
+                type: { summary: "ltr | rtl | undefined" },
                 defaultValue: { summary: undefined },
             },
         },
         onChange: {
-            action: 'clicked',
+            action: "clicked",
             description: "whenever a radio is clicked the corresponding value is passed into this function.",
-            table:{
-                type: {summary: '(value: string) => void'}
-            }
-        }
+            table: {
+                type: { summary: "(value: string) => void" },
+            },
+        },
     }}
 />
 

packages/apsara-ui/src/Radio/Radio.styles.tsx

@@ -53,7 +53,6 @@ export const Label = styled("label")`
     color: ${({ theme }) => theme?.radio?.label};
     margin: ${({ dir }) => dir === "rtl" && "8px"};
     font-size: 15px;
-    line-height: 1px;
     user-select: none;
     padding-left: 15px;
 `;

packages/apsara-ui/src/Radio/Radio.tsx

@@ -1,14 +1,19 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, ReactNode } from "react";
 import { RadioGroup, StyledRadioItem, StyledIndicator, Label, Flex, StyledRadioButton } from "./Radio.styles";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { generateRandomId } from "../helper";
 import { PREFIX_CLS } from "./constants";
 
+interface WrapperProps {
+    children: ReactNode;
+}
+
 export type RadioItem = {
-    label?: string;
+    label?: ReactNode;
     value: string;
     disabled?: boolean;
     required?: boolean;
+    wrapper?: ({ children }: WrapperProps) => ReactNode;
 };
 
 type RadioButtonType = {
@@ -40,6 +45,10 @@ export type RadioProps = {
     id?: string;
 };
 
+const defaultWrapper = ({ children }: WrapperProps) => {
+    return <>{children}</>;
+};
+
 const Radio = forwardRef<HTMLInputElement, RadioProps>(
     ({ defaultValue, value, items, onChange, required, orientation, dir, id = generateRandomId(), ...props }, ref) => {
         return (
@@ -56,23 +65,33 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(
                 ref={ref}
             >
                 {items &&
-                    items.map((item, i) => (
-                        <Flex dir={dir} key={item.value}>
-                            <StyledRadioItem
-                                value={item.value}
-                                disabled={item.disabled}
-                                required={item.required}
-                                {...props.itemStyle}
-                                id={`${id}${item.value}${i}`}
-                                className={`${PREFIX_CLS} ${props.className ? props.className : ""}`}
-                            >
-                                <StyledIndicator />
-                            </StyledRadioItem>
-                            <Label dir={dir} htmlFor={`${id}${item.value}${i}`}>
-                                {item.label}
-                            </Label>
-                        </Flex>
-                    ))}
+                    items.map((item, i) => {
+                        const { wrapper = defaultWrapper } = item;
+
+                        return (
+                            <React.Fragment key={item.value}>
+                                {wrapper({
+                                    children: (
+                                        <Flex dir={dir}>
+                                            <StyledRadioItem
+                                                value={item.value}
+                                                disabled={item.disabled}
+                                                required={item.required}
+                                                {...props.itemStyle}
+                                                id={`${id}${item.value}${i}`}
+                                                className={`${PREFIX_CLS} ${props.className ? props.className : ""}`}
+                                            >
+                                                <StyledIndicator />
+                                            </StyledRadioItem>
+                                            <Label dir={dir} htmlFor={`${id}${item.value}${i}`}>
+                                                {item.label}
+                                            </Label>
+                                        </Flex>
+                                    ),
+                                })}
+                            </React.Fragment>
+                        );
+                    })}
                 {!items && props.children}
             </RadioGroup>
         );

packages/apsara-ui/src/Tooltip/Tooltip.tsx

@@ -14,7 +14,8 @@ export type TooltipProps = {
     onOpenChange?: ((open: boolean) => void) | undefined;
     delayDuration?: number;
     avoidCollisions?: boolean;
-} & HTMLAttributes<HTMLDivElement>;
+} & HTMLAttributes<HTMLDivElement> &
+    RadixTooltip.TooltipContentProps;
 
 export const PREFIX_CLS = "apsara-tooltip";
 const Tooltip = ({