feat(Header): rename prop aside to padding (#7764)

h2. Описание

Переименовал в компоненте `Header` свойство  `aside` to `after`


h2. Release notes
h2. BREAKING CHANGE
- Header: свойство `aside` переименовано в `after`
  ```diff
  <Header
    mode="primary"
    subtitle="SOHN — Conrad"
    subtitleComponent="h3"
  - aside={
  + after={
      <Link>
        Показать все
        {<Icon12ChevronOutline />}
      </Link>
    }
  />
  ```

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

@@ -1,15 +1,42 @@
-import { Header } from '@vkontakte/vkui';
+import { Header, Icon12ChevronOutline, Link } from '@vkontakte/vkui';
 import React from 'react';
 
 const App = () => {
+  const aside = (
+    <Link>
+      Показать все
+      {<Icon12ChevronOutline />}
+    </Link>
+  )
+
   return (
     <React.Fragment>
+      {/* Проверка изменения size */}
       <Header mode="primary" multiline size="large">
         Кто может писать мне личные сообщения
       </Header>
       <Header mode="secondary" multiline size="regular">
         Кто может писать мне личные сообщения
       </Header>
+
+      {/* Проверка замены aside на after */}
+      <Header
+        mode="primary"
+        subtitle="SOHN — Conrad"
+        subtitleComponent="h3"
+        aside={
+          <Link>
+            Показать все
+            {<Icon12ChevronOutline />}
+          </Link>
+        }
+      />
+      <Header
+        mode="primary"
+        subtitle="SOHN — Conrad"
+        subtitleComponent="h3"
+        aside={aside}
+      />
     </React.Fragment>
   );
 };

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

@@ -1,18 +1,44 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`header transforms correctly 1`] = `
-"import { Header } from '@vkontakte/vkui';
+"import { Header, Icon12ChevronOutline, Link } from '@vkontakte/vkui';
 import React from 'react';
 
 const App = () => {
+  const aside = (
+    <Link>
+      Показать все
+      {<Icon12ChevronOutline />}
+    </Link>
+  )
+
   return (
     (<React.Fragment>
+      {/* Проверка изменения size */}
       <Header mode="primary" multiline size="l">
         Кто может писать мне личные сообщения
       </Header>
       <Header mode="secondary" multiline size="m">
         Кто может писать мне личные сообщения
       </Header>
+      {/* Проверка замены aside на after */}
+      <Header
+        mode="primary"
+        subtitle="SOHN — Conrad"
+        subtitleComponent="h3"
+        after={
+          <Link>
+            Показать все
+            {<Icon12ChevronOutline />}
+          </Link>
+        }
+      />
+      <Header
+        mode="primary"
+        subtitle="SOHN — Conrad"
+        subtitleComponent="h3"
+        after={aside}
+      />
     </React.Fragment>)
   );
 };"

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

@@ -1,6 +1,6 @@
 import { API, FileInfo } from 'jscodeshift';
 import { remapSizePropValue } from './common/remapSizePropValue';
-import { getImportInfo } from '../../codemod-helpers';
+import { getImportInfo, renameProp } from '../../codemod-helpers';
 import { JSCodeShiftOptions } from '../../types';
 
 export const parser = 'tsx';
@@ -25,5 +25,7 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi
     },
   });
 
+  renameProp(j, source, localName, { aside: 'after' });
+
   return source.toSource();
 }

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

@@ -22,7 +22,7 @@ export const HeaderPlayground = (props: ComponentPlaygroundProps) => {
         },
         {
           mode: ['primary'],
-          aside: [<Link key="link">Показать все</Link>],
+          after: [<Link key="link">Показать все</Link>],
         },
         {
           mode: ['primary', 'secondary'],
@@ -40,7 +40,7 @@ export const HeaderPlayground = (props: ComponentPlaygroundProps) => {
         {
           mode: ['primary'],
           subtitle: ['SOHN — Conrad'],
-          aside: [<Link key="link">Показать все</Link>],
+          after: [<Link key="link">Показать все</Link>],
           indicator: [12],
         },
         {

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

@@ -98,30 +98,30 @@
   margin-inline-start: 8px;
 }
 
-.aside {
+.after {
   display: flex;
   white-space: nowrap;
 }
 
 /* stylelint-disable selector-max-universal */
-.aside.aside > * {
+.after.after > * {
   margin-block: 13px 7px;
   margin-inline-start: 12px;
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-.aside > :global(.vkuiIcon) {
+.after > :global(.vkuiIcon) {
   position: relative;
   color: var(--vkui--color_icon_secondary);
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-.aside > :global(.vkuiIcon--24) {
+.after > :global(.vkuiIcon--24) {
   margin-block: 11px 5px;
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-.aside > :global(.vkuiIcon--16) {
+.after > :global(.vkuiIcon--16) {
   margin-block: 15px 9px;
 }
 
@@ -206,6 +206,6 @@
  * Impact:
  * Link
  */
-.aside {
+.after {
   --vkui_internal--link-color: var(--vkui--color_text_accent);
 }

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

@@ -32,7 +32,7 @@ const story: Meta<HeaderProps> = {
       iconSizes: ['12'],
       requiredIcons: ['Icon12Fire'],
     }),
-    aside: createFieldWithPresets({
+    after: createFieldWithPresets({
       iconSizes: [],
       additionalPresets: {
         Link: <Link>Показать все</Link>,
@@ -75,7 +75,7 @@ export const WithAside: Story = {
   ...Playground,
   args: {
     ...Playground.args,
-    aside: 'Link',
+    after: 'Link',
   },
 };
 
@@ -114,6 +114,6 @@ export const WithAllFeatures: Story = {
     beforeSubtitle: 'Icon12Tag',
     afterSubtitle: 'Icon12Fire',
     subtitle: 'SOHN — Conrad',
-    aside: <Link>Показать все</Link>,
+    after: <Link>Показать все</Link>,
   },
 };

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

@@ -114,13 +114,13 @@ describe('Header', () => {
     render(
       <Fragment>
         <ConfigProvider platform="android">
-          <Header aside="Русский" />
+          <Header after="Русский" />
         </ConfigProvider>
         <ConfigProvider platform="ios">
-          <Header aside="English" />
+          <Header after="English" />
         </ConfigProvider>
         <ConfigProvider platform="vkcom">
-          <Header aside="Espanõl" />
+          <Header after="Espanõl" />
         </ConfigProvider>
       </Fragment>,
     );

packages/vkui/src/components/Header/Header.tsx

@@ -21,7 +21,7 @@ export interface HeaderProps extends HTMLAttributesWithRootRef<HTMLElement>, Has
   /**
    * Допускаются иконки, текст, Link
    */
-  aside?: React.ReactNode;
+  after?: React.ReactNode;
   /**
    * Допускаются текст, Indicator
    */
@@ -103,7 +103,7 @@ export const Header = ({
   subtitle,
   subtitleComponent = 'span',
   indicator,
-  aside,
+  after,
   multiline,
   before,
   beforeTitle,
@@ -155,9 +155,9 @@ export const Header = ({
         )}
       </div>
 
-      {hasReactNode(aside) && (
-        <Paragraph className={styles.aside} Component="span">
-          {aside}
+      {hasReactNode(after) && (
+        <Paragraph className={styles.after} Component="span">
+          {after}
         </Paragraph>
       )}
     </RootComponent>

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

@@ -9,7 +9,7 @@ const Example = () => {
         <Group>
           <Header
             mode="primary"
-            aside={
+            after={
               <Link>
                 Показать все
                 {platform === 'vkcom' && <Icon12ChevronOutline />}
@@ -20,7 +20,7 @@ const Example = () => {
           </Header>
           <Header
             mode="primary"
-            aside={
+            after={
               <Link>
                 Показать все
                 {platform === 'vkcom' && <Icon12ChevronOutline />}
@@ -33,7 +33,7 @@ const Example = () => {
           </Header>
           <Header
             mode="primary"
-            aside={
+            after={
               <Link>
                 Показать все
                 {platform === 'vkcom' && <Icon12ChevronOutline />}
@@ -45,7 +45,7 @@ const Example = () => {
           </Header>
           <Header
             mode="primary"
-            aside={
+            after={
               <Link>
                 Показать все
                 {platform === 'vkcom' && <Icon12ChevronOutline />}
@@ -63,7 +63,7 @@ const Example = () => {
         <Group>
           <Header
             mode="secondary"
-            aside={
+            after={
               <Link>
                 Показать все
                 {platform === 'vkcom' && <Icon12ChevronOutline />}
@@ -74,7 +74,7 @@ const Example = () => {
           </Header>
           <Header
             mode="secondary"
-            aside={
+            after={
               <Link>
                 Показать все
                 {platform === 'vkcom' && <Icon12ChevronOutline />}
@@ -86,7 +86,7 @@ const Example = () => {
           </Header>
           <Header
             mode="secondary"
-            aside={
+            after={
               <Link>
                 Показать все
                 {platform === 'vkcom' && <Icon12ChevronOutline />}
@@ -135,7 +135,7 @@ const Example = () => {
                 3
               </Counter>
             }
-            aside={
+            after={
               <Link>
                 Показать все
                 {platform === 'vkcom' && <Icon12ChevronOutline />}
@@ -159,7 +159,7 @@ const Example = () => {
                 3
               </Counter>
             }
-            aside={
+            after={
               <Link>
                 Показать все
                 {platform === 'vkcom' && <Icon12ChevronOutline />}