fix(*): add data-disabled to Field.HelperText (#3304)

chakra-ui · Feb 16, 2025 · 4731b7c · 4731b7c
1 parent 1af970e
commit 4731b7c
Show file tree

Hide file tree

Showing 15 changed files with 67 additions and 1 deletion.
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -6,6 +6,10 @@ description: All notable changes will be documented in this file.
 
 ## [Unreleased]
 
+### Fixed
+
+- **Field**: Resolved an issue where the `data-disabled` attribute wasn't set on the field helper text when the field is disabled.
+
 ## [4.9.1] - 2025-01-23
 
 ### Fixed

diff --git a/packages/react/src/components/field/examples/disabled.tsx b/packages/react/src/components/field/examples/disabled.tsx
@@ -0,0 +1,12 @@
+import { Field } from '@ark-ui/react/field'
+
+export const Disabled = () => {
+  return (
+    <Field.Root disabled>
+      <Field.Label>Label</Field.Label>
+      <Field.Input />
+      <Field.HelperText>Some additional Info</Field.HelperText>
+      <Field.ErrorText>Error Info</Field.ErrorText>
+    </Field.Root>
+  )
+}
diff --git a/packages/react/src/components/field/field.stories.tsx b/packages/react/src/components/field/field.stories.tsx
@@ -10,3 +10,4 @@ export { Input } from './examples/input'
 export { RequiredIndicator } from './examples/required-indicator'
 export { Select } from './examples/select'
 export { Textarea } from './examples/textarea'
+export { Disabled } from './examples/disabled'
diff --git a/packages/react/src/components/field/field.test.tsx b/packages/react/src/components/field/field.test.tsx
@@ -56,6 +56,9 @@ describe('Field / Input', () => {
   it('should set textbox as disabled', async () => {
     render(<ComponentUnderTest disabled />)
     expect(screen.getByRole('textbox', { name: /label/i })).toBeDisabled()
+    expect(document.querySelector('[data-part="root"]')).toHaveAttribute('data-disabled')
+    expect(screen.getByText('Label')).toHaveAttribute('data-disabled')
+    expect(screen.getByText('Some additional Info')).toHaveAttribute('data-disabled')
   })
 
   it('should set textbox as readonly', async () => {

diff --git a/packages/react/src/components/field/use-field.ts b/packages/react/src/components/field/use-field.ts
@@ -164,8 +164,9 @@ export const useField = (props: UseFieldProps) => {
       ({
         id: helperTextId,
         ...parts.helperText.attrs,
+        'data-disabled': dataAttr(disabled),
       }) as HTMLProps<'span'>,
-    [helperTextId],
+    [disabled, helperTextId],
   )
 
   const getErrorTextProps = useMemo(

diff --git a/packages/solid/CHANGELOG.md b/packages/solid/CHANGELOG.md
@@ -6,6 +6,10 @@ description: All notable changes will be documented in this file.
 
 ## [Unreleased]
 
+### Fixed
+
+- **Field**: Resolved an issue where the `data-disabled` attribute wasn't set on the field helper text when the field is disabled.
+
 ## [4.10.1] - 2025-01-23
 
 ### Fixed

diff --git a/packages/solid/src/components/field/examples/disabled.tsx b/packages/solid/src/components/field/examples/disabled.tsx
@@ -0,0 +1,12 @@
+import { Field } from '@ark-ui/solid/field'
+
+export const Disabled = () => {
+  return (
+    <Field.Root disabled>
+      <Field.Label>Label</Field.Label>
+      <Field.Input />
+      <Field.HelperText>Some additional Info</Field.HelperText>
+      <Field.ErrorText>Error Info</Field.ErrorText>
+    </Field.Root>
+  )
+}
diff --git a/packages/solid/src/components/field/field.stories.tsx b/packages/solid/src/components/field/field.stories.tsx
@@ -10,3 +10,4 @@ export { Input } from './examples/input'
 export { RequiredIndicator } from './examples/required-indicator'
 export { Select } from './examples/select'
 export { Textarea } from './examples/textarea'
+export { Disabled } from './examples/disabled'
diff --git a/packages/solid/src/components/field/field.test.tsx b/packages/solid/src/components/field/field.test.tsx
@@ -39,6 +39,9 @@ describe('Field / Input', () => {
   it('should set textbox as disabled', async () => {
     render(() => <ComponentUnderTest disabled />)
     expect(screen.getByRole('textbox', { name: /label/i })).toBeDisabled()
+    expect(document.querySelector('[data-part="root"]')).toHaveAttribute('data-disabled')
+    expect(screen.getByText('Label')).toHaveAttribute('data-disabled')
+    expect(screen.getByText('Some additional Info')).toHaveAttribute('data-disabled')
   })
 
   it('should set textbox as readonly', async () => {

diff --git a/packages/solid/src/components/field/use-field.ts b/packages/solid/src/components/field/use-field.ts
@@ -140,6 +140,7 @@ export const useField = (props: UseFieldProps) => {
   const getHelperTextProps = () => ({
     id: helperTextId,
     ...parts.helperText.attrs,
+    'data-disabled': dataAttr(fieldProps.disabled),
   })
 
   const getErrorTextProps = () => ({

diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md
@@ -6,6 +6,10 @@ description: All notable changes will be documented in this file.
 
 ## [Unreleased]
 
+### Fixed
+
+- **Field**: Resolved an issue where the `data-disabled` attribute wasn't set on the field helper text when the field is disabled.
+
 ## [4.9.1] - 2025-01-23
 
 ### Fixed

diff --git a/packages/vue/src/components/field/examples/disabled.vue b/packages/vue/src/components/field/examples/disabled.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { Field } from '@ark-ui/vue/field'
+</script>
+
+<template>
+  <Field.Root>
+    <Field.Label>Label</Field.Label>
+    <Field.Input />
+    <Field.HelperText>Some additional Info</Field.HelperText>
+    <Field.ErrorText>Error Info</Field.ErrorText>
+  </Field.Root>
+</template>
diff --git a/packages/vue/src/components/field/field.stories.vue b/packages/vue/src/components/field/field.stories.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import Disabled from './examples/disabled.vue'
 import InputControlled from './examples/input-controlled.vue'
 import Input from './examples/input.vue'
 import ReactiveInvalid from './examples/reactive-invalid.vue'
@@ -22,6 +23,9 @@ import Textarea from './examples/textarea.vue'
     <Variant title="Select Controlled">
       <SelectControlled />
     </Variant>
+    <Variant title="Disabled">
+      <Disabled />
+    </Variant>
     <Variant title="Textarea">
       <Textarea />
     </Variant>

diff --git a/packages/vue/src/components/field/tests/field.test.tsx b/packages/vue/src/components/field/tests/field.test.tsx
@@ -26,6 +26,9 @@ describe('Field', () => {
   it('should set textbox as disabled', async () => {
     render(ComponentUnderTest, { props: { disabled: true } })
     expect(screen.getByRole('textbox', { name: /label/i })).toBeDisabled()
+    expect(document.querySelector('[data-part="root"]')).toHaveAttribute('data-disabled')
+    expect(screen.getByText('Label')).toHaveAttribute('data-disabled')
+    expect(screen.getByText('Some additional Info')).toHaveAttribute('data-disabled')
   })
 
   it('should set textbox as readonly', async () => {

diff --git a/packages/vue/src/components/field/use-field.ts b/packages/vue/src/components/field/use-field.ts
@@ -133,6 +133,7 @@ export const useField = (props: UseFieldProps) => {
   const getHelperTextProps = () => ({
     id: helperTextId.value,
     ...parts.helperText.attrs,
+    'data-disabled': dataAttr(props.disabled),
   })
 
   const getErrorTextProps = (): HTMLAttributes => ({