@odx/ui 3.8.0 → 3.9.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @odx/ui
 
+## 3.9.1
+
+### Patch Changes
+
+- c1ecb13: css fix for list item header
+
+## 3.9.0
+
+### Minor Changes
+
+- 32bc292: Added possibility for datepicker and daterangepicker to be included in main filter group
+
 ## 3.8.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;
@@ -5898,9 +5918,6 @@ html body .odx-fs-italic {
   overflow: hidden;
   text-align: center;
 }
-.odx-rich-list-item-header__icon {
-  position: relative;
-}
 
 .odx-rich-list-item {
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
@@ -5912,11 +5929,11 @@ html body .odx-fs-italic {
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
 }
-.odx-rich-list-item.is-disabled .odx-rich-list-item-header__title,
-.odx-rich-list-item.is-disabled .odx-rich-list-item-header .odx-avatar {
+.odx-rich-list-item.is-disabled .odx-rich-list-item-header {
   color: var(--odx-c-text-disabled);
 }
 .odx-rich-list-item.is-disabled .odx-rich-list-item-header .odx-avatar {
+  color: var(--odx-c-text-disabled);
   filter: saturate(0);
 }
 .odx-rich-list-item__header {
@@ -5935,8 +5952,16 @@ html body .odx-fs-italic {
 .odx-rich-list-item--empty .odx-rich-list-item__expand-button {
   display: none;
 }
+.odx-rich-list-item__icon {
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
+  transition-property: transform;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
+  position: relative;
+  transform: rotate(0);
+}
 .odx-rich-list-item--expanded .odx-rich-list-item__icon {
-  transform: scaleY(-1);
+  transform: rotateX(180deg);
 }
 
 :root {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odx/ui",
-  "version": "3.8.0",
+  "version": "3.9.1",
   "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/rich-list-item-header.component.scss

@@ -22,8 +22,4 @@
     overflow: hidden;
     text-align: center;
   }
-
-  &__icon {
-    position: relative;
-  }
 }

package/scss/components/rich-list-item.component.scss

@@ -18,13 +18,13 @@
   display: block;
 
   &.is-disabled {
-    .odx-rich-list-item-header__title,
-    .odx-rich-list-item-header .odx-avatar {
+    .odx-rich-list-item-header {
       color: var(--odx-c-text-disabled);
-    }
 
-    .odx-rich-list-item-header .odx-avatar {
-      filter: saturate(0);
+      .odx-avatar {
+        color: var(--odx-c-text-disabled);
+        filter: saturate(0);
+      }
     }
   }
 
@@ -46,9 +46,14 @@
     }
   }
 
-  &--expanded {
-    #{$root}__icon {
-      transform: scaleY(-1);
+  &__icon {
+    @include motion.transition(transform);
+
+    position: relative;
+    transform: rotate(0);
+
+    #{$root}--expanded & {
+      transform: rotateX(180deg);
     }
   }
 }