feat(ToolButton): apply design fixes

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);
 }
 

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,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 = ({
     </Tappable>
   );
 };
+
+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'];
+  }
+}