Merge branch 'main' into main

.changeset/fair-boats-smile.md

@@ -0,0 +1,14 @@
+---
+"@chakra-ui/storybook-addon": minor
+---
+
+Bumps Storybook deps to latest (7.5.3) and updates the tooling
+
+- Toggling state for color mode originally used Storybook's `useAddonState` api
+  hook. However, this hook is not reliable to persistent allow toggling of
+  boolean state. Replaces this hook with React's `useState` as this state is a
+  primitive.
+- Makes use of the `makeDecorator` function to make this addon more like an
+  official Storybook addon.
+- Removes unneeded props from the button components that were originally part of
+  a Type error bug.

.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

.changeset/hungry-camels-dream.md

@@ -0,0 +1,5 @@
+---
+"@chakra-ui/styled-system": patch
+---
+
+Fixed a bug where `hueRotate` and `backdropHueRotate` were not working.

packages/components/anatomy/src/components.ts

@@ -137,7 +137,7 @@ export const switchAnatomy = anatomy("switch").parts(
   "container",
   "track",
   "thumb",
-  "label"
+  "label",
 )
 
 export const tableAnatomy = anatomy("table").parts(

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")

packages/core/styled-system/src/config/filter.ts

@@ -7,7 +7,7 @@ export const filter: Config = {
   blur: t.blur("--chakra-blur"),
   brightness: t.propT("--chakra-brightness", transforms.brightness),
   contrast: t.propT("--chakra-contrast", transforms.contrast),
-  hueRotate: t.degreeT("--chakra-hue-rotate"),
+  hueRotate: t.propT("--chakra-hue-rotate", transforms.hueRotate),
   invert: t.propT("--chakra-invert", transforms.invert),
   saturate: t.propT("--chakra-saturate", transforms.saturate),
   dropShadow: t.propT("--chakra-drop-shadow", transforms.dropShadow),
@@ -18,7 +18,10 @@ export const filter: Config = {
     transforms.brightness,
   ),
   backdropContrast: t.propT("--chakra-backdrop-contrast", transforms.contrast),
-  backdropHueRotate: t.degreeT("--chakra-backdrop-hue-rotate"),
+  backdropHueRotate: t.propT(
+    "--chakra-backdrop-hue-rotate",
+    transforms.hueRotate,
+  ),
   backdropInvert: t.propT("--chakra-backdrop-invert", transforms.invert),
   backdropSaturate: t.propT("--chakra-backdrop-saturate", transforms.saturate),
 }

packages/core/styled-system/src/utils/transform-functions.ts

@@ -67,7 +67,8 @@ export const transformFunctions = {
   contrast: wrap("contrast"),
   dropShadow: wrap("drop-shadow"),
   grayscale: wrap("grayscale"),
-  hueRotate: wrap("hue-rotate"),
+  hueRotate: (value: any) =>
+    wrap("hue-rotate")(transformFunctions.degree(value)),
   invert: wrap("invert"),
   saturate: wrap("saturate"),
   sepia: wrap("sepia"),

packages/core/styled-system/tests/css.test.ts

@@ -677,3 +677,47 @@ test("should resolve !important syntax", () => {
 //     `)
 //   })
 // })
+
+test("returns filter hueRotate css function", () => {
+  const result = css({
+    filter: "auto",
+    hueRotate: "90",
+  })(theme)
+
+  expect(result).toMatchInlineSnapshot(`
+    {
+      "--chakra-blur": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-brightness": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-contrast": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-drop-shadow": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-grayscale": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-hue-rotate": "hue-rotate(90deg)",
+      "--chakra-invert": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-saturate": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-sepia": "var(--chakra-empty,/*!*/ /*!*/)",
+      "filter": "var(--chakra-blur) var(--chakra-brightness) var(--chakra-contrast) var(--chakra-grayscale) var(--chakra-hue-rotate) var(--chakra-invert) var(--chakra-saturate) var(--chakra-sepia) var(--chakra-drop-shadow)",
+    }
+  `)
+})
+
+test("returns backdropFilter backdropHueRotate css function", () => {
+  const result = css({
+    backdropFilter: "auto",
+    backdropHueRotate: "90",
+  })(theme)
+
+  expect(result).toMatchInlineSnapshot(`
+    {
+      "--chakra-backdrop-blur": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-backdrop-brightness": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-backdrop-contrast": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-backdrop-grayscale": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-backdrop-hue-rotate": "hue-rotate(90deg)",
+      "--chakra-backdrop-invert": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-backdrop-opacity": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-backdrop-saturate": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-backdrop-sepia": "var(--chakra-empty,/*!*/ /*!*/)",
+      "backdropFilter": "var(--chakra-backdrop-blur) var(--chakra-backdrop-brightness) var(--chakra-backdrop-contrast) var(--chakra-backdrop-grayscale) var(--chakra-backdrop-hue-rotate) var(--chakra-backdrop-invert) var(--chakra-backdrop-opacity) var(--chakra-backdrop-saturate) var(--chakra-backdrop-sepia)",
+    }
+  `)
+})