feat: return logic of PanelHeaderBack and add props hideLabelOnVKCom …

…and hideLabelOnIOS

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

@@ -68,7 +68,11 @@ export const EpicPlayground = (props: ComponentPlaygroundProps) => (
       >
         <View id="feed" activePanel="feed">
           <Panel id="feed">
-            <PanelHeader before={<PanelHeaderBack onClick={noop} />}>Новости</PanelHeader>
+            <PanelHeader
+              before={<PanelHeaderBack onClick={noop} hideLabelOnIOS hideLabelOnVKCom />}
+            >
+              Новости
+            </PanelHeader>
             <Group>
               <Placeholder icon={<Icon56NewsfeedOutline width={56} height={56} />} />
             </Group>

packages/vkui/src/components/PanelHeaderBack/PanelHeaderBack.tsx

@@ -5,6 +5,7 @@ import {
   Icon20ChevronLeftOutline,
   Icon24ArrowLeftOutline,
   Icon28ArrowLeftOutline,
+  Icon28ChevronBack,
   Icon28ChevronLeftOutline,
 } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
@@ -24,12 +25,15 @@ const sizeXClassNames = {
   compact: styles.backSizeXCompact,
 };
 
-export type PanelHeaderBackProps = Omit<PanelHeaderButtonProps, 'children'>;
+export type PanelHeaderBackProps = Omit<PanelHeaderButtonProps, 'children'> & {
+  hideLabelOnVKCom?: boolean;
+  hideLabelOnIOS?: boolean;
+};
 
 const getBackIcon = (platform: PlatformType) => {
   switch (platform) {
     case 'ios':
-      return null;
+      return <Icon28ChevronBack />;
     case 'vkcom':
       return (
         <AdaptiveIconRenderer
@@ -53,13 +57,16 @@ const getBackIcon = (platform: PlatformType) => {
 export const PanelHeaderBack = ({
   label = 'Назад',
   className,
+  hideLabelOnVKCom = false,
+  hideLabelOnIOS = false,
   ...restProps
 }: PanelHeaderBackProps): React.ReactNode => {
   const platform = usePlatform();
   const { sizeX = 'none' } = useAdaptivity();
   // также label нужно скрывать при platform === 'ios' && sizeX === regular
   // https://github.com/VKCOM/VKUI/blob/master/src/components/PanelHeaderButton/PanelHeaderButton.css#L104
-  const showLabel = platform === 'ios';
+  const showLabel =
+    (platform === 'vkcom' && !hideLabelOnVKCom) || (platform === 'ios' && !hideLabelOnIOS);
 
   return (
     <PanelHeaderButton

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

@@ -2,7 +2,7 @@ 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 { PanelHeaderBack, type PanelHeaderBackProps } from '../PanelHeaderBack/PanelHeaderBack';
 import { PanelHeaderClose, type PanelHeaderCloseProps } from '../PanelHeaderClose/PanelHeaderClose';
 import { PanelHeaderEdit, type PanelHeaderEditProps } from '../PanelHeaderEdit/PanelHeaderEdit';
 import {
@@ -61,9 +61,14 @@ export const PanelHeaderBackPlayground = (props: ComponentPlaygroundProps) => {
           primary: [true, false],
           label: [undefined, 'label'],
         },
+        {
+          hideLabelOnIOS: [true, false],
+          hideLabelOnVKCom: [true, false],
+          label: ['label'],
+        },
       ]}
     >
-      {(props: PanelHeaderButtonProps) => <PanelHeaderBack {...props} />}
+      {(props: PanelHeaderBackProps) => <PanelHeaderBack {...props} />}
     </ComponentPlayground>
   );
 };

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

@@ -2,13 +2,22 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Icon28AddOutline } from '@vkontakte/icons';
 import { noop } from '@vkontakte/vkjs';
 import { CanvasFullLayout, DisableCartesianParam, StringArg } from '../../storybook/constants';
-import { PanelHeaderBack as PanelHeaderBackCmp } from '../PanelHeaderBack/PanelHeaderBack';
-import { PanelHeaderClose as PanelHeaderCloseCmp } from '../PanelHeaderClose/PanelHeaderClose';
+import {
+  PanelHeaderBack as PanelHeaderBackCmp,
+  type PanelHeaderBackProps,
+} from '../PanelHeaderBack/PanelHeaderBack';
+import {
+  PanelHeaderClose as PanelHeaderCloseCmp,
+  type PanelHeaderCloseProps,
+} from '../PanelHeaderClose/PanelHeaderClose';
 import {
   PanelHeaderEdit as PanelHeaderEditCmp,
   type PanelHeaderEditProps,
 } from '../PanelHeaderEdit/PanelHeaderEdit';
-import { PanelHeaderSubmit as PanelHeaderSubmitCmp } from '../PanelHeaderSubmit/PanelHeaderSubmit';
+import {
+  PanelHeaderSubmit as PanelHeaderSubmitCmp,
+  type PanelHeaderSubmitProps,
+} from '../PanelHeaderSubmit/PanelHeaderSubmit';
 import { PanelHeaderButton, type PanelHeaderButtonProps } from './PanelHeaderButton';
 
 const story: Meta<PanelHeaderButtonProps> = {
@@ -22,9 +31,9 @@ const story: Meta<PanelHeaderButtonProps> = {
 
 export default story;
 
-type Story = StoryObj<PanelHeaderButtonProps>;
+type PlaygroundStory = StoryObj<PanelHeaderButtonProps>;
 
-export const Playground: Story = {
+export const Playground: PlaygroundStory = {
   render: (args) => {
     return (
       <PanelHeaderButton {...args}>
@@ -34,19 +43,33 @@ export const Playground: Story = {
   },
 };
 
-export const PanelHeaderClose: Story = {
+type PanelHeaderCloseStory = StoryObj<PanelHeaderCloseProps>;
+
+export const PanelHeaderClose: PanelHeaderCloseStory = {
   render: (args) => {
     return <PanelHeaderCloseCmp {...args} />;
   },
 };
 
-export const PanelHeaderBack: Story = {
+type PanelHeaderBackStory = StoryObj<PanelHeaderBackProps>;
+
+export const PanelHeaderBack: PanelHeaderBackStory = {
+  argTypes: {
+    hideLabelOnVKCom: {
+      type: 'boolean',
+    },
+    hideLabelOnIOS: {
+      type: 'boolean',
+    },
+  },
   render: (args) => {
     return <PanelHeaderBackCmp {...args} />;
   },
 };
 
-export const PanelHeaderEdit: StoryObj<PanelHeaderEditProps> = {
+type PanelHeaderEditStory = StoryObj<PanelHeaderEditProps>;
+
+export const PanelHeaderEdit: PanelHeaderEditStory = {
   args: {
     isActive: true,
   },
@@ -59,7 +82,9 @@ export const PanelHeaderEdit: StoryObj<PanelHeaderEditProps> = {
   },
 };
 
-export const PanelHeaderSubmit: Story = {
+type PanelHeaderSubmitStory = StoryObj<PanelHeaderSubmitProps>;
+
+export const PanelHeaderSubmit: PanelHeaderSubmitStory = {
   render: (args) => {
     return <PanelHeaderSubmitCmp {...args} />;
   },

packages/vkui/src/components/PanelHeaderButton/Readme.md

@@ -40,7 +40,8 @@
 ### PanelHeaderBack
 
 Этот компонент используется для показа кнопки назад в панелях в рамках одного `View`. Внутри инкапсулирована логика показа нужной иконки для платформы.
-Также можно передать свойство `label`, и тогда на iOS он будет отображен, а на других платформах будет скрыт, но виден для скринридеров.
+Также можно передать свойство `label`, для отображения текст, который будет виден на платформах vkcom и iOS, но будет скрыт на Android.
+С помощью свойств `hideLabelOnVKCom` и `hideLabelOnIOS` можно также визуально скрыть `label` на соответствующих платформах, он будет виден только для скринридеров.
 
 ```jsx static
 <PanelHeader before={<PanelHeaderBack onClick={this.props.onBackClick} />}>

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

@@ -33,7 +33,7 @@ export const PanelHeaderContextPlayground = (props: ComponentPlaygroundProps) =>
             <View activePanel="context2">
               <Panel id="context2">
                 <PanelHeader
-                  before={<PanelHeaderBack onClick={noop} />}
+                  before={<PanelHeaderBack onClick={noop} hideLabelOnVKCom hideLabelOnIOS />}
                   after={
                     <PanelHeaderButton onClick={noop}>
                       <Icon28AddOutline />