Merge pull request #2530 from epam/improvement/2495-horizontal-tab-bu…

…tton-align-with-design-decrease-padding-to-3px-for-caption

[TabButton][VerticalTabButton]: Paddings & gaps decreased

changelog.md

@@ -4,6 +4,7 @@
 * Sass updated to the last version, warnings 'Mixed Declarations' fixed https://sass-lang.com/documentation/breaking-changes/mixed-decls/
 * [DataTable]: - `ColumnsConfigurationModal` - updated modal width from 420px to 560px according design, 'disabled' state for locked columns is changed to 'readonly', added vertical paddings to multiline column names.
 * [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
 
 **What's Fixed**
 *[VirtualList]: fixed offsets counting if rows have different height

epam-assets/theme/theme_6px.scss

@@ -132,8 +132,8 @@
     }
 
     .uui-tab-button:is(.uui-size-36, .uui-size-48, .uui-size-60) {
-        --uui-horizontal-padding: 12px;
-        --uui-horizontal-gap: 6px;
+        --uui-horizontal-padding: 6px;
+        --uui-horizontal-gap: 3px;
         --uui-icon-size: 18px;
         --uui-line-height: 18px;
         --uui-font-size: 14px;

uui/components/buttons/TabButton.module.scss

@@ -35,7 +35,6 @@
     --uui-tab_btn-min-width: var(--uui-size);
     --uui-tab_btn-padding: var(--uui-horizontal-padding);
     --uui-tab_btn-gap: var(--uui-horizontal-gap);
-    --uui-tab_btn-notification-gap: 9px;
     --uui-tab_btn-horizontal-caption-padding: var(--uui-horizontal-gap);
     --uui-tab_btn-vertical-caption-padding: calc((var(--uui-tab_btn-height) - var(--uui-tab_btn-line-height)) / 2);
     --uui-tab_btn-icon-height: var(--uui-icon-size);
@@ -79,48 +78,32 @@
     }
 
     :global(.uui-caption) {
+        display: flex;
+        position: relative;
+        height: var(--uui-tab_btn-line-height);
         line-height: var(--uui-tab_btn-line-height);
         font-size: var(--uui-tab_btn-font-size);
         padding-top: var(--uui-tab_btn-vertical-caption-padding);
         padding-bottom: var(--uui-tab_btn-vertical-caption-padding);
-    }
-
-    &:global {
-        &.uui-has-left-icon {
-            :global(.uui-caption) {
-                padding-inline-start: var(--uui-tab_btn-horizontal-caption-padding);
-            }
-        }
-
-        &.uui-has-right-icon {
-            :global(.uui-caption) {
-                padding-inline-end: var(--uui-tab_btn-horizontal-caption-padding);
-            }
+        padding-inline-start: var(--uui-tab_btn-horizontal-caption-padding);
+        padding-inline-end: var(--uui-tab_btn-horizontal-caption-padding);
+
+        .withNotify {
+            position: relative;
+            top: calc(0px - var(--uui-notify-size) / 2);
+            height: var(--uui-notify-size);
+            width: var(--uui-notify-size);
+            background: var(--uui-critical-50);
+            box-shadow: 0 1px 8px 0 var(--uui-critical-50);
+            border-radius: 50%;
         }
     }
 
-    &.withNotify {
-        :global(.uui-caption) {
-            padding-inline-end: var(--uui-tab_btn-notification-gap);
-
-            &::after {
-                content: '';
-                position: absolute;
-                height: var(--uui-notify-size);
-                width: var(--uui-notify-size);
-                background: var(--uui-critical-50);
-                box-shadow: 0 1px 8px 0 var(--uui-critical-50);
-                border-radius: 50%;
-            }
-        }
+    :global(.uui-icon) + :global(.uui-count_indicator) {
+        margin-inline-start: var(--uui-tab_btn-gap);
     }
 
-    :global(.uui-count_indicator) {
-        margin-inline-start: calc(var(--uui-tab_btn-gap) / 2);
-        margin-inline-end: calc(var(--uui-tab_btn-gap) / 2);
-
-        ~ :global(.uui-caption) {
-            padding-inline-end: 0;
-        }
+    :global(.uui-count_indicator):not(:last-child) {
+        margin-inline-end: var(--uui-tab_btn-gap);
     }
 }

uui/components/buttons/TabButton.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { cx, Icon, IDropdownToggler, IHasCaption, IHasIcon, uuiElement, uuiMarkers, Overwrite } from '@epam/uui-core';
 import { Clickable, ClickableComponentProps, IconContainer } from '@epam/uui-components';
 import { getIconClass } from './helper';
-import { CountIndicator } from '../widgets/CountIndicator';
+import { CountIndicator, CountIndicatorProps } from '../widgets/CountIndicator';
 import { systemIcons } from '../../icons/icons';
 import { settings } from '../../settings';
 import css from './TabButton.module.scss';
@@ -36,7 +36,6 @@ export const TabButton = React.forwardRef<HTMLButtonElement | HTMLAnchorElement
         css.root,
         'uui-tab-button',
         `uui-size-${props.size || settings.sizes.defaults.tabButton}`,
-        props.withNotify && css.withNotify,
         ...getIconClass(props),
         props.cx,
     ];
@@ -62,25 +61,25 @@ export const TabButton = React.forwardRef<HTMLButtonElement | HTMLAnchorElement
                     onClick={ !props.isDisabled ? props.onIconClick : undefined }
                 />
             ) }
-            { props.caption && (
+            { (props.caption || props.withNotify) && (
                 <div className={ cx(uuiElement.caption) }>
                     { props.caption }
+                    { props.withNotify && <div className={ css.withNotify } /> }
                 </div>
             ) }
+            { props.icon && props.iconPosition === 'right' && (
+                <IconContainer icon={ props.icon } onClick={ !props.isDisabled ? props.onIconClick : undefined } />
+            ) }
             { props.count !== undefined && props.count !== null && (
                 <CountIndicator
                     color="neutral"
-                    size="18"
+                    size={ settings.sizes.tabButton.countIndicator[props.size || settings.sizes.defaults.tabButton] as CountIndicatorProps['size'] }
                     caption={ props.count }
                 />
             ) }
-            { props.icon && props.iconPosition === 'right' && (
-                <IconContainer icon={ props.icon } onClick={ !props.isDisabled ? props.onIconClick : undefined } />
-            ) }
             { props.isDropdown && (
                 <IconContainer icon={ DropdownIcon } flipY={ props.isOpen } />
             )}
-
             { props.onClear && !props.isDisabled && (
                 <IconContainer cx={ uuiMarkers.clickable } icon={ ClearIcon } onClick={ props.onClear } />
             ) }

uui/components/buttons/__tests__/__snapshots__/TabButton.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`TabButton should be rendered correctly 1`] = `
 exports[`TabButton should be rendered correctly with props 1`] = `
 <button
   aria-disabled={false}
-  className="uui-button-box uui-enabled -clickable root uui-tab-button uui-size-48 withNotify uui-has-left-icon uui-no-right-icon"
+  className="uui-button-box uui-enabled -clickable root uui-tab-button uui-size-48 uui-has-left-icon uui-no-right-icon"
   onClick={[Function]}
   role="tab"
   tabIndex={0}
@@ -25,5 +25,12 @@ exports[`TabButton should be rendered correctly with props 1`] = `
       className=""
     />
   </div>
+  <div
+    className="uui-caption"
+  >
+    <div
+      className="withNotify"
+    />
+  </div>
 </button>
 `;

uui/components/buttons/__tests__/__snapshots__/VerticalTabButton.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`VerticalTabButton should be rendered correctly 1`] = `
 exports[`VerticalTabButton should be rendered correctly with props 1`] = `
 <button
   aria-disabled={false}
-  className="uui-button-box uui-enabled -clickable root uui-tab-button uui-size-48 withNotify uui-has-left-icon uui-no-right-icon root uui-vertical-tab-button"
+  className="uui-button-box uui-enabled -clickable root uui-tab-button uui-size-48 uui-has-left-icon uui-no-right-icon root uui-vertical-tab-button"
   onClick={[Function]}
   role="tab"
   tabIndex={0}
@@ -25,5 +25,12 @@ exports[`VerticalTabButton should be rendered correctly with props 1`] = `
       className=""
     />
   </div>
+  <div
+    className="uui-caption"
+  >
+    <div
+      className="withNotify"
+    />
+  </div>
 </button>
 `;

uui/settings.ts

@@ -270,5 +270,12 @@ export const settings: Settings = {
                 },
             },
         },
+        tabButton: {
+            countIndicator: {
+                36: '18',
+                48: '18',
+                60: '18',
+            },
+        },
     },
 };

uui/settings.types.ts

@@ -215,6 +215,10 @@ interface DataTableSizes {
     body: DataTableBodySizes;
 }
 
+interface TabButtonSizes {
+    countIndicator: Sizes;
+}
+
 interface ModalWindowDefaultSizes {
     width: string;
 }
@@ -238,6 +242,7 @@ interface SizesSettings {
     badge: BadgeSizes;
     dataTable: DataTableSizes;
     modal: ModalSizes;
+    tabButton: TabButtonSizes;
 }
 
 export interface Settings {