From b2033bf854968e0f92560201e872debee260d586 Mon Sep 17 00:00:00 2001 From: Victoria Zhizhonkova Date: Mon, 18 Dec 2023 13:55:25 +0700 Subject: [PATCH] BREAKING CHANGE(FormLayout): remove component --- .../vkui/src/components/Calendar/Readme.md | 192 +++++++++--------- .../src/components/CalendarRange/Readme.md | 112 +++++----- .../vkui/src/components/DateInput/Readme.md | 169 ++++++++------- .../src/components/DateRangeInput/Readme.md | 139 ++++++------- .../vkui/src/components/FormItem/Readme.md | 6 +- .../FormLayout/FormLayout.module.css | 16 -- .../components/FormLayout/FormLayout.test.tsx | 10 - .../src/components/FormLayout/FormLayout.tsx | 37 ---- .../vkui/src/components/FormLayout/Readme.md | 2 - .../src/components/FormLayoutGroup/Readme.md | 4 +- packages/vkui/src/components/Input/Readme.md | 8 +- .../components/Popover/Popover.stories.tsx | 6 +- .../vkui/src/components/Popover/Readme.md | 4 +- packages/vkui/src/components/Radio/Readme.md | 4 +- .../RadioGroup/RadioGroup.e2e-playground.tsx | 6 +- .../vkui/src/components/RadioGroup/Readme.md | 8 +- .../src/components/SubnavigationBar/Readme.md | 4 +- packages/vkui/src/index.ts | 2 - styleguide/config.js | 1 - styleguide/pages/migration_v6.md | 10 +- 20 files changed, 329 insertions(+), 411 deletions(-) delete mode 100644 packages/vkui/src/components/FormLayout/FormLayout.module.css delete mode 100644 packages/vkui/src/components/FormLayout/FormLayout.test.tsx delete mode 100644 packages/vkui/src/components/FormLayout/FormLayout.tsx delete mode 100644 packages/vkui/src/components/FormLayout/Readme.md diff --git a/packages/vkui/src/components/Calendar/Readme.md b/packages/vkui/src/components/Calendar/Readme.md index 09f5b8326f..b50388e9a5 100644 --- a/packages/vkui/src/components/Calendar/Readme.md +++ b/packages/vkui/src/components/Calendar/Readme.md @@ -18,104 +18,102 @@ const Example = () => { const [listenDayChangesForUpdate, setListenDayChangesForUpdate] = useState(false); return ( - - - {format(value, 'YYYY-MM-DD HH:mm:ss')} - - setEnableTime(e.target.checked)}> - Включено - - - - setDisablePast(e.target.checked)}> - Включено - - - - setDisableFuture(e.target.checked)}> - Включено - - - - setDisablePickers(e.target.checked)}> - Включено - - - - setShowNeighboringMonth(e.target.checked)} - > - Включено - - - - setListenDayChangesForUpdate(e.target.checked)} - > - Включено - - - - setLocale(e.target.value)} + options={[ + { + label: 'ru', + value: 'ru', + }, + { + label: 'en', + value: 'en', + }, + { + label: 'ar', + value: 'ar', + }, + { + label: 'fr', + value: 'fr', + }, + ]} + /> + + + setSize(e.target.value)} - options={[ - { - label: 's', - value: 's', - }, - { - label: 'm', - value: 'm', - }, - ]} - /> - - - - - - - - + + + ); }; diff --git a/packages/vkui/src/components/CalendarRange/Readme.md b/packages/vkui/src/components/CalendarRange/Readme.md index 181ae635a1..af6f6ce49d 100644 --- a/packages/vkui/src/components/CalendarRange/Readme.md +++ b/packages/vkui/src/components/CalendarRange/Readme.md @@ -14,64 +14,62 @@ const Example = () => { const [locale, setLocale] = useState('ru'); return ( - - - - {format(value[0], 'YYYY-MM-DD')} - {format(value[1], 'YYYY-MM-DD')} - - - setDisablePast(e.target.checked)}> - Включено - - - - setDisableFuture(e.target.checked)}> - Включено - - - - setDisablePickers(e.target.checked)}> - Включено - - - - setLocale(e.target.value)} + options={[ + { + label: 'ru', + value: 'ru', + }, + { + label: 'en', + value: 'en', + }, + { + label: 'ar', + value: 'ar', + }, + { + label: 'fr', + value: 'fr', + }, + ]} + /> + + + + - - - - - - - - + + + ); }; diff --git a/packages/vkui/src/components/DateInput/Readme.md b/packages/vkui/src/components/DateInput/Readme.md index d6c24a978a..7ab45ecd3d 100644 --- a/packages/vkui/src/components/DateInput/Readme.md +++ b/packages/vkui/src/components/DateInput/Readme.md @@ -20,93 +20,88 @@ const Example = () => { const [locale, setLocale] = useState('ru'); return ( - - - - setEnableTime(e.target.checked)}> - Включено - - - - setDisablePast(e.target.checked)}> - Включено - - - - setDisableFuture(e.target.checked)}> - Включено - - - - setCloseOnChange(e.target.checked)}> - Включено - - - - setDisablePickers(e.target.checked)}> - Включено - - - - setShowNeighboringMonth(e.target.checked)} - > - Включено - - - - setDisableCalendar(e.target.checked)} - > - Включено - - - - setLocale(e.target.value)} + options={[ + { + label: 'ru', + value: 'ru', + }, + { + label: 'en', + value: 'en', + }, + { + label: 'ar', + value: 'ar', + }, + { + label: 'fr', + value: 'fr', + }, + ]} + /> + + +
+ + + +
+ + ); }; diff --git a/packages/vkui/src/components/DateRangeInput/Readme.md b/packages/vkui/src/components/DateRangeInput/Readme.md index 2ac29a96b0..1b2e27b67b 100644 --- a/packages/vkui/src/components/DateRangeInput/Readme.md +++ b/packages/vkui/src/components/DateRangeInput/Readme.md @@ -18,78 +18,73 @@ const Example = () => { const [locale, setLocale] = useState('ru'); return ( - - - - setDisablePast(e.target.checked)}> - Включено - - - - setDisableFuture(e.target.checked)}> - Включено - - - - setCloseOnChange(e.target.checked)}> - Включено - - - - setDisablePickers(e.target.checked)}> - Включено - - - - setDisableCalendar(e.target.checked)} - > - Включено - - - - setLocale(e.target.value)} + options={[ + { + label: 'ru', + value: 'ru', + }, + { + label: 'en', + value: 'en', + }, + { + label: 'ar', + value: 'ar', + }, + { + label: 'fr', + value: 'fr', + }, + ]} + /> + + +
+ + + +
+ + ); }; diff --git a/packages/vkui/src/components/FormItem/Readme.md b/packages/vkui/src/components/FormItem/Readme.md index 57cc9cdd58..6c2665f2c3 100644 --- a/packages/vkui/src/components/FormItem/Readme.md +++ b/packages/vkui/src/components/FormItem/Readme.md @@ -65,7 +65,7 @@ const Example = () => { Регистрация - +
e.preventDefault()}> { type="email" name="email" value={email} + required onChange={onChange} /> @@ -175,6 +176,7 @@ const Example = () => { onChange={onChange} value={purpose} name="purpose" + required options={[ { value: '0', @@ -202,7 +204,7 @@ const Example = () => { Зарегистрироваться - +
diff --git a/packages/vkui/src/components/FormLayout/FormLayout.module.css b/packages/vkui/src/components/FormLayout/FormLayout.module.css deleted file mode 100644 index 6ad971c998..0000000000 --- a/packages/vkui/src/components/FormLayout/FormLayout.module.css +++ /dev/null @@ -1,16 +0,0 @@ -.FormLayout { - position: relative; -} - -.FormLayout__submit { - position: absolute; - visibility: hidden; - pointer-events: none; - inset-inline-start: 0; - inset-block-start: 0; - padding: 0; - inline-size: 0; - block-size: 0; - appearance: none; - border: 0; -} diff --git a/packages/vkui/src/components/FormLayout/FormLayout.test.tsx b/packages/vkui/src/components/FormLayout/FormLayout.test.tsx deleted file mode 100644 index f2882ed4e4..0000000000 --- a/packages/vkui/src/components/FormLayout/FormLayout.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { baselineComponent } from '../../testing/utils'; -import { FormLayout } from './FormLayout'; - -describe('FormLayout', () => { - baselineComponent(FormLayout, { - // TODO [a11y]: https://github.com/VKCOM/VKUI/issues/4004 - // @deprecated - a11y: false, - }); -}); diff --git a/packages/vkui/src/components/FormLayout/FormLayout.tsx b/packages/vkui/src/components/FormLayout/FormLayout.tsx deleted file mode 100644 index a1cde41f28..0000000000 --- a/packages/vkui/src/components/FormLayout/FormLayout.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import * as React from 'react'; -import { classNames } from '@vkontakte/vkjs'; -import { HasComponent, HasRef, HasRootRef } from '../../types'; -import styles from './FormLayout.module.css'; - -const preventDefault = (e: React.FormEvent) => e.preventDefault(); - -export type FormLayoutProps = React.AllHTMLAttributes & - HasRef & - HasRootRef & - HasComponent; - -/** - * @see https://vkcom.github.io/VKUI/#/FormLayout - */ -export const FormLayout = ({ - children, - Component = 'form', - getRootRef, - onSubmit = preventDefault, - className, - ...restProps -}: FormLayoutProps) => { - return ( - - {children} - {Component === 'form' && ( - - )} - - ); -}; diff --git a/packages/vkui/src/components/FormLayout/Readme.md b/packages/vkui/src/components/FormLayout/Readme.md deleted file mode 100644 index e4f779373b..0000000000 --- a/packages/vkui/src/components/FormLayout/Readme.md +++ /dev/null @@ -1,2 +0,0 @@ -Компонент для создания `form`. Содержит скрытый ``, обеспечивающий отправку формы -по enter. По-умолчанию в `onSubmit` происходит `e.preventDefault()`, чтобы избежать перезагрузки страницы diff --git a/packages/vkui/src/components/FormLayoutGroup/Readme.md b/packages/vkui/src/components/FormLayoutGroup/Readme.md index bb0f3c6725..3e79297a96 100644 --- a/packages/vkui/src/components/FormLayoutGroup/Readme.md +++ b/packages/vkui/src/components/FormLayoutGroup/Readme.md @@ -13,7 +13,7 @@ const Example = () => { FormLayoutGroup - + @@ -68,7 +68,7 @@ const Example = () => { )} - + diff --git a/packages/vkui/src/components/Input/Readme.md b/packages/vkui/src/components/Input/Readme.md index f698aef5e4..14dc43c255 100644 --- a/packages/vkui/src/components/Input/Readme.md +++ b/packages/vkui/src/components/Input/Readme.md @@ -8,7 +8,7 @@ const ExampleBase = ({ formItemStatus }) => { const [disabled, setDisabled] = useState(false); return ( - + @@ -120,7 +120,7 @@ export const Example: Story = { - + )} > - + )} > - + ); diff --git a/packages/vkui/src/index.ts b/packages/vkui/src/index.ts index 082bc2c365..5379e55711 100644 --- a/packages/vkui/src/index.ts +++ b/packages/vkui/src/index.ts @@ -236,8 +236,6 @@ export type { AccordionSummaryProps } from './components/Accordion/AccordionSumm /** * Forms */ -export { FormLayout } from './components/FormLayout/FormLayout'; -export type { FormLayoutProps } from './components/FormLayout/FormLayout'; export { FormItem } from './components/FormItem/FormItem'; export type { FormItemProps } from './components/FormItem/FormItem'; export { FormField } from './components/FormField/FormField'; diff --git a/styleguide/config.js b/styleguide/config.js index 53ee8dcfac..c9e4e6da2d 100644 --- a/styleguide/config.js +++ b/styleguide/config.js @@ -264,7 +264,6 @@ const baseConfig = { { name: 'Forms', components: () => [ - `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/FormLayout/FormLayout.tsx`, `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/FormItem/FormItem.tsx`, `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/FormLayoutGroup/FormLayoutGroup.tsx`, `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/FormField/FormField.tsx`, diff --git a/styleguide/pages/migration_v6.md b/styleguide/pages/migration_v6.md index 156fc633a4..ee9c86f2e9 100644 --- a/styleguide/pages/migration_v6.md +++ b/styleguide/pages/migration_v6.md @@ -26,7 +26,7 @@ - `FixedLayout` - `Footer` - `FormItem` - - `FormLayout` + - 🗑️ ~~`FormLayout`~~ - `Gradient` - `Header` - `ModalCard` и `ModaCardBase` @@ -528,12 +528,10 @@ npx @vkontakte/vkui-codemods --help
-### [`FormLayout`](#/FormLayout) +### 🗑️ ~~`FormLayout`~~ -```diff -- ... -+ ... -``` +- Компонент удален. +- Используйте нативный тег `form`