diff --git a/packages/codemods/src/transforms/v7/__testfixtures__/form-status/basic.input.tsx b/packages/codemods/src/transforms/v7/__testfixtures__/form-status/basic.input.tsx
new file mode 100644
index 0000000000..9aaaba702b
--- /dev/null
+++ b/packages/codemods/src/transforms/v7/__testfixtures__/form-status/basic.input.tsx
@@ -0,0 +1,12 @@
+import { FormStatus } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+ return (
+
+
+ Необходимо корректно ввести номер в международном формате
+
+
+ );
+};
diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/banner.ts.snap b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/banner.ts.snap
index 3f659e01d5..3493009bdd 100644
--- a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/banner.ts.snap
+++ b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/banner.ts.snap
@@ -9,16 +9,16 @@ const App = () => {
(
}
- header="Сегодня день рождения Михаила Лихачёва"
- subhead="Подарите подарок"
- extraSubhead="Дополнительный текст"
+ title="Сегодня день рождения Михаила Лихачёва"
+ subtitle="Подарите подарок"
+ extraSubtitle="Дополнительный текст"
asideMode="dismiss"
/>
}
- header="Сегодня день рождения Михаила Лихачёва"
- subhead={"Подарите подарок"}
- extraSubhead={"Дополнительный текст"}
+ title="Сегодня день рождения Михаила Лихачёва"
+ subtitle={"Подарите подарок"}
+ extraSubtitle={"Дополнительный текст"}
asideMode="dismiss"
/>
)
diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/form-status.ts.snap b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/form-status.ts.snap
new file mode 100644
index 0000000000..161095279e
--- /dev/null
+++ b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/form-status.ts.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`form-status transforms correctly 1`] = `
+"import { FormStatus } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+ return (
+ (
+
+ Необходимо корректно ввести номер в международном формате
+
+ )
+ );
+};"
+`;
diff --git a/packages/codemods/src/transforms/v7/__tests__/form-status.ts b/packages/codemods/src/transforms/v7/__tests__/form-status.ts
new file mode 100644
index 0000000000..2c7fe08499
--- /dev/null
+++ b/packages/codemods/src/transforms/v7/__tests__/form-status.ts
@@ -0,0 +1,12 @@
+jest.autoMockOff();
+
+import { defineSnapshotTestFromFixture } from '../../../testHelpers/testHelper';
+
+const name = 'form-status';
+const fixtures = ['basic'] as const;
+
+describe(name, () => {
+ fixtures.forEach((test) =>
+ defineSnapshotTestFromFixture(__dirname, name, global.TRANSFORM_OPTIONS, `${name}/${test}`),
+ );
+});
diff --git a/packages/codemods/src/transforms/v7/banner.ts b/packages/codemods/src/transforms/v7/banner.ts
index e82cdf6ea4..9c09dc92dd 100644
--- a/packages/codemods/src/transforms/v7/banner.ts
+++ b/packages/codemods/src/transforms/v7/banner.ts
@@ -11,7 +11,11 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi
const { localName } = getImportInfo(j, file, 'Banner', alias);
if (localName) {
- renameProp(j, source, localName, { subheader: 'subhead', text: 'extraSubhead' });
+ renameProp(j, source, localName, {
+ subheader: 'subtitle',
+ text: 'extraSubtitle',
+ header: 'title',
+ });
}
return source.toSource();
diff --git a/packages/codemods/src/transforms/v7/form-status.ts b/packages/codemods/src/transforms/v7/form-status.ts
new file mode 100644
index 0000000000..1334e1db11
--- /dev/null
+++ b/packages/codemods/src/transforms/v7/form-status.ts
@@ -0,0 +1,20 @@
+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, 'FormStatus', alias);
+
+ if (localName) {
+ renameProp(j, source, localName, {
+ header: 'title',
+ });
+ }
+
+ return source.toSource();
+}
diff --git a/packages/vkui/src/components/Banner/Banner.e2e-playground.tsx b/packages/vkui/src/components/Banner/Banner.e2e-playground.tsx
index 71117e6490..3f01314356 100644
--- a/packages/vkui/src/components/Banner/Banner.e2e-playground.tsx
+++ b/packages/vkui/src/components/Banner/Banner.e2e-playground.tsx
@@ -29,8 +29,8 @@ export const BannerPlayground = (props: ComponentPlaygroundProps) => {
{
mode: ['image'],
imageTheme: ['dark'],
- header: ['Мои достижения'],
- subhead: ['Разблокировано 9 из 36'],
+ title: ['Мои достижения'],
+ subtitle: ['Разблокировано 9 из 36'],
background: [
],
before: [undefined],
asideMode: [undefined],
@@ -44,21 +44,21 @@ export const BannerPlayground = (props: ComponentPlaygroundProps) => {
mode: ['image'],
asideMode: ['dismiss', 'expand'],
imageTheme: ['light'],
- header: ['Мои достижения'],
- subhead: ['Разблокировано 9 из 36'],
+ title: ['Мои достижения'],
+ subtitle: ['Разблокировано 9 из 36'],
},
{
mode: ['image'],
asideMode: ['dismiss', 'expand'],
imageTheme: ['dark'],
- header: ['Мои достижения'],
- subhead: ['Разблокировано 9 из 36'],
+ title: ['Мои достижения'],
+ subtitle: ['Разблокировано 9 из 36'],
background: [
],
},
{
- header: ['Header'],
- subhead: ['Subheader'],
- extraSubhead: ['Extra Subhead'],
+ title: ['Header'],
+ subtitle: ['Subheader'],
+ extraSubtitle: ['Extra Subhead'],
actions: [Button ],
},
]}
@@ -67,8 +67,8 @@ export const BannerPlayground = (props: ComponentPlaygroundProps) => {
}
- header="Баста в Ледовом"
- subhead="Большой концерт"
+ title="Баста в Ледовом"
+ subtitle="Большой концерт"
asideMode="dismiss"
actions={
Подробнее }
{...props}
diff --git a/packages/vkui/src/components/Banner/Banner.module.css b/packages/vkui/src/components/Banner/Banner.module.css
index a24833dfe5..a09986554a 100644
--- a/packages/vkui/src/components/Banner/Banner.module.css
+++ b/packages/vkui/src/components/Banner/Banner.module.css
@@ -45,8 +45,8 @@
z-index: var(--vkui_internal--z_index_banner_content);
}
-.subhead,
-.extraSubhead {
+.subtitle,
+.extraSubtitle {
color: var(--vkui--color_text_subhead);
}
@@ -92,8 +92,8 @@
margin-block-start: 12px;
}
-.subhead:not(:first-child),
-.extraSubhead:not(:first-child) {
+.subtitle:not(:first-child),
+.extraSubtitle:not(:first-child) {
margin-block-start: 2px;
}
@@ -110,7 +110,7 @@
color: var(--vkui--color_text_contrast);
}
-.inverted .subhead {
+.inverted .subtitle {
color: var(--vkui--color_text_contrast);
opacity: 0.72;
}
@@ -122,8 +122,8 @@
padding: 16px;
}
-.sizeM .subhead:not(:first-child),
-.sizeM .extraSubhead:not(:first-child) {
+.sizeM .subtitle:not(:first-child),
+.sizeM .extraSubtitle:not(:first-child) {
margin-block-start: 4px;
}
@@ -147,6 +147,6 @@
}
/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalFormStatus--mode-error) .subhead {
+:global(.vkuiInternalFormStatus--mode-error) .subtitle {
color: var(--vkui--color_background_negative);
}
diff --git a/packages/vkui/src/components/Banner/Banner.stories.tsx b/packages/vkui/src/components/Banner/Banner.stories.tsx
index 54df1e32f5..f1287e127b 100644
--- a/packages/vkui/src/components/Banner/Banner.stories.tsx
+++ b/packages/vkui/src/components/Banner/Banner.stories.tsx
@@ -42,8 +42,8 @@ export const Playground: Story = {
src="https://sun9-63.userapi.com/yOEQYPHrNHjZEoanbqPb65HPl5iojmiLgLzfGA/W3geVMMt8TI.jpg"
/>
),
- header: 'Баста в Ледовом',
- subhead: 'Большой концерт',
+ title: 'Баста в Ледовом',
+ subtitle: 'Большой концерт',
asideMode: 'dismiss',
actions: 'ButtonPrimary',
},
diff --git a/packages/vkui/src/components/Banner/Banner.tsx b/packages/vkui/src/components/Banner/Banner.tsx
index ecee391ebf..42ee8e271b 100644
--- a/packages/vkui/src/components/Banner/Banner.tsx
+++ b/packages/vkui/src/components/Banner/Banner.tsx
@@ -14,7 +14,7 @@ import { Text } from '../Typography/Text/Text';
import { Title } from '../Typography/Title/Title';
import styles from './Banner.module.css';
-export interface BannerProps extends HTMLAttributesWithRootRef
{
+export interface BannerProps extends Omit, 'title'> {
/**
* Тип баннера.
*/
@@ -42,15 +42,15 @@ export interface BannerProps extends HTMLAttributesWithRootRef {
/**
* Заголовок.
*/
- header?: React.ReactNode;
+ title?: React.ReactNode;
/**
* Подзаголовок.
*/
- subhead?: React.ReactNode;
+ subtitle?: React.ReactNode;
/**
* Дополнительный подзаголовок баннера.
*/
- extraSubhead?: React.ReactNode;
+ extraSubtitle?: React.ReactNode;
/**
* При использовании `mode="image"`.
*
@@ -90,9 +90,9 @@ export const Banner = ({
size = 's',
before,
asideMode,
- header,
- subhead,
- extraSubhead,
+ title,
+ subtitle,
+ extraSubtitle,
children,
background,
actions,
@@ -118,19 +118,19 @@ export const Banner = ({
{before && {before}
}
- {hasReactNode(header) && (
+ {hasReactNode(title) && (
- {header}
+ {title}
)}
- {hasReactNode(subhead) && (
-
- {subhead}
+ {hasReactNode(subtitle) && (
+
+ {subtitle}
)}
- {hasReactNode(extraSubhead) && (
-
- {extraSubhead}
+ {hasReactNode(extraSubtitle) && (
+
+ {extraSubtitle}
)}
{hasReactNode(actions) && React.Children.count(actions) > 0 && (
diff --git a/packages/vkui/src/components/Banner/Readme.md b/packages/vkui/src/components/Banner/Readme.md
index 4112645a4a..87ad1b2ba2 100644
--- a/packages/vkui/src/components/Banner/Readme.md
+++ b/packages/vkui/src/components/Banner/Readme.md
@@ -15,8 +15,8 @@ const warningGradient = 'linear-gradient(90deg, #ffb73d 0%, #ffa000 100%)';
src="https://sun9-63.userapi.com/yOEQYPHrNHjZEoanbqPb65HPl5iojmiLgLzfGA/W3geVMMt8TI.jpg"
/>
}
- header="Баста в Ледовом"
- subhead="Большой концерт"
+ title="Баста в Ледовом"
+ subtitle="Большой концерт"
asideMode="dismiss"
onDismiss={noop}
actions={Подробнее }
@@ -31,8 +31,8 @@ const warningGradient = 'linear-gradient(90deg, #ffb73d 0%, #ffa000 100%)';
src="https://sun9-32.userapi.com/uFzLOK55iY7pC0DHjneEdP9G6gXcXi2Mxj9wVA/wnTmzh_blNM.jpg"
/>
}
- header="Для Вас"
- subhead="Обновлено сегодня"
+ title="Для Вас"
+ subtitle="Обновлено сегодня"
actions={ }>Слушать}
/>
@@ -44,8 +44,8 @@ const warningGradient = 'linear-gradient(90deg, #ffb73d 0%, #ffa000 100%)';
}
- header="Подписка за рубль!"
- subhead="Предложение действует только до конца февраля"
+ title="Подписка за рубль!"
+ subtitle="Предложение действует только до конца февраля"
asideMode="dismiss"
onDismiss={noop}
actions={
@@ -60,8 +60,8 @@ const warningGradient = 'linear-gradient(90deg, #ffb73d 0%, #ffa000 100%)';
}
- header="Сегодня день рождения Михаила Лихачёва"
- subhead="Подарите подарок"
+ title="Сегодня день рождения Михаила Лихачёва"
+ subtitle="Подарите подарок"
asideMode="dismiss"
onDismiss={noop}
actions={
Подарить }
@@ -75,8 +75,8 @@ const warningGradient = 'linear-gradient(90deg, #ffb73d 0%, #ffa000 100%)';
!
}
- header="Телефон ожидает подтверждения"
- subhead={
+ title="Телефон ожидает подтверждения"
+ subtitle={
Новый номер +7 ••• ••• •• 96 будет сохранён через семь дней.
@@ -106,20 +106,20 @@ const warningGradient = 'linear-gradient(90deg, #ffb73d 0%, #ffa000 100%)';
console.log('[Podcast banner] onClick')}
/>
- Mode: image, size: regular}>
+ Mode: image, size: regular}>
- Content: tint, size: medium}>
+ Content: tint, size: medium}>
Привлекайте больше людей
в Ваше сообщество
@@ -163,8 +163,8 @@ const warningGradient = 'linear-gradient(90deg, #ffb73d 0%, #ffa000 100%)';
Привлекайте больше людей
в Ваше сообщество
@@ -196,14 +196,14 @@ const warningGradient = 'linear-gradient(90deg, #ffb73d 0%, #ffa000 100%)';
Баста в Ледовом,
большой концерт
}
- subhead="Москва · 12 декабря"
+ subtitle="Москва · 12 декабря"
background={
}
- header="Для Вас"
- subhead="Обновлено сегодня"
+ title="Для Вас"
+ subtitle="Обновлено сегодня"
actions={
} onClick={noop}>
Слушать
diff --git a/packages/vkui/src/components/FormStatus/FormStatus.e2e-playground.tsx b/packages/vkui/src/components/FormStatus/FormStatus.e2e-playground.tsx
index d2378db4bd..b434368a46 100644
--- a/packages/vkui/src/components/FormStatus/FormStatus.e2e-playground.tsx
+++ b/packages/vkui/src/components/FormStatus/FormStatus.e2e-playground.tsx
@@ -12,7 +12,7 @@ export const FormStatusPlayground = (props: ComponentPlaygroundProps) => {
]}
>
{(props: FormStatusProps) => (
-
+
Необходимо корректно ввести номер в международном формате
)}
diff --git a/packages/vkui/src/components/FormStatus/FormStatus.stories.tsx b/packages/vkui/src/components/FormStatus/FormStatus.stories.tsx
index 19b143a9db..d70f35992f 100644
--- a/packages/vkui/src/components/FormStatus/FormStatus.stories.tsx
+++ b/packages/vkui/src/components/FormStatus/FormStatus.stories.tsx
@@ -17,7 +17,7 @@ type Story = StoryObj;
export const Playground: Story = {
args: {
mode: 'error',
- header: 'Некорректный мобильный номер',
+ title: 'Некорректный мобильный номер',
children: 'Необходимо корректно ввести номер в международном формате',
},
};
diff --git a/packages/vkui/src/components/FormStatus/FormStatus.tsx b/packages/vkui/src/components/FormStatus/FormStatus.tsx
index aa1694910b..0a9b301207 100644
--- a/packages/vkui/src/components/FormStatus/FormStatus.tsx
+++ b/packages/vkui/src/components/FormStatus/FormStatus.tsx
@@ -4,9 +4,9 @@ import type { HTMLAttributesWithRootRef } from '../../types';
import { Banner } from '../Banner/Banner';
import styles from './FormStatus.module.css';
-export interface FormStatusProps extends HTMLAttributesWithRootRef {
+export interface FormStatusProps extends Omit, 'title'> {
mode?: 'default' | 'error';
- header?: React.ReactNode;
+ title?: React.ReactNode;
}
/**
@@ -17,13 +17,15 @@ export const FormStatus = ({
children,
className,
role = mode === 'error' ? 'alert' : 'status',
+ title,
...restProps
}: FormStatusProps): React.ReactNode => {
return (
Статус формы
-
+
Необходимо корректно ввести номер в международном формате