@dnb/eufemia 9.26.0 → 9.28.0

package/components/dialog/DialogContent.js

@@ -17,7 +17,7 @@ import "core-js/modules/web.dom-collections.for-each.js";
 import "core-js/modules/es.object.get-own-property-descriptors.js";
 import React, { useContext } from 'react';
 import classnames from 'classnames';
-import { isTrue, findElementInChildren } from '../../shared/component-helper';
+import { isTrue, findElementInChildren, validateDOMAttributes } from '../../shared/component-helper';
 import ScrollView from '../../fragments/scroll-view/ScrollView';
 import DialogHeader from './parts/DialogHeader';
 import DialogNavigation from './parts/DialogNavigation';
@@ -82,7 +82,7 @@ export default function DialogContent(_ref) {
     alignContent = variant === 'information' ? 'left' : 'centered';
   }
 
-  var innerParams = _objectSpread({
+  var contentParams = _objectSpread({
     className: classnames('dnb-dialog', isTrue(fullscreen) ? "dnb-dialog--fullscreen" : fullscreen === 'auto' && "dnb-dialog--auto-fullscreen", className, _className, !isTrue(preventCoreStyle) && 'dnb-core-style', variant && "dnb-dialog--".concat(variant), isTrue(spacing) && 'dnb-dialog--spacing', alignContent && "dnb-dialog__align--".concat(alignContent), isTrue(context === null || context === void 0 ? void 0 : context.hide) && "dnb-dialog--hide", isTrue(noAnimation) && "dnb-dialog--no-animation", isTrue(noAnimationOnMobile) && "dnb-dialog--no-animation-on-mobile"),
     style: (minWidth || maxWidth) && {
       minWidth: minWidth,
@@ -109,7 +109,10 @@ export default function DialogContent(_ref) {
     confirmText: confirmText,
     hideDecline: hideDecline
   };
-  return React.createElement(ScrollView, innerParams, React.createElement("div", {
+  validateDOMAttributes({}, contentParams);
+  return React.createElement("div", contentParams, React.createElement(ScrollView, {
+    ref: context === null || context === void 0 ? void 0 : context.scrollRef
+  }, React.createElement("div", {
     tabIndex: -1,
     className: "dnb-dialog__inner dnb-no-focus",
     ref: context === null || context === void 0 ? void 0 : context.contentRef
@@ -127,5 +130,5 @@ export default function DialogContent(_ref) {
   }, headerContent), React.createElement("div", {
     id: (context === null || context === void 0 ? void 0 : context.contentId) + '-content',
     className: "dnb-dialog__content"
-  }, description, content), variant === 'confirmation' && !actionExists && React.createElement(DialogAction, dialogActionProps)));
+  }, description, content), variant === 'confirmation' && !actionExists && React.createElement(DialogAction, dialogActionProps))));
 }

package/components/dialog/style/_dialog.scss

@@ -17,7 +17,6 @@
 
 .dnb-dialog {
   position: relative;
-  max-height: 100vh;
   border-radius: 0.5rem;
   @include defaultDropShadow();
 
@@ -26,6 +25,21 @@
   border: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
+  max-height: 100vh;
+  overflow: hidden;
+  .dnb-scroll-view {
+    max-height: 90vh; // make it scrollable
+  }
+
+  &__inner {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+
+    width: 100%;
+    height: 100%;
+  }
+
   &--information {
     min-width: var(--dialog-min-width);
     width: var(--dialog-avg-width);
@@ -34,23 +48,22 @@
 
   &--confirmation {
     max-width: var(--dialog-confirm-max-width);
-    margin: 0 1rem;
+    margin-left: 1rem;
+    margin-right: 1rem;
   }
 
   &--auto-fullscreen {
     @include allBelow(small) {
       @include modalFullscreen();
+      margin: auto 0;
     }
   }
   &--fullscreen {
     @include modalFullscreen();
+    margin: auto 0;
   }
   &--spacing#{&}--information &__content {
     padding-bottom: calc(var(--dialog-spacing) * 2);
-
-    @include IS_SAFARI_MOBILE {
-      padding-bottom: calc(var(--dialog-spacing) * 8);
-    }
   }
 
   &--spacing#{&}--information &__inner {
@@ -79,30 +92,6 @@
 
   &--spacing#{&}--confirmation &__inner {
     padding: calc(var(--dialog-spacing)); // 2rem (32px)
-
-    @include IS_SAFARI_MOBILE {
-      padding-bottom: calc(var(--dialog-spacing) * 8);
-    }
-  }
-
-  &__inner {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-
-    width: 100%;
-    height: 100%;
-    overflow-x: hidden;
-
-    &::after {
-      content: '';
-      position: absolute;
-      z-index: -4;
-      left: 0;
-      top: 0;
-      width: 100vw;
-      height: 100%;
-    }
   }
 
   &__align--centered &__inner {
@@ -251,12 +240,12 @@
     margin-top: 1.5rem;
   }
 
+  // Fix for iOS on iPhone
+  // Because Safari includes the navigation bar on the height
   @include IS_SAFARI_MOBILE() {
-    // iOS on iPhone fix
-    // Because Safari includes the navigation bar on the height
-    @media (max-height: 40em) and (orientation: landscape) {
-      &:not(#{&}--fullscreen) {
-        max-height: 80vh;
+    @media (max-height: 40em) {
+      .dnb-scroll-view {
+        max-height: 82vh;
       }
     }
   }

package/components/dialog/style/dnb-dialog.css

@@ -1086,27 +1086,23 @@ button.dnb-button::-moz-focus-inner {
   from {
     opacity: 0; }
   to {
-    opacity: 0.32;
-    opacity: var(--modal-overlay-opacity); } }
+    opacity: 1; } }
 
 @keyframes show-modal-overlay {
   from {
     opacity: 0; }
   to {
-    opacity: 0.32;
-    opacity: var(--modal-overlay-opacity); } }
+    opacity: 1; } }
 
 @-webkit-keyframes hide-modal-overlay {
   from {
-    opacity: 0.32;
-    opacity: var(--modal-overlay-opacity); }
+    opacity: 1; }
   to {
     opacity: 0; } }
 
 @keyframes hide-modal-overlay {
   from {
-    opacity: 0.32;
-    opacity: var(--modal-overlay-opacity); }
+    opacity: 1; }
   to {
     opacity: 0; } }
 
@@ -1123,6 +1119,7 @@ button.dnb-button::-moz-focus-inner {
   width: 100%;
   height: 100vh;
   max-width: 100%;
+  max-height: 100vh;
   border-radius: 0;
   -webkit-box-shadow: none;
           box-shadow: none;
@@ -1152,6 +1149,7 @@ button.dnb-button::-moz-focus-inner {
       width: 100%;
       height: 100vh;
       max-width: 100%;
+      max-height: 100vh;
       border-radius: 0;
       -webkit-box-shadow: none;
               box-shadow: none; } }
@@ -1165,19 +1163,12 @@ button.dnb-button::-moz-focus-inner {
         -ms-flex-direction: column;
             flex-direction: column;
     z-index: 10;
+    /** Sets the color on scroll overflow (at the bottom) */
     background-color: transparent;
     background-color: var(--modal-background-color, transparent);
     width: 100%;
     height: 100%;
     overflow-x: hidden; }
-    .dnb-drawer__inner::after {
-      content: '';
-      position: absolute;
-      z-index: -4;
-      left: 0;
-      top: 0;
-      width: 100vw;
-      height: 100%; }
   .dnb-drawer--spacing .dnb-drawer__inner {
     padding: 0 2rem 0;
     padding: 0 var(--drawer-spacing) 0; }
@@ -1247,6 +1238,7 @@ button.dnb-button::-moz-focus-inner {
     width: 100%;
     height: 100vh;
     max-width: 100%;
+    max-height: 100vh;
     border-radius: 0;
     -webkit-box-shadow: none;
             box-shadow: none; }
@@ -1464,13 +1456,11 @@ button.dnb-button::-moz-focus-inner {
   from {
     opacity: 0; }
   to {
-    opacity: 0.32;
-    opacity: var(--modal-overlay-opacity); } }
+    opacity: 1; } }
 
 @keyframes hide-modal-overlay {
   from {
-    opacity: 0.32;
-    opacity: var(--modal-overlay-opacity); }
+    opacity: 1; }
   to {
     opacity: 0; } }
 
@@ -1484,7 +1474,6 @@ button.dnb-button::-moz-focus-inner {
 
 .dnb-dialog {
   position: relative;
-  max-height: 100vh;
   border-radius: 0.5rem;
   -webkit-box-shadow: 0 8px 16px rgba(51, 51, 51, 0.08);
           box-shadow: 0 8px 16px rgba(51, 51, 51, 0.08);
@@ -1495,7 +1484,22 @@ button.dnb-button::-moz-focus-inner {
        user-select: text;
   -webkit-user-select: text;
   border: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  max-height: 100vh;
+  overflow: hidden; }
+  .dnb-dialog .dnb-scroll-view {
+    max-height: 90vh; }
+  .dnb-dialog__inner {
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    width: 100%;
+    height: 100%; }
   .dnb-dialog--information {
     min-width: 320px;
     min-width: var(--dialog-min-width);
@@ -1506,33 +1510,32 @@ button.dnb-button::-moz-focus-inner {
   .dnb-dialog--confirmation {
     max-width: 40rem;
     max-width: var(--dialog-confirm-max-width);
-    margin: 0 1rem; }
+    margin-left: 1rem;
+    margin-right: 1rem; }
   @media screen and (max-width: 40em) {
     .dnb-dialog--auto-fullscreen {
       width: 100%;
       height: 100vh;
       max-width: 100%;
+      max-height: 100vh;
       border-radius: 0;
       -webkit-box-shadow: none;
-              box-shadow: none; } }
+              box-shadow: none;
+      margin: auto 0; } }
   .dnb-dialog--fullscreen {
     width: 100%;
     height: 100vh;
     max-width: 100%;
+    max-height: 100vh;
     border-radius: 0;
     -webkit-box-shadow: none;
-            box-shadow: none; }
+            box-shadow: none;
+    margin: auto 0; }
   .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__content {
     padding-bottom: 4rem;
     padding-bottom: calc(2rem * 2);
     padding-bottom: calc(var(--dialog-spacing)*2);
     padding-bottom: calc(var(--dialog-spacing) * 2); }
-    @supports (-webkit-touch-callout: none) {
-      .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__content {
-        padding-bottom: 16rem;
-        padding-bottom: calc(2rem * 8);
-        padding-bottom: calc(var(--dialog-spacing)*8);
-        padding-bottom: calc(var(--dialog-spacing) * 8); } }
   .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner {
     padding-left: 3.5rem;
     padding-left: calc(2rem * 1.75);
@@ -1578,32 +1581,6 @@ button.dnb-button::-moz-focus-inner {
     padding: 2rem;
     padding: calc(2rem);
     padding: calc(var(--dialog-spacing)); }
-    @supports (-webkit-touch-callout: none) {
-      .dnb-dialog--spacing.dnb-dialog--confirmation .dnb-dialog__inner {
-        padding-bottom: 16rem;
-        padding-bottom: calc(2rem * 8);
-        padding-bottom: calc(var(--dialog-spacing)*8);
-        padding-bottom: calc(var(--dialog-spacing) * 8); } }
-  .dnb-dialog__inner {
-    position: relative;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
-    width: 100%;
-    height: 100%;
-    overflow-x: hidden; }
-    .dnb-dialog__inner::after {
-      content: '';
-      position: absolute;
-      z-index: -4;
-      left: 0;
-      top: 0;
-      width: 100vw;
-      height: 100%; }
   .dnb-dialog__align--centered .dnb-dialog__inner {
     -webkit-box-align: center;
         -ms-flex-align: center;
@@ -1736,9 +1713,9 @@ button.dnb-button::-moz-focus-inner {
   .dnb-dialog__icon ~ .dnb-dialog__header {
     margin-top: 1.5rem; }
   @supports (-webkit-touch-callout: none) {
-    @media (max-height: 40em) and (orientation: landscape) {
-      .dnb-dialog:not(.dnb-dialog--fullscreen) {
-        max-height: 80vh; } } }
+    @media (max-height: 40em) {
+      .dnb-dialog .dnb-scroll-view {
+        max-height: 82vh; } } }
 
 [data-visual-test].hide-page-content #___gatsby {
   opacity: 0; }
@@ -1821,21 +1798,17 @@ button.dnb-button::-moz-focus-inner {
   from {
     opacity: 0; }
   to {
-    opacity: 0.32;
-    opacity: var(--modal-overlay-opacity); } }
+    opacity: 1; } }
 
 @keyframes hide-modal-overlay {
   from {
-    opacity: 0.32;
-    opacity: var(--modal-overlay-opacity); }
+    opacity: 1; }
   to {
     opacity: 0; } }
 
 :root {
   --modal-z-index: 3000;
-  --modal-animation-duration: 300ms;
-  --modal-overlay-bg: black;
-  --modal-overlay-opacity: 0.32; }
+  --modal-animation-duration: 300ms; }
 
 html[data-dnb-modal-active] {
   -moz-user-select: none;
@@ -1913,24 +1886,22 @@ html[data-dnb-modal-active] {
     left: 0;
     top: 0;
     width: 100%;
-    height: 100%;
-    background-color: black;
-    background-color: var(--modal-overlay-bg); }
+    height: 100%; }
   .dnb-modal-root__inner .dnb-modal__overlay {
-    -webkit-animation: hide-modal-overlay 300ms ease-in-out forwards;
-            animation: hide-modal-overlay 300ms ease-in-out forwards;
-    -webkit-animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards;
-            animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards; }
+    -webkit-animation: hide-modal-overlay 300ms ease-out forwards;
+            animation: hide-modal-overlay 300ms ease-out forwards;
+    -webkit-animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards;
+            animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; }
   .dnb-modal-root__inner:last-of-type .dnb-modal__overlay {
-    -webkit-animation: show-modal-overlay 300ms ease-out forwards 0ms;
-            animation: show-modal-overlay 300ms ease-out forwards 0ms;
-    -webkit-animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 0ms;
-            animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 0ms; }
+    -webkit-animation: show-modal-overlay 300ms ease-out forwards;
+            animation: show-modal-overlay 300ms ease-out forwards;
+    -webkit-animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards;
+            animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards; }
     .dnb-modal-root__inner:last-of-type .dnb-modal__overlay--hide {
-      -webkit-animation: hide-modal-overlay 300ms ease-in-out forwards;
-              animation: hide-modal-overlay 300ms ease-in-out forwards;
-      -webkit-animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards;
-              animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards; }
+      -webkit-animation: hide-modal-overlay 300ms ease-out forwards;
+              animation: hide-modal-overlay 300ms ease-out forwards;
+      -webkit-animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards;
+              animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; }
   html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
     -webkit-animation-delay: 0ms !important;
             animation-delay: 0ms !important;
@@ -2109,13 +2080,11 @@ html[data-dnb-modal-active] {
   from {
     opacity: 0; }
   to {
-    opacity: 0.32;
-    opacity: var(--modal-overlay-opacity); } }
+    opacity: 1; } }
 
 @keyframes hide-modal-overlay {
   from {
-    opacity: 0.32;
-    opacity: var(--modal-overlay-opacity); }
+    opacity: 1; }
   to {
     opacity: 0; } }
 
@@ -2129,7 +2098,6 @@ html[data-dnb-modal-active] {
 
 .dnb-dialog {
   position: relative;
-  max-height: 100vh;
   border-radius: 0.5rem;
   -webkit-box-shadow: 0 8px 16px rgba(51, 51, 51, 0.08);
           box-shadow: 0 8px 16px rgba(51, 51, 51, 0.08);
@@ -2140,7 +2108,22 @@ html[data-dnb-modal-active] {
        user-select: text;
   -webkit-user-select: text;
   border: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  max-height: 100vh;
+  overflow: hidden; }
+  .dnb-dialog .dnb-scroll-view {
+    max-height: 90vh; }
+  .dnb-dialog__inner {
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    width: 100%;
+    height: 100%; }
   .dnb-dialog--information {
     min-width: 320px;
     min-width: var(--dialog-min-width);
@@ -2151,33 +2134,32 @@ html[data-dnb-modal-active] {
   .dnb-dialog--confirmation {
     max-width: 40rem;
     max-width: var(--dialog-confirm-max-width);
-    margin: 0 1rem; }
+    margin-left: 1rem;
+    margin-right: 1rem; }
   @media screen and (max-width: 40em) {
     .dnb-dialog--auto-fullscreen {
       width: 100%;
       height: 100vh;
       max-width: 100%;
+      max-height: 100vh;
       border-radius: 0;
       -webkit-box-shadow: none;
-              box-shadow: none; } }
+              box-shadow: none;
+      margin: auto 0; } }
   .dnb-dialog--fullscreen {
     width: 100%;
     height: 100vh;
     max-width: 100%;
+    max-height: 100vh;
     border-radius: 0;
     -webkit-box-shadow: none;
-            box-shadow: none; }
+            box-shadow: none;
+    margin: auto 0; }
   .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__content {
     padding-bottom: 4rem;
     padding-bottom: calc(2rem * 2);
     padding-bottom: calc(var(--dialog-spacing)*2);
     padding-bottom: calc(var(--dialog-spacing) * 2); }
-    @supports (-webkit-touch-callout: none) {
-      .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__content {
-        padding-bottom: 16rem;
-        padding-bottom: calc(2rem * 8);
-        padding-bottom: calc(var(--dialog-spacing)*8);
-        padding-bottom: calc(var(--dialog-spacing) * 8); } }
   .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner {
     padding-left: 3.5rem;
     padding-left: calc(2rem * 1.75);
@@ -2223,32 +2205,6 @@ html[data-dnb-modal-active] {
     padding: 2rem;
     padding: calc(2rem);
     padding: calc(var(--dialog-spacing)); }
-    @supports (-webkit-touch-callout: none) {
-      .dnb-dialog--spacing.dnb-dialog--confirmation .dnb-dialog__inner {
-        padding-bottom: 16rem;
-        padding-bottom: calc(2rem * 8);
-        padding-bottom: calc(var(--dialog-spacing)*8);
-        padding-bottom: calc(var(--dialog-spacing) * 8); } }
-  .dnb-dialog__inner {
-    position: relative;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
-    width: 100%;
-    height: 100%;
-    overflow-x: hidden; }
-    .dnb-dialog__inner::after {
-      content: '';
-      position: absolute;
-      z-index: -4;
-      left: 0;
-      top: 0;
-      width: 100vw;
-      height: 100%; }
   .dnb-dialog__align--centered .dnb-dialog__inner {
     -webkit-box-align: center;
         -ms-flex-align: center;
@@ -2381,9 +2337,9 @@ html[data-dnb-modal-active] {
   .dnb-dialog__icon ~ .dnb-dialog__header {
     margin-top: 1.5rem; }
   @supports (-webkit-touch-callout: none) {
-    @media (max-height: 40em) and (orientation: landscape) {
-      .dnb-dialog:not(.dnb-dialog--fullscreen) {
-        max-height: 80vh; } } }
+    @media (max-height: 40em) {
+      .dnb-dialog .dnb-scroll-view {
+        max-height: 82vh; } } }
 
 [data-visual-test].hide-page-content #___gatsby {
   opacity: 0; }