feat: add justifySelf

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

@@ -13,7 +13,6 @@ 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 };
 
@@ -34,14 +33,6 @@ const alignClassNames = {
   baseline: styles.alignBaseline,
 };
 
-const alignSelfClassNames = {
-  start: flexItemStyles.alignSelfStart,
-  end: flexItemStyles.alignSelfEnd,
-  center: flexItemStyles.alignSelfCenter,
-  baseline: flexItemStyles.alignSelfBaseline,
-  stretch: flexItemStyles.alignSelfStretch,
-};
-
 const displayClassNames = {
   'none': styles.displayNone,
   'inline-flex': styles.displayInlineFlex,
@@ -86,10 +77,6 @@ export interface FlexProps extends RootComponentProps<HTMLElement>, LayoutProps
    * Для инвертирования направления, эквивалентно `row-reverse` `column-reverse`.
    */
   reverse?: boolean;
-  /**
-   * Для задания выравнивания, отличного от установленного на родителе, эквивалентно `align-self`.
-   */
-  alignSelf?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
   /**
    * Возможность задать css-свойство `display`.
    */
@@ -113,7 +100,6 @@ export const Flex: React.FC<FlexProps> & {
   noWrap = false,
   direction = 'row',
   reverse = false,
-  alignSelf,
   display = 'flex',
   ...restProps
 }: FlexProps) => {
@@ -129,7 +115,6 @@ 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),
         display !== 'flex' && displayClassNames[display],

packages/vkui/src/components/Flex/FlexItem/FlexItem.module.css

@@ -15,25 +15,3 @@
 .flexFixed {
   flex: 0 0 auto;
 }
-
-/* align-self */
-
-.alignSelfStart {
-  align-self: start;
-}
-
-.alignSelfEnd {
-  align-self: end;
-}
-
-.alignSelfCenter {
-  align-self: center;
-}
-
-.alignSelfBaseline {
-  align-self: baseline;
-}
-
-.alignSelfStretch {
-  align-self: stretch;
-}

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

@@ -1,4 +1,4 @@
-import { classNames } from '@vkontakte/vkjs';
+import { type LayoutProps, resolveLayoutProps } from '../../../lib/layouts';
 import { warnOnce } from '../../../lib/warnOnce';
 import { RootComponent } from '../../RootComponent/RootComponent';
 import type { RootComponentProps } from '../../RootComponent/RootComponent';
@@ -11,54 +11,27 @@ const flexClassNames = {
   fixed: styles.flexFixed,
 };
 
-const alignSelfClassNames = {
-  start: styles.alignSelfStart,
-  end: styles.alignSelfEnd,
-  center: styles.alignSelfCenter,
-  baseline: styles.alignSelfBaseline,
-  stretch: styles.alignSelfStretch,
-};
-
-export interface FlexItemProps extends RootComponentProps<HTMLElement> {
-  /**
-   * Для задания выравнивания, отлично от родительского, эквивалентно `align-self`.
-   */
-  alignSelf?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
-  /**
-   * Позволяет задать предопределенные значения свойства `flex`:
-   *
-   * - `grow` соответствует значению `1 0 auto`
-   * - `shrink` соответствует значению `0 1 auto`
-   * - `content` соответствует значению `1 1 auto`
-   * - `fixed` соответствует значению `0 0 auto`.
-   */
-  flex?: 'grow' | 'shrink' | 'content' | 'fixed';
-  /**
-   * Изначальный размер элемента, эквивалентно `flex-basis`.
-   */
-  flexBasis?: number | string;
-}
+export type FlexItemProps = RootComponentProps<HTMLElement> &
+  Pick<LayoutProps, 'alignSelf' | 'justifySelf' | 'flexBasis'> & {
+    /**
+     * Позволяет задать предопределенные значения свойства `flex`:
+     *
+     * - `grow` соответствует значению `1 0 auto`
+     * - `shrink` соответствует значению `0 1 auto`
+     * - `content` соответствует значению `1 1 auto`
+     * - `fixed` соответствует значению `0 0 auto`.
+     */
+    flex?: 'grow' | 'shrink' | 'content' | 'fixed';
+  };
 
 const warn = warnOnce('Flex.Item');
 
-export const FlexItem = ({
-  alignSelf,
-  flex,
-  flexBasis,
-  ...restProps
-}: FlexItemProps): React.ReactNode => {
+export const FlexItem = ({ flex, ...restProps }: FlexItemProps): React.ReactNode => {
   if (process.env.NODE_ENV === 'development') {
     warn('Компонент Flex.Item устарел, используйте компонент Flex в качестве альтернативы.');
   }
 
-  return (
-    <RootComponent
-      baseStyle={{ flexBasis }}
-      baseClassName={classNames(
-        alignSelf && alignSelfClassNames[alignSelf],
-        flex && flexClassNames[flex],
-      )}
-      {...restProps}
-    />
-  );
+  const resolvedProps = resolveLayoutProps(restProps);
+
+  return <RootComponent baseClassName={flex && flexClassNames[flex]} {...resolvedProps} />;
 };

packages/vkui/src/lib/layouts/layoutProps.ts

@@ -41,6 +41,9 @@ const OVERFLOW_VALUES: OverflowValue[] = [
   'auto',
   ...CSS_GLOBAL_KEYWORDS,
 ];
+const SELF_POSITION = ['start', 'center', 'end'];
+const ALIGN_SELF_VALUES = [...SELF_POSITION, 'baseline', 'stretch'];
+const JUSTIFY_SELF_VALUES = [...SELF_POSITION, 'baseline', 'stretch'];
 
 export const SYSTEM_PADDING_VERTICAL = 'var(--vkui--size_base_padding_vertical--regular)';
 export const SYSTEM_PADDING_HORIZONTAL = 'var(--vkui--size_base_padding_horizontal--regular)';
@@ -70,6 +73,8 @@ export const LAYOUT_PROPS = {
   flexGrow: FLEX_VALUES,
   flexShrink: FLEX_VALUES,
   flexBasis: FLEX_BASIS_VALUES,
+  alignSelf: ALIGN_SELF_VALUES,
+  justifySelf: JUSTIFY_SELF_VALUES,
   overflow: OVERFLOW_VALUES,
   overflowBlock: OVERFLOW_VALUES,
   overflowInline: OVERFLOW_VALUES,

packages/vkui/src/lib/layouts/types.ts

@@ -33,6 +33,11 @@ export type FlexBasisProp = LiteralUnion<
   number | string
 >;
 
+type SelfPositionProp = 'start' | 'center' | 'end';
+
+type AlignSelfProp = SelfPositionProp | 'baseline' | 'stretch';
+type JustifySelfProp = SelfPositionProp | 'baseline' | 'stretch';
+
 export interface LayoutProps {
   /**
    * Внутренние отступы со всех сторон.
@@ -142,4 +147,12 @@ export interface LayoutProps {
    * Определяет начальный размер flex-элемента.
    */
   flexBasis?: FlexBasisProp;
+  /**
+   * Для задания выравнивания, отличного от установленного на родителе, эквивалентно `align-self`.
+   */
+  alignSelf?: AlignSelfProp;
+  /**
+   * Для задания выравнивания, отличного от установленного на родителе, эквивалентно `justify-self`.
+   */
+  justifySelf?: JustifySelfProp;
 }

tools/postcss-layout-classes/postcss-layout-classes.test.js.snapshot

@@ -785,6 +785,42 @@ exports[`generate layout classes 1`] = `
 .vkui-flex-basis {
     flex-basis: var(--vkui_internal--flex-basis);
 }
+.vkui-align-self-start {
+    align-self: start;
+}
+.vkui-align-self-center {
+    align-self: center;
+}
+.vkui-align-self-end {
+    align-self: end;
+}
+.vkui-align-self-baseline {
+    align-self: baseline;
+}
+.vkui-align-self-stretch {
+    align-self: stretch;
+}
+.vkui-align-self {
+    align-self: var(--vkui_internal--align-self);
+}
+.vkui-justify-self-start {
+    justify-self: start;
+}
+.vkui-justify-self-center {
+    justify-self: center;
+}
+.vkui-justify-self-end {
+    justify-self: end;
+}
+.vkui-justify-self-baseline {
+    justify-self: baseline;
+}
+.vkui-justify-self-stretch {
+    justify-self: stretch;
+}
+.vkui-justify-self {
+    justify-self: var(--vkui_internal--justify-self);
+}
 .vkui-overflow-visible {
     overflow: visible;
 }