@vkontakte/vkui 4.20.0 → 4.22.1

package/src/components/Gallery/Readme.md

@@ -1,113 +1,93 @@
 ```jsx
-  class Example extends React.Component {
+const [slideIndex, setSlideIndex] = useState(0);
+const [isDraggable, setIsDraggable] = useState(true);
+const [showArrows, setShowArrows] = useState(true);
 
-    constructor (props) {
+<View activePanel="gallery">
+  <Panel nav="gallery">
+    <PanelHeader>Gallery</PanelHeader>
+    <Group header={<Header mode="secondary">Sticks right</Header>}>
+      <Gallery
+        slideWidth="90%"
+        bullets="dark"
+      >
+        <div style={{ backgroundColor: 'var(--destructive)' }} />
+        <img src="https://picsum.photos/1024/640" style={{ display: 'block'}} />
+        <div style={{ backgroundColor: 'var(--accent)' }} />
+      </Gallery>
+    </Group>
+    <Group header={<Header mode="secondary">Sticks left</Header>}>
+      <Gallery
+        slideWidth="90%"
+        align="right"
+      >
+        <div style={{ height: 150, backgroundColor: 'var(--destructive)' }} />
+        <div style={{ backgroundColor: 'var(--button_commerce_background)' }} />
+        <div style={{ backgroundColor: 'var(--accent)' }} />
+      </Gallery>
+    </Group>
+    <Group header={<Header mode="secondary">Centered</Header>}>
+      <Gallery
+        slideWidth="90%"
+        align="center"
+      >
+        <div style={{ backgroundColor: 'var(--destructive)' }} />
+        <div style={{ backgroundColor: 'var(--button_commerce_background)' }} />
+        <div style={{ backgroundColor: 'var(--accent)' }} />
+      </Gallery>
+    </Group>
+    <Group header={<Header mode="secondary">Custom width</Header>}>
+      <Gallery
+        slideWidth="custom"
+        style={{ height: 150 }}
+      >
+        <div style={{ width: 200, backgroundColor: 'var(--destructive)' }} />
+        <div style={{ width: 120, backgroundColor: 'var(--button_commerce_background)' }} />
+        <div style={{ width: 70, backgroundColor: 'var(--accent)' }} />
+        <div style={{ width: 220, backgroundColor: 'var(--icon_secondary)' }} />
+      </Gallery>
+    </Group>
+    <Group header={<Header mode="secondary">Arrows</Header>}>
+      <Gallery
+        slideWidth="90%"
+        style={{ height: 150 }}
+        bullets="dark"
+        showArrows
+      >
+        <div style={{ backgroundColor: 'var(--destructive)' }} />
+        <div style={{ backgroundColor: 'var(--button_commerce_background)' }} />
+        <div style={{ backgroundColor: 'var(--accent)' }} />
+      </Gallery>
+    </Group>
+    <Group header={<Header mode="secondary">Controled</Header>}>
+      <Gallery
+        slideWidth="90%"
+        align="center"
+        style={{ height: 150 }}
+        slideIndex={slideIndex}
+        onChange={setSlideIndex}
+        isDraggable={isDraggable}
+        showArrows={showArrows}
+      >
+        <div style={{ backgroundColor: 'var(--destructive)' }} />
+        <div style={{ backgroundColor: 'var(--button_commerce_background)' }} />
+        <div style={{ backgroundColor: 'var(--accent)' }} />
+      </Gallery>
 
-      super(props);
-
-      this.state = {
-        slideIndex: 0,
-        isDraggable: true,
-        showArrows: true,
-      }
-    }
-
-    render () {
-      const { isDraggable, showArrows, slideIndex } = this.state
-      return (
-        <View activePanel="gallery">
-          <Panel id="gallery">
-            <PanelHeader>Gallery</PanelHeader>
-            <Group header={<Header mode="secondary">Sticks right</Header>}>
-              <Gallery
-                slideWidth="90%"
-                style={{ height: 150 }}
-                bullets="dark"
-              >
-                <div style={{ backgroundColor: 'var(--destructive)' }} />
-                <div style={{ backgroundColor: 'var(--button_commerce_background)' }} />
-                <div style={{ backgroundColor: 'var(--accent)' }} />
-              </Gallery>
-            </Group>
-            <Group header={<Header mode="secondary">Sticks left</Header>}>
-              <Gallery
-                slideWidth="90%"
-                align="right"
-                style={{ height: 150 }}
-              >
-                <div style={{ backgroundColor: 'var(--destructive)' }} />
-                <div style={{ backgroundColor: 'var(--button_commerce_background)' }} />
-                <div style={{ backgroundColor: 'var(--accent)' }} />
-              </Gallery>
-            </Group>
-            <Group header={<Header mode="secondary">Centered</Header>}>
-              <Gallery
-                slideWidth="90%"
-                align="center"
-                style={{ height: 150 }}
-              >
-                <div style={{ backgroundColor: 'var(--destructive)' }} />
-                <div style={{ backgroundColor: 'var(--button_commerce_background)' }} />
-                <div style={{ backgroundColor: 'var(--accent)' }} />
-              </Gallery>
-            </Group>
-            <Group header={<Header mode="secondary">Custom width</Header>}>
-              <Gallery
-                slideWidth="custom"
-                style={{ height: 150 }}
-              >
-                <div style={{ width: 200, backgroundColor: 'var(--destructive)' }} />
-                <div style={{ width: 120, backgroundColor: 'var(--button_commerce_background)' }} />
-                <div style={{ width: 70, backgroundColor: 'var(--accent)' }} />
-                <div style={{ width: 220, backgroundColor: 'var(--icon_secondary)' }} />
-              </Gallery>
-            </Group>
-            <Group header={<Header mode="secondary">Arrows</Header>}>
-              <Gallery
-                slideWidth="90%"
-                style={{ height: 150 }}
-                bullets="dark"
-                showArrows
-              >
-                <div style={{ backgroundColor: 'var(--destructive)' }} />
-                <div style={{ backgroundColor: 'var(--button_commerce_background)' }} />
-                <div style={{ backgroundColor: 'var(--accent)' }} />
-              </Gallery>
-            </Group>
-            <Group header={<Header mode="secondary">Controled</Header>}>
-              <Gallery
-                slideWidth="90%"
-                align="center"
-                style={{ height: 150 }}
-                slideIndex={slideIndex}
-                onChange={slideIndex => this.setState({slideIndex})}
-                isDraggable={isDraggable}
-                showArrows={showArrows}
-              >
-                <div style={{ backgroundColor: 'var(--destructive)' }} />
-                <div style={{ backgroundColor: 'var(--button_commerce_background)' }} />
-                <div style={{ backgroundColor: 'var(--accent)' }} />
-              </Gallery>
-
-              <FormItem>
-                <Checkbox checked={isDraggable} onChange={e => this.setState({ isDraggable: e.target.checked })}>
-                  isDraggable
-                </Checkbox>
-                <Checkbox checked={showArrows} onChange={e => this.setState({ showArrows: e.target.checked })}>
-                  showArrows
-                </Checkbox>
-              </FormItem>
-              <FormItem>
-                <Button size='l' stretched onClick={() => this.setState({ slideIndex: (slideIndex + 1) % 3 })}>
-                  Next slide
-                </Button>
-              </FormItem>
-            </Group>
-          </Panel>
-        </View>
-      )
-    }
-  }
-
-  <Example />
+      <FormItem>
+        <Checkbox checked={isDraggable} onChange={e => setIsDraggable(e.target.checked)}>
+          isDraggable
+        </Checkbox>
+        <Checkbox checked={showArrows} onChange={e => setShowArrows(e.target.checked)}>
+          showArrows
+        </Checkbox>
+      </FormItem>
+      <FormItem>
+        <Button size='l' stretched onClick={() => setSlideIndex((slideIndex + 1) % 3)}>
+          Next slide
+        </Button>
+      </FormItem>
+    </Group>
+  </Panel>
+</View>
 ```

package/src/components/GridAvatar/GridAvatar.css

@@ -0,0 +1,37 @@
+.GridAvatar__in {
+  display: flex;
+  flex-flow: column wrap;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  border-radius: inherit;
+
+  --grid-avatar-image-offset: 2px;
+}
+
+.GridAvatar__item {
+  width: calc(50% - var(--grid-avatar-image-offset) / 2);
+  height: 100%;
+  background-size: cover;
+  background-position: center;
+}
+
+.GridAvatar--images-1 .GridAvatar__item {
+  width: 100%;
+}
+
+.GridAvatar--images-3 .GridAvatar__item:nth-child(1n + 2),
+.GridAvatar--images-4 .GridAvatar__item {
+  height: calc(50% - var(--grid-avatar-image-offset) / 2);
+}
+
+.GridAvatar--images-2 .GridAvatar__item:nth-child(1n + 2),
+.GridAvatar--images-3 .GridAvatar__item:nth-child(1n + 2),
+.GridAvatar--images-4 .GridAvatar__item:nth-child(1n + 3) {
+  margin-left: var(--grid-avatar-image-offset);
+}
+
+.GridAvatar--images-3 .GridAvatar__item:nth-child(2),
+.GridAvatar--images-4 .GridAvatar__item:nth-child(odd) {
+  margin-bottom: var(--grid-avatar-image-offset);
+}

package/src/components/GridAvatar/GridAvatar.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import Avatar, { AVATAR_DEFAULT_SHADOW, AVATAR_DEFAULT_SIZE } from '../Avatar/Avatar';
+import { classNames } from '../../lib/classNames';
+import { warnOnce } from '../../lib/warnOnce';
+import { HasRootRef } from '../../types';
+import './GridAvatar.css';
+
+export interface GridAvatarProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+  src?: string[];
+  size?: number;
+  shadow?: boolean;
+}
+
+const MIN_GRID_LENGTH = 1;
+const MAX_GRID_LENGTH = 4;
+
+const warn = warnOnce('GridAvatar');
+
+export const GridAvatar: React.FC<GridAvatarProps> = ({
+  src = [],
+  size = AVATAR_DEFAULT_SIZE,
+  shadow = AVATAR_DEFAULT_SHADOW,
+  ...restProps
+}: GridAvatarProps) => {
+  if (process.env.NODE_ENV === 'development' && src.length > MAX_GRID_LENGTH) {
+    warn(`Размер пропа src (${src.length}) больше максимального (${MAX_GRID_LENGTH})`);
+  }
+
+  const count = Math.max(MIN_GRID_LENGTH, Math.min(MAX_GRID_LENGTH, src.length));
+
+  return (
+    <Avatar
+      {...restProps}
+      vkuiClass={classNames(
+        'GridAvatar',
+        `GridAvatar--images-${count}`,
+      )}
+      shadow={shadow}
+      size={size}
+    >
+      <div vkuiClass="GridAvatar__in">
+        {src.slice(0, MAX_GRID_LENGTH).map((src, i) => {
+          return (
+            <div
+              key={i}
+              vkuiClass="GridAvatar__item"
+              style={{ backgroundImage: `url(${src})` }}
+            >
+            </div>
+          );
+        })}
+      </div>
+    </Avatar>
+  );
+};

package/src/components/GridAvatar/Readme.md

@@ -0,0 +1,12 @@
+Отображение нескольких аватаров в сетке от 1 до 4 элементов.
+
+
+```jsx { "props": { "layout": false, "iframe": false } }
+<div style={{ display: 'flex', padding: 12, gap: 8, flexFlow: 'row wrap' }}>
+  <GridAvatar />
+  <GridAvatar src={[getAvatarUrl('user_ji')]} />
+  <GridAvatar src={[getAvatarUrl('user_wayshev'), getAvatarUrl('user_mm')]} />
+  <GridAvatar src={[getAvatarUrl('user_arthurstam'), getAvatarUrl('user_xyz'), getAvatarUrl('user_ox')]} />
+  <GridAvatar src={[getAvatarUrl('user_ilyagrshn'), getAvatarUrl('user_tc'), getAvatarUrl('user_lihachyov'), getAvatarUrl('user_va')]} />
+</div>
+```

package/src/components/Group/Readme.md

@@ -1,6 +1,6 @@
 Группа – базовый компонент для группировки контента по смыслу.
 
-```jsx
+```jsx { "props": { "layout": false, "adaptivity": true } }
 const MODAL_NAME = 'modal'
 
 class App extends React.Component {
@@ -91,21 +91,25 @@ class App extends React.Component {
     );
 
     return (
-      <View activePanel="group" modal={modal}>
-        <Panel id="group">
-          <PanelHeader>
-            Group
-          </PanelHeader>
+      <SplitLayout modal={modal}>
+        <SplitCol>
+        <View activePanel="group">
+          <Panel id="group">
+            <PanelHeader>
+              Group
+            </PanelHeader>
 
-          {this.renderGroup()}
+            {this.renderGroup()}
 
-          <Group header={<Header mode="secondary">Модальное окно с Group</Header>}>
-            <SimpleCell onClick={() => this.setState({ isModalOpened: true })}>
-              Открыть Group в модальном окне
-            </SimpleCell>
-          </Group>
-        </Panel>
-      </View>
+            <Group header={<Header mode="secondary">Модальное окно с Group</Header>}>
+              <SimpleCell onClick={() => this.setState({ isModalOpened: true })}>
+                Открыть Group в модальном окне
+              </SimpleCell>
+            </Group>
+          </Panel>
+        </View>
+        </SplitCol>
+      </SplitLayout>
     )
   }
 }

package/src/components/Header/Header.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { getClassName } from '../../helpers/getClassName';
 import { classNames } from '../../lib/classNames';
 import { usePlatform } from '../../hooks/usePlatform';
-import { HasPlatform, HasRootRef } from '../../types';
+import { HasComponent, HasPlatform, HasRootRef } from '../../types';
 import { hasReactNode, isPrimitiveReactNode } from '../../lib/utils';
 import { Platform } from '../../lib/platform';
 import Headline from '../Typography/Headline/Headline';
@@ -26,7 +26,7 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLElement>, HasRootR
   multiline?: boolean;
 }
 
-type HeaderContentProps = Pick<HeaderProps, 'children' | 'mode'> & HasPlatform & { Component: React.ElementType };
+type HeaderContentProps = Pick<HeaderProps, 'children' | 'mode'> & HasPlatform & HasComponent;
 
 const HeaderContent: React.FC<HeaderContentProps> = ({ platform, mode, ...restProps }) => {
   if (platform === Platform.IOS) {
@@ -58,7 +58,7 @@ const HeaderContent: React.FC<HeaderContentProps> = ({ platform, mode, ...restPr
   }
 };
 
-type HeaderAsideProps = Pick<HeaderProps, 'aside'> & HasPlatform & { Component: React.ElementType };
+type HeaderAsideProps = Pick<HeaderProps, 'aside'> & HasPlatform & HasComponent;
 
 const HeaderAside: React.FC<HeaderAsideProps> = ({ platform, ...restProps }) => {
   return platform === Platform.VKCOM
@@ -66,7 +66,7 @@ const HeaderAside: React.FC<HeaderAsideProps> = ({ platform, ...restProps }) =>
     : <Text weight="regular" {...restProps} />;
 };
 
-type HeaderSubtitleProps = Pick<HeaderProps, 'subtitle' | 'mode'> & { Component: React.ElementType };
+type HeaderSubtitleProps = Pick<HeaderProps, 'subtitle' | 'mode'> & HasComponent;
 
 const HeaderSubtitle: React.FC<HeaderSubtitleProps> = ({ mode, ...restProps }) => {
   return mode === 'secondary'

package/src/components/HorizontalCell/HorizontalCell.tsx

@@ -7,7 +7,7 @@ import Caption from '../Typography/Caption/Caption';
 import Tappable from '../Tappable/Tappable';
 import Subhead from '../Typography/Subhead/Subhead';
 import Avatar from '../Avatar/Avatar';
-import { HasRef, HasRootRef } from '../../types';
+import { HasComponent, HasRef, HasRootRef } from '../../types';
 import './HorizontalCell.css';
 
 interface CellTypographyProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -23,8 +23,8 @@ const CellTypography: React.FC<CellTypographyProps> = ({ size, children, ...rest
 export interface HorizontalCellProps extends
   React.AnchorHTMLAttributes<HTMLElement>,
   HasRootRef<HTMLDivElement>,
-  HasRef<HTMLDivElement> {
-  Component?: React.ElementType;
+  HasRef<HTMLDivElement>,
+  HasComponent {
   size?: 's' | 'm' | 'l';
   header?: React.ReactNode;
   subtitle?: React.ReactNode;

package/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -24,6 +24,8 @@ interface ScrollContext {
   initialScrollWidth: number;
 }
 
+export type ScrollPositionHandler = (currentPosition: number) => number;
+
 export interface HorizontalScrollProps extends
   React.HTMLAttributes<HTMLDivElement>,
   AdaptivityProps,
@@ -31,11 +33,11 @@ export interface HorizontalScrollProps extends
   /**
    * Функция для расчета величины прокрутки при клике на левую стрелку.
    */
-  getScrollToLeft?: (currentPosition: number) => number;
+  getScrollToLeft?: ScrollPositionHandler;
   /**
    * Функция для расчета величины прокрутки при клике на правую стрелку.
    */
-  getScrollToRight?: (currentPosition: number) => number;
+  getScrollToRight?: ScrollPositionHandler;
   showArrows?: boolean;
   scrollAnimationDuration?: number;
 }
@@ -112,18 +114,16 @@ function doScroll({
   })();
 }
 
-const HorizontalScroll: React.FC<HorizontalScrollProps> = (props: HorizontalScrollProps) => {
-  const {
-    children,
-    getScrollToLeft,
-    getScrollToRight,
-    showArrows,
-    scrollAnimationDuration,
-    hasMouse,
-    getRef,
-    ...restProps
-  } = props;
-
+const HorizontalScroll: React.FC<HorizontalScrollProps> = ({
+  children,
+  getScrollToLeft,
+  getScrollToRight,
+  showArrows = true,
+  scrollAnimationDuration,
+  hasMouse,
+  getRef,
+  ...restProps
+}: HorizontalScrollProps) => {
   const [canScrollLeft, setCanScrollLeft] = React.useState(false);
   const [canScrollRight, setCanScrollRight] = React.useState(false);
 
@@ -189,10 +189,6 @@ const HorizontalScroll: React.FC<HorizontalScrollProps> = (props: HorizontalScro
   );
 };
 
-HorizontalScroll.defaultProps = {
-  showArrows: true,
-};
-
 export default withAdaptivity(HorizontalScroll, {
   hasMouse: true,
 });

package/src/components/HorizontalScroll/HorizontalScrollArrow.css

@@ -39,7 +39,7 @@
 }
 
 .HorizontalScrollArrow--left {
-  margin-left: 16px;
+  padding-left: 16px;
   left: 0;
 }
 
@@ -48,7 +48,7 @@
 }
 
 .HorizontalScrollArrow--right {
-  margin-right: 16px;
+  padding-right: 16px;
   right: 0;
 }
 

package/src/components/IconButton/IconButton.css

@@ -32,6 +32,8 @@
   opacity: .6;
 }
 
+.FormItem--removable .Removable__content > .IconButton,
+.FormLayoutGroup--removable .Removable__content > .IconButton,
 .FormField__after .IconButton {
   display: flex;
   align-items: center;
@@ -62,6 +64,11 @@
   height: 36px;
 }
 
+.FormItem--removable .Removable__content > .IconButton--sizeY-compact,
+.FormLayoutGroup--removable .Removable__content > .IconButton--sizeY-compact {
+  height: 36px;
+}
+
 .IconButton--sizeY-compact .Icon--16,
 .IconButton--sizeY-compact .Icon--16.Icon--w-8 {
   padding: 14px;

package/src/components/InitialsAvatar/InitialsAvatar.css

@@ -0,0 +1,53 @@
+.InitialsAvatar {
+  overflow: hidden;
+  background: #99a2ad;
+  background: linear-gradient(135deg, #b1b6bd, #99a2ad);
+}
+
+.InitialsAvatar__text {
+  font-family: var(--font-tt);
+  font-weight: 600;
+  color: var(--white); /* stylelint-disable-line plugin/only-tokens-are-allowed */
+  text-transform: uppercase;
+  text-align: center;
+}
+
+.InitialsAvatar--color-red {
+  background: #e52e40;
+  background: linear-gradient(135deg, #ff7583, #e52e40);
+}
+
+.InitialsAvatar--color-pink {
+  background: #e62e6b;
+  background: linear-gradient(135deg, #ff8880, #e62e6b);
+}
+
+.InitialsAvatar--color-orange {
+  background: #e66b2e;
+  background: linear-gradient(135deg, #ffbf80, #e66b2e);
+}
+
+.InitialsAvatar--color-yellow {
+  background: #e7a902;
+  background: linear-gradient(135deg, #ffd54f, #e7a902);
+}
+
+.InitialsAvatar--color-green {
+  background: #6cd97e;
+  background: linear-gradient(135deg, #6cd97e, #12b212);
+}
+
+.InitialsAvatar--color-l-blue {
+  background: #2bb4d6;
+  background: linear-gradient(135deg, #7df1fa, #2bb4d6);
+}
+
+.InitialsAvatar--color-blue {
+  background: #3f8ae0;
+  background: linear-gradient(135deg, #6cf, #3f8ae0);
+}
+
+.InitialsAvatar--color-violet {
+  background: #8f3fe0;
+  background: linear-gradient(135deg, #d3a6ff, #8f3fe0);
+}

package/src/components/InitialsAvatar/InitialsAvatar.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { HasRootRef } from '../../types';
+import { classNames } from '../../lib/classNames';
+import Avatar, { AVATAR_DEFAULT_SHADOW, AVATAR_DEFAULT_SIZE } from '../Avatar/Avatar';
+import './InitialsAvatar.css';
+
+/**
+ * Градиенты, которые можно использовать в алгоритме поиска градиентов по числовому идентификатору пользователя.
+ * @example user.id % 6 + 1
+ */
+export type InitialsAvatarNumberGradients = 1 | 2 | 3 | 4 | 5 | 6;
+export type InitialsAvatarTextGradients =
+  | 'red'
+  | 'pink'
+  | 'orange'
+  | 'yellow'
+  | 'green'
+  | 'l-blue'
+  | 'blue'
+  | 'violet';
+
+export interface InitialsAvatarProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+  children?: React.ReactNode;
+  /**
+   * `'red' | 'pink' | 'orange' | 'yellow' | 'green' | 'l-blue' | 'blue' | 'violet'`
+   *
+   * Если передано число, то оно будет сконвертировано в строчное представление цвета по следующей схеме:
+   *
+   * 1: 'red'
+   *
+   * 2: 'orange'
+   *
+   * 3: 'yellow'
+   *
+   * 4: 'green'
+   *
+   * 5: 'l-blue'
+   *
+   * 6: 'violet'
+   */
+  gradientColor?: InitialsAvatarNumberGradients | InitialsAvatarTextGradients;
+  size?: number;
+  shadow?: boolean;
+}
+
+const COLORS_NUMBER_TO_TEXT_MAP: Record<InitialsAvatarNumberGradients, InitialsAvatarTextGradients> = {
+  1: 'red',
+  2: 'orange',
+  3: 'yellow',
+  4: 'green',
+  5: 'l-blue',
+  6: 'violet',
+};
+
+function getInitialsFontSize(avatarSize: number) {
+  const calculatedFontSize = Math.ceil(avatarSize * 0.36);
+  const evenFix = calculatedFontSize % 2;
+  return calculatedFontSize + evenFix;
+}
+
+export const InitialsAvatar: React.FC<InitialsAvatarProps> = ({
+  size = AVATAR_DEFAULT_SIZE,
+  shadow = AVATAR_DEFAULT_SHADOW,
+  children,
+  gradientColor,
+  style,
+  ...restProps
+}: InitialsAvatarProps) => {
+  const gradientName = typeof gradientColor === 'string' ? gradientColor : COLORS_NUMBER_TO_TEXT_MAP[gradientColor];
+
+  return (
+    <Avatar
+      {...restProps}
+      style={{
+        ...style,
+        fontSize: getInitialsFontSize(size),
+      }}
+      shadow={shadow}
+      size={size}
+      vkuiClass={classNames(
+        'InitialsAvatar',
+        `InitialsAvatar--color-${gradientName}`,
+      )}
+    >
+      <span aria-hidden="true" vkuiClass="InitialsAvatar__text">
+        {children}
+      </span>
+    </Avatar>
+  );
+};

package/src/components/InitialsAvatar/Readme.md

@@ -0,0 +1,14 @@
+Компонент для отображения текстовых аватаров на фоне градиента (например, когда у пользователя нет установленного изображения). 
+Для лучшего отображения, рекомендуется использовать длину текста <b>не более 2 символов</b>.<br />
+ВКонтакте использует формулу `user_id % 6 + 1` для определения градиента пользователя. Например, у пользователя c id 106 будет 5-й (`l-blue`) цвет градиента.
+
+```jsx { "props": { "layout": false, "iframe": false } }
+<div style={{ display: 'flex', padding: 12, gap: 8, flexFlow: 'row wrap' }}>
+  {[16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 88, 96].map((size) => {
+    const user = getRandomUser();
+    return (
+      <InitialsAvatar size={size} gradientColor={user.id % 6 + 1}>{user.initials}</InitialsAvatar>
+    )
+  })}
+</div>
+```