diff --git a/changelog.md b/changelog.md index 765c7f5b73..1d3aa080d8 100644 --- a/changelog.md +++ b/changelog.md @@ -10,7 +10,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 @@ -42,13 +42,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 diff --git a/epam-assets/theme/variables/6px_grid.scss b/epam-assets/theme/variables/6px_grid.scss index d321459436..0b8fb3c204 100644 --- a/epam-assets/theme/variables/6px_grid.scss +++ b/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; diff --git a/epam-assets/theme/variables/electric.scss b/epam-assets/theme/variables/electric.scss index 2b968bdc1f..a480214877 100644 --- a/epam-assets/theme/variables/electric.scss +++ b/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; } } -} \ No newline at end of file +} diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-SizeVariants-EduverseDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-SizeVariants-EduverseDark-NotSkin.png index 8ddbacb1a5..91200a6921 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-SizeVariants-EduverseDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-SizeVariants-EduverseDark-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-SizeVariants-EduverseLight-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-SizeVariants-EduverseLight-NotSkin.png index c9a52924f6..0bbf1d87c4 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-SizeVariants-EduverseLight-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-SizeVariants-EduverseLight-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-SizeVariants-Electric-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-SizeVariants-Electric-NotSkin.png index edcb69d163..7cf27415de 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-SizeVariants-Electric-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-SizeVariants-Electric-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-SizeVariants-Loveship-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-SizeVariants-Loveship-NotSkin.png index 7236da31b3..8ddc70f2bf 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-SizeVariants-Loveship-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-SizeVariants-Loveship-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-SizeVariants-LoveshipDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-SizeVariants-LoveshipDark-NotSkin.png index 41aa402c21..123334c60c 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-SizeVariants-LoveshipDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-SizeVariants-LoveshipDark-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-SizeVariants-Promo-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-SizeVariants-Promo-NotSkin.png index 9717fb9b77..2f341ebf2f 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-SizeVariants-Promo-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-SizeVariants-Promo-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States--PseudoStateHover-EduverseDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States--PseudoStateHover-EduverseDark-NotSkin.png index ff0f8e510f..ef2aab4ddd 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States--PseudoStateHover-EduverseDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States--PseudoStateHover-EduverseDark-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States--PseudoStateHover-EduverseLight-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States--PseudoStateHover-EduverseLight-NotSkin.png index a8a6f9027e..3e12ad132c 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States--PseudoStateHover-EduverseLight-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States--PseudoStateHover-EduverseLight-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States--PseudoStateHover-Electric-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States--PseudoStateHover-Electric-NotSkin.png index 6b7928fd0a..ad07172715 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States--PseudoStateHover-Electric-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States--PseudoStateHover-Electric-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States--PseudoStateHover-Loveship-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States--PseudoStateHover-Loveship-NotSkin.png index 21483627ba..ab3ff825be 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States--PseudoStateHover-Loveship-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States--PseudoStateHover-Loveship-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States--PseudoStateHover-LoveshipDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States--PseudoStateHover-LoveshipDark-NotSkin.png index e83a617a6e..30efe0cb33 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States--PseudoStateHover-LoveshipDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States--PseudoStateHover-LoveshipDark-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States--PseudoStateHover-Promo-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States--PseudoStateHover-Promo-NotSkin.png index cc5564e83a..2668a75737 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States--PseudoStateHover-Promo-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States--PseudoStateHover-Promo-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States-EduverseDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States-EduverseDark-NotSkin.png index ca699a514c..40c3c324a4 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States-EduverseDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States-EduverseDark-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States-EduverseLight-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States-EduverseLight-NotSkin.png index 334a87f6cf..63689cc103 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States-EduverseLight-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States-EduverseLight-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States-Electric-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States-Electric-NotSkin.png index 7c3532ab17..030d61f6ca 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States-Electric-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States-Electric-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States-Loveship-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States-Loveship-NotSkin.png index a8cc1a24f4..84ae36d8f7 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States-Loveship-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States-Loveship-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States-LoveshipDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States-LoveshipDark-NotSkin.png index a203a4ca02..7aaa69900d 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States-LoveshipDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States-LoveshipDark-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States-Promo-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States-Promo-NotSkin.png index 5ea94fbd99..11aecc408d 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States-Promo-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/VerticalTabButton-States-Promo-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-SizeVariants-EduverseDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-SizeVariants-EduverseDark-NotSkin.png index 0afce6aba9..01d79ccb35 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-SizeVariants-EduverseDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-SizeVariants-EduverseDark-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-SizeVariants-EduverseLight-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-SizeVariants-EduverseLight-NotSkin.png index dff15eb518..04e0d77cb8 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-SizeVariants-EduverseLight-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-SizeVariants-EduverseLight-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-SizeVariants-Electric-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-SizeVariants-Electric-NotSkin.png index 95222527f3..e720c92768 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-SizeVariants-Electric-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-SizeVariants-Electric-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-SizeVariants-Loveship-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-SizeVariants-Loveship-NotSkin.png index ae692ee8a7..f6929b938d 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-SizeVariants-Loveship-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-SizeVariants-Loveship-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-SizeVariants-LoveshipDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-SizeVariants-LoveshipDark-NotSkin.png index ba54a655eb..1c68511d1e 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-SizeVariants-LoveshipDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-SizeVariants-LoveshipDark-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-SizeVariants-Promo-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-SizeVariants-Promo-NotSkin.png index 86c1c7a1cc..2fe91b4131 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-SizeVariants-Promo-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-SizeVariants-Promo-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-States-EduverseDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-States-EduverseDark-NotSkin.png index b5bb965cd9..38e40b3769 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-States-EduverseDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-States-EduverseDark-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-States-EduverseLight-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-States-EduverseLight-NotSkin.png index 0669b8ec43..edbe002107 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-States-EduverseLight-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-States-EduverseLight-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-States-Electric-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-States-Electric-NotSkin.png index 3ce6dd6329..98cb1f4df3 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-States-Electric-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-States-Electric-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-States-Loveship-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-States-Loveship-NotSkin.png index dde49d5f05..de8afdd02f 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-States-Loveship-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-States-Loveship-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-States-LoveshipDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-States-LoveshipDark-NotSkin.png index 22241b3782..a79f80d733 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-States-LoveshipDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-States-LoveshipDark-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-States-Promo-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-States-Promo-NotSkin.png index 1ca2476f97..dbba3e1ace 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-States-Promo-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/VerticalTabButton-States-Promo-NotSkin.png differ diff --git a/uui/components/buttons/VerticalTabButton.module.scss b/uui/components/buttons/VerticalTabButton.module.scss index d891711e42..43f3529969 100644 --- a/uui/components/buttons/VerticalTabButton.module.scss +++ b/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; + } + } }