feat: deprecate Flex.Item

Author: BlackySoul

examples/vkui-vite-ts/src/App.tsx

@@ -44,7 +44,7 @@ export default function App() {
         <Flex direction="column" justify="center" className={styles.layout}>
           <FixedLayout vertical="top">
             <Flex justify="end" className={styles.header}>
-              <Flex.Item>{colorSchemeSwitcher}</Flex.Item>
+              {colorSchemeSwitcher}
             </Flex>
           </FixedLayout>
           <Flex direction="column" justify="center" align="center" gap={16}>

packages/vkui/src/components/Flex/Flex.tsx

@@ -11,6 +11,7 @@ import { RootComponent } from '../RootComponent/RootComponent';
 import type { RootComponentProps } from '../RootComponent/RootComponent';
 import { FlexItem, type FlexItemProps } from './FlexItem/FlexItem';
 import styles from './Flex.module.css';
+import flexItemStyles from './FlexItem/FlexItem.module.css';
 
 export type { FlexItemProps };
 
@@ -31,6 +32,14 @@ const alignClassNames = {
   baseline: styles.alignBaseline,
 };
 
+const alignSelfClassNames = {
+  start: flexItemStyles.alignSelfStart,
+  end: flexItemStyles.alignSelfEnd,
+  center: flexItemStyles.alignSelfCenter,
+  baseline: flexItemStyles.alignSelfBaseline,
+  stretch: flexItemStyles.alignSelfStretch,
+};
+
 type FlexContentProps =
   | 'start'
   | 'end'
@@ -70,12 +79,20 @@ export interface FlexProps extends Omit<RootComponentProps<HTMLElement>, 'baseCl
    * Для инвертирования направления, эквивалентно `row-reverse` `column-reverse`.
    */
   reverse?: boolean;
+  /**
+   * Для задания выравнивания, отличного от установленного на родителе, эквивалентно `align-self`.
+   */
+  alignSelf?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
 }
 
 /**
  * @see https://vkui.io/components/flex
  */
 export const Flex: React.FC<FlexProps> & {
+  /**
+   * @deprecated Since 8.0.0. Будет удалено в **VKUI v9**.
+   * Используйте компонент `Flex`.
+   */
   Item: typeof FlexItem;
 } = ({
   gap = 0,
@@ -86,6 +103,7 @@ export const Flex: React.FC<FlexProps> & {
   direction = 'row',
   reverse = false,
   children,
+  alignSelf,
   ...props
 }: FlexProps) => {
   const [rowGap, columnGap] = calculateGap(gap);
@@ -100,6 +118,7 @@ export const Flex: React.FC<FlexProps> & {
         direction !== 'row' && styles.directionColumn,
         margin !== 'none' && styles.marginAuto,
         align && alignClassNames[align],
+        alignSelf && alignSelfClassNames[alignSelf],
         justify && justifyClassNames[justify],
         getGapsPresets(rowGap, columnGap),
       )}

packages/vkui/src/components/Flex/FlexItem/FlexItem.tsx

@@ -1,4 +1,5 @@
 import { classNames } from '@vkontakte/vkjs';
+import { warnOnce } from '../../../lib/warnOnce';
 import type { HasChildren } from '../../../types';
 import { RootComponent } from '../../RootComponent/RootComponent';
 import type { RootComponentProps } from '../../RootComponent/RootComponent';
@@ -41,13 +42,19 @@ export interface FlexItemProps
   flexBasis?: number | string;
 }
 
+const warn = warnOnce('Flex.Item');
+
 export const FlexItem = ({
   children,
   alignSelf,
   flex,
   flexBasis,
   ...rest
 }: FlexItemProps): React.ReactNode => {
+  if (process.env.NODE_ENV === 'development') {
+    warn('Компонент Flex.Item устарел, используйте компонент Flex в качестве альтернативы.');
+  }
+
   return (
     <RootComponent
       {...rest}