diff --git a/lerna.json b/lerna.json index aacb290fa..c3c06def7 100644 --- a/lerna.json +++ b/lerna.json @@ -2,7 +2,7 @@ "packages": ["packages/*"], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.11.0", + "version": "0.11.2", "command": { "version": { "message": "chore(release): publish %s" diff --git a/packages/apsara-icons/package.json b/packages/apsara-icons/package.json index 238ccf356..7d5910b36 100644 --- a/packages/apsara-icons/package.json +++ b/packages/apsara-icons/package.json @@ -1,6 +1,6 @@ { "name": "@goto-company/icons", - "version": "0.11.0", + "version": "0.11.2", "description": "Apsara icons", "scripts": { "build": "node scripts/build.js", diff --git a/packages/apsara-ui/package.json b/packages/apsara-ui/package.json index a646c9f4f..2afbb2304 100644 --- a/packages/apsara-ui/package.json +++ b/packages/apsara-ui/package.json @@ -1,6 +1,6 @@ { "name": "@goto-company/apsara", - "version": "0.11.0", + "version": "0.11.2", "description": "A list of base components for apsara", "author": "Praveen Yadav ", "license": "Apache-2.0", diff --git a/packages/apsara-ui/src/Radio/Radio.styles.tsx b/packages/apsara-ui/src/Radio/Radio.styles.tsx index 566e7fa87..b873e72e5 100644 --- a/packages/apsara-ui/src/Radio/Radio.styles.tsx +++ b/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; `; diff --git a/packages/apsara-ui/src/Radio/Radio.tsx b/packages/apsara-ui/src/Radio/Radio.tsx index 2c2961f63..a59b296e2 100644 --- a/packages/apsara-ui/src/Radio/Radio.tsx +++ b/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; 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( ({ defaultValue, value, items, onChange, required, orientation, dir, id = generateRandomId(), ...props }, ref) => { return ( @@ -56,23 +65,33 @@ const Radio = forwardRef( ref={ref} > {items && - items.map((item, i) => ( - - - - - - - ))} + items.map((item, i) => { + const { wrapper = defaultWrapper } = item; + + return ( + <> + {wrapper({ + children: ( + + + + + + + ), + })} + + ); + })} {!items && props.children} ); diff --git a/packages/apsara-ui/src/Tooltip/Tooltip.tsx b/packages/apsara-ui/src/Tooltip/Tooltip.tsx index 0f62fd256..4876216e3 100644 --- a/packages/apsara-ui/src/Tooltip/Tooltip.tsx +++ b/packages/apsara-ui/src/Tooltip/Tooltip.tsx @@ -14,7 +14,8 @@ export type TooltipProps = { onOpenChange?: ((open: boolean) => void) | undefined; delayDuration?: number; avoidCollisions?: boolean; -} & HTMLAttributes; +} & HTMLAttributes & + RadixTooltip.TooltipContentProps; export const PREFIX_CLS = "apsara-tooltip"; const Tooltip = ({ diff --git a/packages/apsara-ui/src/form-builder-v2/components/field/field.tsx b/packages/apsara-ui/src/form-builder-v2/components/field/field.tsx index 80128fb21..d3c472f21 100644 --- a/packages/apsara-ui/src/form-builder-v2/components/field/field.tsx +++ b/packages/apsara-ui/src/form-builder-v2/components/field/field.tsx @@ -5,7 +5,7 @@ import { PREFIX_CLS } from "../../constants"; import withDefaultErrorMessage from "../../utils/default-error-message"; import { ErrorMessage as ErrorMessageWrapper } from "@hookform/error-message"; -type ErrorAnimation = "shake" | "none"; +export type ErrorAnimation = "shake" | "none"; export interface FieldProps extends UseControllerProps { label?: string; diff --git a/packages/apsara-ui/src/form-builder-v2/form-builder-v2.stories.tsx b/packages/apsara-ui/src/form-builder-v2/form-builder-v2.stories.tsx index 65c27a29e..d78c988b5 100644 --- a/packages/apsara-ui/src/form-builder-v2/form-builder-v2.stories.tsx +++ b/packages/apsara-ui/src/form-builder-v2/form-builder-v2.stories.tsx @@ -10,6 +10,7 @@ import DatePicker from "../DatePicker"; import Combobox from "../Combobox"; import Switch from "../Switch"; import Checkbox from "../Checkbox"; +import Tooltip from "../Tooltip"; export default { title: "Data Display/FormV2", @@ -77,6 +78,12 @@ export const MyForm = () => { disabled: true, label: "Orange", value: "Orange", + // eslint-disable-next-line react/display-name + wrapper: ({ children }) => ( + + {children} + + ), }, ]} orientation="horizontal" diff --git a/packages/apsara-ui/src/form-builder-v2/form-builder-v2.tsx b/packages/apsara-ui/src/form-builder-v2/form-builder-v2.tsx index 620298d61..af9bcfd40 100644 --- a/packages/apsara-ui/src/form-builder-v2/form-builder-v2.tsx +++ b/packages/apsara-ui/src/form-builder-v2/form-builder-v2.tsx @@ -1,18 +1,25 @@ import React, { ReactNode } from "react"; -import { FieldValues, FormProvider, SubmitHandler, UseFormReturn } from "react-hook-form"; +import { FieldValues, FormProvider, SubmitErrorHandler, SubmitHandler, UseFormReturn } from "react-hook-form"; import Field from "./components/field"; import { PREFIX_CLS } from "./constants"; +import { noop } from "../utils"; interface FormBuilderProps { children: ReactNode; onSubmit: SubmitHandler; + onInvalidSubmit?: SubmitErrorHandler; form: UseFormReturn; } -const FormBuilderV2 = ({ children, onSubmit, form }: FormBuilderProps) => { +const FormBuilderV2 = ({ + children, + onSubmit, + onInvalidSubmit = noop, + form, +}: FormBuilderProps) => { return ( -
+ {children}
diff --git a/packages/apsara-ui/src/index.ts b/packages/apsara-ui/src/index.ts index 2cdf638d9..f9956a9b7 100644 --- a/packages/apsara-ui/src/index.ts +++ b/packages/apsara-ui/src/index.ts @@ -10,6 +10,7 @@ import Text from "./Text"; import Tag from "./Tag"; import States from "./States"; import FormBuilder, { Form, FormInstance } from "./FormBuilder"; +import FormBuilderV2 from "./form-builder-v2"; import Learn from "./Learn"; import Markdown from "./Markdown"; import ContentLayout from "./ContentLayout"; @@ -72,6 +73,7 @@ export { Text, Tag, FormBuilder, + FormBuilderV2, FormInstance, Form, States,