fix(radio): support styling the container based on state (#4741)

chakra-ui · Oct 4, 2021 · 6c93542 · 6c93542
1 parent 172847d
commit 6c93542
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git a/.changeset/dirty-emus-grab.md b/.changeset/dirty-emus-grab.md
@@ -0,0 +1,5 @@
+---
+"@chakra-ui/radio": patch
+---
+
+Add Support for styling the container element based on the radio state
diff --git a/packages/radio/src/radio.tsx b/packages/radio/src/radio.tsx
@@ -76,6 +76,7 @@ export const Radio = forwardRef<RadioProps, "input">((props, ref) => {
     getInputProps,
     getCheckboxProps,
     getLabelProps,
+    getRootProps,
     htmlProps,
   } = useRadio({
     ...rest,
@@ -91,6 +92,7 @@ export const Radio = forwardRef<RadioProps, "input">((props, ref) => {
   const checkboxProps = getCheckboxProps(otherProps)
   const inputProps = getInputProps({}, ref)
   const labelProps = getLabelProps()
+  const rootProps = Object.assign(layoutProps, getRootProps())
 
   const rootStyles = {
     width: isFullWidth ? "full" : undefined,
@@ -115,7 +117,7 @@ export const Radio = forwardRef<RadioProps, "input">((props, ref) => {
   }
 
   return (
-    <chakra.label className="chakra-radio" {...layoutProps} __css={rootStyles}>
+    <chakra.label className="chakra-radio" {...rootProps} __css={rootStyles}>
       <input className="chakra-radio__input" {...inputProps} />
       <chakra.span
         className="chakra-radio__control"

diff --git a/packages/radio/src/use-radio.ts b/packages/radio/src/use-radio.ts
@@ -256,6 +256,14 @@ export function useRadio(props: UseRadioProps = {}) {
     "data-invalid": dataAttr(isInvalid),
   })
 
+  const getRootProps: PropGetter = (pros, ref = null) => ({
+    ...props,
+    ref,
+    "data-disabled": dataAttr(isDisabled),
+    "data-checked": dataAttr(isChecked),
+    "data-invalid": dataAttr(isInvalid),
+  })
+
   return {
     state: {
       isInvalid,
@@ -270,6 +278,7 @@ export function useRadio(props: UseRadioProps = {}) {
     getCheckboxProps,
     getInputProps,
     getLabelProps,
+    getRootProps,
     htmlProps,
   }
 }