feat(ActionSheet): rename header to title, text to description (

#7785)

packages/codemods/src/transforms/v7/__testfixtures__/action-sheet/basic.input.tsx

@@ -0,0 +1,16 @@
+import { ActionSheet, ActionSheetItem } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <ActionSheet
+        onClose={() => {}}
+        header="Вы действительно хотите удалить это видео из Ваших видео?"
+        text="Данное действие реально удалит видео, подумайте!"
+      >
+        <ActionSheetItem mode="destructive">Удалить видео</ActionSheetItem>
+      </ActionSheet>
+    </React.Fragment>
+  );
+};

packages/codemods/src/transforms/v7/__tests__/__snapshots__/action-sheet.ts.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`action-sheet transforms correctly 1`] = `
+"import { ActionSheet, ActionSheetItem } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    (<React.Fragment>
+      <ActionSheet
+        onClose={() => {}}
+        title="Вы действительно хотите удалить это видео из Ваших видео?"
+        description="Данное действие реально удалит видео, подумайте!"
+      >
+        <ActionSheetItem mode="destructive">Удалить видео</ActionSheetItem>
+      </ActionSheet>
+    </React.Fragment>)
+  );
+};"
+`;

packages/codemods/src/transforms/v7/__tests__/action-sheet.ts

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

packages/codemods/src/transforms/v7/action-sheet.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, 'ActionSheet', alias);
+
+  if (localName) {
+    renameProp(j, source, localName, { header: 'title', text: 'description' });
+  }
+
+  return source.toSource();
+}

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

@@ -84,7 +84,7 @@ const propSets = [
         </ActionSheetItem>,
       ],
     ],
-    header: ['Заголовок'],
+    title: ['Заголовок'],
   },
 ];
 

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

@@ -41,7 +41,7 @@
   animation: animation-actionsheet-slide-down var(--vkui--animation_duration_m) var(--vkui--animation_easing_platform);
 }
 
-.title + .text {
+.title + .description {
   margin-block-start: 8px;
 }
 
@@ -79,7 +79,7 @@
   position: relative;
 }
 
-.ios .text {
+.ios .description {
   position: relative;
 }
 

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

@@ -23,8 +23,8 @@ const story: Meta<ActionSheetProps> = {
   component: ActionSheet,
   parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
   argTypes: {
-    header: StringArg,
-    text: StringArg,
+    title: StringArg,
+    description: StringArg,
   },
 };
 
@@ -109,7 +109,7 @@ export const WithSubtitle: Story = {
 export const WithTitle: Story = {
   ...Base,
   args: {
-    header: 'Вы действительно хотите удалить это видео из Ваших видео?',
+    title: 'Вы действительно хотите удалить это видео из Ваших видео?',
     items: [{ mode: 'destructive', children: 'Удалить видео' }],
   },
 };

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

@@ -206,7 +206,7 @@ describe(ActionSheet, () => {
   });
 
   it('renders header and text', () => {
-    render(<ActionSheetMobile header="The header title" text="Text footnote" />);
+    render(<ActionSheetMobile title="The header title" description="Text footnote" />);
     act(jest.runAllTimers);
     expect(screen.queryByText('The header title')).toBeTruthy();
     expect(screen.queryByText('Text footnote')).toBeTruthy();

packages/vkui/src/components/ActionSheet/ActionSheet.tsx

@@ -26,9 +26,9 @@ export interface ActionSheetProps
       SharedDropdownProps,
       'toggleRef' | 'popupOffsetDistance' | 'placement' | 'autoFocus'
     >,
-    Omit<React.HTMLAttributes<HTMLDivElement>, 'autoFocus'> {
-  header?: React.ReactNode;
-  text?: React.ReactNode;
+    Omit<React.HTMLAttributes<HTMLDivElement>, 'autoFocus' | 'title'> {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
   /**
    * Закрыть попап по клику снаружи.
    */
@@ -46,8 +46,8 @@ export interface ActionSheetProps
 export const ActionSheet = ({
   children,
   className,
-  header,
-  text,
+  title,
+  description,
   style,
   iosCloseItem,
   popupOffsetDistance,
@@ -114,14 +114,14 @@ export const ActionSheet = ({
         style={mode === 'menu' ? style : undefined}
       >
         <div className={styles.contentWrapper}>
-          {(header || text) && (
+          {(title || description) && (
             <div className={styles.header}>
-              {header && (
+              {title && (
                 <Footnote weight="2" className={styles.title}>
-                  {header}
+                  {title}
                 </Footnote>
               )}
-              {text && <Footnote className={styles.text}>{text}</Footnote>}
+              {description && <Footnote className={styles.description}>{description}</Footnote>}
             </div>
           )}
           {children}

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

@@ -147,7 +147,7 @@ const SelectableActionSheet = () => {
   const speeds = ['0.25x', '0.5x', '0.75x', 'Нормальная', '1.25x', '1.5x', '2x', '3x'];
 
   return (
-    <ActionSheet header="Изменить скорость видео" onClose={onClose} toggleRef={selectableTargetRef}>
+    <ActionSheet title="Изменить скорость видео" onClose={onClose} toggleRef={selectableTargetRef}>
       {speeds.map((speed) => (
         <ActionSheetItem
           onChange={onChange}
@@ -170,7 +170,7 @@ const openTitle = () =>
     'title',
     <ActionSheet
       onClose={onClose}
-      header="Вы действительно хотите удалить это видео из Ваших видео?"
+      title="Вы действительно хотите удалить это видео из Ваших видео?"
       toggleRef={titleTargetRef}
     >
       <ActionSheetItem mode="destructive">Удалить видео</ActionSheetItem>