@odx/ui 4.6.1 → 4.6.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @odx/ui
 
+## 4.6.3
+
+### Patch Changes
+
+- a4ad27f: chore: added styles for icon in togglebutton group button
+
+## 4.6.2
+
+### Patch Changes
+
+- ee17aeb: fix: set minimal width for tab bar item in tab bar component
+
 ## 4.6.1
 
 ### Patch Changes

package/core-theme.css

@@ -6613,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);
@@ -6632,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 {
@@ -6998,9 +7002,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;
@@ -7031,13 +7032,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;
@@ -7067,8 +7073,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%;
@@ -7107,12 +7113,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.1",
+  "version": "4.6.3",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "peerDependencies": {

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);

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;