@odx/ui 4.6.0 → 4.6.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @odx/ui
 
+## 4.6.2
+
+### Patch Changes
+
+- ee17aeb: fix: set minimal width for tab bar item in tab bar component
+
+## 4.6.1
+
+### Patch Changes
+
+- 7976ed5: fix: main menu item label do not truncate
+
 ## 4.6.0
 
 ### Minor Changes

package/core-theme.css

@@ -5057,10 +5057,9 @@ html body .odx-fs-italic {
 }
 
 .odx-main-menu-item {
-  margin-top: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
-  margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
-  height: calc(var(--odx-vertical-rythm-base-size) * 2.3334);
+  padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
+  padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
   padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
   transition-delay: 0ms;
   transition-duration: var(--odx-v-transition-duration);
@@ -5072,8 +5071,6 @@ html body .odx-fs-italic {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  display: flex;
-  align-items: center;
   font-weight: var(--odx-typography-font-weight-medium);
   letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
   overflow: clip;
@@ -5082,6 +5079,7 @@ html body .odx-fs-italic {
   background-color: transparent;
   border-radius: var(--odx-v-border-radius);
   color: var(--odx-main-menu-item-text-color);
+  line-height: 1;
 }
 .odx-main-menu-item:focus-visible {
   outline-color: var(--odx-c-focus-outline);
@@ -6615,10 +6613,14 @@ html body .odx-fs-italic {
   background-color: transparent;
   border-radius: var(--odx-v-border-radius-controls);
   cursor: pointer;
+  min-inline-size: calc(var(--odx-vertical-rythm-base-size) * 3);
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
 }
+.odx-tab-bar-item__label {
+  flex: 1;
+}
 @media (hover: hover){
 .odx-tab-bar-item:hover {
   background-color: var(--blue-700-5);
@@ -6634,14 +6636,14 @@ html body .odx-fs-italic {
   font-size: calc(var(--odx-vertical-rythm-base-size) * 1);
 }
 .odx-tab-bar-item .odx-icon:first-child {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 .odx-tab-bar-item .odx-icon:last-child:not(:first-child) {
   transition-delay: 0ms;
   transition-duration: var(--odx-v-transition-duration);
   transition-property: color;
   transition-timing-function: var(--odx-v-transition-easing-fn);
-  margin-right: 0;
+  margin-inline-end: 0;
 }
 @media (hover: hover){
 .odx-tab-bar-item .odx-icon:last-child:not(:first-child):hover {

package/package.json

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

package/scss/components/main-menu-item.component.scss

@@ -18,17 +18,16 @@
 }
 
 .odx-main-menu-item {
-  @include dimensions.height(3, math.div(7, 3));
-  @include dimensions.padding-x(math.div(2, 3));
+  @include dimensions.padding(math.div(2, 3));
   @include motion.transition(color background-color outline);
   @include utils.interactive(false);
-  @include utils.vertical-center-content();
   @include typography.font-weight(medium);
   @include typography.prevent-text-overflow();
 
   background-color: transparent;
   border-radius: var(--odx-v-border-radius);
   color: var(--odx-main-menu-item-text-color);
+  line-height: 1;
 
   &:hover {
     background-color: var(--odx-main-menu-item-background-color-hover);

package/scss/components/tab-bar-item.component.scss

@@ -15,8 +15,13 @@
   background-color: transparent;
   border-radius: var(--odx-v-border-radius-controls);
   cursor: pointer;
+  min-inline-size: dimensions.get-size(math.div(72, 24));
   user-select: none;
 
+  &__label {
+    flex: 1;
+  }
+
   &:hover {
     background-color: var(--blue-700-5);
   }
@@ -28,13 +33,13 @@
     font-size: dimensions.get-size(1);
 
     &:first-child {
-      margin-left: 0;
+      margin-inline-start: 0;
     }
 
     &:last-child:not(:first-child) {
       @include motion.transition(color);
 
-      margin-right: 0;
+      margin-inline-end: 0;
 
       &:hover {
         color: var(--odx-c-highlight);