@odx/ui 3.5.3 → 3.5.5

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @odx/ui
 
+## 3.5.5
+
+### Patch Changes
+
+- fe01672: Fix avatar image overflow
+- 7327b27: Remove avatar background if avatar image is present
+
+## 3.5.4
+
+### Patch Changes
+
+- e3a4eb8: Prevent datepicker, daterangepicker and timepicker dropdown content from overflowing
+
 ## 3.5.3
 
 ### Patch Changes

package/core-theme.css

@@ -2079,7 +2079,7 @@ html body .odx-fs-italic {
   top: 0 !important;
 }
 .odx-cdk-connected-overlay__content > * {
-  max-height: var(--odx-cdk-connected-overlay-max-height, inherit);
+  max-height: var(--odx-cdk-connected-overlay-max-height-modified, var(--odx-cdk-connected-overlay-max-height, unset));
 }
 
 .odx-cdk-connected-overlay-arrow {
@@ -2227,7 +2227,7 @@ html body .odx-fs-italic {
   justify-content: center;
   font-weight: var(--odx-typography-font-weight-medium);
   letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
-  overflow-x: clip;
+  overflow: clip;
   text-overflow: ellipsis;
   white-space: nowrap;
   background-color: var(--blue-700-10);
@@ -2321,6 +2321,9 @@ html body .odx-fs-italic {
 .odx-avatar--rectangle {
   border-radius: var(--odx-v-border-radius-controls);
 }
+.odx-avatar:has(img) {
+  background-color: transparent;
+}
 .odx-avatar img {
   height: 100%;
   left: 0;
@@ -2337,15 +2340,15 @@ html body .odx-fs-italic {
   border-radius: var(--odx-v-border-radius);
   box-shadow: var(--odx-v-box-shadow-layer-1);
   display: block;
-  min-height: var(--odx-cdk-connected-overlay-min-height, inherit);
+  min-height: inherit;
 }
 .odx-dropdown__inner {
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
   padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.5);
   border-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.5) solid transparent;
   border-top: calc(var(--odx-vertical-rythm-base-size) * 0.5) solid transparent;
-  max-height: var(--odx-cdk-connected-overlay-max-height, inherit);
-  min-height: var(--odx-cdk-connected-overlay-min-height, inherit);
+  max-height: inherit;
+  min-height: inherit;
   overflow: auto;
   overscroll-behavior: contain;
 }
@@ -2725,7 +2728,7 @@ html body .odx-fs-italic {
   color: var(--odx-area-header-title-color);
 }
 .odx-area-header__subtitle {
-  overflow-x: clip;
+  overflow: clip;
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--odx-area-header-subtitle-color);
@@ -3624,7 +3627,7 @@ html body .odx-fs-italic {
           user-select: none;
 }
 .odx-chip__content {
-  overflow-x: clip;
+  overflow: clip;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -3838,7 +3841,7 @@ html body .odx-fs-italic {
   display: none;
 }
 .odx-datepicker .odx-dropdown {
-  max-height: 359px;
+  --odx-cdk-connected-overlay-max-height-modified: min(var(--odx-cdk-connected-overlay-max-height), 359px);
 }
 
 .odx-daterangepicker {
@@ -3869,7 +3872,7 @@ html body .odx-fs-italic {
   margin-left: calc(var(--odx-vertical-rythm-base-size) * 0.25);
 }
 .odx-daterangepicker .odx-dropdown {
-  max-height: 359px;
+  --odx-cdk-connected-overlay-max-height-modified: min(var(--odx-cdk-connected-overlay-max-height), 359px);
 }
 
 .odx-error-page {
@@ -4064,7 +4067,7 @@ html body .odx-fs-italic {
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
 }
 .odx-form-field:not(.odx-form-field--horizontal) .odx-form-field-label {
-  overflow-x: clip;
+  overflow: clip;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -4319,7 +4322,7 @@ html body .odx-fs-italic {
   }
 }
 .odx-header__title {
-  overflow-x: clip;
+  overflow: clip;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -4832,7 +4835,7 @@ html body .odx-fs-italic {
   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);
-  overflow-x: clip;
+  overflow: clip;
   text-overflow: ellipsis;
   white-space: nowrap;
   background-color: var(--odx-input-control-background-color);
@@ -4917,7 +4920,7 @@ html body .odx-fs-italic {
   align-items: center;
   font-weight: var(--odx-typography-font-weight-medium);
   letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
-  overflow-x: clip;
+  overflow: clip;
   text-overflow: ellipsis;
   white-space: nowrap;
   background-color: transparent;
@@ -5307,11 +5310,8 @@ html body .odx-fs-italic {
 }
 
 .odx-notification-center-overlay {
-  --odx-cdk-connected-overlay-min-height: calc(var(--odx-vertical-rythm-base-size) * 9);
-  --odx-cdk-connected-overlay-max-height-modified: min(var(--odx-cdk-connected-overlay-max-height), calc(var(--odx-vertical-rythm-base-size) * 18));
-}
-.odx-notification-center-overlay .odx-dropdown {
-  --odx-cdk-connected-overlay-max-height: var(--odx-cdk-connected-overlay-max-height-modified);
+  --odx-cdk-connected-overlay-min-height-modified: calc(var(--odx-vertical-rythm-base-size) * 9);
+  --odx-cdk-connected-overlay-max-height-modified: min(var(--odx-cdk-connected-overlay-max-height), calc(var(--odx-vertical-rythm-base-size) * 15));
 }
 
 .odx-notification-center {
@@ -5320,7 +5320,6 @@ html body .odx-fs-italic {
   --odx-notification-center-header-height: calc(var(--odx-vertical-rythm-base-size) * 2);
   --odx-notification-center-footer-height: calc(var(--odx-vertical-rythm-base-size) * 2.5);
   background-color: var(--odx-c-background-content);
-  max-height: min(var(--odx-cdk-connected-overlay-max-height), calc(var(--odx-vertical-rythm-base-size) * 15));
 }
 .odx-notification-center__header, .odx-notification-center__footer {
   background-color: inherit;
@@ -5740,7 +5739,7 @@ html body .odx-fs-italic {
   pointer-events: none;
 }
 .odx-rail-navigation-item__container {
-  overflow-x: clip;
+  overflow: clip;
   text-overflow: ellipsis;
   white-space: nowrap;
   transition-delay: 0ms;
@@ -5885,7 +5884,7 @@ html body .odx-fs-italic {
 .odx-select__placeholder, .odx-select__value {
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
-  overflow-x: clip;
+  overflow: clip;
   text-overflow: ellipsis;
   white-space: nowrap;
   flex: 1 1 auto;
@@ -6941,7 +6940,7 @@ html body .odx-fs-italic {
   display: inline-flex;
 }
 .odx-wizard-step__label {
-  overflow-x: clip;
+  overflow: clip;
   text-overflow: ellipsis;
   white-space: nowrap;
   outline: var(--odx-v-outline-width) solid transparent;

package/package.json

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

package/scss/abstract/_typography.scss

@@ -30,7 +30,7 @@
 }
 
 @mixin prevent-text-overflow() {
-  overflow-x: clip;
+  overflow: clip;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

package/scss/cdk/connected-overlay.scss

@@ -30,7 +30,7 @@
     top: 0 !important;
 
     > * {
-      max-height: var(--odx-cdk-connected-overlay-max-height, inherit);
+      max-height: var(--odx-cdk-connected-overlay-max-height-modified, var(--odx-cdk-connected-overlay-max-height, unset));
     }
   }
 }

package/scss/components/avatar.component.scss

@@ -52,6 +52,10 @@
     border-radius: var(--odx-v-border-radius-controls);
   }
 
+  &:has(img) {
+    background-color: transparent;
+  }
+
   img {
     height: 100%;
     left: 0;

package/scss/components/datepicker.component.scss

@@ -2,7 +2,6 @@
 
 .odx-datepicker {
   $root: &;
-  $dropdown-max-height: 359px;
 
   @include utils.vertical-center-content();
 
@@ -25,6 +24,6 @@
   }
 
   .odx-dropdown {
-    max-height: $dropdown-max-height;
+    --odx-cdk-connected-overlay-max-height-modified: min(var(--odx-cdk-connected-overlay-max-height), 359px);
   }
 }

package/scss/components/daterangepicker.component.scss

@@ -3,7 +3,6 @@
 
 .odx-daterangepicker {
   $root: &;
-  $dropdown-max-height: 359px;
 
   @include utils.vertical-center-content();
 
@@ -39,6 +38,6 @@
   }
 
   .odx-dropdown {
-    max-height: $dropdown-max-height;
+    --odx-cdk-connected-overlay-max-height-modified: min(var(--odx-cdk-connected-overlay-max-height), 359px);
   }
 }

package/scss/components/dropdown.component.scss

@@ -8,15 +8,15 @@ $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;
-  min-height: var(--odx-cdk-connected-overlay-min-height, inherit);
+  min-height: inherit;
 
   &__inner {
     @include dimensions.padding-x(0.5);
 
     border-bottom: dimensions.get-size(0.5) solid transparent;
     border-top: dimensions.get-size(0.5) solid transparent;
-    max-height: var(--odx-cdk-connected-overlay-max-height, inherit);
-    min-height: var(--odx-cdk-connected-overlay-min-height, inherit);
+    max-height: inherit;
+    min-height: inherit;
     overflow: auto;
     overscroll-behavior: contain;
   }

package/scss/components/notification-center.component.scss

@@ -2,12 +2,8 @@
 @use '../abstract/typography';
 
 .odx-notification-center-overlay {
-  --odx-cdk-connected-overlay-min-height: #{dimensions.get-size(9)};
-  --odx-cdk-connected-overlay-max-height-modified: min(var(--odx-cdk-connected-overlay-max-height), #{dimensions.get-size(18)});
-
-  .odx-dropdown {
-    --odx-cdk-connected-overlay-max-height: var(--odx-cdk-connected-overlay-max-height-modified);
-  }
+  --odx-cdk-connected-overlay-min-height-modified: #{dimensions.get-size(9)};
+  --odx-cdk-connected-overlay-max-height-modified: min(var(--odx-cdk-connected-overlay-max-height), #{dimensions.get-size(15)});
 }
 
 .odx-notification-center {
@@ -17,7 +13,6 @@
   --odx-notification-center-footer-height: #{dimensions.get-size(2.5)};
 
   background-color: var(--odx-c-background-content);
-  max-height: min(var(--odx-cdk-connected-overlay-max-height), #{dimensions.get-size(15)});
 
   &__header,
   &__footer {