@odx/ui 4.6.2 → 4.6.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @odx/ui
 
+## 4.6.3
+
+### Patch Changes
+
+- a4ad27f: chore: added styles for icon in togglebutton group button
+
 ## 4.6.2
 
 ### Patch Changes

package/core-theme.css

@@ -7002,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;
@@ -7035,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;
@@ -7071,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%;
@@ -7111,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.2",
+  "version": "4.6.3",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "peerDependencies": {

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;