feat(PanelHeaderButton): add Badge support in label prop

packages/vkui/src/components/Badge/Badge.tsx

@@ -20,7 +20,7 @@ export interface BadgeProps extends RootComponentProps<HTMLSpanElement> {
 export const Badge = ({ mode = 'new', children, ...restProps }: BadgeProps): React.ReactNode => (
   <RootComponent
     Component="span"
-    baseClassName={classNames(styles['Badge'], stylesMode[mode])}
+    baseClassName={classNames(styles['Badge'], 'vkuiInternalBadge', stylesMode[mode])}
     {...restProps}
   >
     {children && <VisuallyHidden>{children}</VisuallyHidden>}

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

@@ -47,18 +47,6 @@
   color: var(--vkui_internal--counter_inherit_color, var(--vkui--color_text_contrast_themed));
 }
 
-/**
- * CMP:
- * PanelHeaderButton
- */
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalPanelHeaderButton) .Counter {
-  position: absolute;
-  padding: 0;
-  inset-block-start: 8px;
-  inset-inline-end: 2px;
-}
-
 /**
  * CMP:
  * TabbarItem

packages/vkui/src/components/PanelHeaderButton/PanelHeaderButton.e2e-playground.tsx

@@ -1,5 +1,7 @@
-import { Icon28AddOutline } from '@vkontakte/icons';
+import { Icon24AddOutline, Icon28AddOutline } from '@vkontakte/icons';
 import { ComponentPlayground, type ComponentPlaygroundProps } from '@vkui-e2e/playground-helpers';
+import { Badge } from '../Badge/Badge';
+import { Counter } from '../Counter/Counter';
 import { PanelHeaderBack } from '../PanelHeaderBack/PanelHeaderBack';
 import { PanelHeaderClose } from '../PanelHeaderClose/PanelHeaderClose';
 import { PanelHeaderEdit, type PanelHeaderEditProps } from '../PanelHeaderEdit/PanelHeaderEdit';
@@ -16,6 +18,15 @@ export const PanelHeaderButtonPlayground = (props: ComponentPlaygroundProps) =>
           primary: [true, false],
           label: [undefined, 'label', <span key="label">label</span>],
         },
+        {
+          children: [<Icon28AddOutline key="icon-28" />, <Icon24AddOutline key="icon-24" />],
+          label: [
+            <Counter size="s" mode="prominent" key="counter">
+              33
+            </Counter>,
+            <Badge mode="prominent" key="badge" />,
+          ],
+        },
       ]}
     >
       {(props: PanelHeaderButtonProps) => <PanelHeaderButton {...props} />}

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

@@ -79,14 +79,16 @@
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-.PanelHeaderButton--vkcom > :not(:global(.vkuiInternalCounter)) {
+.PanelHeaderButton--vkcom > :not(:global(.vkuiInternalBadge)):not(:global(.vkuiInternalCounter)) {
   transition: opacity 0.3s;
   opacity: 0.7;
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-.PanelHeaderButton--vkcom.PanelHeaderButton--hover > :not(:global(.vkuiInternalCounter)),
-.PanelHeaderButton--vkcom.PanelHeaderButton--active > :not(:global(.vkuiInternalCounter)) {
+.PanelHeaderButton--vkcom.PanelHeaderButton--hover
+  > :not(:global(.vkuiInternalCounter)):not(:global(.vkuiInternalBadge)),
+.PanelHeaderButton--vkcom.PanelHeaderButton--active
+  > :not(:global(.vkuiInternalCounter)):not(:global(.vkuiInternalBadge)) {
   opacity: 1;
 }
 
@@ -119,3 +121,42 @@
     display: none;
   }
 }
+
+/*
+ * CMP:
+ * Counter
+ */
+
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+.PanelHeaderButton :global(.vkuiInternalCounter) {
+  position: absolute;
+  padding: 0;
+  inset-block-start: 4px;
+  inset-inline-end: 4px;
+}
+
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+.PanelHeaderButton :global(.vkuiIcon--24) ~ :global(.vkuiInternalCounter),
+.PanelHeaderButton--ios :global(.vkuiInternalCounter) {
+  inset-block-start: 2px;
+  inset-inline-end: 2px;
+}
+
+/*
+ * CMP:
+ * Badge
+ */
+
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+.PanelHeaderButton :global(.vkuiInternalBadge) {
+  position: absolute;
+  inset-block-start: 8px;
+  inset-inline-end: 8px;
+}
+
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+.PanelHeaderButton :global(.vkuiIcon--24) ~ :global(.vkuiInternalBadge),
+.PanelHeaderButton--ios :global(.vkuiInternalBadge) {
+  inset-block-start: 6px;
+  inset-inline-end: 6px;
+}

packages/vkui/src/components/PanelHeaderButton/PanelHeaderButton.tsx

@@ -16,6 +16,7 @@ const platformClassNames = {
 
 export interface PanelHeaderButtonProps extends Omit<TappableProps, 'label'> {
   primary?: boolean;
+  // TODO [>=7]: добавить св-во `indicator`, чтобы разграничить кейсы
   label?: React.ReactNode;
 }
 
@@ -90,7 +91,6 @@ export const PanelHeaderButton = ({
       activeEffectDelay={200}
       activeMode={activeMode}
       className={classNames(
-        'vkuiInternalPanelHeaderButton',
         styles['PanelHeaderButton'],
         platformClassNames.hasOwnProperty(platform)
           ? platformClassNames[platform]