@odx/ui 4.3.0 → 4.3.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @odx/ui
 
+## 4.3.2
+
+### Patch Changes
+
+- 2fa9021: Updated header component for title text truncation
+
+## 4.3.1
+
+### Patch Changes
+
+- 429c76c: Reset button for datepicker inside mainfilter group
+
 ## 4.3.0
 
 ### Minor Changes

package/core-theme.css

@@ -4409,20 +4409,27 @@ html body .odx-fs-italic {
   min-height: auto;
 }
 .odx-header__content {
+  display: none;
   margin-inline-end: auto;
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
   padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  overflow: clip;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 @media (min-width: 768px) {
   .odx-header__content {
     padding-right: calc(var(--odx-vertical-rythm-base-size) * 1);
     padding-left: calc(var(--odx-vertical-rythm-base-size) * 1);
+    display: block;
+    overflow: hidden;
   }
 }
 .odx-header__title {
   overflow: clip;
   text-overflow: ellipsis;
   white-space: nowrap;
+  overflow: hidden;
 }
 .odx-header .odx-action-group:not(:last-child) {
   border-inline-end: 1px solid var(--odx-c-separator);
@@ -4919,20 +4926,20 @@ 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) {
+.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,6 +4998,13 @@ html body .odx-fs-italic {
 .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);
 }

package/package.json

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

package/scss/components/header.component.scss

@@ -24,12 +24,17 @@
   }
 
   &__content {
+    display: none;
     margin-inline-end: auto;
 
     @include dimensions.padding-x(0.5);
+    @include typography.prevent-text-overflow();
 
     @include breakpoints.up(tablet) {
       @include dimensions.padding-x(1);
+
+      display: block;
+      overflow: hidden;
     }
   }
 
@@ -37,6 +42,8 @@
     @extend .odx-title;
     @extend .odx-title-6;
     @include typography.prevent-text-overflow();
+
+    overflow: hidden;
   }
 
   .odx-action-group:not(:last-child) {

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

@@ -73,7 +73,7 @@
     }
   }
 
-  .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);
@@ -153,6 +153,13 @@
         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 {