@odx/ui 4.3.1 → 4.3.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @odx/ui
 
+## 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
+
+- 2fa9021: Updated header component for title text truncation
+
 ## 4.3.1
 
 ### 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;
@@ -4409,20 +4413,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 +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);
@@ -4984,25 +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;
-}
-.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;
@@ -6093,6 +6095,7 @@ html body .odx-fs-italic {
 
 :root {
   --odx-select-max-height: 220px;
+  --odx-select-max-width: 350px;
 }
 
 .odx-select__trigger {
@@ -6102,6 +6105,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 {
@@ -6118,6 +6122,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.1",
+  "version": "4.3.3",
   "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/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,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,28 +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;
-    }
-  }
-
-  .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;
   }