Merge pull request #505 from carwack/bug/504-responsive-styles-breaking

fix(theme): Responsive styles breaking

Author: codebender828

.changeset/young-eagles-stare.md

@@ -0,0 +1,7 @@
+---
+"@chakra-ui/vue": patch
+"@chakra-ui/theme-vue": patch
+"chakra-ui-docs": patch
+---
+
+fix(theme): Responsive styles breaking

packages/chakra-ui-core/package.json

@@ -36,8 +36,8 @@
     "max-overall-size": "85KB"
   },
   "dependencies": {
-    "@chakra-ui/styled-system": "^1.12.2",
-    "@chakra-ui/theme-vue": "^0.3.2",
+    "@chakra-ui/styled-system": "^1.15.0",
+    "@chakra-ui/theme-vue": "^0.3.2-next.0",
     "@popperjs/core": "^2.4.0",
     "animejs": "^3.1.0",
     "aria-hidden": "^1.1.1",

packages/chakra-ui-core/src/CHeading/tests/__snapshots__/CHeading.test.js.snap

@@ -9,7 +9,7 @@ exports[`should render correctly 1`] = `
   font-family: var(--chakra-fonts-heading);
 }
 
-@media screen and (min-width: 62em) {
+@media screen and (min-width: 48em) {
   .emotion-0 {
     font-size: var(--chakra-fontSizes-4xl);
   }

packages/chakra-ui-theme/src/theme/breakpoints.js

@@ -2,12 +2,13 @@
  * @description These breakpoint styles were adapted from [@chakra-ui](https://chakra-ui.com/)
  */
 
-const _breakpoints = ['30em', '48em', '62em', '80em']
-
-_breakpoints.sm = _breakpoints[0]
-_breakpoints.md = _breakpoints[1]
-_breakpoints.lg = _breakpoints[2]
-_breakpoints.xl = _breakpoints[3]
+const _breakpoints = {
+  sm: '30em',
+  md: '48em',
+  lg: '62em',
+  xl: '80em',
+  '2xl': '96em'
+}
 
 export const createBreakpoints = (
   config = {}

website/pages/responsive-styles.mdx

@@ -17,6 +17,26 @@ you provide array values to add mobile-first responsive styles.
 > We use the `@media(min-width)` media queries to ensure values are
 > mobile-first.
 
+Responsive syntax relies on the breakpoints defined in the theme object. Chakra
+UI provides default breakpoints, here's what it looks like:
+
+```js
+const breakpoints = {
+  sm: '30em', // 480px upwards
+  md: '48em', // 768px upwards
+  lg: '62em', // 992px upwards
+  xl: '80em', // 1280px upwards
+  '2xl': '96em' // 1536px upwards
+}
+```
+
+To make styles responsive, you can use either the array or object syntax.
+
+## The Array syntax
+
+All style props accept arrays as values for mobile-first responsive styles. This
+is the recommended method.
+
 ```vue
 <template>
   <c-box
@@ -76,28 +96,103 @@ It'll generate a CSS that looks like this
 }
 ```
 
-
 ___NOTE___: In the shortcut example `'100%'` is used instead of `1` because in the default Chakra UI Vue theme, `theme.sizes[1] = 0.25rem`. This means that using a prop like `:width="1"` will render a width of 4px and not `'100%'`
 
-The equivalent of this style if you passed it as an object.
+To interpret array responsive values, Chakra UI converts the values defined in `theme.breakpoints`
+and sorts them in ascending order. Afterward, we map the
+values defined in the array to the breakpoints
 
 ```js
-// First, create an alias for breakpoints
-const breakpoints = ["30em", "48em", "62em", "80em"];
-// aliases
-breakpoints.sm = breakpoints[0];
-breakpoints.md = breakpoints[1];
-breakpoints.lg = breakpoints[2];
-breakpoints.xl = breakpoints[3];
+// This is the default breakpoint
+const breakpoints = {
+  sm: '30em',
+  md: '48em',
+  lg: '62em',
+  xl: '80em',
+  '2xl': '96em'
+}
+
+// Internally, we transform to this
+const breakpoints = ['0em', '30em', '48em', '62em', '80em', '96em']
 ```
 
+Here's how to interpret this syntax:
 
-then
+- `300px`: From `0em` upwards
+- `400px`: From `30em` upwards
+- `500px`: From `48em` upwards
 
-```vue
-<c-box :width="{ base: 1, sm: 1 / 2, md: 1 / 4 }" />
+> To skip certain breakpoints, you can pass `null` to any position in the array
+> to avoid generating unnecessary CSS.
+
+## The Object syntax
+
+You can also define responsive values with breakpoint aliases in an object. Any
+undefined alias key will define the base, non-responsive value.
+
+Let's say you have a `CText` that looks like this:
+
+```vue live=false
+<c-text font-size='40px'>This is a text</c-text>
+```
+
+To make the `fontSize` responsive using the object syntax, here's what you need
+to do:
+
+```vue live=false
+<c-text :font-size="{ base: '24px', md: '40px', lg: '56px' }">
+  This is responsive text
+</c-text>
+```
+
+> **Remember, Chakra UI uses the min-width media query for responsive design**.
+> The breakpoints are: `sm = 30em`, `md = 48em`, `lg = 62em`, `xl = 80em`
+
+Here's how to interpret this syntax:
+
+- `base`: From `0em` upwards
+- `md`: From `48em` upwards
+- `lg`: From `62em` upwards
+
+## Customizing Breakpoints
+
+In some scenarios, you might need to define custom breakpoints for your
+application. We recommended using common aliases like `sm`, `md`, `lg`, and
+`xl`.
+
+To define custom breakpoints, pass them as an object containing the aliases.
+
+> Note: Ensure the css unit of your breakpoints are the same. Use all `px` or
+> all `em`, don't mix them.
+
+```js
+// 1. Import the utilities
+import { extendTheme } from '@chakra-ui/vue'
+
+// 2. Update the breakpoints as key-value pairs
+const customBreakpoints = {
+  sm: '320px',
+  md: '768px',
+  lg: '960px',
+  xl: '1200px',
+  '2xl': '1536px'
+}
+
+// 3. Extend the theme
+Vue.use(Chakra, {
+  extendTheme: {
+    breakpoints: customBreakpoints
+    ...
+  }
+}
+
+// 4. Now you can use the custom breakpoints
+<c-box :width={ base: '100%', sm: '50%', md: '25%' } />
 ```
 
+> Note: If you're using **pixels** as breakpoint values make sure to **always**
+> provide a value for the `2xl` breakpoint, which by its default pixels value is
+> **"1536px"**.
 
 ## Demo
 

yarn.lock

@@ -2245,6 +2245,14 @@
     "@chakra-ui/utils" "1.8.2"
     csstype "^3.0.6"
 
+"@chakra-ui/styled-system@^1.15.0":
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/styled-system/-/styled-system-1.15.0.tgz#fe117ace12b452379e4df69f4779395ead55917f"
+  integrity sha512-LnsKeiYkUuJ+NMTwueiX0Mj8CW9XAMJrJxpQm/X3GY5L5PO7Hv6wW725Ovqdy4mhG3IK7S8444FthpsDv/luHw==
+  dependencies:
+    "@chakra-ui/utils" "1.9.1"
+    csstype "^3.0.9"
+
 "@chakra-ui/[email protected]":
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/@chakra-ui/utils/-/utils-1.8.2.tgz#5a9f1f67c5f2232769fe7d009fcf96eebf3c2b4e"
@@ -2255,6 +2263,16 @@
     framesync "5.3.0"
     lodash.mergewith "4.6.2"
 
+"@chakra-ui/[email protected]":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/utils/-/utils-1.9.1.tgz#e34bf74f9f6048da1ec2a5728db4cc80d0158e0e"
+  integrity sha512-Tue8JfpzOqeHd8vSqAnX1l/Y3Gg456+BXFP/TH6mCIeqMAMbrvv25vDskds0wlXRjMYdmpqHxCEzkalFrscGHA==
+  dependencies:
+    "@types/lodash.mergewith" "4.6.6"
+    css-box-model "1.2.1"
+    framesync "5.3.0"
+    lodash.mergewith "4.6.2"
+
 "@changesets/apply-release-plan@^3.0.1":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@changesets/apply-release-plan/-/apply-release-plan-3.0.2.tgz#e8f77518f065181717cc998d60b9dcaeb7387870"
@@ -10545,6 +10563,11 @@ csstype@^3.0.6:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
   integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
 
+csstype@^3.0.9:
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5"
+  integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==
+
 csv-generate@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/csv-generate/-/csv-generate-3.2.4.tgz#440dab9177339ee0676c9e5c16f50e2b3463c019"