review(design): update styles

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 {

packages/vkui/src/components/ToolButton/ToolButton.stories.tsx

@@ -21,4 +21,11 @@ export const Playground: Story = {
     IconCompact: Icon20Add,
     IconRegular: Icon24Add,
   },
+  decorators: [
+    (Component, context) => (
+      <div>
+        <Component {...context.args} />
+      </div>
+    ),
+  ],
 };

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'];
   }