From 1518ddcf7c56691bd4358be771ec8a4750be621c Mon Sep 17 00:00:00 2001
From: "e.muhamethanov" <eldarmu.1m@gmail.com>
Date: Tue, 29 Oct 2024 12:05:03 +0300
Subject: [PATCH] fix(Header): fix docs and tests

---
 README.md                                          |  2 +-
 .../v7/__tests__/__snapshots__/header.ts.snap      | 10 +++++-----
 packages/vkui/src/components/Avatar/Readme.md      |  6 +++---
 packages/vkui/src/components/Badge/Readme.md       |  4 ++--
 packages/vkui/src/components/Card/Readme.md        |  8 ++++----
 packages/vkui/src/components/CellButton/Readme.md  |  8 ++++----
 packages/vkui/src/components/Counter/Readme.md     |  6 +++---
 .../vkui/src/components/CustomScrollView/Readme.md |  4 ++--
 packages/vkui/src/components/Gallery/Readme.md     | 14 +++++++-------
 packages/vkui/src/components/Gradient/Readme.md    |  2 +-
 packages/vkui/src/components/Group/Readme.md       |  8 ++++----
 .../vkui/src/components/Header/Header.module.css   |  9 +++++++++
 packages/vkui/src/components/Header/Readme.md      | 12 +++---------
 .../HorizontalScroll/HorizontalScroll.stories.tsx  |  2 +-
 .../vkui/src/components/HorizontalScroll/Readme.md |  6 +++---
 packages/vkui/src/components/Image/Readme.md       |  8 +++-----
 .../src/components/InfoRow/InfoRow.stories.tsx     |  2 +-
 packages/vkui/src/components/InfoRow/Readme.md     |  2 +-
 .../src/components/ModalPage/ModalPage.stories.tsx |  2 +-
 packages/vkui/src/components/ModalRoot/Readme.md   |  2 +-
 .../vkui/src/components/PanelSpinner/Readme.md     |  2 +-
 packages/vkui/src/components/Separator/Readme.md   |  4 ++--
 packages/vkui/src/components/SimpleCell/Readme.md  | 10 +++++-----
 packages/vkui/src/components/Spacing/Readme.md     |  4 ++--
 packages/vkui/src/components/Touch/Readme.md       |  2 +-
 packages/vkui/src/components/UsersStack/Readme.md  |  4 ++--
 26 files changed, 72 insertions(+), 71 deletions(-)

diff --git a/README.md b/README.md
index 36393f9536..435a8a120e 100644
--- a/README.md
+++ b/README.md
@@ -69,7 +69,7 @@ const Example = () => {
           <View activePanel="main">
             <Panel id="main">
               <PanelHeader>VKUI</PanelHeader>
-              <Group header={<Header mode="secondary">Items</Header>}>
+              <Group header={<Header size="s">Items</Header>}>
                 <SimpleCell>Hello</SimpleCell>
                 <SimpleCell>World</SimpleCell>
               </Group>
diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/header.ts.snap b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/header.ts.snap
index 8bb3eb3eb7..1c41cfd5ff 100644
--- a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/header.ts.snap
+++ b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/header.ts.snap
@@ -40,15 +40,15 @@ const App = () => {
       {/* Проверка удаления mode */}
       {/* замена Large Primary на xl */}
       <Header size="xl" subtitle="SOHN — Conrad" />
-      {/* замена Large tertiary на medium */}
+      {/* замена Large tertiary на m */}
       <Header size="m" subtitle="SOHN — Conrad" />
-      {/* замена Regular tertiary на medium */}
+      {/* замена Regular tertiary на m */}
       <Header size="m" subtitle="SOHN — Conrad" />
-      {/* замена Regular primary на medium */}
+      {/* замена Regular primary на m */}
       <Header size="m" subtitle="SOHN — Conrad" />
-      {/* замена Large secondary на medium */}
+      {/* замена Large secondary на m */}
       <Header size="s" subtitle="SOHN — Conrad" />
-      {/* замена Regular secondary на medium */}
+      {/* замена Regular secondary на s */}
       <Header size="s" subtitle="SOHN — Conrad" />
     </React.Fragment>)
   );
diff --git a/packages/vkui/src/components/Avatar/Readme.md b/packages/vkui/src/components/Avatar/Readme.md
index f16b90476f..465ee4f8a8 100644
--- a/packages/vkui/src/components/Avatar/Readme.md
+++ b/packages/vkui/src/components/Avatar/Readme.md
@@ -10,7 +10,7 @@
 ```jsx
 const Default = () => {
   return (
-    <Group header={<Header mode="secondary">По умолчанию</Header>}>
+    <Group header={<Header size="s">По умолчанию</Header>}>
       <SimpleCell before={<Avatar src={getAvatarUrl('user_id34')} />}>Татьяна Плуталова</SimpleCell>
     </Group>
   );
@@ -19,7 +19,7 @@ const Default = () => {
 const Fallbacks = () => {
   return (
     <Group
-      header={<Header mode="secondary">Фолбеки</Header>}
+      header={<Header size="s">Фолбеки</Header>}
       description="На случаи если аватарка не загрузилась или она отсутсвует"
     >
       <SimpleCell
@@ -48,7 +48,7 @@ const OthersFeatures = () => {
   const [overlay, setOverlay] = React.useState();
 
   return (
-    <Group header={<Header mode="secondary">Другие возможности</Header>}>
+    <Group header={<Header size="s">Другие возможности</Header>}>
       <AvatarPropsForm
         onUseInisitals={setUseInisitals}
         onGradientColorChange={setGradientColorChange}
diff --git a/packages/vkui/src/components/Badge/Readme.md b/packages/vkui/src/components/Badge/Readme.md
index 5bea7e877c..fbfaed3eb4 100644
--- a/packages/vkui/src/components/Badge/Readme.md
+++ b/packages/vkui/src/components/Badge/Readme.md
@@ -13,7 +13,7 @@ const Example = () => {
       <Panel id="badge">
         <PanelHeader>Бейдж</PanelHeader>
 
-        <Group header={<Header mode="secondary">В пунктах меню</Header>}>
+        <Group header={<Header size="s">В пунктах меню</Header>}>
           <Cell
             chevron
             before={<Icon28Notifications />}
@@ -24,7 +24,7 @@ const Example = () => {
           </Cell>
         </Group>
 
-        <Group header={<Header mode="secondary">В переключателях</Header>}>
+        <Group header={<Header size="s">В переключателях</Header>}>
           <Tabs>
             <TabsItem
               selected={tab === 'dialogs'}
diff --git a/packages/vkui/src/components/Card/Readme.md b/packages/vkui/src/components/Card/Readme.md
index eee2565232..4f6bf95279 100644
--- a/packages/vkui/src/components/Card/Readme.md
+++ b/packages/vkui/src/components/Card/Readme.md
@@ -8,21 +8,21 @@
   <Panel id="card">
     <PanelHeader>Card</PanelHeader>
     <Group>
-      <Group mode="plain" header={<Header mode="secondary">Дефолтный стиль</Header>}>
+      <Group mode="plain" header={<Header size="s">Дефолтный стиль</Header>}>
         <CardGrid size="l">
           <Card>
             <div style={{ height: 96 }} />
           </Card>
         </CardGrid>
       </Group>
-      <Group mode="plain" header={<Header mode="secondary">С внутренней обводкой</Header>}>
+      <Group mode="plain" header={<Header size="s">С внутренней обводкой</Header>}>
         <CardGrid size="l">
           <Card mode="outline">
             <div style={{ height: 96 }} />
           </Card>
         </CardGrid>
       </Group>
-      <Group mode="plain" header={<Header mode="secondary">С внешней тенью</Header>}>
+      <Group mode="plain" header={<Header size="s">С внешней тенью</Header>}>
         <CardGrid size="l">
           <Card mode="shadow">
             <div style={{ height: 96 }} />
@@ -31,7 +31,7 @@
       </Group>
       <Group
         mode="plain"
-        header={<Header mode="secondary">С внутренней обводкой и дефолтным фоном</Header>}
+        header={<Header size="s">С внутренней обводкой и дефолтным фоном</Header>}
       >
         <CardGrid size="l">
           <Card mode="outline-tint">
diff --git a/packages/vkui/src/components/CellButton/Readme.md b/packages/vkui/src/components/CellButton/Readme.md
index 7b17accaa2..7114c78622 100644
--- a/packages/vkui/src/components/CellButton/Readme.md
+++ b/packages/vkui/src/components/CellButton/Readme.md
@@ -2,13 +2,13 @@
 <View activePanel="button">
   <Panel id="button">
     <PanelHeader>CellButton</PanelHeader>
-    <Group header={<Header mode="secondary">Базовый пример</Header>}>
+    <Group header={<Header size="s">Базовый пример</Header>}>
       <CellButton onClick={() => {}}>Добавить новую школу</CellButton>
       <CellButton onClick={() => {}} appearance="negative">
         Удалить беседу
       </CellButton>
     </Group>
-    <Group header={<Header mode="secondary">Иконки</Header>}>
+    <Group header={<Header size="s">Иконки</Header>}>
       <CellButton onClick={() => {}} before={<Icon28AddOutline />}>
         Добавить родственника
       </CellButton>
@@ -16,7 +16,7 @@
         Удалить беседу
       </CellButton>
     </Group>
-    <Group header={<Header mode="secondary">Аватарки</Header>}>
+    <Group header={<Header size="s">Аватарки</Header>}>
       <CellButton
         onClick={() => {}}
         before={
@@ -48,7 +48,7 @@
         Создать плейлист
       </CellButton>
     </Group>
-    <Group header={<Header mode="secondary">Центрирование</Header>}>
+    <Group header={<Header size="s">Центрирование</Header>}>
       <CellButton onClick={() => {}} centered before={<Icon24Add />}>
         Создать беседу
       </CellButton>
diff --git a/packages/vkui/src/components/Counter/Readme.md b/packages/vkui/src/components/Counter/Readme.md
index 815a5ca194..f11f7d1cc2 100644
--- a/packages/vkui/src/components/Counter/Readme.md
+++ b/packages/vkui/src/components/Counter/Readme.md
@@ -14,7 +14,7 @@ const Example = () => {
     <View activePanel="counter-demo">
       <Panel id="counter-demo">
         <PanelHeader>Counter</PanelHeader>
-        <Group header={<Header mode="secondary">Счётчики в ячейках</Header>}>
+        <Group header={<Header size="s">Счётчики в ячейках</Header>}>
           <List>
             <Cell before={<Icon28UserOutline />} indicator={<Counter>4</Counter>}>
               Друзья
@@ -40,7 +40,7 @@ const Example = () => {
             </Cell>
           </List>
         </Group>
-        <Group header={<Header mode="secondary">Счётчики в кнопках</Header>}>
+        <Group header={<Header size="s">Счётчики в кнопках</Header>}>
           <FormItem>
             <Button mode="secondary" size="m" after={<Counter>16</Counter>}>
               Secondary medium
@@ -85,7 +85,7 @@ const Example = () => {
           <Cell before={<Avatar />}>Виктор Пелевин</Cell>
           <Cell before={<Avatar />}>Михаил Зыгарь</Cell>
         </Group>
-        <Group header={<Header mode="secondary">В переключателях</Header>}>
+        <Group header={<Header size="s">В переключателях</Header>}>
           <Tabs mode="buttons">
             <HorizontalScroll>
               <TabsItem
diff --git a/packages/vkui/src/components/CustomScrollView/Readme.md b/packages/vkui/src/components/CustomScrollView/Readme.md
index d6044024bf..60e5d846f1 100644
--- a/packages/vkui/src/components/CustomScrollView/Readme.md
+++ b/packages/vkui/src/components/CustomScrollView/Readme.md
@@ -50,10 +50,10 @@ const Example = () => {
     <View activePanel="customScrollView">
       <Panel id="customScrollView">
         <PanelHeader>CustomScrollView</PanelHeader>
-        <Group header={<Header mode="secondary">Вертикальный скролл</Header>}>
+        <Group header={<Header size="s">Вертикальный скролл</Header>}>
           <WithVerticalScroll />
         </Group>
-        <Group header={<Header mode="secondary">Горизонтальный скролл</Header>}>
+        <Group header={<Header size="s">Горизонтальный скролл</Header>}>
           <WithHorizontalScroll />
         </Group>
       </Panel>
diff --git a/packages/vkui/src/components/Gallery/Readme.md b/packages/vkui/src/components/Gallery/Readme.md
index fed052ba50..1eea3c46d5 100644
--- a/packages/vkui/src/components/Gallery/Readme.md
+++ b/packages/vkui/src/components/Gallery/Readme.md
@@ -14,14 +14,14 @@ const Example = () => {
     <View activePanel="gallery">
       <Panel nav="gallery">
         <PanelHeader>Gallery</PanelHeader>
-        <Group header={<Header mode="secondary">Sticks right</Header>}>
+        <Group header={<Header size="s">Sticks right</Header>}>
           <Gallery slideWidth="90%" bullets="dark">
             <div style={{ backgroundColor: 'var(--vkui--color_background_negative)' }} />
             <img src="https://placebear.com/1024/640" style={{ display: 'block' }} />
             <div style={{ backgroundColor: 'var(--vkui--color_background_accent)' }} />
           </Gallery>
         </Group>
-        <Group header={<Header mode="secondary">Sticks left</Header>}>
+        <Group header={<Header size="s">Sticks left</Header>}>
           <Gallery slideWidth="90%" align="right">
             <div
               style={{
@@ -33,14 +33,14 @@ const Example = () => {
             <div style={{ backgroundColor: 'var(--vkui--color_background_accent)' }} />
           </Gallery>
         </Group>
-        <Group header={<Header mode="secondary">Centered</Header>}>
+        <Group header={<Header size="s">Centered</Header>}>
           <Gallery slideWidth="90%" align="center">
             <div style={{ backgroundColor: 'var(--vkui--color_background_negative)' }} />
             <div style={{ backgroundColor: 'var(--vkui--color_background_positive)' }} />
             <div style={{ backgroundColor: 'var(--vkui--color_background_accent)' }} />
           </Gallery>
         </Group>
-        <Group header={<Header mode="secondary">Custom width</Header>}>
+        <Group header={<Header size="s">Custom width</Header>}>
           <Gallery slideWidth="custom" style={{ height: 150 }}>
             <div
               style={{
@@ -68,14 +68,14 @@ const Example = () => {
             />
           </Gallery>
         </Group>
-        <Group header={<Header mode="secondary">Arrows</Header>}>
+        <Group header={<Header size="s">Arrows</Header>}>
           <Gallery slideWidth="90%" style={{ height: 150 }} bullets="dark" showArrows>
             <div style={{ backgroundColor: 'var(--vkui--color_background_negative)' }} />
             <div style={{ backgroundColor: 'var(--vkui--color_background_positive)' }} />
             <div style={{ backgroundColor: 'var(--vkui--color_background_accent)' }} />
           </Gallery>
         </Group>
-        <Group header={<Header mode="secondary">Controlled</Header>}>
+        <Group header={<Header size="s">Controlled</Header>}>
           <Gallery
             slideWidth="90%"
             align="center"
@@ -104,7 +104,7 @@ const Example = () => {
             </Button>
           </FormItem>
         </Group>
-        <Group header={<Header mode="secondary">With looped prop</Header>}>
+        <Group header={<Header size="s">With looped prop</Header>}>
           <Gallery slideWidth="90%" style={{ height: 150 }} bullets="dark" showArrows looped>
             <Slide backgroundColor="var(--vkui--color_background_negative)">1</Slide>
             <Slide backgroundColor="var(--vkui--color_background_positive)">2</Slide>
diff --git a/packages/vkui/src/components/Gradient/Readme.md b/packages/vkui/src/components/Gradient/Readme.md
index 3660f706ce..ef6627d985 100644
--- a/packages/vkui/src/components/Gradient/Readme.md
+++ b/packages/vkui/src/components/Gradient/Readme.md
@@ -34,7 +34,7 @@ const Example = () => {
             </CellButton>
           </Group>
         </Group>
-        <Group mode="plain" header={<Header mode="secondary">Направление to="bottom"</Header>}>
+        <Group mode="plain" header={<Header size="s">Направление to="bottom"</Header>}>
           <Gradient mode="tint" to="bottom">
             <Div>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a sollicitudin lectus, a
diff --git a/packages/vkui/src/components/Group/Readme.md b/packages/vkui/src/components/Group/Readme.md
index 9801ff9043..2b6e216f10 100644
--- a/packages/vkui/src/components/Group/Readme.md
+++ b/packages/vkui/src/components/Group/Readme.md
@@ -45,7 +45,7 @@ const Example = () => {
 
             <SharedContent />
 
-            <Group header={<Header mode="secondary">Модальное окно с Group</Header>}>
+            <Group header={<Header size="s">Модальное окно с Group</Header>}>
               <SimpleCell onClick={() => setModalOpened(true)}>
                 Открыть Group в модальном окне
               </SimpleCell>
@@ -180,8 +180,8 @@ const SharedContent = () => {
 ```jsx
 const recentFriends = getRandomUsers(20);
 
-<Group header={<Header mode="secondary">Недавние</Header>}>
-  <Header mode="primary">HorizontalScroll не учитывает отступы Group по горизонтали</Header>
+<Group header={<Header size="s">Недавние</Header>}>
+  <Header>HorizontalScroll не учитывает отступы Group по горизонтали</Header>
 
   <Group.ExpandedContent direction="inline">
     <HorizontalScroll showArrows>
@@ -195,7 +195,7 @@ const recentFriends = getRandomUsers(20);
     </HorizontalScroll>
   </Group.ExpandedContent>
 
-  <Header mode="primary">Здесь контент учитывает отступы Group по горизонтали</Header>
+  <Header>Здесь контент учитывает отступы Group по горизонтали</Header>
   <HorizontalScroll showArrows>
     {recentFriends.map((item) => {
       return (
diff --git a/packages/vkui/src/components/Header/Header.module.css b/packages/vkui/src/components/Header/Header.module.css
index 48234e09f1..e6987c15f5 100644
--- a/packages/vkui/src/components/Header/Header.module.css
+++ b/packages/vkui/src/components/Header/Header.module.css
@@ -103,12 +103,15 @@
 .sizeS .after.after > * {
   margin-block-start: 11px;
 }
+
 .sizeM .after.after > * {
   margin-block-start: 13px;
 }
+
 .sizeL .after.after > * {
   margin-block-start: 14px;
 }
+
 .sizeXl .after.after > * {
   margin-block-start: 16px;
 }
@@ -123,12 +126,15 @@
 .sizeS .after > :global(.vkuiIcon--24) {
   margin-block: 9px 5px;
 }
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .sizeM .after > :global(.vkuiIcon--24) {
   margin-block: 10px 5px;
 }
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .sizeL .after > :global(.vkuiIcon--24) {
   margin-block: 11px 5px;
 }
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .sizeXl .after > :global(.vkuiIcon--24) {
   margin-block: 12px 5px;
 }
@@ -137,12 +143,15 @@
 .sizeS .after > :global(.vkuiIcon--16) {
   margin-block: 13px 9px;
 }
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .sizeM .after > :global(.vkuiIcon--16) {
   margin-block: 14px 9px;
 }
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .sizeL .after > :global(.vkuiIcon--16) {
   margin-block: 15px 9px;
 }
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .sizeXl .after > :global(.vkuiIcon--16) {
   margin-block: 16px 9px;
 }
diff --git a/packages/vkui/src/components/Header/Readme.md b/packages/vkui/src/components/Header/Readme.md
index 44c098fff1..27a978259a 100644
--- a/packages/vkui/src/components/Header/Readme.md
+++ b/packages/vkui/src/components/Header/Readme.md
@@ -101,20 +101,14 @@ const Example = () => {
           <Header>Важные</Header>
         </Group>
         <Group>
-          <Header multiline>
-            Кто может писать мне личные сообщения
-          </Header>
-          <Header multiline>
-            Кто может комментировать мои записи
-          </Header>
+          <Header multiline>Кто может писать мне личные сообщения</Header>
+          <Header multiline>Кто может комментировать мои записи</Header>
           <Header size="s" multiline>
             Кто может оставлять записи на моей странице
           </Header>
         </Group>
         <Group>
-          <Header size="xl">
-            Большой заголовок
-          </Header>
+          <Header size="xl">Большой заголовок</Header>
         </Group>
         <Group>
           <Header
diff --git a/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.stories.tsx b/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.stories.tsx
index c98caf7159..3b67eaaec7 100644
--- a/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.stories.tsx
+++ b/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.stories.tsx
@@ -69,7 +69,7 @@ export const Playground: Story = {
   },
   decorators: [
     (Component, context) => (
-      <Group header={<Header mode="secondary">Недавние</Header>}>
+      <Group header={<Header size="s">Недавние</Header>}>
         <Component args={context.args} />
       </Group>
     ),
diff --git a/packages/vkui/src/components/HorizontalScroll/Readme.md b/packages/vkui/src/components/HorizontalScroll/Readme.md
index 5d5f3c3ab6..e9014d102d 100644
--- a/packages/vkui/src/components/HorizontalScroll/Readme.md
+++ b/packages/vkui/src/components/HorizontalScroll/Readme.md
@@ -17,7 +17,7 @@ const HorizontalScrollExample = () => {
     <View activePanel={activePanel}>
       <Panel id="basic-case">
         <PanelHeader>HorizontalScroll</PanelHeader>
-        <Group header={<Header mode="secondary">Недавние</Header>}>
+        <Group header={<Header size="s">Недавние</Header>}>
           <HorizontalScroll
             showArrows
             getScrollToLeft={(i) => i - 120}
@@ -34,7 +34,7 @@ const HorizontalScrollExample = () => {
           </HorizontalScroll>
         </Group>
 
-        <Group header={<Header mode="secondary">Общие друзья</Header>}>
+        <Group header={<Header size="s">Общие друзья</Header>}>
           <HorizontalScroll
             showArrows
             arrowSize="m"
@@ -57,7 +57,7 @@ const HorizontalScrollExample = () => {
           </HorizontalScroll>
         </Group>
 
-        <Group header={<Header mode="secondary">С кнопкой "Показать всё"</Header>}>
+        <Group header={<Header size="s">С кнопкой "Показать всё"</Header>}>
           <CellButton
             before={<Icon16MoreHorizontal aria-hidden />}
             onClick={() => setActivePanel('show-more-case')}
diff --git a/packages/vkui/src/components/Image/Readme.md b/packages/vkui/src/components/Image/Readme.md
index a532a70c5b..9036bea13d 100644
--- a/packages/vkui/src/components/Image/Readme.md
+++ b/packages/vkui/src/components/Image/Readme.md
@@ -3,7 +3,7 @@
 ```jsx
 const Default = () => {
   return (
-    <Group header={<Header mode="secondary">По умолчанию</Header>}>
+    <Group header={<Header size="s">По умолчанию</Header>}>
       <SimpleCell
         before={<Image src={getAvatarUrl('app_shorm_online')} alt="Приложение шторм онлайн" />}
         description="Ролевая"
@@ -19,9 +19,7 @@ const Responsive = () => {
   return (
     <Group
       header={
-        <Header mode="secondary">
-          Изображения без фиксированных размеров с сохранением пропорций
-        </Header>
+        <Header size="s">Изображения без фиксированных размеров с сохранением пропорций</Header>
       }
     >
       <Flex margin="auto" direction="column" gap="m">
@@ -47,7 +45,7 @@ const OthersFeatures = () => {
   const [overlay, setOverlay] = React.useState();
 
   return (
-    <Group header={<Header mode="secondary">Другие возможности</Header>}>
+    <Group header={<Header size="s">Другие возможности</Header>}>
       <ImagePropsForm
         onBorderRadiusChange={setBorderRadius}
         onBadgeChange={setBadge}
diff --git a/packages/vkui/src/components/InfoRow/InfoRow.stories.tsx b/packages/vkui/src/components/InfoRow/InfoRow.stories.tsx
index 7eec4f7092..7052fc57b6 100644
--- a/packages/vkui/src/components/InfoRow/InfoRow.stories.tsx
+++ b/packages/vkui/src/components/InfoRow/InfoRow.stories.tsx
@@ -27,7 +27,7 @@ export const Example: Story = {
   ...Playground,
   decorators: [
     (Component) => (
-      <Group header={<Header mode="secondary">Информация о пользователе</Header>}>
+      <Group header={<Header size="s">Информация о пользователе</Header>}>
         <SimpleCell multiline>
           <Component args={{ header: 'Дата рождения', children: '30 января 1993' }} />
         </SimpleCell>
diff --git a/packages/vkui/src/components/InfoRow/Readme.md b/packages/vkui/src/components/InfoRow/Readme.md
index 2be48761f4..01c762b1ab 100644
--- a/packages/vkui/src/components/InfoRow/Readme.md
+++ b/packages/vkui/src/components/InfoRow/Readme.md
@@ -10,7 +10,7 @@
         <InfoRow header="Общий бюджет">3000 р.</InfoRow>
       </SimpleCell>
     </Group>
-    <Group header={<Header mode="secondary">Информация о пользователе</Header>}>
+    <Group header={<Header size="s">Информация о пользователе</Header>}>
       <SimpleCell multiline>
         <InfoRow header="Дата рождения">30 января 1993</InfoRow>
       </SimpleCell>
diff --git a/packages/vkui/src/components/ModalPage/ModalPage.stories.tsx b/packages/vkui/src/components/ModalPage/ModalPage.stories.tsx
index b54a6bcc6a..4ac725b79b 100644
--- a/packages/vkui/src/components/ModalPage/ModalPage.stories.tsx
+++ b/packages/vkui/src/components/ModalPage/ModalPage.stories.tsx
@@ -132,7 +132,7 @@ export const FullscreenModalPage: Story = {
           </Gradient>
           <Group
             header={
-              <Header mode="secondary" indicator="25">
+              <Header size="s" indicator="25">
                 Друзья
               </Header>
             }
diff --git a/packages/vkui/src/components/ModalRoot/Readme.md b/packages/vkui/src/components/ModalRoot/Readme.md
index 20945bbd68..d88649eb9c 100644
--- a/packages/vkui/src/components/ModalRoot/Readme.md
+++ b/packages/vkui/src/components/ModalRoot/Readme.md
@@ -146,7 +146,7 @@ const App = () => {
       </Gradient>
       <Group
         header={
-          <Header mode="secondary" indicator="25">
+          <Header size="s" indicator="25">
             Друзья
           </Header>
         }
diff --git a/packages/vkui/src/components/PanelSpinner/Readme.md b/packages/vkui/src/components/PanelSpinner/Readme.md
index edbcc4117d..532b5e911c 100644
--- a/packages/vkui/src/components/PanelSpinner/Readme.md
+++ b/packages/vkui/src/components/PanelSpinner/Readme.md
@@ -15,7 +15,7 @@ import { PanelSpinner } from '@vkontakte/vkui';
   {loading ? (
     <PanelSpinner>Панель загружается, пожалуйста, подождите...</PanelSpinner>
   ) : (
-    <Group header={<Header mode="secondary">Информация</Header>}>...</Group>
+    <Group header={<Header size="s">Информация</Header>}>...</Group>
   )}
 </Panel>;
 ```
diff --git a/packages/vkui/src/components/Separator/Readme.md b/packages/vkui/src/components/Separator/Readme.md
index 575d352d48..ee8eca2d13 100644
--- a/packages/vkui/src/components/Separator/Readme.md
+++ b/packages/vkui/src/components/Separator/Readme.md
@@ -12,7 +12,7 @@
   <Panel id="separator">
     <PanelHeader>Separator</PanelHeader>
 
-    <Group header={<Header mode="secondary">direction="horizontal"</Header>}>
+    <Group header={<Header size="s">direction="horizontal"</Header>}>
       <Cell before={<Icon28Notifications />}>Уведомления</Cell>
       <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
 
@@ -21,7 +21,7 @@
       <Cell before={<Icon28UserOutline />}>Учётная запись</Cell>
       <Cell before={<Icon28SlidersOutline />}>Основные</Cell>
     </Group>
-    <Group header={<Header mode="secondary">direction="vertical"</Header>}>
+    <Group header={<Header size="s">direction="vertical"</Header>}>
       <Flex margin="auto">
         <Link>Новости</Link>
         <Separator direction="vertical" size="xl" />
diff --git a/packages/vkui/src/components/SimpleCell/Readme.md b/packages/vkui/src/components/SimpleCell/Readme.md
index 66ca6726fe..4b10104258 100644
--- a/packages/vkui/src/components/SimpleCell/Readme.md
+++ b/packages/vkui/src/components/SimpleCell/Readme.md
@@ -6,7 +6,7 @@ const Example = () => {
     <View activePanel={activePanel}>
       <Panel id="list">
         <PanelHeader>SimpleCell</PanelHeader>
-        <Group header={<Header mode="secondary">Меню</Header>}>
+        <Group header={<Header size="s">Меню</Header>}>
           <SimpleCell
             onClick={() => setActivePanel('nothing')}
             chevron="auto"
@@ -29,7 +29,7 @@ const Example = () => {
             Основные
           </SimpleCell>
         </Group>
-        <Group header={<Header mode="secondary">Настройки</Header>}>
+        <Group header={<Header size="s">Настройки</Header>}>
           <SimpleCell Component="label" after={<Switch defaultChecked />}>
             Сжимать фотографии
           </SimpleCell>
@@ -37,7 +37,7 @@ const Example = () => {
             Сжимать видео
           </SimpleCell>
         </Group>
-        <Group header={<Header mode="secondary">Настройки системы</Header>}>
+        <Group header={<Header size="s">Настройки системы</Header>}>
           <SimpleCell onClick={() => setActivePanel('nothing')} chevron="auto" indicator="Русский">
             Язык
           </SimpleCell>
@@ -49,7 +49,7 @@ const Example = () => {
             Геолокация
           </SimpleCell>
         </Group>
-        <Group header={<Header mode="secondary">Список диалогов</Header>}>
+        <Group header={<Header size="s">Список диалогов</Header>}>
           <SimpleCell
             before={<Avatar size={40} src={getAvatarUrl('user_xyz')} />}
             after={
@@ -73,7 +73,7 @@ const Example = () => {
             Artur Stambultsian
           </SimpleCell>
         </Group>
-        <Group header={<Header mode="secondary">Список друзей</Header>}>
+        <Group header={<Header size="s">Список друзей</Header>}>
           <SimpleCell
             before={<Avatar size={48} src={getAvatarUrl('user_xyz')} />}
             badgeAfterTitle={<Icon12Verified />}
diff --git a/packages/vkui/src/components/Spacing/Readme.md b/packages/vkui/src/components/Spacing/Readme.md
index 07389081e8..14ee378f8b 100644
--- a/packages/vkui/src/components/Spacing/Readme.md
+++ b/packages/vkui/src/components/Spacing/Readme.md
@@ -14,7 +14,7 @@
   <Panel id="separator">
     <PanelHeader>Spacing</PanelHeader>
 
-    <Group header={<Header mode="secondary">Default Spacing (empty, 8px)</Header>}>
+    <Group header={<Header size="s">Default Spacing (empty, 8px)</Header>}>
       <SimpleCell before={<Icon28Notifications />}>Уведомления</SimpleCell>
       <SimpleCell before={<Icon28BlockOutline />}>Не беспокоить</SimpleCell>
 
@@ -24,7 +24,7 @@
       <SimpleCell before={<Icon28SlidersOutline />}>Основные</SimpleCell>
     </Group>
 
-    <Group header={<Header mode="secondary">Spacing 16px</Header>}>
+    <Group header={<Header size="s">Spacing 16px</Header>}>
       <SimpleCell before={<Icon28Notifications />}>Уведомления</SimpleCell>
       <SimpleCell before={<Icon28BlockOutline />}>Не беспокоить</SimpleCell>
 
diff --git a/packages/vkui/src/components/Touch/Readme.md b/packages/vkui/src/components/Touch/Readme.md
index fa078b445c..8d5607c7d7 100644
--- a/packages/vkui/src/components/Touch/Readme.md
+++ b/packages/vkui/src/components/Touch/Readme.md
@@ -65,7 +65,7 @@ const Example = () => {
     <View activePanel="gallery">
       <Panel id="gallery">
         <PanelHeader>Touch</PanelHeader>
-        <Group header={<Header mode="secondary">Перетащите кружок</Header>}>
+        <Group header={<Header size="s">Перетащите кружок</Header>}>
           <div
             style={{
               ...containerStyle,
diff --git a/packages/vkui/src/components/UsersStack/Readme.md b/packages/vkui/src/components/UsersStack/Readme.md
index 29abef1b74..5d5f122e40 100644
--- a/packages/vkui/src/components/UsersStack/Readme.md
+++ b/packages/vkui/src/components/UsersStack/Readme.md
@@ -62,7 +62,7 @@ const App = () => {
           </Div>
         </Group>
 
-        <Group header={<Header mode="secondary">Вертикальный режим</Header>}>
+        <Group header={<Header size="s">Вертикальный режим</Header>}>
           <Div>
             <UsersStack
               photos={[
@@ -102,7 +102,7 @@ const App = () => {
           </Flex>
         </Group>
 
-        <Group header={<Header mode="secondary">Кликабельные с тултипом</Header>}>
+        <Group header={<Header size="s">Кликабельные с тултипом</Header>}>
           <Div>
             <UsersStack
               photos={[