fix: allow custom breakpoint names in ResponsiveObject

chakra-ui · Feb 7, 2021 · 4943a15 · 4943a15
1 parent b5aa923
commit 4943a15
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 1 deletion.
diff --git a/.changeset/big-cherries-wash.md b/.changeset/big-cherries-wash.md
@@ -0,0 +1,6 @@
+---
+"@chakra-ui/styled-system": patch
+---
+
+Fixed an issue where TypeScript did not allow custom breakpoint names in
+ResponsiveObject
diff --git a/packages/styled-system/src/utils/types.ts b/packages/styled-system/src/utils/types.ts
@@ -3,7 +3,7 @@ import { ThemeTypings } from "../theming.types"
 export type ResponsiveArray<T> = Array<T | null>
 
 export type ResponsiveObject<T> = Partial<
-  Record<ThemeTypings["breakpoints"], T>
+  Record<ThemeTypings["breakpoints"] | string, T>
 >
 
 export type ResponsiveValue<T> = T | ResponsiveArray<T> | ResponsiveObject<T>

diff --git a/packages/styled-system/tests/css-type.test.ts b/packages/styled-system/tests/css-type.test.ts
@@ -109,3 +109,14 @@ test("should support deep nesting", () => {
 
   expect(styles).toBeTruthy()
 })
+
+test("should allow arbitrary breakpoint names by default", () => {
+  const styles: SystemStyleObject = {
+    mt: {
+      base: "130px",
+      tablet: "152px",
+    },
+  }
+
+  expect(styles).toBeTruthy()
+})