Merge pull request #2593 from epam/2582-vertical-tab-button-get-back-…

…paddings-as-per-previous-component-version

[VerticalTabButton]: reverted paddings & gaps to the previous state

changelog.md

@@ -11,7 +11,7 @@
 **What's Fixed**
 * [VirtualList]: fixed estimatedHeight calculations in components with pagination
 * [RTE]: fixed working of old iframe data structure with 'src' prop
-
+* [VerticalTabButton]: reverted paddings & gaps to previous values for all sizes
 
 # 5.10.2 - 24.10.2024
 
@@ -43,13 +43,11 @@
   * `renderNotFonud` prop is deprecated, please use `renderEmpty` instead
 * Sass updated to the last version, warnings 'Mixed Declarations' fixed https://sass-lang.com/documentation/breaking-changes/mixed-decls/
 * [Modals]: for mobile view (width is up to 720px) by default the modal position is fixed at the bottom edge of the screen
-* [TabButton][VerticalTabButton]: decreased paddings & gaps for all sizes according to the design
+* [TabButton][VerticalTabButton]: decreased paddings & gaps for all sizes according to the design, changed the order of placing the icon to the left of the text and the count indicator, now the first icon then the count indicator
 
 **What's Fixed**
 * [Form]: fixed bug when `beforeLeave` modal appears in case of redirect in `onSuccess` callback
 * [VirtualList]: fixed offsets counting if rows have different height
-* [TabButton][VerticalTabButton]: aligned with design, paddings & gaps decreased
-
 
 # 5.9.5 - 09.10.2024
 

epam-assets/theme/variables/6px_grid.scss

@@ -139,6 +139,11 @@
         --uui-font-size: 14px;
     }
 
+    .uui-tab-button.uui-vertical-tab-button:is(.uui-size-36, .uui-size-48, .uui-size-60) {
+        --uui-horizontal-padding: 12px;
+        --uui-horizontal-gap: 6px;
+    }
+
     .uui-tag {
         &.uui-size-18 {
             --uui-font-size: 12px;

epam-assets/theme/variables/electric.scss

@@ -270,16 +270,6 @@
 
     /* IconButton */
 
-    .uui-icon_button.uui-color-neutral {
-        --uui-color-5: var(--uui-secondary-5);
-        --uui-color-10: var(--uui-secondary-10);
-        --uui-color-20: var(--uui-secondary-20);
-        --uui-color-50: var(--uui-secondary-50);
-        --uui-color-60: var(--uui-secondary-60);
-        --uui-color-70: var(--uui-secondary-70);
-        --uui-color-contrast: var(--white);
-    }
-
     .uui-icon_button.uui-color-white {
         --uui-icon_btn-hover: var(--uui-neutral-20);
         --uui-icon_btn-active: var(--uui-neutral-30);
@@ -505,4 +495,4 @@
             font-size: 18px;
         }
     }
-}
+}

uui/components/buttons/VerticalTabButton.module.scss

@@ -4,4 +4,24 @@
     border-bottom: 0 none;
     border-inline-start: var(--uui-tab-line-width) solid transparent;
     text-align: start;
+    column-gap: 0;
+
+    :global(.uui-caption) {
+        &:first-child {
+            padding-inline-start: 0;
+        }
+
+        &:last-child {
+            padding-inline-end: 0;
+        }
+    }
+
+    :global(.uui-count_indicator) {
+        margin-inline-start: 3px;
+        margin-inline-end: var(--uui-horizontal-gap);
+
+        ~ :global(.uui-caption) {
+            padding-inline-end: 0;
+        }
+    }
 }