feat(ToolButton): apply design fixes (#7488)

* feat(ToolButton): apply design fixes
* review(design): update styles

packages/vkui/src/components/ToolButton/ToolButton.module.css

@@ -5,18 +5,21 @@
   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;
   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--withFakeEndIcon {
+  padding-inline-end: var(--vkui--spacing_size_xl);
+}
+
 .ToolButton--rounded {
   border-radius: var(--vkui--size_border_radius_rounded--regular);
 }
@@ -42,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 {
@@ -71,15 +76,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 +127,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);
 }
 

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.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<ToolButtonProps, 'IconCompact' | 'IconRegular'>) => (
-  <ToolButton data-testid="custom-btn" IconCompact={Icon20Add} IconRegular={Icon24Add} {...props} />
+  <ToolButton
+    data-testid="custom-btn"
+    IconCompact={Icon20Add}
+    IconRegular={Icon24Add}
+    rounded
+    {...props}
+  />
 );
 const button = () => screen.getByTestId('custom-btn');
 
-describe('ToolButton', () => {
+describe(ToolButton, () => {
   baselineComponent((props) => <ToolButtonTest {...props}>ToolButton</ToolButtonTest>);
 
   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();
+  });
+});

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,8 @@ export const ToolButton = ({
       className={classNames(
         className,
         styles['ToolButton'],
-        rounded && !hasChildren && styles['ToolButton--rounded'],
+        rounded && getRoundedClassName(direction, hasChildren),
+        hasChildren && direction === 'row' && styles['ToolButton--withFakeEndIcon'],
         stylesMode[mode],
         stylesAppearance[appearance],
         stylesDirection[direction],
@@ -84,3 +85,15 @@ export const ToolButton = ({
     </Tappable>
   );
 };
+
+export function getRoundedClassName(
+  direction: 'row' | 'column',
+  hasChildren: boolean,
+): string | undefined {
+  switch (direction) {
+    case 'row':
+      return styles['ToolButton--rounded'];
+    case 'column':
+      return hasChildren ? undefined : styles['ToolButton--rounded'];
+  }
+}