Fix isDisabled in RadioCard and ChoiceChip (#1418)

* Wrap data attributes in dataAttr() util * Fix data-disabled for ChoiceChip * Fix disabled input state in ChoiceChip * Add changeset
nsbno · Dec 13, 2024 · e2d26fd · e2d26fd
1 parent f341b2e
commit e2d26fd
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/.changeset/nasty-apples-search.md b/.changeset/nasty-apples-search.md
@@ -0,0 +1,5 @@
+---
+"@vygruppen/spor-react": patch
+---
+
+Fix isDisabled for RadioCard and ChoiceChip
diff --git a/packages/spor-react/src/input/ChoiceChip.tsx b/packages/spor-react/src/input/ChoiceChip.tsx
@@ -93,7 +93,7 @@ export const ChoiceChip = forwardRef(
         <chakra.input
           {...getInputProps({}, ref)}
           id={id}
-          disabled={isDisabled}
+          disabled={isDisabled || state.isDisabled}
         />
         <chakra.div
           {...getLabelProps()}
@@ -102,7 +102,7 @@ export const ChoiceChip = forwardRef(
           data-hover={dataAttr(state.isHovered)}
           data-focus={dataAttr(state.isFocused)}
           data-active={dataAttr(state.isActive)}
-          data-disabled={dataAttr(state.isDisabled)}
+          data-disabled={dataAttr(isDisabled || state.isDisabled)}
         >
           {icon && (
             <chakra.span __css={styles.icon}>

diff --git a/packages/spor-react/src/layout/RadioCard.tsx b/packages/spor-react/src/layout/RadioCard.tsx
@@ -7,6 +7,7 @@ import {
 } from "@chakra-ui/react";
 import React, { useContext, useEffect, useId, useState } from "react";
 import { RadioCardGroupContext } from "./RadioCardGroup";
+import { dataAttr } from "@chakra-ui/utils";
 
 /**
  * Radio cards are used to present a set of options where only one option can be selected.
@@ -107,9 +108,9 @@ export const RadioCard = forwardRef(
           as="label"
           name={name}
           htmlFor={inputId}
-          aria-checked={isChecked}
-          data-checked={isChecked}
-          data-disabled={isDisabled}
+          aria-checked={dataAttr(isChecked)}
+          data-checked={dataAttr(isChecked)}
+          data-disabled={dataAttr(isDisabled)}
           {...props}
           __css={{
             ...styles.container,