archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

fix(radio): handle props styles in getBaseProps (#5944)

Browse Source 
* fix(radio): handle props styles in getBaseProps

* refactor(radio): examples
This commit is contained in:
WK 2025-11-26 13:55:37 +08:00 committed by GitHub
parent 484212712c
commit 4fa54534b2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 33 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/two-clouds-refuse.md Normal file
View File

@ -0,0 +1,5 @@
---
"@heroui/radio": patch
---
handle props styles in getBaseProps (#5942)

13
apps/docs/content/components/radio-group/custom-impl.raw.jsx
View File

@ -15,12 +15,13 @@ export const CustomRadio = (props) => {
return (
<Component
{...getBaseProps()}
className={cn(
"group inline-flex items-center hover:opacity-70 active:opacity-50 justify-between flex-row-reverse tap-highlight-transparent",
"max-w-[300px] cursor-pointer border-2 border-default rounded-lg gap-4 p-4",
"data-[selected=true]:border-primary",
)}
{...getBaseProps({
className: cn(
"group inline-flex items-center hover:opacity-70 active:opacity-50 justify-between flex-row-reverse tap-highlight-transparent m-0",
"max-w-[300px] cursor-pointer border-2 border-default rounded-lg gap-4 p-4",
"data-[selected=true]:border-primary",
),
})}
>
<VisuallyHidden>
<input {...getInputProps()} />

13
apps/docs/content/components/radio-group/custom-impl.raw.tsx
View File

@ -18,12 +18,13 @@ export const CustomRadio = (props: RadioProps) => {
return (
<Component
{...getBaseProps()}
className={cn(
"group inline-flex items-center justify-between hover:bg-content2 flex-row-reverse",
"max-w-[300px] cursor-pointer border-2 border-default rounded-lg gap-4 p-4",
"data-[selected=true]:border-primary",
)}
{...getBaseProps({
className: cn(
"group inline-flex items-center hover:opacity-70 active:opacity-50 justify-between flex-row-reverse tap-highlight-transparent m-0",
"max-w-[300px] cursor-pointer border-2 border-default rounded-lg gap-4 p-4",
"data-[selected=true]:border-primary",
),
})}
>
<VisuallyHidden>
<input {...getInputProps()} />

2
packages/components/radio/src/use-radio.ts
View File

@ -156,7 +156,7 @@ export function useRadio(props: UseRadioProps) {
return {
...props,
ref: domRef,
className: slots.base({class: baseStyles}),
className: slots.base({class: clsx(baseStyles, props?.className)}),
"data-disabled": dataAttr(isDisabled),
"data-focus": dataAttr(isFocused),
"data-focus-visible": dataAttr(isFocusVisible),

32
packages/components/radio/stories/radio.stories.tsx
View File

@ -4,11 +4,11 @@ import type {RadioProps, RadioGroupProps} from "../src";
import React from "react";
import {VisuallyHidden} from "@react-aria/visually-hidden";
import {radio, button} from "@heroui/theme";
import {radio, button, cn} from "@heroui/theme";
import {clsx} from "@heroui/shared-utils";
import {Form} from "@heroui/form";
import {RadioGroup, Radio, useRadio, useRadioGroupContext} from "../src";
import {RadioGroup, Radio, useRadio} from "../src";
export default {
title: "Components/RadioGroup",
@ -360,19 +360,14 @@ export const Controlled = {
const CustomRadio = (props: RadioProps) => {
const {children, ...otherProps} = props;
const {groupState} = useRadioGroupContext();
const isSelected = groupState.selectedValue === otherProps.value;
return (
<Radio
{...otherProps}
classNames={{
base: clsx(
"inline-flex bg-content1 hover:bg-content2 items-center justify-between flex-row-reverse max-w-[300px] cursor-pointer rounded-lg gap-4 p-4 border-2 border-transparent",
{
"border-primary": isSelected,
},
base: cn(
"inline-flex m-0 bg-content1 hover:bg-content2 items-center justify-between",
"flex-row-reverse max-w-[300px] cursor-pointer rounded-lg gap-4 p-4 border-2 border-transparent",
"data-[selected=true]:border-primary",
),
}}
>
@ -401,7 +396,6 @@ const RadioCard = (props: RadioProps) => {
const {
Component,
children,
isSelected,
description,
getBaseProps,
getWrapperProps,
@ -413,13 +407,13 @@ const RadioCard = (props: RadioProps) => {
return (
<Component
{...getBaseProps()}
className={clsx(
"group inline-flex items-center justify-between hover:bg-content2 flex-row-reverse max-w-[300px] cursor-pointer border-2 border-default rounded-lg gap-4 p-4",
{
"border-primary": isSelected,
},
)}
{...getBaseProps({
className: cn(
"group inline-flex items-center hover:opacity-70 active:opacity-50 justify-between flex-row-reverse tap-highlight-transparent m-0",
"max-w-[300px] cursor-pointer border-2 border-default rounded-lg gap-4 p-4",
"data-[selected=true]:border-primary",
),
})}
>
<VisuallyHidden>
<input {...getInputProps()} />