@odx/ui 4.3.2 → 4.3.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @odx/ui
 
+## 4.3.4
+
+### Patch Changes
+
+- 20ab0c2: main menu overlapping is fixed, main menu is popover based element
+- 88191e2: box shadow for main menu fixed
+
+## 4.3.3
+
+### Patch Changes
+
+- d53870f: mainfilter button outline style fixed
+- c930c9c: buttons inside datepicker and daterangepicker, select component styling
+
 ## 4.3.2
 
 ### Patch Changes

package/charts-theme.css

@@ -37,7 +37,7 @@
   --charts-series-purple-400: #8f32e2;
   --charts-series-violet-400: #9a0aaf;
   --charts-series-berry-400: #cb0b68;
-  --charts-border-color: var(--odx-c-seperator);
+  --charts-border-color: var(--odx-c-separator);
   --charts-text-color: var(--odx-c-text);
   --charts-background-color: var(--odx-c-background-content);
   --charts-font-family: var(--odx-typography-font-family);

package/core-theme.css

@@ -2420,6 +2420,7 @@ html body .odx-fs-italic {
   border-radius: var(--odx-v-border-radius);
   box-shadow: var(--odx-v-box-shadow-layer-1);
   display: block;
+  max-width: var(--odx-select-max-width);
   min-height: inherit;
 }
 .odx-dropdown__inner {
@@ -3924,7 +3925,10 @@ html body .odx-fs-italic {
   display: flex;
   align-items: center;
 }
-.odx-datepicker.is-readonly .odx-datepicker__trigger {
+.odx-datepicker__trigger-wrapper {
+  margin: 0 0 0 auto;
+}
+.odx-datepicker.is-readonly .odx-datepicker__trigger-wrapper > .odx-button {
   outline-color: transparent;
   pointer-events: none;
   color: var(--odx-control-color-disabled);
@@ -3945,14 +3949,14 @@ html body .odx-fs-italic {
   display: flex;
   align-items: center;
 }
-.odx-daterangepicker.is-readonly .odx-daterangepicker__trigger {
+.odx-daterangepicker__trigger-wrapper {
+  margin: 0 0 0 auto;
+}
+.odx-daterangepicker.is-readonly .odx-daterangepicker__trigger-wrapper > .odx-button {
   outline-color: transparent;
   pointer-events: none;
   color: var(--odx-control-color-disabled);
 }
-.odx-daterangepicker__trigger-wrapper {
-  margin: 0 0 0 auto;
-}
 .odx-daterangepicker__mirror {
   height: 0;
   overflow: hidden;
@@ -4926,20 +4930,17 @@ html body .odx-fs-italic {
 .odx-mainfilter-group .odx-form-field__hint {
   display: none;
 }
-.odx-mainfilter-group > .odx-button {
+.odx-mainfilter-group .odx-button {
   margin-top: calc(var(--odx-vertical-rythm-base-size) * 0.8334);
   outline-offset: -1px;
   outline-width: var(--odx-v-outline-width);
   overflow: visible;
   position: relative;
 }
-.odx-mainfilter-group > .odx-button:not(:focus-visible) {
-  outline-color: var(--odx-input-control-outline-color);
-}
-.odx-mainfilter-group > .odx-button:focus-visible {
+.odx-mainfilter-group .odx-button:focus-visible {
   background-color: var(--odx-c-focus);
 }
-.odx-mainfilter-group > .odx-button::before {
+.odx-mainfilter-group .odx-button::before {
   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);
@@ -4991,26 +4992,19 @@ html body .odx-fs-italic {
 }
 .odx-mainfilter-group .odx-datepicker .odx-button,
 .odx-mainfilter-group .odx-daterangepicker .odx-button {
-  margin-top: 0;
+  margin-top: 0 !important;
   outline: none;
 }
 .odx-mainfilter-group .odx-datepicker .odx-button::before,
 .odx-mainfilter-group .odx-daterangepicker .odx-button::before {
   content: unset;
 }
-.odx-mainfilter-group .odx-datepicker + .odx-button,
-.odx-mainfilter-group .odx-daterangepicker + .odx-button {
-  background-color: unset;
-  margin: 0 0 0 calc(var(--odx-vertical-rythm-base-size) * -0.3333);
-  outline: none;
-  z-index: 1;
-}
-.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-mainfilter-group .odx-button:not(.odx-calendar .odx-button):not(:focus-visible) {
+  outline-color: var(--odx-input-control-outline-color);
+}
 
 .odx-main-menu-button {
   color: inherit;
@@ -5111,32 +5105,36 @@ html body .odx-fs-italic {
 .odx-main-menu {
   --odx-area-header-title-color: var(--odx-main-menu-text-color);
   --odx-area-header-subtitle-color: var(--odx-main-menu-text-color);
-  z-index: var(--odx-v-layer-6);
 }
 .odx-main-menu__inner {
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
+  transition-property: transform;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
   background-color: var(--odx-main-menu-background-color);
+  box-shadow: var(--odx-v-box-shadow-layer-1);
   color: var(--odx-main-menu-text-color);
   display: grid;
   grid-template-rows: auto auto 1fr auto auto;
   height: 100%;
-  left: 0;
   max-height: 100dvh;
   max-width: var(--odx-main-menu-max-width);
-  position: fixed;
-  top: 0;
+  transform: translateX(-100%);
+  transition-behavior: allow-discrete;
   width: 100%;
-  z-index: var(--odx-v-layer-6);
 }
-.odx-main-menu__overlay {
+.odx-main-menu__inner::backdrop {
   -webkit-backdrop-filter: blur(var(--odx-v-backdrop-blur));
           backdrop-filter: blur(var(--odx-v-backdrop-blur));
   background-color: var(--odx-c-backdrop);
-  height: 100%;
-  left: 0;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: calc(var(--odx-v-layer-6) - 1);
+}
+.odx-main-menu__inner:popover-open {
+  transform: translateX(0);
+}
+@starting-style {
+  .odx-main-menu__inner:popover-open {
+    transform: translateX(-100%);
+  }
 }
 .odx-main-menu__actions {
   margin-top: calc(var(--odx-vertical-rythm-base-size) * 0);
@@ -6101,6 +6099,7 @@ html body .odx-fs-italic {
 
 :root {
   --odx-select-max-height: 220px;
+  --odx-select-max-width: 350px;
 }
 
 .odx-select__trigger {
@@ -6110,6 +6109,7 @@ html body .odx-fs-italic {
   flex: 1 1 100%;
   gap: calc(var(--odx-vertical-rythm-base-size) * 0.25);
   height: 100%;
+  max-width: var(--odx-select-max-width);
   width: 100%;
 }
 .odx-select.is-readonly .odx-select__trigger .odx-select__value {
@@ -6126,6 +6126,7 @@ html body .odx-fs-italic {
   white-space: nowrap;
   flex: 1 1 auto;
   gap: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
+  overflow: hidden;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;

package/package.json

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

package/scss/charts/theme.scss

@@ -42,7 +42,7 @@
   --charts-series-violet-400: #9a0aaf;
   --charts-series-berry-400: #cb0b68;
 
-  --charts-border-color: var(--odx-c-seperator);
+  --charts-border-color: var(--odx-c-separator);
   --charts-text-color: var(--odx-c-text);
   --charts-background-color: var(--odx-c-background-content);
 

package/scss/components/datepicker.component.scss

@@ -5,11 +5,15 @@
 
   @include utils.vertical-center-content();
 
-  &__trigger {
-    #{$root}.is-readonly & {
-      @include utils.non-interactive();
+  &__trigger-wrapper {
+    margin: 0 0 0 auto;
 
-      color: var(--odx-control-color-disabled);
+    > .odx-button {
+      #{$root}.is-readonly & {
+        @include utils.non-interactive();
+
+        color: var(--odx-control-color-disabled);
+      }
     }
   }
 

package/scss/components/daterangepicker.component.scss

@@ -6,16 +6,16 @@
 
   @include utils.vertical-center-content();
 
-  &__trigger {
-    #{$root}.is-readonly & {
-      @include utils.non-interactive();
-
-      color: var(--odx-control-color-disabled);
-    }
-  }
-
   &__trigger-wrapper {
     margin: 0 0 0 auto;
+
+    > .odx-button {
+      #{$root}.is-readonly & {
+        @include utils.non-interactive();
+
+        color: var(--odx-control-color-disabled);
+      }
+    }
   }
 
   &__mirror {

package/scss/components/dropdown.component.scss

@@ -8,6 +8,7 @@ $dropdown-open-selector: '.odx-dropdown-host[aria-expanded="true"]';
   border-radius: var(--odx-v-border-radius);
   box-shadow: var(--odx-v-box-shadow-layer-1);
   display: block;
+  max-width: var(--odx-select-max-width);
   min-height: inherit;
 
   &__inner {

package/scss/components/main-menu.component.scss

@@ -3,6 +3,7 @@
 @use '../abstract/dimensions';
 @use '../abstract/utils';
 @use '../abstract/typography';
+@use '../abstract/motion';
 @use 'button.component';
 @use 'main-menu-button.component';
 @use 'main-menu-item.component';
@@ -28,32 +29,35 @@
   --odx-area-header-title-color: var(--odx-main-menu-text-color);
   --odx-area-header-subtitle-color: var(--odx-main-menu-text-color);
 
-  z-index: var(--odx-v-layer-6);
-
   &__inner {
+    @include motion.transition(transform);
+
     background-color: var(--odx-main-menu-background-color);
+    box-shadow: var(--odx-v-box-shadow-layer-1);
     color: var(--odx-main-menu-text-color);
     display: grid;
     grid-template-rows: auto auto 1fr auto auto;
     height: 100%;
-    left: 0;
     max-height: 100dvh;
     max-width: var(--odx-main-menu-max-width);
-    position: fixed;
-    top: 0;
+    transform: translateX(-100%);
+    transition-behavior: allow-discrete;
     width: 100%;
-    z-index: var(--odx-v-layer-6);
+
+    &::backdrop {
+      backdrop-filter: blur(var(--odx-v-backdrop-blur));
+      background-color: var(--odx-c-backdrop);
+    }
+
+    &:popover-open {
+      transform: translateX(0);
+    }
   }
 
-  &__overlay {
-    backdrop-filter: blur(var(--odx-v-backdrop-blur));
-    background-color: var(--odx-c-backdrop);
-    height: 100%;
-    left: 0;
-    position: fixed;
-    top: 0;
-    width: 100%;
-    z-index: calc(var(--odx-v-layer-6) - 1);
+  @starting-style {
+    &__inner:popover-open {
+      transform: translateX(-100%);
+    }
   }
 
   &__actions {

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

@@ -73,17 +73,13 @@
     }
   }
 
-  > .odx-button {
+  .odx-button {
     margin-top: calc(var(--odx-vertical-rythm-base-size) * 0.8334);
     outline-offset: -1px;
     outline-width: var(--odx-v-outline-width);
     overflow: visible;
     position: relative;
 
-    &:not(:focus-visible) {
-      outline-color: var(--odx-input-control-outline-color);
-    }
-
     &:focus-visible {
       background-color: var(--odx-c-focus);
     }
@@ -146,29 +142,22 @@
     }
 
     .odx-button {
-      margin-top: 0;
+      margin-top: 0 !important;
       outline: none;
 
       &::before {
         content: unset;
       }
     }
-
-    + .odx-button {
-      background-color: unset;
-      margin: 0 0 0 dimensions.get-size(math.div(-8, 24));
-      outline: none;
-      z-index: 1;
-    }
-  }
-
-  .odx-daterangepicker {
-    &__trigger-wrapper .odx-button {
-      @include dimensions.margin(0.5, left);
-    }
   }
 
   .odx-calendar {
     --odx-input-control-outline-color: var(--gray-200);
   }
+
+  .odx-button:not(.odx-calendar .odx-button) {
+    &:not(:focus-visible) {
+      outline-color: var(--odx-input-control-outline-color);
+    }
+  }
 }

package/scss/components/select.component.scss

@@ -6,6 +6,7 @@
 
 :root {
   --odx-select-max-height: 220px;
+  --odx-select-max-width: 350px;
 }
 
 .odx-select {
@@ -18,6 +19,7 @@
     flex: 1 1 100%;
     gap: dimensions.get-size(math.div(6, 24));
     height: 100%;
+    max-width: var(--odx-select-max-width);
     width: 100%;
 
     #{$root}.is-readonly & {
@@ -35,6 +37,7 @@
 
     flex: 1 1 auto;
     gap: dimensions.get-size(math.div(4, 24));
+    overflow: hidden;
     user-select: none;
   }