@odx/ui 3.7.0 → 3.8.0

package/CHANGELOG.md

@@ -1,11 +1,21 @@
 # @odx/ui
 
+## 3.8.0
+
+### Minor Changes
+
+- 172ecd3: ODX Modal & Sidesheet now uses native HTML Dialog under the hood
+
 ## 3.7.0
 
 ### Minor Changes
 
 - 8d72579: Added headline classes styling
 
+### Patch Changes
+
+- 288bb39: Responsive attribute for wizard component
+
 ## 3.6.0
 
 ### Minor Changes

package/core-theme.css

@@ -5182,73 +5182,85 @@ html body .odx-fs-italic {
   width: calc(var(--odx-vertical-rythm-base-size) * 4.1667);
 }
 
+@keyframes basic-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
 .odx-modal {
   --odx-modal-margin-y: calc(var(--odx-vertical-rythm-base-size) * 2);
   --odx-modal-margin-x: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
   --odx-modal-max-width: calc(var(--odx-vertical-rythm-base-size) * 20);
   --odx-modal-margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  background: transparent;
+  border: 0;
+  border-radius: var(--odx-v-border-radius);
+  box-shadow: var(--odx-v-box-shadow-layer-2);
+  color: var(--odx-c-text);
+  margin-top: var(--odx-modal-margin-y);
+  overflow: unset;
+  padding: 0;
+  width: min(var(--odx-modal-max-width), 100% - 2 * var(--odx-modal-margin-x));
+}
+.odx-modal:modal {
+  max-height: calc(100% - var(--odx-modal-margin-y) - var(--odx-modal-margin-bottom));
+  max-width: 100vw;
+}
+.odx-modal::backdrop {
   -webkit-backdrop-filter: blur(var(--odx-v-backdrop-blur));
           backdrop-filter: blur(var(--odx-v-backdrop-blur));
   background-color: var(--odx-c-backdrop-dark);
-  display: block;
-  height: 100dvh;
-  left: 0;
-  overscroll-behavior: contain;
-  position: fixed;
-  top: 0;
-  width: 100dvw;
-  z-index: var(--odx-v-layer-4);
-}
-@media (min-width: 480px) {
-  .odx-modal {
-    --odx-modal-margin-y: calc(var(--odx-vertical-rythm-base-size) * 3);
-    --odx-modal-margin-x: calc(var(--odx-vertical-rythm-base-size) * 1);
-    --odx-modal-margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 1);
-  }
-}
-.odx-modal--sidesheet {
-  -webkit-backdrop-filter: unset;
-          backdrop-filter: unset;
-  background-color: unset;
 }
-.odx-modal__container {
-  padding-right: calc(var(--odx-vertical-rythm-base-size) * 1);
-  padding-left: calc(var(--odx-vertical-rythm-base-size) * 1);
-  background-color: var(--odx-c-background-content);
-  border-radius: var(--odx-v-border-radius);
-  box-shadow: var(--odx-v-box-shadow-layer-2);
-  display: flex;
-  flex-direction: column;
-  margin: var(--odx-modal-margin-y) auto 0;
-  max-height: calc(100% - var(--odx-modal-margin-y) - var(--odx-modal-margin-bottom));
-  min-height: calc(var(--odx-vertical-rythm-base-size) * 7);
-  width: min(var(--odx-modal-max-width), 100% - 2 * var(--odx-modal-margin-x));
+.odx-modal[data-closing-animation]::backdrop {
+  animation: basic-fade-out 0.3s;
 }
-.odx-modal--xsmall .odx-modal__container {
+.odx-modal.odx-modal--xsmall {
   --odx-modal-max-width: calc(var(--odx-vertical-rythm-base-size) * 15);
 }
-.odx-modal--medium .odx-modal__container {
+.odx-modal.odx-modal--medium {
   --odx-modal-max-width: calc(var(--odx-vertical-rythm-base-size) * 30);
 }
-.odx-modal--large .odx-modal__container {
+.odx-modal.odx-modal--large {
   --odx-modal-max-width: calc(var(--odx-vertical-rythm-base-size) * 50);
 }
-.odx-modal--sidesheet .odx-modal__container {
+.odx-modal--sidesheet {
   height: 100%;
-  left: unset;
   max-height: calc(100% - var(--odx-modal-margin-y) - var(--odx-modal-margin-bottom));
-  right: 0;
+}
+.odx-modal--sidesheet::backdrop {
+  -webkit-backdrop-filter: unset;
+          backdrop-filter: unset;
+  background-color: unset;
 }
 @media (min-width: 480px) {
-  .odx-modal--sidesheet .odx-modal__container {
+  .odx-modal--sidesheet {
     margin-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
   }
 }
 @media (max-width: 479px) {
-  .odx-modal--sidesheet .odx-modal__container {
+  .odx-modal--sidesheet {
     --odx-modal-max-width: 100dvw !important;
   }
 }
+@media (min-width: 480px) {
+  .odx-modal {
+    --odx-modal-margin-y: calc(var(--odx-vertical-rythm-base-size) * 3);
+    --odx-modal-margin-x: calc(var(--odx-vertical-rythm-base-size) * 1);
+    --odx-modal-margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 1);
+  }
+}
+.odx-modal__container {
+  padding-right: calc(var(--odx-vertical-rythm-base-size) * 1);
+  padding-left: calc(var(--odx-vertical-rythm-base-size) * 1);
+  background-color: var(--odx-c-background-content);
+  border-radius: var(--odx-v-border-radius);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
 .odx-modal--with-component .odx-modal__container > * {
   display: contents;
 }
@@ -6973,15 +6985,15 @@ html body .odx-fs-italic {
 }
 
 .odx-wizard {
-  --odx-horizontal-wizzard-width: calc(var(--odx-vertical-rythm-base-size) * 4.1667);
-  --odx-vertical-wizzard-heigth: calc(var(--odx-vertical-rythm-base-size) * 2.9167);
+  --odx-horizontal-wizard-width: calc(var(--odx-vertical-rythm-base-size) * 4.1667);
+  --odx-vertical-wizard-height: calc(var(--odx-vertical-rythm-base-size) * 2.9167);
   display: flex;
 }
 .odx-wizard--vertical {
   flex-direction: column;
 }
 .odx-wizard--overflow:not(.odx-wizard--vertical) {
-  min-width: calc(var(--odx-horizontal-wizzard-width) * 7);
+  min-width: calc(var(--odx-horizontal-wizard-width) * 7);
 }
 
 .odx-wizard-step {
@@ -6993,7 +7005,7 @@ html body .odx-fs-italic {
 }
 .odx-wizard:not(.odx-wizard--vertical) .odx-wizard-step {
   gap: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
-  min-width: var(--odx-horizontal-wizzard-width);
+  min-width: var(--odx-horizontal-wizard-width);
 }
 .odx-wizard-step.is-disabled {
   outline-color: transparent;
@@ -7061,12 +7073,12 @@ html body .odx-fs-italic {
   border-style: dashed;
   height: 0;
   margin-bottom: calc(calc(var(--odx-vertical-rythm-base-size) * 0.8334) / 2 - calc(var(--odx-vertical-rythm-base-size) * 0.0834) / 2);
-  min-width: var(--odx-horizontal-wizzard-width);
+  min-width: var(--odx-horizontal-wizard-width);
 }
 .odx-wizard.odx-wizard--vertical .odx-wizard-step__dotted-line {
   border-style: dashed;
   margin-left: calc(calc(var(--odx-vertical-rythm-base-size) * 0.8334) / 2 - calc(var(--odx-vertical-rythm-base-size) * 0.0834) / 2);
-  padding-bottom: var(--odx-verticalal-wizzard-heigth);
+  padding-bottom: var(--odx-vertical-wizard-height);
 }
 .odx-wizard.odx-wizard--vertical .odx-wizard-step:first-of-type + .odx-wizard-step__dotted-line {
   border-left-color: var(--odx-c-primary);
@@ -7166,7 +7178,7 @@ html body .odx-fs-italic {
 }
 .odx-wizard--vertical .odx-wizard-step {
   align-items: center;
-  flex: 0 0 var(--odx-vertical-wizzard-heigth);
+  flex: 0 0 var(--odx-vertical-wizard-height);
   flex-direction: row-reverse;
   gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
   justify-content: start;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odx/ui",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "peerDependencies": {

package/scss/components/modal.component.scss

@@ -4,6 +4,16 @@
 @use '../abstract/typography';
 @use '../abstract/utils';
 
+@keyframes basic-fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
 $modal-padding: math.div(12, 24);
 
 .odx-modal {
@@ -14,67 +24,74 @@ $modal-padding: math.div(12, 24);
 
   $root: &;
 
-  backdrop-filter: blur(var(--odx-v-backdrop-blur));
-  background-color: var(--odx-c-backdrop-dark);
-  display: block;
-  height: 100dvh;
-  left: 0;
-  overscroll-behavior: contain;
-  position: fixed;
-  top: 0;
-  width: 100dvw;
-  z-index: var(--odx-v-layer-4);
+  background: transparent;
+  border: 0;
+  border-radius: var(--odx-v-border-radius);
+  box-shadow: var(--odx-v-box-shadow-layer-2);
+  color: var(--odx-c-text);
+  margin-top: var(--odx-modal-margin-y);
+  overflow: unset;
+  padding: 0;
+  width: min(var(--odx-modal-max-width), calc(100% - 2 * var(--odx-modal-margin-x)));
+
+  &:modal {
+    max-height: calc(100% - var(--odx-modal-margin-y) - var(--odx-modal-margin-bottom));
+    max-width: 100vw;
+  }
 
-  @include breakpoints.up(phone) {
-    --odx-modal-margin-y: #{dimensions.get-size(3)};
-    --odx-modal-margin-x: #{dimensions.get-size(1)};
-    --odx-modal-margin-bottom: #{dimensions.get-size(1)};
+  &::backdrop {
+    backdrop-filter: blur(var(--odx-v-backdrop-blur));
+    background-color: var(--odx-c-backdrop-dark);
   }
 
-  &--sidesheet {
-    backdrop-filter: unset;
-    background-color: unset;
+  &[data-closing-animation]::backdrop {
+    animation: basic-fade-out 0.3s;
   }
 
-  &__container {
-    @include dimensions.padding-x(1);
+  &.odx-modal--xsmall {
+    --odx-modal-max-width: #{dimensions.get-size(15)};
+  }
 
-    background-color: var(--odx-c-background-content);
-    border-radius: var(--odx-v-border-radius);
-    box-shadow: var(--odx-v-box-shadow-layer-2);
-    display: flex;
-    flex-direction: column;
-    margin: var(--odx-modal-margin-y) auto 0;
+  &.odx-modal--medium {
+    --odx-modal-max-width: #{dimensions.get-size(30)};
+  }
+
+  &.odx-modal--large {
+    --odx-modal-max-width: #{dimensions.get-size(50)};
+  }
+
+  &--sidesheet {
+    height: 100%;
     max-height: calc(100% - var(--odx-modal-margin-y) - var(--odx-modal-margin-bottom));
-    min-height: dimensions.get-size(7);
-    width: min(var(--odx-modal-max-width), calc(100% - 2 * var(--odx-modal-margin-x)));
 
-    #{$root}--xsmall & {
-      --odx-modal-max-width: #{dimensions.get-size(15)};
+    &::backdrop {
+      backdrop-filter: unset;
+      background-color: unset;
     }
 
-    #{$root}--medium & {
-      --odx-modal-max-width: #{dimensions.get-size(30)};
+    @include breakpoints.up(phone) {
+      margin-right: dimensions.get-size(0.5);
     }
 
-    #{$root}--large & {
-      --odx-modal-max-width: #{dimensions.get-size(50)};
+    @include breakpoints.down(phone) {
+      --odx-modal-max-width: 100dvw !important;
     }
+  }
 
-    #{$root}--sidesheet & {
-      height: 100%;
-      left: unset;
-      max-height: calc(100% - var(--odx-modal-margin-y) - var(--odx-modal-margin-bottom));
-      right: 0;
+  @include breakpoints.up(phone) {
+    --odx-modal-margin-y: #{dimensions.get-size(3)};
+    --odx-modal-margin-x: #{dimensions.get-size(1)};
+    --odx-modal-margin-bottom: #{dimensions.get-size(1)};
+  }
 
-      @include breakpoints.up(phone) {
-        margin-right: dimensions.get-size(0.5);
-      }
+  &__container {
+    @include dimensions.padding-x(1);
 
-      @include breakpoints.down(phone) {
-        --odx-modal-max-width: 100dvw !important;
-      }
-    }
+    background-color: var(--odx-c-background-content);
+    border-radius: var(--odx-v-border-radius);
+    display: flex;
+    flex-direction: column;
+    height: 100%;
 
     #{$root}--with-component & > * {
       display: contents;

package/scss/components/wizard-step.component.scss

@@ -20,7 +20,7 @@
 
   .#{$parent-root}:not(.#{$parent-root}--vertical) & {
     gap: dimensions.get-size(math.div(8, 24));
-    min-width: var(--odx-horizontal-wizzard-width);
+    min-width: var(--odx-horizontal-wizard-width);
   }
 
   &.is-disabled {
@@ -95,13 +95,13 @@
       border-style: dashed;
       height: 0;
       margin-bottom: calc(#{$step-size} / 2 - #{$border-width} / 2);
-      min-width: var(--odx-horizontal-wizzard-width);
+      min-width: var(--odx-horizontal-wizard-width);
     }
 
     .#{$parent-root}.#{$parent-root}--vertical & {
       border-style: dashed;
       margin-left: calc(#{$step-size} / 2 - #{$border-width} / 2);
-      padding-bottom: var(--odx-verticalal-wizzard-heigth);
+      padding-bottom: var(--odx-vertical-wizard-height);
     }
 
     #{$root}:first-of-type + & {
@@ -248,7 +248,7 @@
 
   .#{$parent-root}--vertical & {
     align-items: center;
-    flex: 0 0 var(--odx-vertical-wizzard-heigth);
+    flex: 0 0 var(--odx-vertical-wizard-height);
     flex-direction: row-reverse;
     gap: dimensions.get-size(math.div(12, 24));
     justify-content: start;

package/scss/components/wizard.component.scss

@@ -3,8 +3,8 @@
 @use '../abstract/breakpoints';
 
 .odx-wizard {
-  --odx-horizontal-wizzard-width: #{dimensions.get-size(math.div(100, 24))};
-  --odx-vertical-wizzard-heigth: #{dimensions.get-size(math.div(70, 24))};
+  --odx-horizontal-wizard-width: #{dimensions.get-size(math.div(100, 24))};
+  --odx-vertical-wizard-height: #{dimensions.get-size(math.div(70, 24))};
 
   display: flex;
 
@@ -13,6 +13,6 @@
   }
 
   &--overflow:not(&--vertical) {
-    min-width: calc(var(--odx-horizontal-wizzard-width) * 7);
+    min-width: calc(var(--odx-horizontal-wizard-width) * 7);
   }
 }