diff --git a/packages/vkui/src/components/Header/Header.stories.tsx b/packages/vkui/src/components/Header/Header.stories.tsx index ce80b89482..232e42e9ab 100644 --- 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 index aed0471a0c..74e0c42777 100644 --- 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(
@@ -98,6 +98,19 @@ describe('Header', () => { expect(getTypographyTagNameByText('Espanõl')).toMatch('span'); }); + it('[typography] HeaderSubtitle is h3 with subtitleComponent prop regardless of mode', () => { + render( + +
+
+
+ , + ); + expect(getTypographyTagNameByText('Русский')).toMatch('h3'); + expect(getTypographyTagNameByText('English')).toMatch('h3'); + expect(getTypographyTagNameByText('Espanõl')).toMatch('h3'); + }); + it('[typography] HeaderAside is span regardless of platform', () => { render( diff --git a/packages/vkui/src/components/Header/Header.tsx b/packages/vkui/src/components/Header/Header.tsx index 172a5fb3ac..dfa9e440b6 100644 --- 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, 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} diff --git a/packages/vkui/src/components/Header/Readme.md b/packages/vkui/src/components/Header/Readme.md index 76b79a5ec3..4ae382a42b 100644 --- a/packages/vkui/src/components/Header/Readme.md +++ b/packages/vkui/src/components/Header/Readme.md @@ -27,6 +27,7 @@ const Example = () => { } subtitle="SOHN — Conrad" + subtitleComponent="h3" > Плейлисты
diff --git a/styleguide/pages/migration_v6.md b/styleguide/pages/migration_v6.md index f56e405cd8..b071081f07 100644 --- a/styleguide/pages/migration_v6.md +++ b/styleguide/pages/migration_v6.md @@ -229,3 +229,15 @@ interface HasInsets { ```

+ +## Header + +Теперь для подзаголовка `subtitle` можно задать тип тэга с помощью свойства `subtitleComponent`. + +```jsx static +
+ Плейлисты +
+``` + +