fix(ToolButton): mv gap to wrapper of children prop (#7039)

h2. Описание

При ширине >= 768px включается десктопный режим, в этот момент показывается иконка для десктопа. Для этой иконки применяется отступ справа – это создаёт визуальный баг когда не передан `children`.

Переносим отступ на контейнер для `children`, т.к. отступ нужен только тогда, когда он передан.

h2. Дополнительные изменения

- добавил JSDoc для параметра `rounded`;
- убрал динамический ключ в объекте `sizeYClassNames`.

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

@@ -48,24 +48,14 @@
   flex-direction: column;
 }
 
-/* stylelint-disable selector-max-universal -- gap для элементов */
-.ToolButton--direction-row > * {
-  margin-inline-end: 4px;
+.ToolButton--direction-row .ToolButton__text {
+  margin-inline-start: 4px;
 }
 
-.ToolButton--direction-row > *:last-child {
-  margin-inline-end: 0;
+.ToolButton--direction-column .ToolButton__text {
+  margin-block-start: 4px;
 }
 
-.ToolButton--direction-column > * {
-  margin-block-end: 4px;
-}
-
-.ToolButton--direction-column > *:last-child {
-  margin-block-end: 0;
-}
-/* stylelint-enable selector-max-universal */
-
 /* ToolButton's backgrounds */
 /* Mode  = Primary */
 .ToolButton--mode-primary.ToolButton--appearance-accent {

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

@@ -26,13 +26,18 @@ const stylesDirection = {
 
 const sizeYClassNames = {
   none: styles['ToolButton--sizeY-none'],
-  ['regular']: styles['ToolButton--sizeY-regular'],
+  regular: styles['ToolButton--sizeY-regular'],
 };
 
 export interface ToolButtonProps extends TappableProps, AdaptiveIconRendererProps {
   mode?: 'primary' | 'secondary' | 'tertiary' | 'outline';
   appearance?: 'accent' | 'neutral';
   direction?: 'row' | 'column';
+  /**
+   * Задаёт `50%` закругления для контейнера.
+   *
+   * > Note: игнорируется при передаче `children`.
+   */
   rounded?: boolean;
 }
 
@@ -77,7 +82,7 @@ export const ToolButton = ({
       {...restProps}
     >
       <AdaptiveIconRenderer IconCompact={IconCompact} IconRegular={IconRegular} />
-      {hasChildren && <span>{children}</span>}
+      {hasChildren && <span className={styles['ToolButton__text']}>{children}</span>}
     </Tappable>
   );
 };