From 3cfbad6bdc38f16fb5a2af102544e506447983a1 Mon Sep 17 00:00:00 2001 From: Inomdzhon Mirdzhamolov Date: Fri, 30 Aug 2024 16:27:06 +0300 Subject: [PATCH] feat(ToolButton): apply design fixes --- .../ToolButton/ToolButton.module.css | 15 ++++++++---- .../components/ToolButton/ToolButton.test.tsx | 24 ++++++++++++++++--- .../src/components/ToolButton/ToolButton.tsx | 18 ++++++++++++-- ...oolbutton-android-chromium-dark-1-snap.png | 4 ++-- ...olbutton-android-chromium-light-1-snap.png | 4 ++-- .../toolbutton-ios-webkit-dark-1-snap.png | 4 ++-- .../toolbutton-ios-webkit-light-1-snap.png | 4 ++-- .../toolbutton-vkcom-chromium-dark-1-snap.png | 4 ++-- ...toolbutton-vkcom-chromium-light-1-snap.png | 4 ++-- .../toolbutton-vkcom-firefox-dark-1-snap.png | 4 ++-- .../toolbutton-vkcom-firefox-light-1-snap.png | 4 ++-- .../toolbutton-vkcom-webkit-dark-1-snap.png | 4 ++-- .../toolbutton-vkcom-webkit-light-1-snap.png | 4 ++-- 13 files changed, 67 insertions(+), 30 deletions(-) diff --git a/packages/vkui/src/components/ToolButton/ToolButton.module.css b/packages/vkui/src/components/ToolButton/ToolButton.module.css index b8917f34598..23e605a0fa9 100644 --- a/packages/vkui/src/components/ToolButton/ToolButton.module.css +++ b/packages/vkui/src/components/ToolButton/ToolButton.module.css @@ -5,7 +5,7 @@ text-decoration: none; border: 0; margin: 0; - padding: 10px; + padding: var(--vkui--spacing_size_m); border-radius: var(--vkui--size_border_radius_paper--regular); inline-size: 100%; flex-grow: 1; @@ -17,6 +17,10 @@ line-height: var(--vkui--font_caption1--line_height--regular); } +.ToolButton--padding-size-xl { + padding: var(--vkui--spacing_size_xl); +} + .ToolButton--rounded { border-radius: var(--vkui--size_border_radius_rounded--regular); } @@ -71,15 +75,15 @@ } .ToolButton--mode-primary.ToolButton--appearance-neutral { - background-color: var(--vkui--color_background_secondary); + background-color: var(--vkui--color_background_modal_inverse); } .ToolButton--mode-primary.ToolButton--appearance-neutral.ToolButton--hover { - background-color: var(--vkui--color_background_secondary--hover); + background-color: var(--vkui--color_background_modal_inverse--hover); } .ToolButton--mode-primary.ToolButton--appearance-neutral.ToolButton--active { - background-color: var(--vkui--color_background_secondary--active); + background-color: var(--vkui--color_background_modal_inverse--active); } /* Mode = Secondary */ @@ -122,7 +126,8 @@ color: var(--vkui--color_text_primary); } -.ToolButton--mode-primary.ToolButton--appearance-accent { +.ToolButton--mode-primary.ToolButton--appearance-accent, +.ToolButton--mode-primary.ToolButton--appearance-neutral { color: var(--vkui--color_text_contrast_themed); } diff --git a/packages/vkui/src/components/ToolButton/ToolButton.test.tsx b/packages/vkui/src/components/ToolButton/ToolButton.test.tsx index f67f53fe315..f72eaefa416 100644 --- a/packages/vkui/src/components/ToolButton/ToolButton.test.tsx +++ b/packages/vkui/src/components/ToolButton/ToolButton.test.tsx @@ -1,14 +1,20 @@ import { render, screen } from '@testing-library/react'; import { Icon20Add, Icon24Add } from '@vkontakte/icons'; import { baselineComponent } from '../../testing/utils'; -import { ToolButton, type ToolButtonProps } from './ToolButton'; +import { getRoundedClassName, ToolButton, type ToolButtonProps } from './ToolButton'; const ToolButtonTest = (props: Omit) => ( - + ); const button = () => screen.getByTestId('custom-btn'); -describe('ToolButton', () => { +describe(ToolButton, () => { baselineComponent((props) => ToolButton); it('Component: ToolButton is handled as a native button', () => { @@ -21,3 +27,15 @@ describe('ToolButton', () => { expect(button().tagName.toLowerCase()).toMatch('a'); }); }); + +describe(getRoundedClassName, () => { + it('should return class name', () => { + expect(getRoundedClassName('row', true)).not.toBeUndefined(); + expect(getRoundedClassName('row', false)).not.toBeUndefined(); + expect(getRoundedClassName('column', false)).not.toBeUndefined(); + }); + + it('should return undefined', () => { + expect(getRoundedClassName('column', true)).toBeUndefined(); + }); +}); diff --git a/packages/vkui/src/components/ToolButton/ToolButton.tsx b/packages/vkui/src/components/ToolButton/ToolButton.tsx index c87ed81d939..8db98c2c49c 100644 --- a/packages/vkui/src/components/ToolButton/ToolButton.tsx +++ b/packages/vkui/src/components/ToolButton/ToolButton.tsx @@ -36,7 +36,7 @@ export interface ToolButtonProps extends TappableProps, AdaptiveIconRendererProp /** * Задаёт `50%` закругления для контейнера. * - * > Note: игнорируется при передаче `children`. + * > Note: игнорируется при `direction="column"` если передан `children`. */ rounded?: boolean; } @@ -71,7 +71,7 @@ export const ToolButton = ({ className={classNames( className, styles['ToolButton'], - rounded && !hasChildren && styles['ToolButton--rounded'], + rounded && getRoundedClassName(direction, hasChildren), stylesMode[mode], stylesAppearance[appearance], stylesDirection[direction], @@ -84,3 +84,17 @@ export const ToolButton = ({ ); }; + +export function getRoundedClassName( + direction: 'row' | 'column', + hasChildren: boolean, +): string | undefined { + switch (direction) { + case 'row': + return hasChildren + ? classNames(styles['ToolButton--rounded'], styles['ToolButton--padding-size-xl']) + : styles['ToolButton--rounded']; + case 'column': + return hasChildren ? undefined : styles['ToolButton--rounded']; + } +} diff --git a/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-android-chromium-dark-1-snap.png b/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-android-chromium-dark-1-snap.png index 839484c68b7..3cb686fb986 100644 --- a/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-android-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-android-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7b6b2d4607858f5c9ca2d31e68a57bda2ba10c7fff3ddf00bd3c52028b12e8af -size 120361 +oid sha256:ab50b41b7b03bbf3bb5c6e279e77cf8a604218a2ab0f003b93d098b3c1f44b8d +size 106706 diff --git a/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-android-chromium-light-1-snap.png b/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-android-chromium-light-1-snap.png index 87bf18e0462..54d34691892 100644 --- a/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-android-chromium-light-1-snap.png +++ b/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-android-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a921919d7382bd785fa30c498dd9617c7a07f37d5210da748c353cab85fc3f2c -size 119192 +oid sha256:e896ae6cdbadcacde61e54c0737e30bb1aec2288b3ee61251be7487ec46db489 +size 107011 diff --git a/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-ios-webkit-dark-1-snap.png index d5d32690644..cbfac95c3a6 100644 --- a/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-ios-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-ios-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:87a327efe1b22a05abe65407022ea7bcc13474cdeeb920df546c60f6cadea30d -size 111648 +oid sha256:57fce899c0c61ce846a2be5e6046a191957ba5f1255aa2a193fddb85282ddd9b +size 110449 diff --git a/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-ios-webkit-light-1-snap.png b/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-ios-webkit-light-1-snap.png index 9d97e32ae36..57b4fc5cda0 100644 --- a/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-ios-webkit-light-1-snap.png +++ b/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-ios-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:993c7e291be001df966ba4b039bb5a092e7bfd544d169c19930a91bcad252274 -size 110954 +oid sha256:7259a430255ab8da95b23c9c84a9625feb2b0f6198e6ef69f655b34ee614a06a +size 110007 diff --git a/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-vkcom-chromium-dark-1-snap.png index ec0b725d279..b93404e9ad5 100644 --- a/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-vkcom-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-vkcom-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:450a140c1f04e87a42b42fa53d8138dc155ef16ebe5b1bdf1b0d61058a036263 -size 84393 +oid sha256:6324d92ab4ffcb5a23fed18e8836f7d726df7cea6d62859897f18df16a7cab60 +size 75414 diff --git a/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-vkcom-chromium-light-1-snap.png index 9aa988f016d..afbcb973240 100644 --- a/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-vkcom-chromium-light-1-snap.png +++ b/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-vkcom-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2df90246e6c5a5315c28bc4c5d4e7cbe9538ce16aa304eca124decc7ce54d86c -size 84233 +oid sha256:42254a9fbb79a4f4b02a730f3057b63be0e460a988a8cb061b8da17f4436f6c6 +size 76180 diff --git a/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-vkcom-firefox-dark-1-snap.png index 85d66d6fde5..5b4a257cb73 100644 --- a/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-vkcom-firefox-dark-1-snap.png +++ b/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-vkcom-firefox-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:55ec3aebfdd65af270a1ae7b67015ef51e47b540ea8830b68641b8e03ef494ea -size 101157 +oid sha256:004afb39c7f271d0cc860b1fbbe37ef89270f05722f4bcfbb04cd78c20ac0f5e +size 98849 diff --git a/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-vkcom-firefox-light-1-snap.png index a160abde734..d6488bf625b 100644 --- a/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-vkcom-firefox-light-1-snap.png +++ b/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-vkcom-firefox-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d47d22d9b6d186bc9cf4386aea2aa37fc77660201b9c3e6f880725f778699325 -size 103634 +oid sha256:202e5bc5510233d2188b4a905c6259c08dc47a4a0ff793f3e74d01bddd97c238 +size 101003 diff --git a/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-vkcom-webkit-dark-1-snap.png index db096b6eed2..6c055cecdff 100644 --- a/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-vkcom-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-vkcom-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5769a072cb51d621ec2514203c4c3fe7456035c56a4be60fef739fe1d138196e -size 78089 +oid sha256:c5e17a5ab410e9386035c79d028ac103d36b4edcdc21b6849daa6466046ab785 +size 77489 diff --git a/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-vkcom-webkit-light-1-snap.png index 39ec98311dd..2a21ba69a86 100644 --- a/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-vkcom-webkit-light-1-snap.png +++ b/packages/vkui/src/components/ToolButton/__image_snapshots__/toolbutton-vkcom-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b12c605d9753fa4384c537ad1e87fb973be43e756d1eb93d499fcee2cb9a86ce -size 78510 +oid sha256:b37c081d58807e57af917bf11ab57bc3f6e51df1569f0c85dccc984e7ee8a57c +size 77689