[V6] 1440px breakpoint (#2632)

* ✨ La til nytt brekkpunkt 1440px

* 🎉 Bleed støtter 2xl breakpoint

* 🎉 Bleed box 2xl breakpoint

* 🎉 hgrid 2xl breakpoint

* 🎉 resterende primitives støtter 1440px

* 📝 tailwind migreringsdocs

* 🔥 Fjernet navno-mal fra chromatic snapshot

* 📝 Changeset

* 🐛 2xl hgrid css brakk

* 📝 Oppdatert changset med tailwind-ref

* Update @navikt/core/react/src/layout/bleed/Bleed.tsx

* Update @navikt/core/react/src/layout/bleed/Bleed.tsx

* 📝 Mer konsekvent story for breakpoints i box

* 🐛 JSDOC for Bleed matcher nå syntax

.changeset/large-shrimps-brush.md

@@ -0,0 +1,8 @@
+---
+"@navikt/ds-tokens": major
+"@navikt/ds-react": major
+"@navikt/ds-css": major
+"@navikt/ds-tailwind": major
+---
+
+Tokens: La til nytt brekkpunkt `2xl` for `1440px`. Alle primitives er oppdatert for å reflektere oppdateringen. Brukere av Tailwind vil måtte sjekke at overskriving av `screen: "2xl"` ikke brekker app.

@navikt/core/css/primitives/bleed.css

@@ -4,11 +4,13 @@
   --__ac-bleed-margin-inline-md: var(--__ac-bleed-margin-inline-sm);
   --__ac-bleed-margin-inline-lg: var(--__ac-bleed-margin-inline-md);
   --__ac-bleed-margin-inline-xl: var(--__ac-bleed-margin-inline-lg);
+  --__ac-bleed-margin-inline-2xl: var(--__ac-bleed-margin-inline-xl);
   --__ac-bleed-margin-block-xs: initial;
   --__ac-bleed-margin-block-sm: var(--__ac-bleed-margin-block-xs);
   --__ac-bleed-margin-block-md: var(--__ac-bleed-margin-block-sm);
   --__ac-bleed-margin-block-lg: var(--__ac-bleed-margin-block-md);
   --__ac-bleed-margin-block-xl: var(--__ac-bleed-margin-block-lg);
+  --__ac-bleed-margin-block-2xl: var(--__ac-bleed-margin-block-xl);
 
   /** defaults */
   --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-xs);
@@ -24,11 +26,13 @@
   --__ac-bleed-padding-inline-md: var(--__ac-bleed-padding-inline-sm);
   --__ac-bleed-padding-inline-lg: var(--__ac-bleed-padding-inline-md);
   --__ac-bleed-padding-inline-xl: var(--__ac-bleed-padding-inline-lg);
+  --__ac-bleed-padding-inline-2xl: var(--__ac-bleed-padding-inline-xl);
   --__ac-bleed-padding-block-xs: initial;
   --__ac-bleed-padding-block-sm: var(--__ac-bleed-padding-block-xs);
   --__ac-bleed-padding-block-md: var(--__ac-bleed-padding-block-sm);
   --__ac-bleed-padding-block-lg: var(--__ac-bleed-padding-block-md);
   --__ac-bleed-padding-block-xl: var(--__ac-bleed-padding-block-lg);
+  --__ac-bleed-padding-block-2xl: var(--__ac-bleed-padding-block-xl);
 
   /** defaults */
   --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-xs);
@@ -85,3 +89,15 @@
     --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-xl);
   }
 }
+
+@media (min-width: 1440px) {
+  .navds-bleed {
+    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-2xl);
+    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-2xl);
+  }
+
+  .navds-bleed--padding {
+    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-2xl);
+    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-2xl);
+  }
+}

@navikt/core/css/primitives/box.css

@@ -4,16 +4,19 @@
   --__ac-box-padding-md: var(--__ac-box-padding-sm);
   --__ac-box-padding-lg: var(--__ac-box-padding-md);
   --__ac-box-padding-xl: var(--__ac-box-padding-lg);
+  --__ac-box-padding-2xl: var(--__ac-box-padding-xl);
   --__ac-box-padding-inline-xs: initial;
   --__ac-box-padding-inline-sm: var(--__ac-box-padding-inline-xs);
   --__ac-box-padding-inline-md: var(--__ac-box-padding-inline-sm);
   --__ac-box-padding-inline-lg: var(--__ac-box-padding-inline-md);
   --__ac-box-padding-inline-xl: var(--__ac-box-padding-inline-lg);
+  --__ac-box-padding-inline-2xl: var(--__ac-box-padding-inline-xl);
   --__ac-box-padding-block-xs: initial;
   --__ac-box-padding-block-sm: var(--__ac-box-padding-block-xs);
   --__ac-box-padding-block-md: var(--__ac-box-padding-block-sm);
   --__ac-box-padding-block-lg: var(--__ac-box-padding-block-md);
   --__ac-box-padding-block-xl: var(--__ac-box-padding-block-lg);
+  --__ac-box-padding-block-2xl: var(--__ac-box-padding-block-xl);
   --__ac-box-padding: var(--__ac-box-padding-xs);
   --__ac-box-padding-inline: var(--__ac-box-padding-inline-xs);
   --__ac-box-padding-block: var(--__ac-box-padding-block-xs);
@@ -26,6 +29,7 @@
   --__ac-box-border-radius-md: var(--__ac-box-border-radius-sm);
   --__ac-box-border-radius-lg: var(--__ac-box-border-radius-md);
   --__ac-box-border-radius-xl: var(--__ac-box-border-radius-lg);
+  --__ac-box-border-radius-2xl: var(--__ac-box-border-radius-xl);
   --__ac-box-border-radius: var(--__ac-box-border-radius-xs);
 
   padding-inline: var(--__ac-box-padding-inline, var(--__ac-box-padding));
@@ -73,3 +77,12 @@
     --__ac-box-border-radius: var(--__ac-box-border-radius-xl);
   }
 }
+
+@media (min-width: 1440px) {
+  .navds-box {
+    --__ac-box-padding: var(--__ac-box-padding-2xl);
+    --__ac-box-padding-inline: var(--__ac-box-padding-inline-2xl);
+    --__ac-box-padding-block: var(--__ac-box-padding-block-2xl);
+    --__ac-box-border-radius: var(--__ac-box-border-radius-2xl);
+  }
+}

@navikt/core/css/primitives/hgrid.css

@@ -4,12 +4,14 @@
   --__ac-hgrid-columns-md: initial;
   --__ac-hgrid-columns-lg: initial;
   --__ac-hgrid-columns-xl: initial;
+  --__ac-hgrid-columns-2xl: initial;
   --__ac-hgrid-columns: var(--__ac-hgrid-columns-xs);
   --__ac-hgrid-gap-xs: initial;
   --__ac-hgrid-gap-sm: initial;
   --__ac-hgrid-gap-md: initial;
   --__ac-hgrid-gap-lg: initial;
   --__ac-hgrid-gap-xl: initial;
+  --__ac-hgrid-gap-2xl: initial;
   --__ac-hgrid-gap: var(--__ac-hgrid-gap-xs);
   --__ac-hgrid-align: initial;
 
@@ -55,3 +57,22 @@
     );
   }
 }
+
+@media (min-width: 1440px) {
+  .navds-hgrid {
+    --__ac-hgrid-columns: var(
+      --__ac-hgrid-columns-2xl,
+      var(
+        --__ac-hgrid-columns-xl,
+        var(--__ac-hgrid-columns-lg, var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs))))
+      )
+    );
+    --__ac-hgrid-gap: var(
+      --__ac-hgrid-gap-2xl,
+      var(
+        --__ac-hgrid-gap-xl,
+        var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))))
+      )
+    );
+  }
+}

@navikt/core/css/primitives/responsive.css

@@ -45,3 +45,15 @@
     display: none !important;
   }
 }
+
+@media (min-width: 1440px) {
+  .navds-responsive__below--2xl {
+    display: none !important;
+  }
+}
+
+@media (max-width: 1439px) {
+  .navds-responsive__above--2xl {
+    display: none !important;
+  }
+}

@navikt/core/css/primitives/stack.css

@@ -5,24 +5,28 @@
   --__ac-stack-gap-md: var(--__ac-stack-gap-sm);
   --__ac-stack-gap-lg: var(--__ac-stack-gap-md);
   --__ac-stack-gap-xl: var(--__ac-stack-gap-lg);
+  --__ac-stack-gap-2xl: var(--__ac-stack-gap-xl);
   --__ac-stack-gap: var(--__ac-stack-gap-xs);
   --__ac-stack-justify-xs: initial;
   --__ac-stack-justify-sm: var(--__ac-stack-justify-xs);
   --__ac-stack-justify-md: var(--__ac-stack-justify-sm);
   --__ac-stack-justify-lg: var(--__ac-stack-justify-md);
   --__ac-stack-justify-xl: var(--__ac-stack-justify-lg);
+  --__ac-stack-justify-2xl: var(--__ac-stack-justify-xl);
   --__ac-stack-justify: var(--__ac-stack-justify-xs);
   --__ac-stack-align-xs: initial;
   --__ac-stack-align-sm: var(--__ac-stack-align-xs);
   --__ac-stack-align-md: var(--__ac-stack-align-sm);
   --__ac-stack-align-lg: var(--__ac-stack-align-md);
   --__ac-stack-align-xl: var(--__ac-stack-align-lg);
+  --__ac-stack-align-2xl: var(--__ac-stack-align-xl);
   --__ac-stack-align: var(--__ac-stack-align-xs);
   --__ac-stack-direction-xs: initial;
   --__ac-stack-direction-sm: var(--__ac-stack-direction-xs);
   --__ac-stack-direction-md: var(--__ac-stack-direction-sm);
   --__ac-stack-direction-lg: var(--__ac-stack-direction-md);
   --__ac-stack-direction-xl: var(--__ac-stack-direction-lg);
+  --__ac-stack-direction-2xl: var(--__ac-stack-direction-xl);
   --__ac-stack-direction: var(--__ac-stack-direction-xs);
 
   gap: var(--__ac-stack-gap);
@@ -78,3 +82,12 @@
     --__ac-stack-direction: var(--__ac-stack-direction-xl);
   }
 }
+
+@media (min-width: 1440px) {
+  .navds-stack {
+    --__ac-stack-gap: var(--__ac-stack-gap-2xl);
+    --__ac-stack-align: var(--__ac-stack-align-2xl);
+    --__ac-stack-justify: var(--__ac-stack-justify-2xl);
+    --__ac-stack-direction: var(--__ac-stack-direction-2xl);
+  }
+}

@navikt/core/react/src/layout/bleed/Bleed.tsx

@@ -13,7 +13,7 @@ export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
    * @example
    * marginInline='4'
    * marginInline='4 5'
-   * marginInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}}
+   * marginInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6', "2xl": '12'}}
    */
   marginInline?: ResponsiveProp<
     BleedSpacingInline | `${BleedSpacingInline} ${BleedSpacingInline}`
@@ -23,7 +23,7 @@ export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
    * @example
    * marginBlock='4'
    * marginBlock='4 5'
-   * marginBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   * marginBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6', "2xl": '12'}}
    */
   marginBlock?: ResponsiveProp<
     BleedSpacingBlock | `${BleedSpacingBlock} ${BleedSpacingBlock}`

@navikt/core/react/src/layout/box/Box.stories.tsx

@@ -196,7 +196,7 @@ export const PaddingBreakpoints = {
   render: () => (
     <div>
       <Box
-        padding={{ xs: "2", sm: "3", md: "4", lg: "5", xl: "6" }}
+        padding={{ xs: "2", sm: "3", md: "4", lg: "5", xl: "6", "2xl": "8" }}
         background="surface-neutral"
       >
         <Box background="surface-alt-3-subtle">

@navikt/core/react/src/layout/sidemal-test/navno-sidemal.stories.tsx

@@ -13,6 +13,7 @@ const meta = {
   title: "kitchen sink/navno-sidemal",
   parameters: {
     layout: "fullscreen",
+    chromatic: { disableSnapshot: true },
   },
 } satisfies Meta;
 

@navikt/core/react/src/layout/utilities/types.ts

@@ -14,7 +14,7 @@ export type BorderRadiiToken =
   | "0";
 export type ShadowToken = keyof typeof shadows.a.shadow;
 
-export type BreakpointsAlias = "xs" | "sm" | "md" | "lg" | "xl";
+export type BreakpointsAlias = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 
 export type SpacingScale = keyof (typeof Spacing)["a"]["spacing"];
 

@navikt/core/tokens/docs.json

@@ -40,6 +40,16 @@
       "name": "--a-breakpoint-xl-down",
       "value": "1279px",
       "description": "@media (max-width: 1279px)"
+    },
+    {
+      "name": "--a-breakpoint-2xl",
+      "value": "1440px",
+      "description": "@media (min-width: 1440px)"
+    },
+    {
+      "name": "--a-breakpoint-2xl-down",
+      "value": "1439px",
+      "description": "@media (max-width: 1439px)"
     }
   ],
   "text-width": [{ "name": "--a-text-width-max", "value": "576px" }],

@navikt/core/tokens/src/index.js

@@ -13,6 +13,8 @@ module.exports = {
       "lg-down": { value: "1023px" },
       xl: { value: "1280px" },
       "xl-down": { value: "1279px" },
+      "2xl": { value: "1440px" },
+      "2xl-down": { value: "1439px" },
     },
     text: {
       width: {

v6-migration.md

@@ -75,3 +75,19 @@ Alle klasser med `.navds-content-container`-prefix er fjernet
   </Page.Block>
 </Page>
 ```
+
+## Tokens
+
+Nytt brekkpunkt for 1440px `--a-breakpoint-2xl`. Alle primitives støtter også nå 2xl-brekkpunkt for responsive props.
+
+For brukere av vår tailwind-config vil dette også si at `screen` er oppdatert. Dette vil overskrive default tailwind-config som er `1536px`, og de tilfellene der man manuelt har overskrevet f.eks `max-w-screen-2xl` til å være noe annet.
+
+```
+"screen": {
+  "sm": "480px",
+  "md": "768px",
+  "lg": "1024px",
+  "xl": "1280px",
+  "2xl": "1440px"
+},
+```