break: re-define Media Query Breakpoints and layout width

Read the docs about migration: https://eufemia.dnb.no/uilib/about-the-lib/releases/eufemia/v10-info BREAKING CHANGE
dnbexperience · Jan 11, 2023 · 9201bff · 9201bff
1 parent b50062f
commit 9201bff
Show file tree

Hide file tree

Showing 17 changed files with 130 additions and 102 deletions.
diff --git a/...-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md b/...-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md
@@ -27,6 +27,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. Here is [an example](/uilib/components/step-indicator/#stepindicator-with-a-router).
 
+### 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`.

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/usage/layout/media-queries.md b/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  |
+| 960   | `medium` | **60em** | `--layout-medium` | 6 columns  |
+| 1152  | `large`  | **72em** | `--layout-large`  | 12 columns |
 
-<!-- | 1440  | `xxx-large` | **90em** | `--layout-xxx-large` |             | -->
+<!-- (not documented yet) | 1280  | `x-large`  | **80em** | `--layout-x-large`  | 12 columns | -->
+<!-- (not documented yet) | 1440  | `xx-large` | **90em** | `--layout-xx-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).

diff --git a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/Breadcrumb.test.tsx b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/Breadcrumb.test.tsx
@@ -159,7 +159,7 @@ describe('Breadcrumb', () => {
   })
 
   it('variant collapse opens the collapsed content on click', () => {
-    matchMedia.useMediaQuery('(max-width: 50em)')
+    matchMedia.useMediaQuery('(max-width: 60em)')
 
     render(
       <Breadcrumb

diff --git a/...es/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap b/...es/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
@@ -3520,7 +3520,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 {

diff --git a/packages/dnb-eufemia/src/components/date-picker/style/_date-picker.scss b/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;
     }
   }

diff --git a/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap b/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap
@@ -2161,10 +2161,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) {
@@ -2219,7 +2219,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; } }
@@ -2239,10 +2239,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) {
@@ -2267,10 +2267,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) {
@@ -2357,7 +2357,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)); } }
@@ -2368,7 +2368,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 {
@@ -2399,7 +2399,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; } }

diff --git a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
@@ -2177,10 +2177,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) {
@@ -2235,7 +2235,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; } }
@@ -2255,10 +2255,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) {
@@ -2283,10 +2283,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) {
@@ -2373,7 +2373,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)); } }
@@ -2384,7 +2384,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 {
@@ -2415,7 +2415,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; } }

diff --git a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap
@@ -2148,10 +2148,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) {
@@ -2206,7 +2206,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; } }
@@ -2226,10 +2226,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) {
@@ -2254,10 +2254,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) {
@@ -2344,7 +2344,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)); } }
@@ -2355,7 +2355,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 {
@@ -2386,7 +2386,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; } }

diff --git a/packages/dnb-eufemia/src/components/step-indicator/__tests__/StepIndicator.test.js b/packages/dnb-eufemia/src/components/step-indicator/__tests__/StepIndicator.test.js
@@ -18,12 +18,12 @@ import MatchMediaMock from 'jest-matchmedia-mock'
 const matchMedia = new MatchMediaMock()
 
 beforeEach(() => {
-  matchMedia.useMediaQuery('(min-width: 50em)')
+  matchMedia.useMediaQuery('(min-width: 60em)')
   document.body.innerHTML = `<div id="root"></div>`
 })
 
 function simulateSmallScreen() {
-  matchMedia.useMediaQuery('(min-width: 0) and (max-width: 50em)')
+  matchMedia.useMediaQuery('(min-width: 0) and (max-width: 60em)')
 }
 
 const stepIndicatorListData = [

diff --git a/packages/dnb-eufemia/src/shared/MediaQueryUtils.ts b/packages/dnb-eufemia/src/shared/MediaQueryUtils.ts
@@ -13,10 +13,10 @@ export type MediaQueryBreakpoints = Partial<
 
 export const defaultBreakpoints: MediaQueryBreakpoints = {
   small: '40em',
-  medium: '50em',
-  large: '60em',
-  'x-large': '72em',
-  'xx-large': '80em',
+  medium: '60em',
+  large: '72em',
+  'x-large': '80em',
+  'xx-large': '90em',
 }
 
 export type MediaQueryCondition =