From cea01c272138638f9591196def6a95b25958d464 Mon Sep 17 00:00:00 2001 From: "e.muhamethanov" Date: Tue, 28 Jan 2025 13:20:41 +0300 Subject: [PATCH 01/11] tech(Flex): add support flex with gap --- .../vkui/src/components/Flex/Flex.module.css | 29 ++++++++------ .../vkui/src/components/Flex/Flex.stories.tsx | 40 ++++++++++++++++--- 2 files changed, 51 insertions(+), 18 deletions(-) diff --git a/packages/vkui/src/components/Flex/Flex.module.css b/packages/vkui/src/components/Flex/Flex.module.css index f2900e409b..6b2755bff1 100644 --- a/packages/vkui/src/components/Flex/Flex.module.css +++ b/packages/vkui/src/components/Flex/Flex.module.css @@ -3,6 +3,7 @@ --vkui_internal--flex_original_margin_block: 0px; display: flex; + gap: var(--vkui_internal--row_gap) var(--vkui_internal--column_gap); } .marginAuto { @@ -13,13 +14,21 @@ margin-block: var(--vkui--size_base_padding_vertical--regular); } -.withGaps { - margin-block-start: calc( - -1 * var(--vkui_internal--row_gap) + var(--vkui_internal--flex_original_margin_block) - ); - margin-inline-start: calc( - -1 * var(--vkui_internal--column_gap) + var(--vkui_internal--flex_original_margin_inline) - ); +@supports not (inset: 0) { + .withGaps { + margin-block-start: calc( + -1 * var(--vkui_internal--row_gap) + var(--vkui_internal--flex_original_margin_block) + ); + margin-inline-start: calc( + -1 * var(--vkui_internal--column_gap) + var(--vkui_internal--flex_original_margin_inline) + ); + } + + /* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-universal */ + .withGaps.withGaps > * { + margin-block-start: var(--vkui_internal--row_gap); + margin-inline-start: var(--vkui_internal--column_gap); + } } .host > .marginAuto { @@ -90,9 +99,3 @@ .alignBaseline { align-items: baseline; } - -/* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-universal */ -.withGaps.withGaps > * { - margin-block-start: var(--vkui_internal--row_gap); - margin-inline-start: var(--vkui_internal--column_gap); -} diff --git a/packages/vkui/src/components/Flex/Flex.stories.tsx b/packages/vkui/src/components/Flex/Flex.stories.tsx index 56826aaca2..7dc05634b2 100644 --- a/packages/vkui/src/components/Flex/Flex.stories.tsx +++ b/packages/vkui/src/components/Flex/Flex.stories.tsx @@ -7,24 +7,54 @@ import { Button } from '../Button/Button'; import { Image } from '../Image/Image'; import { Flex, type FlexProps } from './Flex'; -const story: Meta = { +type StoryProps = FlexProps & { + /** + * Отступ между строками + */ + rowGap?: number; + /** + * Отступ между столбцами + */ + columnGap?: number; + /** + * Количество элементов + */ + itemsCount?: number; +}; + +const story: Meta = { title: 'Layout/Flex', component: Flex, parameters: { ...CanvasFullLayout, ...DisableCartesianParam }, + argTypes: { + rowGap: { + control: 'number', + }, + columnGap: { + control: 'number', + }, + itemsCount: { + control: 'number', + }, + }, }; export default story; -type Story = StoryObj; +type Story = StoryObj; export const Playground: Story = { args: { gap: 'm', + itemsCount: 2, style: { height: '100%' }, }, - render: (args) => ( - - {Array.from({ length: 2 }, (_, index) => { + render: ({ itemsCount = 2, rowGap, columnGap, gap, ...args }) => ( + + {Array.from({ length: itemsCount }, (_, index) => { return ( Date: Wed, 29 Jan 2025 11:31:29 +0300 Subject: [PATCH 02/11] fix(Flex): fix logic with calc childrens count --- .../vkui/src/components/Flex/Flex.module.css | 4 ++ .../vkui/src/components/Flex/Flex.test.tsx | 56 +++++++++++++++++++ packages/vkui/src/components/Flex/Flex.tsx | 30 ++++++++-- 3 files changed, 86 insertions(+), 4 deletions(-) diff --git a/packages/vkui/src/components/Flex/Flex.module.css b/packages/vkui/src/components/Flex/Flex.module.css index 6b2755bff1..09d9505786 100644 --- a/packages/vkui/src/components/Flex/Flex.module.css +++ b/packages/vkui/src/components/Flex/Flex.module.css @@ -14,6 +14,10 @@ margin-block: var(--vkui--size_base_padding_vertical--regular); } +/*Данная проверка позволяет максимально близко определить поддерживается ли gap + flex*/ +/*см. https://github.com/w3c/csswg-drafts/issues/3559#issuecomment-1758459996*/ +/*Поддержка inset https://developer.mozilla.org/en-US/docs/Web/CSS/inset#browser_compatibility*/ +/*Поддержка gap https://developer.mozilla.org/en-US/docs/Web/CSS/gap#browser_compatibility*/ @supports not (inset: 0) { .withGaps { margin-block-start: calc( diff --git a/packages/vkui/src/components/Flex/Flex.test.tsx b/packages/vkui/src/components/Flex/Flex.test.tsx index f5d4c88c20..acff811fe2 100644 --- a/packages/vkui/src/components/Flex/Flex.test.tsx +++ b/packages/vkui/src/components/Flex/Flex.test.tsx @@ -28,6 +28,62 @@ describe(Flex, () => { expect(screen.getByTestId('flex')).not.toHaveStyle('--vkui_internal--column_gap: 15px'); }); + it.each<{ children: FlexProps['children']; withGaps: boolean }>([ + { + children: ( + <> +
+
+ + ), + withGaps: true, + }, + { + children: [
,
], + withGaps: true, + }, + { + children: ( + <> +
+ <> +
+ + + ), + withGaps: true, + }, + { + children: ( + <> +
+ <> + + ), + withGaps: false, + }, + { + children: ( + <> + <> + <> + + ), + withGaps: false, + }, + ])('should have className withGaps with children $children', ({ children, withGaps }) => { + render( + + {children} + , + ); + if (withGaps) { + expect(screen.getByTestId('flex')).toHaveClass(styles.withGaps); + } else { + expect(screen.getByTestId('flex')).not.toHaveClass(styles.withGaps); + } + }); + describe('check correct classNames', () => { it.each<{ props: Partial; className: string }>([ { diff --git a/packages/vkui/src/components/Flex/Flex.tsx b/packages/vkui/src/components/Flex/Flex.tsx index ffa655e56a..a336d43115 100644 --- a/packages/vkui/src/components/Flex/Flex.tsx +++ b/packages/vkui/src/components/Flex/Flex.tsx @@ -1,4 +1,4 @@ -import { Children } from 'react'; +import { Children, type FC, Fragment, isValidElement, type ReactNode } from 'react'; import { classNames } from '@vkontakte/vkjs'; import { calculateGap, @@ -73,7 +73,29 @@ export interface FlexProps extends Omit, 'baseCl reverse?: boolean; } -export const Flex: React.FC & { +const countChildren = (children: ReactNode): number => { + let count = 0; + + Children.forEach(children, (child: ReactNode) => { + if (child === null || child === undefined) { + return; + } + + if (isValidElement<{ children?: ReactNode }>(child)) { + if (child.type === Fragment) { + count += countChildren(child.props.children); + } else { + count++; + } + } else { + count++; + } + }); + + return count; +}; + +export const Flex: FC & { Item: typeof FlexItem; } = ({ gap, @@ -86,8 +108,8 @@ export const Flex: React.FC & { children, ...props }: FlexProps) => { - const withGaps = Children.count(children) > 1 && gap; - const [rowGap, columnGap] = calculateGap(withGaps ? gap : undefined); + const withGaps = countChildren(children) > 1 && gap; + const [rowGap, columnGap] = calculateGap(gap); return ( Date: Wed, 29 Jan 2025 13:38:31 +0300 Subject: [PATCH 03/11] fix(Flex): revert Flex childrens count calculation --- .../vkui/src/components/Flex/Flex.test.tsx | 56 ------------------- packages/vkui/src/components/Flex/Flex.tsx | 26 +-------- 2 files changed, 2 insertions(+), 80 deletions(-) diff --git a/packages/vkui/src/components/Flex/Flex.test.tsx b/packages/vkui/src/components/Flex/Flex.test.tsx index acff811fe2..f5d4c88c20 100644 --- a/packages/vkui/src/components/Flex/Flex.test.tsx +++ b/packages/vkui/src/components/Flex/Flex.test.tsx @@ -28,62 +28,6 @@ describe(Flex, () => { expect(screen.getByTestId('flex')).not.toHaveStyle('--vkui_internal--column_gap: 15px'); }); - it.each<{ children: FlexProps['children']; withGaps: boolean }>([ - { - children: ( - <> -
-
- - ), - withGaps: true, - }, - { - children: [
,
], - withGaps: true, - }, - { - children: ( - <> -
- <> -
- - - ), - withGaps: true, - }, - { - children: ( - <> -
- <> - - ), - withGaps: false, - }, - { - children: ( - <> - <> - <> - - ), - withGaps: false, - }, - ])('should have className withGaps with children $children', ({ children, withGaps }) => { - render( - - {children} - , - ); - if (withGaps) { - expect(screen.getByTestId('flex')).toHaveClass(styles.withGaps); - } else { - expect(screen.getByTestId('flex')).not.toHaveClass(styles.withGaps); - } - }); - describe('check correct classNames', () => { it.each<{ props: Partial; className: string }>([ { diff --git a/packages/vkui/src/components/Flex/Flex.tsx b/packages/vkui/src/components/Flex/Flex.tsx index a336d43115..2c6bb5114f 100644 --- a/packages/vkui/src/components/Flex/Flex.tsx +++ b/packages/vkui/src/components/Flex/Flex.tsx @@ -1,4 +1,4 @@ -import { Children, type FC, Fragment, isValidElement, type ReactNode } from 'react'; +import { Children, type FC } from 'react'; import { classNames } from '@vkontakte/vkjs'; import { calculateGap, @@ -73,28 +73,6 @@ export interface FlexProps extends Omit, 'baseCl reverse?: boolean; } -const countChildren = (children: ReactNode): number => { - let count = 0; - - Children.forEach(children, (child: ReactNode) => { - if (child === null || child === undefined) { - return; - } - - if (isValidElement<{ children?: ReactNode }>(child)) { - if (child.type === Fragment) { - count += countChildren(child.props.children); - } else { - count++; - } - } else { - count++; - } - }); - - return count; -}; - export const Flex: FC & { Item: typeof FlexItem; } = ({ @@ -108,7 +86,7 @@ export const Flex: FC & { children, ...props }: FlexProps) => { - const withGaps = countChildren(children) > 1 && gap; + const withGaps = Children.count(children) > 1 && gap; const [rowGap, columnGap] = calculateGap(gap); return ( From dbf1786d0e86edb8a9371b042c2ebe5df3155104 Mon Sep 17 00:00:00 2001 From: "e.muhamethanov" Date: Thu, 30 Jan 2025 11:09:34 +0300 Subject: [PATCH 04/11] fix(Flex): add TODO and @support (inset: 0) --- packages/vkui/src/components/Flex/Flex.module.css | 8 +++++++- packages/vkui/src/components/Flex/Flex.tsx | 4 ++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/vkui/src/components/Flex/Flex.module.css b/packages/vkui/src/components/Flex/Flex.module.css index 09d9505786..f84074ef00 100644 --- a/packages/vkui/src/components/Flex/Flex.module.css +++ b/packages/vkui/src/components/Flex/Flex.module.css @@ -3,7 +3,6 @@ --vkui_internal--flex_original_margin_block: 0px; display: flex; - gap: var(--vkui_internal--row_gap) var(--vkui_internal--column_gap); } .marginAuto { @@ -14,10 +13,17 @@ margin-block: var(--vkui--size_base_padding_vertical--regular); } +/*TODO [>=8]: Проверить браузерную поддержку gap*/ /*Данная проверка позволяет максимально близко определить поддерживается ли gap + flex*/ /*см. https://github.com/w3c/csswg-drafts/issues/3559#issuecomment-1758459996*/ /*Поддержка inset https://developer.mozilla.org/en-US/docs/Web/CSS/inset#browser_compatibility*/ /*Поддержка gap https://developer.mozilla.org/en-US/docs/Web/CSS/gap#browser_compatibility*/ +@supports (inset: 0) { + .host { + gap: var(--vkui_internal--row_gap) var(--vkui_internal--column_gap); + } +} + @supports not (inset: 0) { .withGaps { margin-block-start: calc( diff --git a/packages/vkui/src/components/Flex/Flex.tsx b/packages/vkui/src/components/Flex/Flex.tsx index 2c6bb5114f..ce7752e3f1 100644 --- a/packages/vkui/src/components/Flex/Flex.tsx +++ b/packages/vkui/src/components/Flex/Flex.tsx @@ -1,4 +1,4 @@ -import { Children, type FC } from 'react'; +import { Children } from 'react'; import { classNames } from '@vkontakte/vkjs'; import { calculateGap, @@ -73,7 +73,7 @@ export interface FlexProps extends Omit, 'baseCl reverse?: boolean; } -export const Flex: FC & { +export const Flex: React.FC & { Item: typeof FlexItem; } = ({ gap, From f039909d0c5f7e2ca64f912bbb8fe6aa8fc280f3 Mon Sep 17 00:00:00 2001 From: "e.muhamethanov" Date: Thu, 30 Jan 2025 12:01:35 +0300 Subject: [PATCH 05/11] fix(Flex): fix style --- packages/vkui/src/components/Flex/Flex.module.css | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/vkui/src/components/Flex/Flex.module.css b/packages/vkui/src/components/Flex/Flex.module.css index f84074ef00..3cc873e2de 100644 --- a/packages/vkui/src/components/Flex/Flex.module.css +++ b/packages/vkui/src/components/Flex/Flex.module.css @@ -23,7 +23,6 @@ gap: var(--vkui_internal--row_gap) var(--vkui_internal--column_gap); } } - @supports not (inset: 0) { .withGaps { margin-block-start: calc( From 8d6659cdd67fdf0ec5be4a859677669a668dab6d Mon Sep 17 00:00:00 2001 From: "e.muhamethanov" Date: Thu, 30 Jan 2025 18:47:03 +0300 Subject: [PATCH 06/11] doc: add info about fallback --- packages/vkui/src/components/Flex/Readme.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/vkui/src/components/Flex/Readme.md b/packages/vkui/src/components/Flex/Readme.md index b7a34d1427..38ab6dbdb1 100644 --- a/packages/vkui/src/components/Flex/Readme.md +++ b/packages/vkui/src/components/Flex/Readme.md @@ -1,5 +1,8 @@ Базовый компонент для позиционирования элементов. Построен на базе `flex layout`. +> ⚠️ Важно: в версиях браузеров `Chrome >= 87`, `Edge >= 87`, `Safari >= 14.1`, `Firefox >= 66`, `Opera >= 73` при использовании +> свойства `gap` используется нативное CSS свойство `gap`. В версиях браузеров ниже используется `fallback` логика с использование свойства `margin`. + ```jsx { "props": { "layout": false, "iframe": false } } const FlexContainer = ({ itemsCount, ...props }) => { return ( From a7006eebd4702a1a8556072f17ef5f0bdd1f72c3 Mon Sep 17 00:00:00 2001 From: "e.muhamethanov" Date: Thu, 30 Jan 2025 20:35:17 +0300 Subject: [PATCH 07/11] doc(Flex): add example with Fragment --- packages/vkui/src/components/Flex/Readme.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/packages/vkui/src/components/Flex/Readme.md b/packages/vkui/src/components/Flex/Readme.md index 38ab6dbdb1..cd70290348 100644 --- a/packages/vkui/src/components/Flex/Readme.md +++ b/packages/vkui/src/components/Flex/Readme.md @@ -2,6 +2,25 @@ > ⚠️ Важно: в версиях браузеров `Chrome >= 87`, `Edge >= 87`, `Safari >= 14.1`, `Firefox >= 66`, `Opera >= 73` при использовании > свойства `gap` используется нативное CSS свойство `gap`. В версиях браузеров ниже используется `fallback` логика с использование свойства `margin`. +> +> В связи с этим рекомендация по коду, если вы поддерживаете браузеры, которые не поддеживают `gap` на `flex` контейнерах: +> +> Избегайте использования React.Fragment в качестве `children`. Например следующий кейс будет работать некорректно - у него не сработает `gap`: +> ```jsx static +> +> +>
1
+>
2
+> +> +> ``` +> Нужно чтобы у `Flex` было несколько непосредственных потомков +> ```jsx static +> +>
1
+>
2
+> +> ``` ```jsx { "props": { "layout": false, "iframe": false } } const FlexContainer = ({ itemsCount, ...props }) => { From d96c39f04093adde9feffa445e8fb5fc80dd2492 Mon Sep 17 00:00:00 2001 From: "e.muhamethanov" Date: Thu, 30 Jan 2025 21:19:01 +0300 Subject: [PATCH 08/11] doc(Flex): fix formatting --- packages/vkui/src/components/Flex/Readme.md | 33 +++++++++++---------- 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/packages/vkui/src/components/Flex/Readme.md b/packages/vkui/src/components/Flex/Readme.md index cd70290348..93c3292cb1 100644 --- a/packages/vkui/src/components/Flex/Readme.md +++ b/packages/vkui/src/components/Flex/Readme.md @@ -2,25 +2,28 @@ > ⚠️ Важно: в версиях браузеров `Chrome >= 87`, `Edge >= 87`, `Safari >= 14.1`, `Firefox >= 66`, `Opera >= 73` при использовании > свойства `gap` используется нативное CSS свойство `gap`. В версиях браузеров ниже используется `fallback` логика с использование свойства `margin`. -> +> > В связи с этим рекомендация по коду, если вы поддерживаете браузеры, которые не поддеживают `gap` на `flex` контейнерах: -> +> > Избегайте использования React.Fragment в качестве `children`. Например следующий кейс будет работать некорректно - у него не сработает `gap`: -> ```jsx static -> -> ->
1
->
2
-> -> -> ``` -> Нужно чтобы у `Flex` было несколько непосредственных потомков -> ```jsx static -> +> +> ```jsx static +> +> >
1
>
2
-> -> ``` +> +> +> ``` +> +> Нужно чтобы у `Flex` было несколько непосредственных потомков +> +> ```jsx static +> +>
1
+>
2
+> +> ``` ```jsx { "props": { "layout": false, "iframe": false } } const FlexContainer = ({ itemsCount, ...props }) => { From 8e5e0164fe2af8e7c2a62c931b2552fb44a566f0 Mon Sep 17 00:00:00 2001 From: "e.muhamethanov" Date: Mon, 3 Feb 2025 12:31:47 +0300 Subject: [PATCH 09/11] fix: fix documentation --- packages/vkui/src/components/Flex/Readme.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/vkui/src/components/Flex/Readme.md b/packages/vkui/src/components/Flex/Readme.md index 93c3292cb1..5fead9f592 100644 --- a/packages/vkui/src/components/Flex/Readme.md +++ b/packages/vkui/src/components/Flex/Readme.md @@ -1,11 +1,11 @@ Базовый компонент для позиционирования элементов. Построен на базе `flex layout`. -> ⚠️ Важно: в версиях браузеров `Chrome >= 87`, `Edge >= 87`, `Safari >= 14.1`, `Firefox >= 66`, `Opera >= 73` при использовании -> свойства `gap` используется нативное CSS свойство `gap`. В версиях браузеров ниже используется `fallback` логика с использование свойства `margin`. +⚠️ Важно: в версиях браузеров Chrome >= 87, Edge >= 87, Safari >= 14.1, Firefox >= 66, Opera >= 73 при использовании +> свойства gap используется нативное CSS свойство gap. В версиях браузеров ниже используется fallback логика с использованием свойства margin. > -> В связи с этим рекомендация по коду, если вы поддерживаете браузеры, которые не поддеживают `gap` на `flex` контейнерах: +> В связи с этим рекомендация по коду, если вы поддерживаете браузеры, которые не поддерживают gap на flex контейнерах: > -> Избегайте использования React.Fragment в качестве `children`. Например следующий кейс будет работать некорректно - у него не сработает `gap`: +> Избегайте использования React.Fragment в качестве children. Например, следующий кейс будет работать некорректно - у него не сработает gap: > > ```jsx static > @@ -16,7 +16,7 @@ > > ``` > -> Нужно чтобы у `Flex` было несколько непосредственных потомков +> Нужно, чтобы у Flex было несколько непосредственных потомков: > > ```jsx static > From ceba559c9bf18775a837d742d17fb652057377c8 Mon Sep 17 00:00:00 2001 From: "e.muhamethanov" Date: Mon, 3 Feb 2025 12:39:38 +0300 Subject: [PATCH 10/11] fix(Flex): fix documenatation --- packages/vkui/src/components/Flex/Readme.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/vkui/src/components/Flex/Readme.md b/packages/vkui/src/components/Flex/Readme.md index 5fead9f592..f3a5fa6dce 100644 --- a/packages/vkui/src/components/Flex/Readme.md +++ b/packages/vkui/src/components/Flex/Readme.md @@ -1,11 +1,11 @@ Базовый компонент для позиционирования элементов. Построен на базе `flex layout`. -⚠️ Важно: в версиях браузеров Chrome >= 87, Edge >= 87, Safari >= 14.1, Firefox >= 66, Opera >= 73 при использовании -> свойства gap используется нативное CSS свойство gap. В версиях браузеров ниже используется fallback логика с использованием свойства margin. +> ⚠️ Важно: в версиях браузеров `Chrome >= 87`, `Edge >= 87`, `Safari >= 14.1`, `Firefox >= 66`, `Opera >= 73` при использовании +> свойства `gap` используется нативное CSS свойство `gap`. В версиях браузеров ниже используется fallback логика с использованием свойства `margin`. > -> В связи с этим рекомендация по коду, если вы поддерживаете браузеры, которые не поддерживают gap на flex контейнерах: +> В связи с этим рекомендация по коду, если вы поддерживаете браузеры, которые не поддерживают `gap` на `flex` контейнерах: > -> Избегайте использования React.Fragment в качестве children. Например, следующий кейс будет работать некорректно - у него не сработает gap: +> Избегайте использования `React.Fragment` в качестве `children`. Например, следующий кейс будет работать некорректно - у него не сработает `gap`: > > ```jsx static > From bd3505eda956d79f6b06d52bf4b9e0f9d9244691 Mon Sep 17 00:00:00 2001 From: "e.muhamethanov" Date: Mon, 3 Feb 2025 13:51:35 +0300 Subject: [PATCH 11/11] fix(Flex): improve documentation --- packages/vkui/src/components/Flex/Readme.md | 63 +++++++++++++-------- 1 file changed, 38 insertions(+), 25 deletions(-) diff --git a/packages/vkui/src/components/Flex/Readme.md b/packages/vkui/src/components/Flex/Readme.md index f3a5fa6dce..f63b291866 100644 --- a/packages/vkui/src/components/Flex/Readme.md +++ b/packages/vkui/src/components/Flex/Readme.md @@ -1,30 +1,5 @@ Базовый компонент для позиционирования элементов. Построен на базе `flex layout`. -> ⚠️ Важно: в версиях браузеров `Chrome >= 87`, `Edge >= 87`, `Safari >= 14.1`, `Firefox >= 66`, `Opera >= 73` при использовании -> свойства `gap` используется нативное CSS свойство `gap`. В версиях браузеров ниже используется fallback логика с использованием свойства `margin`. -> -> В связи с этим рекомендация по коду, если вы поддерживаете браузеры, которые не поддерживают `gap` на `flex` контейнерах: -> -> Избегайте использования `React.Fragment` в качестве `children`. Например, следующий кейс будет работать некорректно - у него не сработает `gap`: -> -> ```jsx static -> -> ->
1
->
2
-> -> -> ``` -> -> Нужно, чтобы у Flex было несколько непосредственных потомков: -> -> ```jsx static -> ->
1
->
2
-> -> ``` - ```jsx { "props": { "layout": false, "iframe": false } } const FlexContainer = ({ itemsCount, ...props }) => { return ( @@ -241,3 +216,41 @@ const Example = () => { ; ``` + +> **⚠️ Важное замечание о поддержке браузеров:** +> +> Современные браузеры (версии от): +> +> - Chrome 87+ +> - Edge 87+ +> - Safari 14.1+ +> - Firefox 66+ +> - Opera 73+ +> +> используют нативное `CSS` свойство `gap`. Для более старых версий браузеров автоматически применяется альтернативное решение с использованием `margin`. +> +> Рекомендации по использованию: +> +> При работе со старыми браузерами, где `gap` на flex-контейнерах не поддерживается, важно соблюдать следующее правило: +> +> ❌ Не используйте `React.Fragment `как обертку для дочерних элементов: +> +> ```jsx static +> +> +>
1
+>
2
+> +> +> ``` +> +> ✅ Правильный вариант - размещайте элементы напрямую внутри `Flex`: +> +> ```jsx static +> +>
1
+>
2
+> +> ``` +> +> Это обеспечит корректную работу отступов между элементами во всех поддерживаемых браузерах.