@odx/ui 4.6.3 → 4.6.5

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @odx/ui
 
+## 4.6.5
+
+### Patch Changes
+
+- 2d8a4a5: timepicker input width fixed
+- 9431992: feat: Implemented a clearable input option for the select component, allowing users to easily reset the selected value
+
 ## 4.6.3
 
 ### Patch Changes

package/core-theme.css

@@ -2785,6 +2785,7 @@ html body .odx-fs-italic {
 }
 .odx-area-header__title {
   color: var(--odx-area-header-title-color);
+  font-weight: 600;
 }
 .odx-area-header__subtitle {
   overflow: clip;
@@ -2841,6 +2842,10 @@ html body .odx-fs-italic {
     padding-top: calc(var(--odx-vertical-rythm-base-size) * 1);
   }
 }
+.odx-area-header--xlarge .odx-area-header__title {
+  font-weight: var(--odx-typography-font-weight-medium);
+  letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
+}
 @media (min-width: 768px) {
   .odx-area-header--xlarge .odx-avatar {
     margin-top: calc(var(--odx-vertical-rythm-base-size) * -0.5);
@@ -3948,6 +3953,7 @@ html body .odx-fs-italic {
   align-items: center;
 }
 .odx-datepicker__trigger-wrapper {
+  gap: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
   margin: 0 0 0 auto;
 }
 .odx-datepicker.is-readonly .odx-datepicker__trigger-wrapper > .odx-button {
@@ -3972,6 +3978,7 @@ html body .odx-fs-italic {
   align-items: center;
 }
 .odx-daterangepicker__trigger-wrapper {
+  gap: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
   margin: 0 0 0 auto;
 }
 .odx-daterangepicker.is-readonly .odx-daterangepicker__trigger-wrapper > .odx-button {
@@ -6142,7 +6149,7 @@ html body .odx-fs-italic {
   align-items: center;
   cursor: pointer;
   flex: 1 1 100%;
-  gap: calc(var(--odx-vertical-rythm-base-size) * 0.25);
+  gap: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
   height: 100%;
   max-width: var(--odx-select-max-width);
   width: 100%;
@@ -6153,12 +6160,16 @@ html body .odx-fs-italic {
      -moz-user-select: unset;
           user-select: unset;
 }
+.odx-select__clear {
+  margin-inline-start: auto;
+}
 .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: clip;
   text-overflow: ellipsis;
   white-space: nowrap;
+  display: flex;
   flex: 1 1 auto;
   gap: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
   overflow: hidden;
@@ -6847,12 +6858,15 @@ html body .odx-fs-italic {
 .odx-timepicker {
   display: flex;
   align-items: center;
+  gap: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
   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__trigger-wrapper {
+  gap: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
 }
 .odx-timepicker input[odxTimepickerControl] {
   -webkit-appearance: textfield;

package/package.json

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

package/scss/components/area-header.component.scss

@@ -55,6 +55,7 @@
     @extend .odx-title-6;
 
     color: var(--odx-area-header-title-color);
+    font-weight: 600;
   }
 
   &__subtitle {
@@ -137,6 +138,7 @@
 
     .odx-area-header__title {
       @extend .odx-title-2;
+      @include typography.font-weight(medium);
     }
 
     .odx-area-header__subtitle {

package/scss/components/datepicker.component.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
 @use '../abstract/utils';
 
 .odx-datepicker {
@@ -6,6 +8,7 @@
   @include utils.vertical-center-content();
 
   &__trigger-wrapper {
+    gap: dimensions.get-size(math.div(1, 3));
     margin: 0 0 0 auto;
 
     > .odx-button {

package/scss/components/daterangepicker.component.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @use '../abstract/utils';
 @use '../abstract/dimensions';
 
@@ -7,6 +8,7 @@
   @include utils.vertical-center-content();
 
   &__trigger-wrapper {
+    gap: dimensions.get-size(math.div(1, 3));
     margin: 0 0 0 auto;
 
     > .odx-button {

package/scss/components/select.component.scss

@@ -17,7 +17,7 @@
 
     cursor: pointer;
     flex: 1 1 100%;
-    gap: dimensions.get-size(math.div(6, 24));
+    gap: dimensions.get-size(math.div(1, 3));
     height: 100%;
     max-width: var(--odx-select-max-width);
     width: 100%;
@@ -30,11 +30,16 @@
     }
   }
 
+  &__clear {
+    margin-inline-start: auto;
+  }
+
   &__placeholder,
   &__value {
     @include dimensions.padding-y(math.div(4, 24));
     @include typography.prevent-text-overflow();
 
+    display: flex;
     flex: 1 1 auto;
     gap: dimensions.get-size(math.div(4, 24));
     overflow: hidden;

package/scss/components/timepicker.component.scss

@@ -10,12 +10,16 @@
 
   @include utils.vertical-center-content();
 
+  gap: dimensions.get-size(math.div(4, 24));
   justify-content: space-between;
   width: 100%;
 
   &__wrapper {
     display: inline-flex;
-    max-width: dimensions.get-size(math.div(110, 24));
+  }
+
+  &__trigger-wrapper {
+    gap: dimensions.get-size(math.div(1, 3));
   }
 
   input[odxTimepickerControl] {