feat: add state style prop support for FormControl (#8102)

* feat(form-control): add state data attributes to FormControl

* chore: add changeset

* test: amend data attribute test to also check FormControl

.changeset/honest-tigers-study.md

@@ -0,0 +1,6 @@
+---
+"@chakra-ui/form-control": minor
+---
+
+Allow theming FormControl through state style props and its children through
+\_group\* style props

packages/components/form-control/src/form-control.tsx

@@ -168,8 +168,12 @@ function useFormControlProvider(props: FormControlContext) {
       ...htmlProps,
       ref: forwardedRef,
       role: "group",
+      "data-focus": dataAttr(isFocused),
+      "data-disabled": dataAttr(isDisabled),
+      "data-invalid": dataAttr(isInvalid),
+      "data-readonly": dataAttr(isReadOnly),
     }),
-    [htmlProps],
+    [htmlProps, isDisabled, isFocused, isInvalid, isReadOnly],
   )
 
   const getRequiredIndicatorProps = useCallback<PropGetter>(

packages/components/form-control/tests/form-control.test.tsx

@@ -217,6 +217,12 @@ test("has the correct data attributes", async () => {
 
   fireEvent.focus(screen.getByLabelText(/Name/))
 
+  const control = screen.getByTestId("control")
+  expect(control).toHaveAttribute("data-focus")
+  expect(control).toHaveAttribute("data-disabled")
+  expect(control).toHaveAttribute("data-invalid")
+  expect(control).toHaveAttribute("data-readonly")
+
   const label = screen.getByTestId("label")
   expect(label).toHaveAttribute("data-focus")
   expect(label).toHaveAttribute("data-invalid")