fix(Header): fix docs and tests

VKCOM · Oct 29, 2024 · 1518ddc · 1518ddc
1 parent a1255ee
commit 1518ddc
Show file tree

Hide file tree

Showing 26 changed files with 72 additions and 71 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -2,21 +2,21 @@
 <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>
       <CellButton onClick={() => {}} before={<Icon28DeleteOutline />} appearance="negative">
         Удалить беседу
       </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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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')}