@odx/ui 3.7.0 → 3.9.0

package/CHANGELOG.md

@@ -1,11 +1,27 @@
 # @odx/ui
 
+## 3.9.0
+
+### Minor Changes
+
+- 32bc292: Added possibility for datepicker and daterangepicker to be included in main filter group
+
+## 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

@@ -4856,9 +4856,13 @@ html body .odx-fs-italic {
   min-width: calc(var(--odx-vertical-rythm-base-size) * 7.1667);
 }
 .odx-mainfilter-group .odx-form-field__label {
+  padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.125);
+  padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.125);
+  background-color: var(--odx-input-control-background-color);
   margin-top: 0;
   position: absolute;
   right: 0;
+  right: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
   top: calc(var(--odx-vertical-rythm-base-size) * 0.5);
   z-index: 1;
 }
@@ -4866,11 +4870,8 @@ html body .odx-fs-italic {
   right: calc(var(--odx-vertical-rythm-base-size) * 1.5);
 }
 .odx-mainfilter-group .odx-form-field-label {
-  padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.125);
-  padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.125);
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.0834);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.0834);
-  background-color: var(--odx-input-control-background-color);
   border-radius: var(--odx-v-border-radius-controls);
   display: inline-block;
   font-size: calc(var(--odx-vertical-rythm-base-size) * 0.4167);
@@ -4938,6 +4939,25 @@ html body .odx-fs-italic {
   background-color: transparent;
 }
 }
+.odx-mainfilter-group .odx-datepicker > .odx-action-group,
+.odx-mainfilter-group .odx-daterangepicker > .odx-action-group {
+  z-index: 1;
+}
+.odx-mainfilter-group .odx-datepicker .odx-button,
+.odx-mainfilter-group .odx-daterangepicker .odx-button {
+  margin-top: 0;
+  outline: none;
+}
+.odx-mainfilter-group .odx-datepicker .odx-button::before,
+.odx-mainfilter-group .odx-daterangepicker .odx-button::before {
+  content: unset;
+}
+.odx-mainfilter-group .odx-daterangepicker__trigger-wrapper .odx-button {
+  margin-left: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+}
+.odx-mainfilter-group .odx-calendar {
+  --odx-input-control-outline-color: var(--gray-200);
+}
 
 .odx-main-menu-button {
   color: inherit;
@@ -5182,73 +5202,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[data-closing-animation]::backdrop {
+  animation: basic-fade-out 0.3s;
 }
-.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--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 +7005,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 +7025,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 +7093,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 +7198,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.9.0",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "peerDependencies": {

package/scss/components/mainfilter-group.component.scss

@@ -42,9 +42,13 @@
     }
 
     &__label {
+      @include dimensions.padding-x(math.div(3, 24));
+
+      background-color: var(--odx-input-control-background-color);
       margin-top: 0;
       position: absolute;
       right: 0;
+      right: dimensions.get-size(math.div(8, 24));
       top: dimensions.get-size(math.div(12, 24));
       z-index: 1;
     }
@@ -56,10 +60,8 @@
     }
 
     &-label {
-      @include dimensions.padding-x(math.div(3, 24));
       @include dimensions.padding-y(math.div(2, 24));
 
-      background-color: var(--odx-input-control-background-color);
       border-radius: var(--odx-v-border-radius-controls);
       display: inline-block;
       font-size: dimensions.get-size(math.div(10, 24));
@@ -136,4 +138,30 @@
       }
     }
   }
+
+  .odx-datepicker,
+  .odx-daterangepicker {
+    & > .odx-action-group {
+      z-index: 1;
+    }
+
+    .odx-button {
+      margin-top: 0;
+      outline: none;
+
+      &::before {
+        content: unset;
+      }
+    }
+  }
+
+  .odx-daterangepicker {
+    &__trigger-wrapper .odx-button {
+      @include dimensions.margin(0.5, left);
+    }
+  }
+
+  .odx-calendar {
+    --odx-input-control-outline-color: var(--gray-200);
+  }
 }

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);
   }
 }