re-define Media Query Breakpoints and layout width (#1373)

* Use allBelow and allAbove * Correct some parts before merge * docs: align examples to not use x-large BREAKING CHANGE: re-define Media Query Breakpoints and layout width
dnbexperience · May 31, 2023 · a3f9b7f · a3f9b7f
1 parent fa8e710
commit a3f9b7f
Show file tree

Hide file tree

Showing 22 changed files with 127 additions and 104 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
@@ -30,6 +30,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`
+
+**NB:** 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. Ensure all table sub elements have a CSS Class:

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
 
@@ -141,12 +140,12 @@ You have plenty of possibilities to mix and match:
   matches small and medium screens and during SSR
 </MediaQuery>
 
-<MediaQuery when={[{ min: 'small', max: 'x-large' }, { print: true }]}>
-  matches all between small and x-large screens or all print media
+<MediaQuery when={[{ min: 'small', max: 'large' }, { print: true }]}>
+  matches all between small and large screens or all print media
 </MediaQuery>
 
-<MediaQuery when={{ max: '80em' }}>
-  matches screens to a max of 80em
+<MediaQuery when={{ max: '60em' }}>
+  matches screens to a max of 60em
 </MediaQuery>
 
 <MediaQuery query="(min-width: 40em) and (max-width: 72em)">
@@ -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,19 +230,13 @@ You can re-use the SASS mixins from Eufemia:
 
 ```css
 @media screen and (max-width: 40em) {
-  /* small (mobile) */
-}
-@media screen and (max-width: 50em) {
-  /* medium */
+  /* small */
 }
 @media screen and (max-width: 60em) {
-  /* large (default) */
-}
-@media screen and (min-width: 60em) and (max-width: 72em) {
-  /* x-large */
+  /* medium */
 }
-@media screen and (min-width: 70em) and (max-width: 80em) {
-  /* xx-large */
+@media screen and (max-width: 72em) {
+  /* large */
 }
 ```
 
@@ -249,7 +252,7 @@ import MatchMediaMock from 'jest-matchmedia-mock'
 const matchMedia = new MatchMediaMock()
 
 it('your test', () => {
-  matchMedia.useMediaQuery('(min-width: 50em) and (max-width: 60em)')
+  matchMedia.useMediaQuery('(min-width: 40em) and (max-width: 60em)')
   ...
 })
 ```
diff --git a/packages/dnb-design-system-portal/src/shared/menu/SearchBar.module.scss b/packages/dnb-design-system-portal/src/shared/menu/SearchBar.module.scss
@@ -1,15 +1,17 @@
+@import '@dnb/eufemia/src/style/core/utilities.scss';
+
 .autocompleteStyle {
   :global {
     margin-right: 1rem;
-    @media (max-width: 40em) {
+    @include allBelow(small) {
       margin-right: 0.5rem;
     }
 
     .dnb-autocomplete__shell {
       &,
       input {
         width: 40vw;
-        @media (max-width: 40em) {
+        @include allBelow(small) {
           width: 50vw;
         }
       }

diff --git a/packages/dnb-eufemia/src/components/accordion/style/dnb-accordion.scss b/packages/dnb-eufemia/src/components/accordion/style/dnb-accordion.scss
@@ -147,7 +147,7 @@
     position: static;
     max-width: 60rem;
 
-    @media screen and (min-width: 40em) {
+    @include allAbove(small) {
       &__header {
         width: 40%; // 40% / 60%
       }
@@ -173,7 +173,7 @@
     // }
   }
   &-group--single-container & > &__header &__header__icon {
-    @media screen and (min-width: 40em) {
+    @include allAbove(small) {
       transform: rotate(-90deg);
     }
   }
@@ -183,7 +183,7 @@
       &__children {
         max-width: 60rem;
 
-        @media screen and (min-width: 40em) {
+        @include allAbove(small) {
           position: relative;
           display: flex;
           flex-direction: column;

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
@@ -3115,7 +3115,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/dnb-date-picker.scss b/packages/dnb-eufemia/src/components/date-picker/style/dnb-date-picker.scss
@@ -217,17 +217,13 @@
     margin-left: 0;
   }
 
-  // &--separator {
-  //   margin: 0 -0.2rem;
-  // }
-
   &__views {
     display: flex;
     user-select: none;
     -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) {
+    // Wrap already on "medium", because "small" is too narrow in range mode
+    @include allBelow(medium) {
       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
@@ -1992,7 +1992,7 @@ html[data-dnb-modal-active] {
   .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)); } }
@@ -2003,7 +2003,7 @@ html[data-dnb-modal-active] {
   .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 {
@@ -2034,7 +2034,7 @@ html[data-dnb-modal-active] {
     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
@@ -2012,10 +2012,10 @@ html[data-dnb-modal-active] {
     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) {
@@ -2070,7 +2070,7 @@ html[data-dnb-modal-active] {
   .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; } }
@@ -2090,10 +2090,10 @@ html[data-dnb-modal-active] {
     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) {
@@ -2118,10 +2118,10 @@ html[data-dnb-modal-active] {
     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) {

diff --git a/packages/dnb-eufemia/src/components/dropdown/style/dnb-dropdown.scss b/packages/dnb-eufemia/src/components/dropdown/style/dnb-dropdown.scss
@@ -145,7 +145,7 @@
       border-radius: 50%;
     }
   }
-  @media screen and (min-width: 40em) {
+  @include allAbove(small) {
     &--action-menu &__shell &__text {
       padding: 0 0.5rem;
     }

diff --git a/packages/dnb-eufemia/src/components/form-row/style/dnb-form-row.scss b/packages/dnb-eufemia/src/components/form-row/style/dnb-form-row.scss
@@ -64,7 +64,7 @@
         grid-row: row2-start / row2-end;
 
         // if not mobile
-        @media screen and (min-width: 40em) {
+        @include allAbove(small) {
           &--default {
             margin-top: -1.5rem;
           }
@@ -105,7 +105,7 @@
 
         margin-right: 1rem;
 
-        @media screen and (min-width: 40em) {
+        @include allAbove(small) {
           text-align: right;
         }
       }
@@ -135,7 +135,7 @@
     }
   }
   &--centered#{&}:not(#{&}--vertical) &__content {
-    @media screen and (min-width: 40em) {
+    @include allAbove(small) {
       align-items: center;
     }
   }

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/components/toggle-button/style/dnb-toggle-button.scss b/packages/dnb-eufemia/src/components/toggle-button/style/dnb-toggle-button.scss
@@ -187,7 +187,7 @@
   }
 
   // default spacing for a single toggle button
-  @media screen and (min-width: 40em) {
+  @include allAbove(small) {
     .dnb-form-label + & {
       transform: translateY(-0.5rem);
     }

diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/style/dnb-drawer-list.scss b/packages/dnb-eufemia/src/fragments/drawer-list/style/dnb-drawer-list.scss
@@ -404,7 +404,7 @@
       align-items: center;
     }
   }
-  @media screen and (min-width: 40em) {
+  @include allAbove(small) {
     &--action-menu#{&}--is-popup#{&}--left &__list {
       left: 0;
     }

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 =