feat(ModalCard/ModalCardBase): Allow to specify tags for header and s…

…ubheader (#6164) Так как внутри `ModalCardBase` используется `Title` и `Subhead`, теги в которых мы уже поменяли на `span`, стоит дать возможность переопределять тэги, пока что через свойство, потом через подкомпонентный подход. Стоит также упомянуть изменения в тэгах по умолчанию в migration guide. Ведь меняются они неявно через `Title` и `Subhead`.
VKCOM · Dec 1, 2023 · e7d3e49 · e7d3e49
1 parent 9b2d69e
commit e7d3e49
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 6 deletions.
diff --git a/packages/vkui/src/components/ModalCard/ModalCard.stories.tsx b/packages/vkui/src/components/ModalCard/ModalCard.stories.tsx
@@ -111,7 +111,9 @@ export const CardWithComplexContent: Story = {
         id={MODAL_CARD_CHAT_INVITE}
         icon={<Avatar src={getAvatarUrl('chat_basketball', 200)} size={72} />}
         header="Баскетбол на выходных"
+        headerComponent="h2"
         subheader="Приглашение в беседу"
+        subheaderComponent="span"
         actions={
           <ButtonGroup gap="s" mode="vertical" stretched>
             <Button key="join" size="l" mode="primary" stretched>

diff --git a/packages/vkui/src/components/ModalCard/ModalCard.test.tsx b/packages/vkui/src/components/ModalCard/ModalCard.test.tsx
@@ -36,4 +36,25 @@ describe('ModalCard', () => {
 
     expect(screen.queryByTestId('modal-dismiss-button')).toBeTruthy();
   });
+
+  test('can specify tags for header and subheader', () => {
+    const { rerender } = render(
+      <ModalCard header="Баскетбол на выходных" subheader="Приглашение в беседу" />,
+    );
+
+    expect(screen.getByText('Баскетбол на выходных').tagName.toLowerCase()).toMatch('span');
+    expect(screen.getByText('Приглашение в беседу').tagName.toLowerCase()).toMatch('span');
+
+    rerender(
+      <ModalCard
+        header="Баскетбол на выходных"
+        headerComponent="h2"
+        subheader="Приглашение в беседу"
+        subheaderComponent="h3"
+      />,
+    );
+
+    expect(screen.getByText('Баскетбол на выходных').tagName.toLowerCase()).toMatch('h2');
+    expect(screen.getByText('Приглашение в беседу').tagName.toLowerCase()).toMatch('h3');
+  });
 });
diff --git a/packages/vkui/src/components/ModalCard/ModalCard.tsx b/packages/vkui/src/components/ModalCard/ModalCard.tsx
@@ -26,7 +26,9 @@ const warn = warnOnce('ModalCard');
 export const ModalCard = ({
   icon,
   header,
+  headerComponent,
   subheader,
+  subheaderComponent,
   children,
   actions,
   onClose,
@@ -70,7 +72,9 @@ export const ModalCard = ({
         getRootRef={refs.innerElement}
         icon={icon}
         header={header}
+        headerComponent={headerComponent}
         subheader={subheader}
+        subheaderComponent={subheaderComponent}
         actions={actions}
         onClose={onClose || modalContext.onClose}
         size={size}

diff --git a/packages/vkui/src/components/ModalCardBase/ModalCardBase.stories.tsx b/packages/vkui/src/components/ModalCardBase/ModalCardBase.stories.tsx
@@ -19,7 +19,9 @@ export const Playground: Story = {
   args: {
     style: { width: 450, marginBottom: 20 },
     header: 'Отправляйте деньги друзьям, используя банковскую карту',
+    headerComponent: 'h2',
     subheader: 'Номер карты получателя не нужен — он сам решит, куда зачислить средства.',
+    subheaderComponent: 'span',
     actions: (
       <Button size="l" mode="primary" stretched>
         Попробовать

diff --git a/packages/vkui/src/components/ModalCardBase/ModalCardBase.tsx b/packages/vkui/src/components/ModalCardBase/ModalCardBase.tsx
@@ -23,11 +23,15 @@ export interface ModalCardBaseProps extends HTMLAttributesWithRootRef<HTMLDivEle
    * Заголовок карточки
    */
   header?: React.ReactNode;
+  /* Позволяет поменять тег используемый для заголовка */
+  headerComponent?: React.ElementType;
 
   /**
    * Подзаголовок
    */
   subheader?: React.ReactNode;
+  /* Позволяет поменять тег используемый для подзаголовка */
+  subheaderComponent?: React.ElementType;
 
   /**
    * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:
@@ -72,7 +76,9 @@ export interface ModalCardBaseProps extends HTMLAttributesWithRootRef<HTMLDivEle
 export const ModalCardBase = ({
   icon,
   header,
+  headerComponent = 'span',
   subheader,
+  subheaderComponent = 'span',
   children,
   actions,
   onClose,
@@ -120,6 +126,7 @@ export const ModalCardBase = ({
               styles['ModalCardBase__header'],
               'vkuiInternalModalCardBase__header',
             )}
+            Component={headerComponent}
           >
             {header}
           </Title>
@@ -131,6 +138,7 @@ export const ModalCardBase = ({
                 styles['ModalCardBase__subheader'],
                 'vkuiInternalModalCardBase__subheader',
               )}
+              Component={subheaderComponent}
             >
               {subheader}
             </Subhead>

diff --git a/styleguide/pages/migration_v6.md b/styleguide/pages/migration_v6.md
@@ -198,9 +198,9 @@ interface HasInsets {
 
 ## Title
 
-По умолчанию тэг в котором рендерится компонент теперь `span` и он больше не привязан к значению свойства `level`.
+По умолчанию тeг в котором рендерится компонент теперь `span` и он больше не привязан к значению свойства `level`.
 
-Переопределить тэг по умолчанию можно с помощью свойства `Component`.
+Переопределить тeг по умолчанию можно с помощью свойства `Component`.
 
 ```jsx static
 <Title Component="h1" />
@@ -210,8 +210,8 @@ interface HasInsets {
 
 ## Headline
 
-Изменён тэг (с `h4` на `span`), в котором компонент рендерится по умолчанию.
-Переопределить тэг по умолчанию можно с помощью свойства `Component`.
+Изменён тeг (с `h4` на `span`), в котором компонент рендерится по умолчанию.
+Переопределить тeг по умолчанию можно с помощью свойства `Component`.
 
 ```jsx static
 <Headline Component="h4" />
@@ -221,8 +221,8 @@ interface HasInsets {
 
 ## Subhead
 
-Изменён тэг (с `h5` на `span`), в котором компонент рендерится по умолчанию.
-Переопределить тэг по умолчанию можно с помощью свойства `Component`.
+Изменён тeг (с `h5` на `span`), в котором компонент рендерится по умолчанию.
+Переопределить тeг по умолчанию можно с помощью свойства `Component`.
 
 ```jsx static
 <Subhead Component="h5" />
@@ -253,6 +253,23 @@ interface HasInsets {
 
 <br/><br/>
 
+## ModalCard и ModaCardBase
+
+Тeг в котором значение `header` рендерится по умолчанию изменён с `h2` на `span`.
+Тег в котором значение `subheader` рендерится по умолчанию изменён с `h5` на `span`.
+Поменять теги по умолчанию можно с помощью свойств `headerComponent` и `subheaderComponent`.
+
+```jsx static
+<ModalCard
+  header="Баскетбол на выходных"
+  headerComponent="h2"
+  subheader="Приглашение в беседу"
+  subheaderComponent="h3"
+/>
+```
+
+<br/><br/>
+
 ## Header
 
 Теперь для подзаголовка `subtitle` можно задать тип тэга с помощью свойства `subtitleComponent`.