diff --git a/packages/codemods/src/transforms/v7/__testfixtures__/header/basic.input.tsx b/packages/codemods/src/transforms/v7/__testfixtures__/header/basic.input.tsx index bd0516560d..89de681f87 100644 --- a/packages/codemods/src/transforms/v7/__testfixtures__/header/basic.input.tsx +++ b/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 = ( + + Показать все + {} + + ) + return ( + {/* Проверка изменения size */}
Кто может писать мне личные сообщения
Кто может писать мне личные сообщения
+ + {/* Проверка замены aside на after */} +
+ Показать все + {} + + } + /> +
); }; diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/header.ts.snap b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/header.ts.snap index b71cd4eab9..77b774efcd 100644 --- a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/header.ts.snap +++ b/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 = ( + + Показать все + {} + + ) + return ( ( + {/* Проверка изменения size */}
Кто может писать мне личные сообщения
Кто может писать мне личные сообщения
+ {/* Проверка замены aside на after */} +
+ Показать все + {} + + } + /> +
) ); };" diff --git a/packages/codemods/src/transforms/v7/header.ts b/packages/codemods/src/transforms/v7/header.ts index f397688acc..bb89e39ad0 100644 --- a/packages/codemods/src/transforms/v7/header.ts +++ b/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(); } diff --git a/packages/vkui/src/components/Header/Header.e2e-playground.tsx b/packages/vkui/src/components/Header/Header.e2e-playground.tsx index e4fc7ad701..1c390e8d2d 100644 --- a/packages/vkui/src/components/Header/Header.e2e-playground.tsx +++ b/packages/vkui/src/components/Header/Header.e2e-playground.tsx @@ -22,7 +22,7 @@ export const HeaderPlayground = (props: ComponentPlaygroundProps) => { }, { mode: ['primary'], - aside: [Показать все], + after: [Показать все], }, { mode: ['primary', 'secondary'], @@ -40,7 +40,7 @@ export const HeaderPlayground = (props: ComponentPlaygroundProps) => { { mode: ['primary'], subtitle: ['SOHN — Conrad'], - aside: [Показать все], + after: [Показать все], indicator: [12], }, { diff --git a/packages/vkui/src/components/Header/Header.module.css b/packages/vkui/src/components/Header/Header.module.css index b554e71232..8db401f919 100644 --- a/packages/vkui/src/components/Header/Header.module.css +++ b/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); } diff --git a/packages/vkui/src/components/Header/Header.stories.tsx b/packages/vkui/src/components/Header/Header.stories.tsx index b78e607e4c..9e13e0efbd 100644 --- a/packages/vkui/src/components/Header/Header.stories.tsx +++ b/packages/vkui/src/components/Header/Header.stories.tsx @@ -32,7 +32,7 @@ const story: Meta = { iconSizes: ['12'], requiredIcons: ['Icon12Fire'], }), - aside: createFieldWithPresets({ + after: createFieldWithPresets({ iconSizes: [], additionalPresets: { 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: Показать все, + after: Показать все, }, }; diff --git a/packages/vkui/src/components/Header/Header.test.tsx b/packages/vkui/src/components/Header/Header.test.tsx index a28d95d518..4cc8a9cfb7 100644 --- a/packages/vkui/src/components/Header/Header.test.tsx +++ b/packages/vkui/src/components/Header/Header.test.tsx @@ -114,13 +114,13 @@ describe('Header', () => { render( -
+
-
+
-
+
, ); diff --git a/packages/vkui/src/components/Header/Header.tsx b/packages/vkui/src/components/Header/Header.tsx index 2a67f3779b..bbf73c2a03 100644 --- a/packages/vkui/src/components/Header/Header.tsx +++ b/packages/vkui/src/components/Header/Header.tsx @@ -21,7 +21,7 @@ export interface HeaderProps extends HTMLAttributesWithRootRef, 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 = ({ )} - {hasReactNode(aside) && ( - - {aside} + {hasReactNode(after) && ( + + {after} )} diff --git a/packages/vkui/src/components/Header/Readme.md b/packages/vkui/src/components/Header/Readme.md index 15ea0765cd..6100a43b40 100644 --- a/packages/vkui/src/components/Header/Readme.md +++ b/packages/vkui/src/components/Header/Readme.md @@ -9,7 +9,7 @@ const Example = () => {
Показать все {platform === 'vkcom' && } @@ -20,7 +20,7 @@ const Example = () => {
Показать все {platform === 'vkcom' && } @@ -33,7 +33,7 @@ const Example = () => {
Показать все {platform === 'vkcom' && } @@ -45,7 +45,7 @@ const Example = () => {
Показать все {platform === 'vkcom' && } @@ -63,7 +63,7 @@ const Example = () => {
Показать все {platform === 'vkcom' && } @@ -74,7 +74,7 @@ const Example = () => {
Показать все {platform === 'vkcom' && } @@ -86,7 +86,7 @@ const Example = () => {
Показать все {platform === 'vkcom' && } @@ -135,7 +135,7 @@ const Example = () => { 3 } - aside={ + after={ Показать все {platform === 'vkcom' && } @@ -159,7 +159,7 @@ const Example = () => { 3 } - aside={ + after={ Показать все {platform === 'vkcom' && } diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-android-chromium-dark-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-android-chromium-dark-1-snap.png index d8b9a05788..5c660976b0 100644 --- a/packages/vkui/src/components/Header/__image_snapshots__/header-android-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/Header/__image_snapshots__/header-android-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e74653bf49a4e8b656c055a1c891bd47ed850178a7ae1ba9208187ccd4fe90bf -size 284588 +oid sha256:7666611c5e1ed49bf707a02f2bf706c9658951b1f4f7ca58049fb011683bd3e6 +size 284775 diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-android-chromium-light-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-android-chromium-light-1-snap.png index d6a009ea9c..01ad7d4cf8 100644 --- a/packages/vkui/src/components/Header/__image_snapshots__/header-android-chromium-light-1-snap.png +++ b/packages/vkui/src/components/Header/__image_snapshots__/header-android-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1be509953d7d10e13953a7e26635c4a22e6c8d44663b068deb21b54a11cc86c9 -size 284313 +oid sha256:eb5335a42e781e3a86417aec2d384533f3918743c814dfbb30ab6b26b8d0f836 +size 284521 diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-ios-webkit-dark-1-snap.png index 95c0d414c8..77af64cfdb 100644 --- a/packages/vkui/src/components/Header/__image_snapshots__/header-ios-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/Header/__image_snapshots__/header-ios-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e942fc61fb0944e23f3bcd0e14d20ff29f16be84c7c3bad691e262947f9d23dd -size 293309 +oid sha256:e3307493705844b7b913476e68efcc08e6b1f3e61fd1f2414d194d1b445a6bd4 +size 293619 diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-ios-webkit-light-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-ios-webkit-light-1-snap.png index 4a9f60eda4..7948125cc0 100644 --- a/packages/vkui/src/components/Header/__image_snapshots__/header-ios-webkit-light-1-snap.png +++ b/packages/vkui/src/components/Header/__image_snapshots__/header-ios-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5125dfaef12ee2c8401a93b3efd508665d35310be1598b4181c79b44170f4e3b -size 289341 +oid sha256:9bd28b3b341ccef41702330979df36e95fb9beab2a1f59555906db8ebbf12d8f +size 289627 diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-chromium-dark-1-snap.png index 2c8ce776fc..7d05155744 100644 --- a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6050ee85c5794c28cf24866f1f97fdaef169629adc63d0aa87e92f27017c2347 -size 283920 +oid sha256:67567d1fe5fe4eb126416104d6c75948b6d1e65a42e40f8e9497494e72924905 +size 284171 diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-chromium-light-1-snap.png index d786d5eb78..2e5418fd88 100644 --- a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-chromium-light-1-snap.png +++ b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6bc93004d843488885556690704edc030e5c1f12f43312d343dd7f3fdc9e471a -size 285100 +oid sha256:25cbae3283fd68a7462557fa2094e9e160a73d48403230dd817e119b33e60757 +size 285365 diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-firefox-dark-1-snap.png index 42a79e6fab..6e8f3a7365 100644 --- a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-firefox-dark-1-snap.png +++ b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-firefox-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:fae60183c8ae9ad81937e597c4a1a5e0fb415180371ae947145027c6456b55c0 -size 430444 +oid sha256:efa4bd21a6c016bf8a1c3e81047a00d00bef01c07e600416f344a8f2de0d644d +size 430643 diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-firefox-light-1-snap.png index 0c9c580986..1ed7b35fc0 100644 --- a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-firefox-light-1-snap.png +++ b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-firefox-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2a98f21a4dafb23143f21de73f4c4bbb65a121871f353950ebf3392918816599 -size 421488 +oid sha256:3004589e0249214126cf18400e889b34d4d45ef728435df0ac91b9820f489393 +size 421708 diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-webkit-dark-1-snap.png index 26bc82a0ec..6d0358445a 100644 --- a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f73109e1970ab6a459d965dc42f755f00cd5e7ff46ad27ab001d283e89768ec1 -size 288350 +oid sha256:43c36d15d38833955b9ef890cf045d41c476a20666c8b7c659cb6a3b6821c35a +size 288625 diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-webkit-light-1-snap.png index eadf9305e3..3afb8541de 100644 --- a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-webkit-light-1-snap.png +++ b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b1ddf00669c026933fda37bbaadececc2a56f57411785e56333e64712cf6970b -size 290069 +oid sha256:d0661f223011437cf3a7254c5202c23d5fe10a4659ad2f96f2f218d3d2a12bb3 +size 290380