Merge pull request #1219 from gsoft-inc/feature/1218

changed XL size
gsoft-inc · May 24, 2023 · dff8ec1 · dff8ec1
2 parents 93604d6 + 5974212
commit dff8ec1
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 7 deletions.
diff --git a/.changeset/strange-crabs-dance.md b/.changeset/strange-crabs-dance.md
@@ -0,0 +1,5 @@
+---
+"@orbit-ui/components": major
+---
+
+Modified the XL responsive viewport value
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -95,9 +95,9 @@ export const parameters = {
                 }
             },
             xl: {
-                name: "xl (1536px)",
+                name: "xl (1440px)",
                 styles: {
-                    width: "1536px",
+                    width: "1440px",
                     height: "100%"
                 }
             }

diff --git a/.storybook/utils/paramsBuilder.js b/.storybook/utils/paramsBuilder.js
@@ -69,7 +69,7 @@ class ParamsBuilder {
     }
 
     withBreakpoints() {
-        this._viewports = [640, 768, 1024, 1280, 1536];
+        this._viewports = [640, 768, 1024, 1280, 1440];
 
         return this;
     }

diff --git a/docs/features/ResponsiveStyles.stories.mdx b/docs/features/ResponsiveStyles.stories.mdx
@@ -55,7 +55,7 @@ The following responsive breakpoints are supported by Orbit [style props](?path=
         ["sm", "min-width: 768px"],
         ["md", "min-width: 1024px"],
         ["lg", "min-width: 1280px"],
-        ["xl", "min-width: 1536px"]
+        ["xl", "min-width: 1440px"]
     ]}
     style={{
         marginTop: "24px",

diff --git a/packages/components/src/layout/tests/chromatic/Grid.stories.tsx b/packages/components/src/layout/tests/chromatic/Grid.stories.tsx
@@ -2,7 +2,7 @@ import { Div } from "@components/html";
 import { Grid, Inline, Stack, fitContent, minmax, repeat } from "@components/layout";
 import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
 
-const viewports = [640, 768, 1024, 1280, 1536];
+const viewports = [640, 768, 1024, 1280, 1440];
 
 export default {
     title: "Chromatic/Grid",

diff --git a/packages/components/src/styling/src/BreakpointProvider.tsx b/packages/components/src/styling/src/BreakpointProvider.tsx
@@ -9,7 +9,7 @@ export const Breakpoints = {
     sm: "(min-width: 768px)",
     md: "(min-width: 1024px)",
     lg: "(min-width: 1280px)",
-    xl: "(min-width: 1536px)"
+    xl: "(min-width: 1440px)"
 };
 /* eslint-enable sort-keys-fix/sort-keys-fix */
 

diff --git a/packages/components/src/styling/tests/chromatic/useStyledSystem.stories.tsx b/packages/components/src/styling/tests/chromatic/useStyledSystem.stories.tsx
@@ -1,7 +1,7 @@
 import { Box } from "@components/box";
 import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
 
-const viewports = [640, 768, 1024, 1280, 1536];
+const viewports = [640, 768, 1024, 1280, 1440];
 
 // eslint-disable-next-line storybook/csf-component
 export default {