Change values of layout breakpoints

Read the docs about migration: https://eufemia.dnb.no/uilib/about-the-lib/releases/eufemia/v10-info

BREAKING CHANGE

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md

@@ -18,6 +18,30 @@ v10 of @dnb/eufemia contains _breaking changes_. As a migration process, you can
 1. Find `use_navigation` and remove it or replace it with `mode="strict"` or `mode="loose"`.
 1. URL support has been removed – so props like `active_url`, `url`, `url_future`, and `url_passed` are not supported anymore. You have to handle it by yourself from inside your application.
 
+### Breakpoints
+
+Some [breakpoints](https://eufemia.dnb.no/uilib/usage/layout/media-queries) sizes have changed:
+
+- **xx-large:** `1280` is now `1440` – and `80em` is now `90em`
+- **x-large:** `1152` is now `1280` – and `72em` is now `80em`
+- **large:** `960` is now `1152` – and `60em` is now `72em`
+- **medium:** `800` is now `960` – and `50em` is now `60em`
+
+1. Find `$layout-x-large` and replace with `$layout-large`
+1. Find `$layout-xx-large` and replace with `$layout-x-large`
+1. Find `--layout-x-large` and replace with `--layout-large`
+1. Find `--layout-xx-large` and replace with `--layout-x-large`
+
+Remember, you import and use the Eufemia breakpoints directly in your code:
+
+```scss
+// breakpoints.scss
+@import '@dnb/eufemia/style/core/utilities';
+$layout-small: map-get($breakpoints, 'small');
+$layout-medium: map-get($breakpoints, 'medium');
+$layout-large: map-get($breakpoints, 'large');
+```
+
 ### Table
 
 1. Find the `sticky_offset` property and replace it with `stickyOffset`.

packages/dnb-design-system-portal/src/docs/uilib/usage/layout/media-queries.md

@@ -17,15 +17,14 @@ In order to make it as declarative and easy to handle media queries from JavaScr
 
 UX designers are using a 12 column system during their design processes.
 
-| Pixel | Type       | Rem      | Custom Property     | Comments    |
-| ----- | ---------- | -------- | ------------------- | ----------- |
-| 640   | `small`    | **40em** | `--layout-small`    | Mobile      |
-| 800   | `medium`   | **50em** | `--layout-medium`   |             |
-| 960   | `large`    | **60em** | `--layout-large`    | DNB default |
-| 1152  | `x-large`  | **72em** | `--layout-x-large`  |             |
-| 1280  | `xx-large` | **80em** | `--layout-xx-large` |             |
+| Pixel          | Type      | Rem      | Custom Property    | Comments                  |
+| -------------- | --------- | -------- | ------------------ | ------------------------- |
+| 640            | `small`   | **40em** | `--layout-small`   | 4 columns, mobile         |
+| 960            | `medium`  | **60em** | `--layout-medium`  | 6 columns, tablets        |
+| 1152           | `large`   | **72em** | `--layout-large`   | 12 columns, desktop       |
+| 1280 / (1440?) | `x-large` | **80em** | `--layout-x-large` | 12 columns, large desktop |
 
-<!-- | 1440  | `xxx-large` | **90em** | `--layout-xxx-large` |             | -->
+<!-- | 1440  | `xx-large` | **90em** | `--layout-xxx-large` |             | -->
 
 ## MediaQuery component and React Hooks
 
@@ -41,7 +40,7 @@ By using `matchMedia` we only render when the requested media query actually cha
 
 ### CSS similarity
 
-It uses the same query API as CSS uses. You are able to provide your query also raw, by using e.g. `query="(min-width: 50em)"`. But your custom queries will quickly grow and mess up your application code unnecessarily.
+It uses the same query API as CSS uses. You are able to provide your query also raw, by using e.g. `query="(min-width: 60em)"`. But your custom queries will quickly grow and mess up your application code unnecessarily.
 
 ### Properties
 
@@ -149,7 +148,7 @@ You have plenty of possibilities to mix and match:
   matches screens to a max of 80em
 </MediaQuery>
 
-<MediaQuery query="(min-width: 40em) and (max-width: 72em)">
+<MediaQuery query="(min-width: 40em) and (max-width: 80em)">
   matches screens between 40em and 72em
 </MediaQuery>
 ```
@@ -206,7 +205,17 @@ import { defaultBreakpoints } from '@dnb/eufemia/shared/MediaQueryUtils'
 You can re-use the SASS mixins from Eufemia:
 
 ```scss
-@import '@dnb/eufemia/style/core/utilities.scss';
+// breakpoints.scss
+@import '@dnb/eufemia/style/core/utilities';
+$layout-small: map-get($breakpoints, 'small');
+$layout-medium: map-get($breakpoints, 'medium');
+$layout-large: map-get($breakpoints, 'large');
+```
+
+or like this:
+
+```scss
+@import '@dnb/eufemia/style/core/utilities';
 
 @include allBelow(large) {
   /* Your CSS */
@@ -221,20 +230,17 @@ You can re-use the SASS mixins from Eufemia:
 
 ```css
 @media screen and (max-width: 40em) {
-  /* small (mobile) */
+  /* small */
 }
-@media screen and (max-width: 50em) {
+@media screen and (max-width: 60em) {
   /* medium */
 }
-@media screen and (max-width: 60em) {
-  /* large (default) */
+@media screen and (max-width: 72em) {
+  /* large */
 }
-@media screen and (min-width: 60em) and (max-width: 72em) {
+@media screen and (min-width: 80em) {
   /* x-large */
 }
-@media screen and (min-width: 70em) and (max-width: 80em) {
-  /* xx-large */
-}
 ```
 
 Based of the findings of [this article](https://zellwk.com/blog/media-query-units/) and [this webkit bug](https://bugs.webkit.org/show_bug.cgi?id=156684) Eufemia recommends to use `em` units for media query usage to meet the best overall browser support. Read [more about units](/uilib/usage/best-practices/for-styling#units).

packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js

@@ -245,7 +245,7 @@ const Navigation = styled.nav`
   -ms-overflow-style: none;
 
   /* make the sidemenu accessible for screen readers on mobile devices  */
-  @media screen and (max-width: 50em) {
+  @media screen and (max-width: 60em) {
     position: relative;
     height: auto;
     overflow: auto;
@@ -266,13 +266,13 @@ const Navigation = styled.nav`
     God for a mobile menu instead
     make sure that Content main "styled.main" gets the same max-width
   */
-  @media screen and (max-width: 50em) {
+  @media screen and (max-width: 60em) {
     &:not(.show-mobile-menu) {
       display: none;
     }
   }
 
-  @media screen and (max-width: 50em) {
+  @media screen and (max-width: 60em) {
     position: relative;
     ul {
       width: 100vw;
@@ -380,7 +380,7 @@ export default class SidebarLayout extends React.PureComponent {
           styles={css`
             :root {
               --level-offset: 3vw;
-              @media screen and (max-width: 50em) {
+              @media screen and (max-width: 60em) {
                 --level-offset: 2rem;
               }
 
@@ -398,7 +398,7 @@ export default class SidebarLayout extends React.PureComponent {
               --level-icon-adjust: -40px;
               --level: 2vw;
 
-              @media screen and (max-width: 50em) {
+              @media screen and (max-width: 60em) {
                 --level: 1.3rem;
               }
             }

packages/dnb-design-system-portal/src/shared/menu/StickyMenuBar.js

@@ -61,7 +61,7 @@ const Header = styled.header`
     God for a mobile menu instead
     make sure that Content main "styled.main" gets the same max-width
    */
-  @media screen and (max-width: 50em) {
+  @media screen and (max-width: 60em) {
     #toggle-sidebar-menu {
       display: flex;
     }

packages/dnb-design-system-portal/src/shared/parts/Layout.js

@@ -147,7 +147,7 @@ const Wrapper = styled.div`
   display: flex;
   justify-content: space-between; /* pos Footer at the bottom */
 
-  @media screen and (max-width: 50em) {
+  @media screen and (max-width: 60em) {
     display: block;
   }
 `
@@ -202,7 +202,7 @@ const ContentWrapper = styled.div`
   border-left: 1px solid var(--color-black-border);
 
   /* make sure that Sidebar aside "styled.aside" gets the same max-width */
-  @media screen and (max-width: 50em) {
+  @media screen and (max-width: 60em) {
     margin-left: 0;
     padding-left: 0;
   }

packages/dnb-eufemia/src/components/breadcrumb/__tests__/Breadcrumb.test.tsx

@@ -135,7 +135,7 @@ describe('Breadcrumb', () => {
   })
 
   it('variant collapse opens the collapsed content on click', () => {
-    matchMedia.useMediaQuery('(max-width: 50em)')
+    matchMedia.useMediaQuery('(max-width: 60em)')
 
     render(
       <Breadcrumb

packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap

@@ -3609,7 +3609,7 @@ legend.dnb-form-label {
     display: flex;
     user-select: none;
     -webkit-user-select: none; }
-    @media screen and (max-width: 50em) {
+    @media screen and (max-width: 60em) {
       .dnb-date-picker__views {
         flex-direction: column; } }
   .dnb-date-picker__calendar {

packages/dnb-eufemia/src/components/date-picker/style/_date-picker.scss

@@ -225,7 +225,7 @@
     -webkit-user-select: none; // Safari / Touch fix
 
     // Wrap aleady on 50em, because 40em is too narrow in range mode
-    @media screen and (max-width: 50em) {
+    @media screen and (max-width: 60em) {
       flex-direction: column;
     }
   }

packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap

@@ -2171,10 +2171,10 @@ button.dnb-button::-moz-focus-inner {
     z-index: 1; }
   .dnb-drawer--spacing .dnb-drawer__content {
     padding: 0 var(--drawer-spacing); }
-    @media screen and (min-width: 72em) {
+    @media screen and (min-width: 80em) {
       .dnb-drawer--spacing .dnb-drawer__content {
         padding: 0 calc(var(--drawer-spacing) * 1.75); } }
-    @media screen and (max-width: 50em) {
+    @media screen and (max-width: 60em) {
       .dnb-drawer--spacing .dnb-drawer__content {
         padding: 0 calc(var(--drawer-spacing) / 1.333333); } }
     @media screen and (max-width: 40em) {
@@ -2229,7 +2229,7 @@ button.dnb-button::-moz-focus-inner {
   .dnb-drawer__root {
     align-items: flex-start;
     justify-content: flex-start; }
-  @media screen and (max-width: 50em) {
+  @media screen and (max-width: 60em) {
     .dnb-drawer__title {
       font-size: var(--font-size-large) !important;
       line-height: var(--line-height-medium) !important; } }
@@ -2249,10 +2249,10 @@ button.dnb-button::-moz-focus-inner {
     height: 600%; }
   .dnb-drawer--spacing .dnb-drawer__header {
     padding: 0 var(--drawer-spacing); }
-    @media screen and (min-width: 72em) {
+    @media screen and (min-width: 80em) {
       .dnb-drawer--spacing .dnb-drawer__header {
         padding: 0 calc(var(--drawer-spacing) * 1.75); } }
-    @media screen and (max-width: 50em) {
+    @media screen and (max-width: 60em) {
       .dnb-drawer--spacing .dnb-drawer__header {
         padding: 0 calc(var(--drawer-spacing) / 1.333333); } }
     @media screen and (max-width: 40em) {
@@ -2276,10 +2276,10 @@ button.dnb-button::-moz-focus-inner {
     z-index: 99;
     margin: var(--drawer-spacing) 0;
     padding: 0 var(--drawer-spacing); }
-    @media screen and (min-width: 72em) {
+    @media screen and (min-width: 80em) {
       .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section {
         padding: 0 calc(var(--drawer-spacing) * 1.75); } }
-    @media screen and (max-width: 50em) {
+    @media screen and (max-width: 60em) {
       .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section {
         padding: 0 calc(var(--drawer-spacing) / 1.333333); } }
     @media screen and (max-width: 40em) {
@@ -2366,7 +2366,7 @@ button.dnb-button::-moz-focus-inner {
   .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner {
     padding-left: calc(var(--dialog-spacing) * 1.75);
     padding-right: calc(var(--dialog-spacing) * 1.75); }
-    @media screen and (max-width: 60em) {
+    @media screen and (max-width: 72em) {
       .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner {
         padding-left: calc(var(--dialog-spacing));
         padding-right: calc(var(--dialog-spacing)); } }
@@ -2377,7 +2377,7 @@ button.dnb-button::-moz-focus-inner {
   .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__navigation.dnb-section {
     margin-top: calc(var(--dialog-spacing));
     margin-bottom: calc(var(--dialog-spacing) / 2); }
-    @media screen and (max-width: 50em) {
+    @media screen and (max-width: 60em) {
       .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__navigation.dnb-section {
         margin-top: calc(var(--dialog-spacing) / 2); } }
   .dnb-dialog--spacing.dnb-dialog--confirmation .dnb-dialog__inner {
@@ -2406,7 +2406,7 @@ button.dnb-button::-moz-focus-inner {
     text-align: right; }
   .dnb-dialog__title ~ .dnb-dialog__content {
     padding-top: calc(var(--dialog-spacing) / 2); }
-  @media screen and (max-width: 50em) {
+  @media screen and (max-width: 60em) {
     .dnb-dialog__title {
       font-size: var(--font-size-large) !important;
       line-height: var(--line-height-medium) !important; } }

packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap

@@ -2187,10 +2187,10 @@ button.dnb-button::-moz-focus-inner {
     z-index: 1; }
   .dnb-drawer--spacing .dnb-drawer__content {
     padding: 0 var(--drawer-spacing); }
-    @media screen and (min-width: 72em) {
+    @media screen and (min-width: 80em) {
       .dnb-drawer--spacing .dnb-drawer__content {
         padding: 0 calc(var(--drawer-spacing) * 1.75); } }
-    @media screen and (max-width: 50em) {
+    @media screen and (max-width: 60em) {
       .dnb-drawer--spacing .dnb-drawer__content {
         padding: 0 calc(var(--drawer-spacing) / 1.333333); } }
     @media screen and (max-width: 40em) {
@@ -2245,7 +2245,7 @@ button.dnb-button::-moz-focus-inner {
   .dnb-drawer__root {
     align-items: flex-start;
     justify-content: flex-start; }
-  @media screen and (max-width: 50em) {
+  @media screen and (max-width: 60em) {
     .dnb-drawer__title {
       font-size: var(--font-size-large) !important;
       line-height: var(--line-height-medium) !important; } }
@@ -2265,10 +2265,10 @@ button.dnb-button::-moz-focus-inner {
     height: 600%; }
   .dnb-drawer--spacing .dnb-drawer__header {
     padding: 0 var(--drawer-spacing); }
-    @media screen and (min-width: 72em) {
+    @media screen and (min-width: 80em) {
       .dnb-drawer--spacing .dnb-drawer__header {
         padding: 0 calc(var(--drawer-spacing) * 1.75); } }
-    @media screen and (max-width: 50em) {
+    @media screen and (max-width: 60em) {
       .dnb-drawer--spacing .dnb-drawer__header {
         padding: 0 calc(var(--drawer-spacing) / 1.333333); } }
     @media screen and (max-width: 40em) {
@@ -2292,10 +2292,10 @@ button.dnb-button::-moz-focus-inner {
     z-index: 99;
     margin: var(--drawer-spacing) 0;
     padding: 0 var(--drawer-spacing); }
-    @media screen and (min-width: 72em) {
+    @media screen and (min-width: 80em) {
       .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section {
         padding: 0 calc(var(--drawer-spacing) * 1.75); } }
-    @media screen and (max-width: 50em) {
+    @media screen and (max-width: 60em) {
       .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section {
         padding: 0 calc(var(--drawer-spacing) / 1.333333); } }
     @media screen and (max-width: 40em) {
@@ -2382,7 +2382,7 @@ button.dnb-button::-moz-focus-inner {
   .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner {
     padding-left: calc(var(--dialog-spacing) * 1.75);
     padding-right: calc(var(--dialog-spacing) * 1.75); }
-    @media screen and (max-width: 60em) {
+    @media screen and (max-width: 72em) {
       .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner {
         padding-left: calc(var(--dialog-spacing));
         padding-right: calc(var(--dialog-spacing)); } }
@@ -2393,7 +2393,7 @@ button.dnb-button::-moz-focus-inner {
   .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__navigation.dnb-section {
     margin-top: calc(var(--dialog-spacing));
     margin-bottom: calc(var(--dialog-spacing) / 2); }
-    @media screen and (max-width: 50em) {
+    @media screen and (max-width: 60em) {
       .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__navigation.dnb-section {
         margin-top: calc(var(--dialog-spacing) / 2); } }
   .dnb-dialog--spacing.dnb-dialog--confirmation .dnb-dialog__inner {
@@ -2422,7 +2422,7 @@ button.dnb-button::-moz-focus-inner {
     text-align: right; }
   .dnb-dialog__title ~ .dnb-dialog__content {
     padding-top: calc(var(--dialog-spacing) / 2); }
-  @media screen and (max-width: 50em) {
+  @media screen and (max-width: 60em) {
     .dnb-dialog__title {
       font-size: var(--font-size-large) !important;
       line-height: var(--line-height-medium) !important; } }