@odx/ui 3.5.2 → 3.5.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @odx/ui
 
+## 3.5.4
+
+### Patch Changes
+
+- e3a4eb8: Prevent datepicker, daterangepicker and timepicker dropdown content from overflowing
+
+## 3.5.3
+
+### Patch Changes
+
+- 7321693: new timepicker component
+
 ## 3.5.2
 
 ### 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 {
@@ -2337,15 +2337,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;
 }
@@ -3838,7 +3838,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 +3869,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 {
@@ -5307,11 +5307,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 +5317,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;
@@ -6559,6 +6555,53 @@ html body .odx-fs-italic {
   background-color: var(--odx-table-cell-background-color-active);
 }
 
+.odx-timepicker {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+.odx-timepicker__wrapper {
+  display: inline-flex;
+  max-width: calc(var(--odx-vertical-rythm-base-size) * 4.5834);
+}
+.odx-timepicker input[odxTimepickerControl] {
+  -webkit-appearance: textfield;
+     -moz-appearance: textfield;
+          appearance: textfield;
+  font-weight: var(--odx-typography-font-weight-normal);
+  letter-spacing: var(--odx-typography-font-weight-normal-letter-spacing);
+  width: 100%;
+}
+.odx-timepicker input[odxTimepickerControl]::-moz-placeholder {
+  font-weight: var(--odx-typography-font-weight-normal);
+  letter-spacing: var(--odx-typography-font-weight-normal-letter-spacing);
+  color: var(--odx-input-control-color);
+  opacity: 0.65;
+}
+.odx-timepicker input[odxTimepickerControl]::placeholder {
+  font-weight: var(--odx-typography-font-weight-normal);
+  letter-spacing: var(--odx-typography-font-weight-normal-letter-spacing);
+  color: var(--odx-input-control-color);
+  opacity: 0.65;
+}
+.odx-timepicker input[odxTimepickerControl]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+          appearance: none;
+}
+.odx-timepicker__option-list {
+  display: flex;
+  flex-direction: column;
+  max-height: calc(7 * var(--odx-vertical-rythm-base-size) * 1.5 + var(--odx-vertical-rythm-base-size));
+}
+.odx-timepicker-option:active {
+  background-color: var(--odx-input-control-active-color);
+}
+.odx-timepicker.is-readonly .odx-timepicker__trigger {
+  outline-color: transparent;
+  pointer-events: none;
+}
+
 .odx-toast-container {
   --odx-toast-outer-offset: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
   --odx-toast-border-radius: calc(var(--odx-vertical-rythm-base-size) * 0.25);

package/package.json

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

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/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 {

package/scss/components/timepicker.component.scss

@@ -0,0 +1,56 @@
+@use 'sass:math';
+@use '../abstract/utils';
+@use '../layout/helpers';
+@use '../abstract/dimensions';
+@use '../abstract/typography';
+@use '../abstract/motion';
+
+.odx-timepicker {
+  $root: &;
+
+  @include utils.vertical-center-content();
+
+  justify-content: space-between;
+  width: 100%;
+
+  &__wrapper {
+    display: inline-flex;
+    max-width: dimensions.get-size(math.div(110, 24));
+  }
+
+  input[odxTimepickerControl] {
+    appearance: textfield;
+    font-weight: var(--odx-typography-font-weight-normal);
+    letter-spacing: var(--odx-typography-font-weight-normal-letter-spacing);
+    width: 100%;
+
+    &::placeholder {
+      @include typography.font-weight(normal);
+
+      color: var(--odx-input-control-color);
+      opacity: 0.65;
+    }
+
+    &::-webkit-inner-spin-button {
+      appearance: none;
+    }
+  }
+
+  &__option-list {
+    display: flex;
+    flex-direction: column;
+    max-height: calc(7 * dimensions.get-size(1.5) + var(--odx-vertical-rythm-base-size));
+  }
+
+  &-option {
+    &:active {
+      background-color: var(--odx-input-control-active-color);
+    }
+  }
+
+  &.is-readonly {
+    #{$root}__trigger {
+      @include utils.non-interactive();
+    }
+  }
+}

package/scss/core.scss

@@ -87,6 +87,7 @@ Layout
 @use 'components/tab-bar-item.component';
 @use 'components/tab-bar.component';
 @use 'components/table.component';
+@use 'components/timepicker.component';
 @use 'components/toast.component';
 @use 'components/toast-item.component';
 @use 'components/toggle-button.component';