diff --git a/packages/vkui/src/components/ToolButton/ToolButton.module.css b/packages/vkui/src/components/ToolButton/ToolButton.module.css index 23e605a0fa9..3c6ac650066 100644 --- a/packages/vkui/src/components/ToolButton/ToolButton.module.css +++ b/packages/vkui/src/components/ToolButton/ToolButton.module.css @@ -11,14 +11,13 @@ flex-grow: 1; flex-basis: 0; align-items: center; - justify-content: center; font-family: var(--vkui--font_caption1--font_family--regular); font-size: var(--vkui--font_caption1--font_size--regular); line-height: var(--vkui--font_caption1--line_height--regular); } -.ToolButton--padding-size-xl { - padding: var(--vkui--spacing_size_xl); +.ToolButton--withFakeEndIcon { + padding-inline-end: var(--vkui--spacing_size_xl); } .ToolButton--rounded { @@ -46,10 +45,12 @@ /* ToolButton's directions */ .ToolButton--direction-row { flex-direction: row; + justify-content: flex-start; } .ToolButton--direction-column { flex-direction: column; + justify-content: center; } .ToolButton--direction-row .ToolButton__text { diff --git a/packages/vkui/src/components/ToolButton/ToolButton.stories.tsx b/packages/vkui/src/components/ToolButton/ToolButton.stories.tsx index a5f457fb0b1..e7f855ddc5c 100644 --- a/packages/vkui/src/components/ToolButton/ToolButton.stories.tsx +++ b/packages/vkui/src/components/ToolButton/ToolButton.stories.tsx @@ -21,4 +21,11 @@ export const Playground: Story = { IconCompact: Icon20Add, IconRegular: Icon24Add, }, + decorators: [ + (Component, context) => ( +
+ +
+ ), + ], }; diff --git a/packages/vkui/src/components/ToolButton/ToolButton.tsx b/packages/vkui/src/components/ToolButton/ToolButton.tsx index 8db98c2c49c..db8c53314a5 100644 --- a/packages/vkui/src/components/ToolButton/ToolButton.tsx +++ b/packages/vkui/src/components/ToolButton/ToolButton.tsx @@ -72,6 +72,7 @@ export const ToolButton = ({ className, styles['ToolButton'], rounded && getRoundedClassName(direction, hasChildren), + hasChildren && direction === 'row' && styles['ToolButton--withFakeEndIcon'], stylesMode[mode], stylesAppearance[appearance], stylesDirection[direction], @@ -91,9 +92,7 @@ export function getRoundedClassName( ): string | undefined { switch (direction) { case 'row': - return hasChildren - ? classNames(styles['ToolButton--rounded'], styles['ToolButton--padding-size-xl']) - : styles['ToolButton--rounded']; + return 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 3cb686fb986..02b531faf97 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:ab50b41b7b03bbf3bb5c6e279e77cf8a604218a2ab0f003b93d098b3c1f44b8d -size 106706 +oid sha256:ea5c8416d10a64bec940ed7f3368255e63540a69a3d71dfa7201c83af1c9d363 +size 106697 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 54d34691892..7b88e3a3f16 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:e896ae6cdbadcacde61e54c0737e30bb1aec2288b3ee61251be7487ec46db489 -size 107011 +oid sha256:732b9987851af7231b3f2e194d8b512cda040a835690cf93e474a7cd92618f39 +size 107019 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 cbfac95c3a6..2f3d5c99082 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:57fce899c0c61ce846a2be5e6046a191957ba5f1255aa2a193fddb85282ddd9b -size 110449 +oid sha256:44c7c6460f288e9665c2822518b7c267047ee34671497cbf6c656361e070309d +size 110434 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 57b4fc5cda0..105104e9e87 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:7259a430255ab8da95b23c9c84a9625feb2b0f6198e6ef69f655b34ee614a06a -size 110007 +oid sha256:bc88c67d27414a968d8eed0853382f00496b1ea2c4793baa8c62a22c7a78d98f +size 110011 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 b93404e9ad5..650391cd597 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:6324d92ab4ffcb5a23fed18e8836f7d726df7cea6d62859897f18df16a7cab60 -size 75414 +oid sha256:156ac49ba7f4da39689e0a9a436d0d29989227eff335a23e0aa8564d3333236b +size 75424 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 afbcb973240..c52f2756bf8 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:42254a9fbb79a4f4b02a730f3057b63be0e460a988a8cb061b8da17f4436f6c6 -size 76180 +oid sha256:bafd22d1415b9f0f6b88fb2928445e81796e3a5ef40efe4c630dddd26a78ebdd +size 76197 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 5b4a257cb73..cf3e955c074 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:004afb39c7f271d0cc860b1fbbe37ef89270f05722f4bcfbb04cd78c20ac0f5e -size 98849 +oid sha256:270e3718116b815c92f38fbe2b5b810631d11e764ab0cd42958338c38b54eccc +size 99149 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 d6488bf625b..cc3a09274fa 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:202e5bc5510233d2188b4a905c6259c08dc47a4a0ff793f3e74d01bddd97c238 -size 101003 +oid sha256:11a55f3b48dc2db82c0265f8ed3d3c045adda22eea98aba106344f8894280702 +size 101178 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 6c055cecdff..d0b4e61cd7a 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:c5e17a5ab410e9386035c79d028ac103d36b4edcdc21b6849daa6466046ab785 -size 77489 +oid sha256:845123caca5ee005a59ae1ff291a3890e3edefe037bdb63b2a1bbff9114745b9 +size 77530 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 2a21ba69a86..d9a177fc551 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:b37c081d58807e57af917bf11ab57bc3f6e51df1569f0c85dccc984e7ee8a57c -size 77689 +oid sha256:86add310f1c3fba0dbdc0026c612b07f6ca4df9974fe1beb0aa23ae10a0c2a88 +size 77707