feat(Alert): rename typography props (#7769)

packages/codemods/src/transforms/v7/__testfixtures__/alert/basic.input.tsx

@@ -0,0 +1,25 @@
+import { Alert } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <Alert
+        actions={[
+          {
+            title: 'Лишить права',
+            mode: 'destructive',
+          },
+          {
+            title: 'Отмена',
+            mode: 'cancel',
+          },
+        ]}
+        header="Подтвердите действие"
+        text="Вы уверены, что хотите лишить пользователя права на модерацию контента?"
+        actionsAlign="left"
+        actionsLayout="horizontal"
+      />
+    </React.Fragment>
+  );
+};

packages/codemods/src/transforms/v7/__tests__/__snapshots__/alert.ts.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`alert transforms correctly 1`] = `
+"import { Alert } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    (<React.Fragment>
+      <Alert
+        actions={[
+          {
+            title: 'Лишить права',
+            mode: 'destructive',
+          },
+          {
+            title: 'Отмена',
+            mode: 'cancel',
+          },
+        ]}
+        title="Подтвердите действие"
+        description="Вы уверены, что хотите лишить пользователя права на модерацию контента?"
+        actionsAlign="left"
+        actionsLayout="horizontal"
+      />
+    </React.Fragment>)
+  );
+};"
+`;

packages/codemods/src/transforms/v7/__tests__/alert.ts

@@ -0,0 +1,12 @@
+jest.autoMockOff();
+
+import { defineSnapshotTestFromFixture } from '../../../testHelpers/testHelper';
+
+const name = 'alert';
+const fixtures = ['basic'] as const;
+
+describe(name, () => {
+  fixtures.forEach((test) =>
+    defineSnapshotTestFromFixture(__dirname, name, global.TRANSFORM_OPTIONS, `${name}/${test}`),
+  );
+});

packages/codemods/src/transforms/v7/alert.ts

@@ -0,0 +1,18 @@
+import { API, FileInfo } from 'jscodeshift';
+import { getImportInfo, renameProp } from '../../codemod-helpers';
+import { JSCodeShiftOptions } from '../../types';
+
+export const parser = 'tsx';
+
+export default function transformer(file: FileInfo, api: API, options: JSCodeShiftOptions) {
+  const { alias } = options;
+  const j = api.jscodeshift;
+  const source = j(file.source);
+  const { localName } = getImportInfo(j, file, 'Alert', alias);
+
+  if (localName) {
+    renameProp(j, source, localName, { header: 'title', text: 'description' });
+  }
+
+  return source.toSource();
+}

packages/vkui/src/components/Alert/Alert.e2e-playground.tsx

@@ -18,8 +18,8 @@ const destroy: AlertActionInterface = { mode: 'destructive', title: 'Destroy' };
 
 const baseRender = (props: AlertProps) => (
   <Alert
-    header="Подтвердите действие"
-    text="Вы уверены, что хотите лишить пользователя права на модерацию контента?"
+    title="Подтвердите действие"
+    description="Вы уверены, что хотите лишить пользователя права на модерацию контента?"
     style={{ position: 'relative' }}
     autoFocus={false}
     {...props}
@@ -80,10 +80,10 @@ export const AlertLongWordPlayground = (props: ComponentPlaygroundProps) => {
       {...props}
       propSets={[
         {
-          header: [
+          title: [
             'Оченьоченьоченьдлинноенеразрывноеслововзаголовкекотороедолжнопереноситьсянановуюстрочкуиневыходитьзаграницы',
           ],
-          text: [
+          description: [
             'Оченьоченьоченьдлинноенеразрывноеслововописаниикотороедолжнопереноситьсянановуюстрочкуиневыходитьзаграницы',
           ],
         },

packages/vkui/src/components/Alert/Alert.module.css

@@ -61,16 +61,16 @@
   padding-inline: 12px;
 }
 
-.header {
+.title {
   margin-block-end: 8px;
 }
 
-.text {
+.description {
   color: var(--vkui--color_text_secondary);
 }
 
-.header,
-.text {
+.title,
+.description {
   word-break: break-word;
 }
 
@@ -125,11 +125,11 @@
   text-align: center;
 }
 
-.ios .header:not(:last-child) {
+.ios .title:not(:last-child) {
   margin-block-end: 7px;
 }
 
-.ios .text {
+.ios .description {
   color: inherit;
 }
 

packages/vkui/src/components/Alert/Alert.stories.tsx

@@ -42,7 +42,7 @@ export const Playground: StoryObj<AlertProps> = {
       },
     ],
     actionsLayout: 'horizontal',
-    header: 'Удаление документа',
-    text: 'Вы уверены, что хотите удалить этот документ?',
+    title: 'Удаление документа',
+    description: 'Вы уверены, что хотите удалить этот документ?',
   },
 };

packages/vkui/src/components/Alert/Alert.test.tsx

@@ -295,42 +295,42 @@ describe('Alert', () => {
 
   it.each([
     {
-      header: 'Header',
-      headerClassNames: [titleStyles.level3, typographyStyles.weight1],
-      text: 'Text',
-      textClassNames: [captionStyles.level1],
+      title: 'Header',
+      titleClassNames: [titleStyles.level3, typographyStyles.weight1],
+      description: 'Text',
+      descriptionClassNames: [captionStyles.level1],
       platform: Platform.IOS,
     },
     {
-      header: 'Header',
-      headerClassNames: [titleStyles.level2, typographyStyles.weight2],
-      text: 'Text',
-      textClassNames: [footnoteStyles.host],
+      title: 'Header',
+      titleClassNames: [titleStyles.level2, typographyStyles.weight2],
+      description: 'Text',
+      descriptionClassNames: [footnoteStyles.host],
       platform: Platform.VKCOM,
     },
     {
-      header: 'Header',
-      headerClassNames: [titleStyles.level2, typographyStyles.weight2],
-      text: 'Text',
-      textClassNames: [typographyStyles.weight3],
+      title: 'Header',
+      titleClassNames: [titleStyles.level2, typographyStyles.weight2],
+      description: 'Text',
+      descriptionClassNames: [typographyStyles.weight3],
       platform: Platform.ANDROID,
     },
   ])(
     `should have header classNames "$headerClassNames" and text classNames "$textClassNames" when use platform "$platform"`,
-    async ({ header, text, headerClassNames, textClassNames, platform }) => {
+    async ({ title, description, titleClassNames, descriptionClassNames, platform }) => {
       const result = render(
         <ConfigProvider platform={platform}>
-          <Alert onClose={jest.fn()} header={header} text={text} />
+          <Alert onClose={jest.fn()} title={title} description={description} />
         </ConfigProvider>,
       );
       await waitCSSKeyframesAnimation(result.getByRole('alertdialog'), {
         runOnlyPendingTimers: true,
       });
-      const headerElement = result.container.getElementsByClassName(styles.header)[0];
-      const textElement = result.container.getElementsByClassName(styles.text)[0];
+      const headerElement = result.container.getElementsByClassName(styles.title)[0];
+      const textElement = result.container.getElementsByClassName(styles.description)[0];
 
-      headerClassNames.forEach((className) => expect(headerElement).toHaveClass(className));
-      textClassNames.forEach((className) => expect(textElement).toHaveClass(className));
+      titleClassNames.forEach((className) => expect(headerElement).toHaveClass(className));
+      descriptionClassNames.forEach((className) => expect(textElement).toHaveClass(className));
     },
   );
 });

packages/vkui/src/components/Alert/Alert.tsx

@@ -21,7 +21,7 @@ import { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';
 import { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';
 import type { AlertActionProps } from './AlertAction';
 import { AlertActions } from './AlertActions';
-import { AlertHeader, AlertText } from './AlertTypography';
+import { AlertDescription, AlertTitle } from './AlertTypography';
 import styles from './Alert.module.css';
 
 type AlertActionMode = 'cancel' | 'destructive' | 'default';
@@ -45,13 +45,15 @@ export interface AlertActionInterface
   mode: AlertActionMode;
 }
 
-export interface AlertProps extends React.HTMLAttributes<HTMLElement>, HasRootRef<HTMLDivElement> {
+export interface AlertProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, 'title'>,
+    HasRootRef<HTMLDivElement> {
   actionsLayout?: 'vertical' | 'horizontal';
   actionsAlign?: AlignType;
   actions?: AlertActionInterface[];
   renderAction?: (props: AlertActionProps) => React.ReactNode;
-  header?: React.ReactNode;
-  text?: React.ReactNode;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
   onClose: VoidFunction;
   /**
    * Текст кнопки закрытия. Делает ее доступной для ассистивных технологий
@@ -77,8 +79,8 @@ export const Alert = ({
   children,
   className,
   style,
-  text,
-  header,
+  title,
+  description,
   onClose,
   dismissLabel = 'Закрыть предупреждение',
   renderAction,
@@ -90,8 +92,8 @@ export const Alert = ({
 }: AlertProps): React.ReactNode => {
   const generatedId = React.useId();
 
-  const headerId = `vkui-alert-${generatedId}-header`;
-  const textId = `vkui-alert-${generatedId}-text`;
+  const titleId = `vkui-alert-${generatedId}-title`;
+  const descriptionId = `vkui-alert-${generatedId}-description`;
 
   const platform = usePlatform();
   const { isDesktop } = useAdaptivityWithJSMediaQueries();
@@ -157,17 +159,19 @@ export const Alert = ({
         )}
         role="alertdialog"
         aria-modal
-        aria-labelledby={headerId}
-        aria-describedby={textId}
+        aria-labelledby={titleId}
+        aria-describedby={descriptionId}
       >
         <div
           className={classNames(
             styles.content,
             dismissButtonMode === 'inside' && styles.contentWithButton,
           )}
         >
-          {hasReactNode(header) && <AlertHeader id={headerId}>{header}</AlertHeader>}
-          {hasReactNode(text) && <AlertText id={textId}>{text}</AlertText>}
+          {hasReactNode(title) && <AlertTitle id={titleId}>{title}</AlertTitle>}
+          {hasReactNode(description) && (
+            <AlertDescription id={descriptionId}>{description}</AlertDescription>
+          )}
           {children}
           {isDismissButtonVisible && dismissButtonMode === 'inside' && (
             <IconButton

packages/vkui/src/components/Alert/AlertTypography.tsx

@@ -12,25 +12,25 @@ import styles from './Alert.module.css';
 interface AlertTypography extends HasChildren {
   id: string;
 }
-export const AlertHeader = (props: AlertTypography): React.ReactNode => {
+export const AlertTitle = (props: AlertTypography): React.ReactNode => {
   const platform = usePlatform();
 
   switch (platform) {
     case 'ios':
-      return <Title className={styles.header} weight="1" level="3" {...props} />;
+      return <Title className={styles.title} weight="1" level="3" {...props} />;
     default:
-      return <Title className={styles.header} weight="2" level="2" {...props} />;
+      return <Title className={styles.title} weight="2" level="2" {...props} />;
   }
 };
-export const AlertText = (props: AlertTypography): React.ReactNode => {
+export const AlertDescription = (props: AlertTypography): React.ReactNode => {
   const platform = usePlatform();
 
   switch (platform) {
     case 'vkcom':
-      return <Footnote className={styles.text} {...props} />;
+      return <Footnote className={styles.description} {...props} />;
     case 'ios':
-      return <Caption className={styles.text} {...props} />;
+      return <Caption className={styles.description} {...props} />;
     default:
-      return <Text Component="span" className={styles.text} weight="3" {...props} />;
+      return <Text Component="span" className={styles.description} weight="3" {...props} />;
   }
 };

packages/vkui/src/components/Alert/Readme.md

@@ -51,8 +51,8 @@ const Example = () => {
         ]}
         actionsLayout="vertical"
         onClose={closePopout}
-        header="Подтвердите действие"
-        text="Вы уверены, что хотите лишить пользователя права на модерацию контента?"
+        title="Подтвердите действие"
+        description="Вы уверены, что хотите лишить пользователя права на модерацию контента?"
       />,
     );
   };
@@ -74,8 +74,8 @@ const Example = () => {
         actionsLayout="horizontal"
         dismissButtonMode="inside"
         onClose={closePopout}
-        header="Удаление документа"
-        text="Вы уверены, что хотите удалить этот документ?"
+        title="Удаление документа"
+        description="Вы уверены, что хотите удалить этот документ?"
       />,
     );
   };
@@ -138,8 +138,8 @@ const Example = () => {
         actionsLayout="horizontal"
         renderAction={renderAction}
         onClose={closePopout}
-        header="Подтвердите действие"
-        text="Вы уверены, что хотите лишить пользователя права на модерацию контента?"
+        title="Подтвердите действие"
+        description="Вы уверены, что хотите лишить пользователя права на модерацию контента?"
       />,
     );
   };

packages/vkui/src/components/SplitLayout/Readme.md

@@ -57,7 +57,7 @@ const Example = () => {
               <Cell onClick={() => setModal(modals[0])}>modal 1</Cell>
               <Cell onClick={() => setModal(modals[1])}>modal 2</Cell>
               <Cell
-                onClick={() => setPopout(<Alert header="Alert!" onClose={() => setPopout(null)} />)}
+                onClick={() => setPopout(<Alert title="Alert!" onClose={() => setPopout(null)} />)}
               >
                 alert
               </Cell>