@odx/ui 4.6.2 → 4.6.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @odx/ui
 
+## 4.6.4
+
+### Patch Changes
+
+- 9431992: feat: Implemented a clearable input option for the select component, allowing users to easily reset the selected value
+
+## 4.6.3
+
+### Patch Changes
+
+- a4ad27f: chore: added styles for icon in togglebutton group button
+
 ## 4.6.2
 
 ### 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);
@@ -6142,7 +6147,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 +6158,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;
@@ -7002,9 +7011,6 @@ html body .odx-fs-italic {
 }
 
 .odx-toggle-button {
-  padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.25);
-  padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.25);
-  line-height: calc(var(--odx-vertical-rythm-base-size) * 1);
   transition-delay: 0ms;
   transition-duration: var(--odx-v-transition-duration);
   transition-property: color;
@@ -7035,13 +7041,18 @@ html body .odx-fs-italic {
   pointer-events: none;
 }
 .odx-toggle-button__indicator {
-  border-radius: var(--odx-toggle-button-border-radius);
   transition-delay: 0ms;
   transition-duration: var(--odx-v-transition-duration);
   transition-property: background-color, outline-color;
   transition-timing-function: var(--odx-v-transition-easing-fn);
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
   padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
+  display: flex;
+  align-items: center;
+  block-size: calc(var(--odx-vertical-rythm-base-size) * 1.1667);
+  border-radius: var(--odx-toggle-button-border-radius);
+  -moz-column-gap: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
+       column-gap: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
 }
 .odx-toggle-button.is-readonly .odx-toggle-button__indicator, .odx-toggle-button.is-disabled .odx-toggle-button__indicator, .odx-toggle-button-group.is-active .odx-toggle-button__indicator, .odx-toggle-button-group.has-error .odx-toggle-button__indicator {
   background-color: transparent;
@@ -7071,8 +7082,8 @@ html body .odx-fs-italic {
   pointer-events: none;
 }
 .odx-toggle-button__label {
-  padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.25);
-  padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.25);
+  padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
+  padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
   cursor: pointer;
   text-align: center;
   width: 100%;
@@ -7111,12 +7122,10 @@ html body .odx-fs-italic {
   z-index: var(--odx-v-layer-1);
 }
 .odx-toggle-button-group__indicator {
-  margin-top: calc(var(--odx-vertical-rythm-base-size) * 0.5);
-  margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.5);
-  height: calc(var(--odx-vertical-rythm-base-size) * 1);
   outline: var(--odx-v-outline-width) solid transparent;
   outline-offset: calc(-1 * var(--odx-v-outline-width));
   background-color: var(--odx-c-highlight);
+  block-size: calc(var(--odx-vertical-rythm-base-size) * 1.1667);
   border-radius: var(--odx-toggle-button-border-radius);
 }
 .odx-toggle-button-group.is-disabled .odx-toggle-button-group__indicator {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odx/ui",
-  "version": "4.6.2",
+  "version": "4.6.4",
   "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/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/toggle-button-group.component.scss

@@ -20,10 +20,10 @@
   z-index: var(--odx-v-layer-1);
 
   &__indicator {
-    @include dimensions.height(2, 1);
     @include utils.with-outline();
 
     background-color: var(--odx-c-highlight);
+    block-size: dimensions.get-size(math.div(28, 24));
     border-radius: var(--odx-toggle-button-border-radius);
 
     #{$root}.is-disabled & {

package/scss/components/toggle-button.component.scss

@@ -7,7 +7,6 @@
 .odx-toggle-button {
   $root: &;
 
-  @include dimensions.line-height(1.5, 1);
   @include motion.transition(color);
   @include typography.font-size(0);
   @include typography.font-weight(medium);
@@ -38,10 +37,13 @@
   }
 
   &__indicator {
-    border-radius: var(--odx-toggle-button-border-radius);
-
     @include motion.transition(background-color outline-color);
     @include dimensions.padding-x(math.div(1, 3));
+    @include utils.vertical-center-content();
+
+    block-size: dimensions.get-size(math.div(28, 24));
+    border-radius: var(--odx-toggle-button-border-radius);
+    column-gap: dimensions.get-size(math.div(1, 6));
 
     #{$root}.is-readonly &,
     #{$root}.is-disabled &,
@@ -58,7 +60,7 @@
   }
 
   &__label {
-    @include dimensions.padding-y(0.25);
+    @include dimensions.padding-y(math.div(1, 6));
 
     cursor: pointer;
     text-align: center;