feat(Header): Allow to change subtitle component (#6163)

Компонент `Header` позволяет задать текст `subtitle`, но не позволяет поменять тип элемента в котором этот текст будет отрендерен. Добавляем новый проп `subtitleComponent`.
VKCOM · Nov 30, 2023 · 808a6a5 · 808a6a5
1 parent 84eac04
commit 808a6a5
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 2 deletions.
diff --git a/packages/vkui/src/components/Header/Header.stories.tsx b/packages/vkui/src/components/Header/Header.stories.tsx
@@ -28,6 +28,7 @@ export const WithSubtitle: Story = {
   args: {
     ...Playground.args,
     subtitle: 'SOHN — Conrad',
+    subtitleComponent: 'h3',
   },
 };
 

diff --git a/packages/vkui/src/components/Header/Header.test.tsx b/packages/vkui/src/components/Header/Header.test.tsx
@@ -85,7 +85,7 @@ describe('Header', () => {
     expect(screen.getByText('中國人').parentElement?.tagName.toLowerCase()).toMatch('h2');
   });
 
-  it('[typography] HeaderSubtitle is span regardless of mode', () => {
+  it('[typography] HeaderSubtitle is span by default regardless of mode', () => {
     render(
       <Fragment>
         <Header mode="primary" subtitle="Русский" />
@@ -98,6 +98,19 @@ describe('Header', () => {
     expect(getTypographyTagNameByText('Espanõl')).toMatch('span');
   });
 
+  it('[typography] HeaderSubtitle is h3 with subtitleComponent prop regardless of mode', () => {
+    render(
+      <Fragment>
+        <Header mode="primary" subtitle="Русский" subtitleComponent="h3" />
+        <Header mode="secondary" subtitle="English" subtitleComponent="h3" />
+        <Header mode="tertiary" subtitle="Espanõl" subtitleComponent="h3" />
+      </Fragment>,
+    );
+    expect(getTypographyTagNameByText('Русский')).toMatch('h3');
+    expect(getTypographyTagNameByText('English')).toMatch('h3');
+    expect(getTypographyTagNameByText('Espanõl')).toMatch('h3');
+  });
+
   it('[typography] HeaderAside is span regardless of platform', () => {
     render(
       <Fragment>

diff --git a/packages/vkui/src/components/Header/Header.tsx b/packages/vkui/src/components/Header/Header.tsx
@@ -14,6 +14,8 @@ export interface HeaderProps extends HTMLAttributesWithRootRef<HTMLElement>, Has
   mode?: 'primary' | 'secondary' | 'tertiary';
   size?: 'regular' | 'large';
   subtitle?: React.ReactNode;
+  /* Позволяет задать тип элемента в который будет обёрнут subtitle */
+  subtitleComponent?: React.ElementType;
   /**
    * Допускаются иконки, текст, Link
    */
@@ -77,6 +79,7 @@ export const Header = ({
   Component = 'h2',
   children,
   subtitle,
+  subtitleComponent = 'span',
   indicator,
   aside,
   multiline,
@@ -121,7 +124,7 @@ export const Header = ({
               styles['Header__subtitle'],
               multiline && styles['Header__content--multiline'],
             )}
-            Component="span"
+            Component={subtitleComponent}
           >
             {subtitle}
           </Subhead>

diff --git a/packages/vkui/src/components/Header/Readme.md b/packages/vkui/src/components/Header/Readme.md
@@ -27,6 +27,7 @@ const Example = () => {
               </Link>
             }
             subtitle="SOHN — Conrad"
+            subtitleComponent="h3"
           >
             Плейлисты
           </Header>

diff --git a/styleguide/pages/migration_v6.md b/styleguide/pages/migration_v6.md
@@ -229,3 +229,15 @@ interface HasInsets {
 ```
 
 <br/><br/>
+
+## Header
+
+Теперь для подзаголовка `subtitle` можно задать тип тэга с помощью свойства `subtitleComponent`.
+
+```jsx static
+<Header subtitle="SOHN — Conrad" subtitleComponent="h3">
+  Плейлисты
+</Header>
+```
+
+<br/><br/>
-Original file line number
+Diff line change
@@ Expand Up / @@ -28,6 +28,7 @@ export const WithSubtitle: Story = { @@
       args: {
         ...Playground.args,
         subtitle: 'SOHN — Conrad',
+        subtitleComponent: 'h3',
       },
     };
@@ Expand Down @@