feat: add layout props to Flex

BlackySoul · BlackySoul · commit cebd0f415f5c · 2025-11-18T14:20:44.000+07:00
diff --git a/packages/vkui/docs/icons-overview/IconsOverview.tsx b/packages/vkui/docs/icons-overview/IconsOverview.tsx
@@ -16,7 +16,6 @@ import {
   Snackbar,
   Tooltip,
 } from '../../src';
-import { FlexItem } from '../../src/components/Flex/FlexItem/FlexItem';
 import { Keys, pressedKey } from '../../src/lib/accessibility';
 import { OverviewLayout } from '../common/components/OverviewLayout';
 import { useGetGlobalParams } from '../common/hooks/useGetGlobalParams';
@@ -114,7 +113,7 @@ const IconsOverview = () => {
         ItemsContainer={({ children }) => <Flex gap={['2xl', 'xl']}>{children}</Flex>}
         renderSectionItem={(iconData, iconSizeData) => (
           <Tooltip key={iconData.name} title={iconData.name} strategy="absolute">
-            <FlexItem
+            <div
               onClick={() => onIconClick(iconData.name)}
               onKeyDown={(e) => onKeyDown(e, iconData.name)}
               className={styles.icon}
@@ -123,7 +122,7 @@ const IconsOverview = () => {
               style={{ inlineSize: Number(iconSizeData.title) }}
             >
               {iconData.node}
-            </FlexItem>
+            </div>
           </Tooltip>
         )}
         additionalHeaderItem={
@@ -136,7 +135,7 @@ const IconsOverview = () => {
               allowClearButton
             />
             {selectedSizes.length < SIZES_OPTIONS.length && (
-              <FlexItem flex="shrink">
+              <Flex flexShrink={1}>
                 <Button
                   size="m"
                   mode="secondary"
@@ -145,7 +144,7 @@ const IconsOverview = () => {
                   rounded
                   aria-label="Сбросить фильтры"
                 />
-              </FlexItem>
+              </Flex>
             )}
           </Flex>
         }
diff --git a/packages/vkui/src/components/Flex/Flex.tsx b/packages/vkui/src/components/Flex/Flex.tsx
@@ -4,8 +4,10 @@ import {
   columnGapClassNames,
   type GapProp,
   type GapsProp,
+  resolveLayoutProps,
   rowGapClassNames,
 } from '../../lib/layouts';
+import type { LayoutProps } from '../../lib/layouts/types';
 import type { CSSCustomProperties } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import type { RootComponentProps } from '../RootComponent/RootComponent';
@@ -48,7 +50,9 @@ type FlexContentProps =
   | 'space-between'
   | 'space-evenly';
 
-export interface FlexProps extends Omit<RootComponentProps<HTMLElement>, 'baseClassName'> {
+export interface FlexProps
+  extends Omit<RootComponentProps<HTMLElement>, 'baseClassName'>,
+    LayoutProps {
   /**
    * Направление осей, эквивалентно `flex-direction`.
    */
@@ -104,13 +108,14 @@ export const Flex: React.FC<FlexProps> & {
   reverse = false,
   children,
   alignSelf,
-  ...props
+  ...restProps
 }: FlexProps) => {
   const [rowGap, columnGap] = calculateGap(gap);
+  const resolvedProps = resolveLayoutProps(restProps);
 
   return (
     <RootComponent
-      {...props}
+      {...resolvedProps}
       baseClassName={classNames(
         styles.host,
         !noWrap && styles.wrap,
diff --git a/website/content/components/flex.mdx b/website/content/components/flex.mdx
@@ -117,7 +117,9 @@ VKUI (например, [`Header`](/components/group#header) и [`SimpleCell`](/
   ```
 </Playground>
 
-## Flex.Item [tag:component]
+## ~Flex.Item~ [tag:component]
+
+> Подкомпонент устарел. Используйте `Flex`, который теперь принимает все свойства `Flex.Item`.
 
 Подкомпонент `Flex.Item` используется как обёртка для дочерних элементов компонента `Flex` в случае, когда нужно
 переопределить `flex`-свойства этих элементов, например, `flex-basis`:
@@ -129,6 +131,9 @@ VKUI (например, [`Header`](/components/group#header) и [`SimpleCell`](/
     <Flex.Item flexBasis={100}>
       <Card Component="div">Ширина 100px</Card>
     </Flex.Item>
+    <Flex flexBasis={100}>
+      <Card Component="div">Я лучше Ширина 100px</Card>
+    </Flex>
     <Card Component="div">Колонка</Card>
   </Flex>
   ```
