Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

fix(Flex): improve className withGaps calculation #8360

Merged
merged 11 commits into from
Mar 18, 2025
Merged

fix(Flex): improve className withGaps calculation #8360

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
8b2efe2
fix(Flex): improve className withGaps calculation
EldarMuhamethanov Mar 11, 2025
8deeb6f
fix(Flex): add check to flex + gap supports
EldarMuhamethanov Mar 11, 2025
1834ff5
fix: add jest CSS.supports mock
EldarMuhamethanov Mar 11, 2025
ecd7f68
fix: fix gaps
EldarMuhamethanov Mar 11, 2025
a64369e
fix: add check canUseDom to FLEX_GAP_SUPPORTED constant
EldarMuhamethanov Mar 11, 2025
a2093d0
fix: improve useWithGaps hook
EldarMuhamethanov Mar 12, 2025
b1b37c8
doc: remove section with old browsers recomendation
EldarMuhamethanov Mar 12, 2025
ba8276d
fix: revert changes and add reset gaps in css
EldarMuhamethanov Mar 14, 2025
e012cca
fix: revert changes
EldarMuhamethanov Mar 14, 2025
f738788
fix: remove `use client`
EldarMuhamethanov Mar 14, 2025
9777934
fix: gap = 0 by default
EldarMuhamethanov Mar 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/vkui/src/components/Flex/Flex.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
}
}
@supports not (inset: 0) {
.withGaps {
.host {
margin-block-start: calc(
-1 * var(--vkui_internal--row_gap) + var(--vkui_internal--flex_original_margin_block)
);
Expand All @@ -34,7 +34,7 @@
}

/* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-universal */
.withGaps.withGaps > * {
.host.host > * {
margin-block-start: var(--vkui_internal--row_gap);
margin-inline-start: var(--vkui_internal--column_gap);
}
Expand Down
7 changes: 2 additions & 5 deletions packages/vkui/src/components/Flex/Flex.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { Children } from 'react';
import { classNames } from '@vkontakte/vkjs';
import {
calculateGap,
Expand Down Expand Up @@ -76,7 +75,7 @@ export interface FlexProps extends Omit<RootComponentProps<HTMLElement>, 'baseCl
export const Flex: React.FC<FlexProps> & {
Item: typeof FlexItem;
} = ({
gap,
gap = 0,
align,
justify,
margin = 'none',
Expand All @@ -86,7 +85,6 @@ export const Flex: React.FC<FlexProps> & {
children,
...props
}: FlexProps) => {
const withGaps = Children.count(children) > 1 && gap;
const [rowGap, columnGap] = calculateGap(gap);

return (
Expand All @@ -100,8 +98,7 @@ export const Flex: React.FC<FlexProps> & {
margin !== 'none' && styles.marginAuto,
align && alignClassNames[align],
justify && justifyClassNames[justify],
withGaps && styles.withGaps,
withGaps && getGapsPresets(rowGap, columnGap),
getGapsPresets(rowGap, columnGap),
)}
baseStyle={getGapsByUser(rowGap, columnGap)}
>
Expand Down
26 changes: 0 additions & 26 deletions packages/vkui/src/components/Flex/Readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,29 +228,3 @@ const Example = () => {
> - Opera 73+
>
> используют нативное `CSS` свойство `gap`. Для более старых версий браузеров автоматически применяется альтернативное решение с использованием `margin`.
>
> Рекомендации по использованию:
>
> При работе со старыми браузерами, где `gap` на flex-контейнерах не поддерживается, важно соблюдать следующее правило:
>
> ❌ Не используйте `React.Fragment `как обертку для дочерних элементов:
>
> ```jsx static
> <Flex gap="m">
> <React.Fragment>
> <div>1</div>
> <div>2</div>
> </React.Fragment>
> </Flex>
> ```
>
> ✅ Правильный вариант - размещайте элементы напрямую внутри `Flex`:
>
> ```jsx static
> <Flex gap="m">
> <div>1</div>
> <div>2</div>
> </Flex>
> ```
>
> Это обеспечит корректную работу отступов между элементами во всех поддерживаемых браузерах.
Loading