@vkontakte/vkui 4.36.1 → 4.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.36.1",
+  "version": "4.37.0",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -30,10 +30,10 @@
     "@babel/preset-typescript": "^7.16.7",
     "@size-limit/preset-small-lib": "^5.0.5",
     "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/react": "^11.2.1",
-    "@testing-library/react-hooks": "^5.1.2",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.2.1",
-    "@types/css-font-loading-module": "^0.0.4",
+    "@types/css-font-loading-module": "^0.0.7",
     "@types/jest": "^26.0.15",
     "@types/jest-image-snapshot": "^4.1.3",
     "@types/node": "^14.14.31",
@@ -47,7 +47,7 @@
     "@vkontakte/eslint-config": "3.1.0",
     "@vkontakte/icons": "^1.184.0",
     "@vkontakte/vk-bridge": "^2.1.3",
-    "@vkontakte/vkui-tokens": "4.16.0",
+    "@vkontakte/vkui-tokens": "4.17.0",
     "autoprefixer": "^10.4.2",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.3",
@@ -56,8 +56,6 @@
     "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-transform-remove-imports": "^1.7.0",
     "chalk": "^4.1.0",
-    "classnames": "^2.2.6",
-    "clean-webpack-plugin": "^4.0.0",
     "concurrently": "^7.3.0",
     "cross-env": "^7.0.2",
     "css-loader": "^6.5.1",
@@ -66,28 +64,29 @@
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-compat": "^4.0.2",
     "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-jest-playwright": "^0.2.1",
-    "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-react": "7.30.1",
+    "eslint-plugin-jest": "^27.0.1",
+    "eslint-plugin-jest-playwright": "^0.9.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "7.31.6",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-vkui": "file:./eslint-plugin-vkui",
     "expect-playwright": "^0.2.6",
-    "husky": "^7.0.4",
+    "husky": "^8.0.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "jest-image-snapshot": "^4.2.0",
     "jest-playwright-preset": "^1.4.1",
     "jest-preset-stylelint": "^5.0.4",
-    "lint-staged": "^12.1.2",
+    "lint-staged": "^13.0.3",
     "mini-css-extract-plugin": "^2.5.2",
     "playwright": "1.17.2",
     "playwright-chromium": "1.17.2",
     "postcss": "^8.4.5",
-    "postcss-cli": "^9.1.0",
+    "postcss-cli": "^10.0.0",
     "postcss-custom-properties": "^12.1.7",
-    "postcss-import": "^14.0.2",
+    "postcss-import": "^15.0.0",
     "postcss-loader": "^7.0.1",
-    "postcss-modules": "^4.3.0",
+    "postcss-modules": "^5.0.0",
     "postcss-value-parser": "^4.2.0",
     "postcss-values-parser": "^6.0.2",
     "prettier": "^2.5.1",
@@ -105,14 +104,14 @@
     "style-loader": "^3.3.1",
     "stylelint": "^14.9.1",
     "stylelint-config-prettier": "^9.0.3",
-    "stylelint-config-standard": "^26.0.0",
+    "stylelint-config-standard": "^28.0.0",
     "stylelint-value-no-unknown-custom-properties": "^4.0.0",
     "typescript": "3.8",
     "wait-port": "^0.2.9",
     "webpack": "^5.66.0",
     "webpack-cli": "^4.9.1",
     "webpack-merge": "^5.8.0",
-    "yargs": "^15.4.1"
+    "yargs": "^17.5.1"
   },
   "resolutions": {
     "@types/react": "^16.14.20",

package/src/components/Avatar/Readme.md

@@ -7,7 +7,7 @@
     <Group>
       <Header mode="secondary">Дефолтный размер</Header>
       <SimpleCell
-        description="VKontakte"
+        subtitle="VKontakte"
         before={<Avatar src={getAvatarUrl("user_arthurstam")} />}
       >
         Артур Стамбульцян
@@ -48,7 +48,7 @@
             <Icon28Users />
           </Avatar>
         }
-        description="Только от друзей друзей"
+        subtitle="Только от друзей друзей"
       >
         Заявки в друзья
       </SimpleCell>
@@ -526,20 +526,20 @@
       <Header mode="secondary">Приложения</Header>
       <SimpleCell
         before={<Avatar mode="app" src={getAvatarUrl("app_shorm_online")} />}
-        description="Ролевая"
+        subtitle="Ролевая"
       >
         Шторм онлайн
       </SimpleCell>
       <SimpleCell
         before={<Avatar mode="app" src={getAvatarUrl("app_shashki")} />}
-        description="Настольная"
+        subtitle="Настольная"
         multiline={false}
       >
         Шашки - 3 вида: шашки, уголки, поддавки
       </SimpleCell>
       <SimpleCell
         before={<Avatar mode="app" src={getAvatarUrl("app_vega_mix")} />}
-        description="Головоломка"
+        subtitle="Головоломка"
       >
         Вега Микс на даче
       </SimpleCell>
@@ -550,14 +550,14 @@
         before={
           <Avatar mode="image" src={getAvatarUrl("audio_arctic_monkeys")} />
         }
-        description="Arctic Monkeys"
+        subtitle="Arctic Monkeys"
         after={<Icon24MoreHorizontal fill="var(--vkui--color_icon_accent)" />}
       >
         I Wanna Be Yours
       </SimpleCell>
       <SimpleCell
         before={<Avatar mode="image" src={getAvatarUrl("audio_leto_zveri")} />}
-        description="Лето (звери)"
+        subtitle="Лето (звери)"
         after={<Icon24MoreHorizontal fill="var(--vkui--color_icon_accent)" />}
       >
         6 утра
@@ -566,7 +566,7 @@
         before={
           <Avatar mode="image" src={getAvatarUrl("audio_depeche_mode")} />
         }
-        description="Depeche Mode"
+        subtitle="Depeche Mode"
         after={<Icon24MoreHorizontal fill="var(--vkui--color_icon_accent)" />}
       >
         Enjoy the Silence

package/src/components/BaseGallery/BaseGallery.tsx

@@ -137,26 +137,30 @@ export const BaseGallery = ({
       ) ?? [];
 
     const localContainerWidth = rootRef.current?.offsetWidth ?? 0;
-    const localviewportOffsetWidth = viewportRef.current?.offsetWidth ?? 0;
+    const localViewportOffsetWidth = viewportRef.current?.offsetWidth ?? 0;
     const localLayerWidth = localSlides.reduce(
       (val: number, slide: GallerySlidesState) => slide.width + val,
       0
     );
+    const adjustShiftX =
+      localSlides.length <= layoutState.current.slides.length ||
+      layoutState.current.slides[slideIndex]?.coordX !==
+        localSlides[slideIndex]?.coordX;
 
     layoutState.current = {
       containerWidth: localContainerWidth,
-      viewportOffsetWidth: localviewportOffsetWidth,
+      viewportOffsetWidth: localViewportOffsetWidth,
       layerWidth: localLayerWidth,
       max: calcMax({
         slides: localSlides,
-        viewportOffsetWidth: localviewportOffsetWidth,
+        viewportOffsetWidth: localViewportOffsetWidth,
         isCenterWithCustomWidth,
       }),
       min: calcMin({
         containerWidth: localContainerWidth,
         layerWidth: localLayerWidth,
         slides: localSlides,
-        viewportOffsetWidth: localviewportOffsetWidth,
+        viewportOffsetWidth: localViewportOffsetWidth,
         isCenterWithCustomWidth,
         align,
       }),
@@ -166,7 +170,7 @@ export const BaseGallery = ({
 
     setShiftState((prevState) => ({
       ...prevState,
-      shiftX: calculateIndent(slideIndex),
+      shiftX: adjustShiftX ? calculateIndent(slideIndex) : prevState.shiftX,
       animation:
         options.animation ??
         prevState.shiftX === validateIndent(prevState.shiftX),

package/src/components/Calendar/Calendar.tsx

@@ -4,7 +4,7 @@ import {
   CalendarHeader,
   CalendarHeaderProps,
 } from "../CalendarHeader/CalendarHeader";
-import { CalendarDays } from "../CalendarDays/CalendarDays";
+import { CalendarDays, CalendarDaysProps } from "../CalendarDays/CalendarDays";
 import { CalendarTime, CalendarTimeProps } from "../CalendarTime/CalendarTime";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import {
@@ -32,7 +32,10 @@ export interface CalendarProps
       | "onPrevMonth"
       | "prevMonthIcon"
       | "nextMonthIcon"
+      | "prevMonthProps"
+      | "nextMonthProps"
     >,
+    Pick<CalendarDaysProps, "dayProps">,
     HasRootRef<HTMLDivElement> {
   value?: Date;
   disablePast?: boolean;
@@ -90,6 +93,9 @@ export const Calendar = ({
   onPrevMonth,
   prevMonthIcon,
   nextMonthIcon,
+  prevMonthProps,
+  nextMonthProps,
+  dayProps,
   ...props
 }: CalendarProps) => {
   const {
@@ -182,6 +188,8 @@ export const Calendar = ({
         changeYearAriaLabel={changeYearAriaLabel}
         prevMonthIcon={prevMonthIcon}
         nextMonthIcon={nextMonthIcon}
+        prevMonthProps={prevMonthProps}
+        nextMonthProps={nextMonthProps}
       />
       <CalendarDays
         viewDate={externalViewDate || viewDate}
@@ -199,6 +207,7 @@ export const Calendar = ({
         onBlur={resetSelectedDay}
         showNeighboringMonth={showNeighboringMonth}
         size={size}
+        dayProps={dayProps}
       />
       {enableTime && value && size !== "s" && (
         <div vkuiClass="Calendar__time">

package/src/components/CalendarDay/CalendarDay.tsx

@@ -1,11 +1,16 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
-import { Tappable } from "../Tappable/Tappable";
+import { Tappable, TappableElementProps } from "../Tappable/Tappable";
 import { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from "../../hooks/useKeyboardInputTracker";
 import { LocaleProviderContext } from "../LocaleProviderContext/LocaleProviderContext";
 import "./CalendarDay.css";
 
-export interface CalendarDayProps {
+export type CalendarDayElementProps = Omit<
+  TappableElementProps,
+  "onChange" | "size" | "disabled" | "selected"
+>;
+
+export interface CalendarDayProps extends CalendarDayElementProps {
   day: Date;
   today?: boolean;
   selected?: boolean;
@@ -44,6 +49,7 @@ export const CalendarDay = React.memo(
     hintedSelectionEnd,
     sameMonth,
     size,
+    ...props
   }: CalendarDayProps) => {
     const locale = React.useContext(LocaleProviderContext);
     const ref = React.useRef<HTMLElement>(null);
@@ -92,6 +98,7 @@ export const CalendarDay = React.memo(
         focusVisibleMode={active ? "outside" : "inside"}
         onEnter={handleEnter}
         onLeave={handleLeave}
+        {...props}
       >
         <div
           vkuiClass={classNames(

package/src/components/CalendarDays/CalendarDays.tsx

@@ -1,6 +1,9 @@
 import * as React from "react";
 import { isSameDay, isSameMonth } from "../../lib/date";
-import { CalendarDay } from "../CalendarDay/CalendarDay";
+import {
+  CalendarDay,
+  CalendarDayElementProps,
+} from "../CalendarDay/CalendarDay";
 import { getDaysNames, getWeeks } from "../../lib/calendar";
 import { LocaleProviderContext } from "../LocaleProviderContext/LocaleProviderContext";
 import { classNames } from "../../lib/classNames";
@@ -14,6 +17,7 @@ export interface CalendarDaysProps
   weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
   showNeighboringMonth?: boolean;
   size?: "s" | "m";
+  dayProps?: CalendarDayElementProps;
   onDayChange(value: Date): void;
   isDayDisabled(value: Date): boolean;
   isDaySelectionStart(value: Date, dayOfWeek: number): boolean;
@@ -46,6 +50,7 @@ export const CalendarDays = ({
   isDayDisabled,
   size,
   showNeighboringMonth = false,
+  dayProps,
   ...props
 }: CalendarDaysProps) => {
   const locale = React.useContext(LocaleProviderContext);
@@ -116,6 +121,7 @@ export const CalendarDays = ({
                 hinted={isDayHinted?.(day)}
                 sameMonth={sameMonth}
                 size={size}
+                {...dayProps}
               />
             );
           })}

package/src/components/CalendarHeader/CalendarHeader.tsx

@@ -5,7 +5,7 @@ import {
   Icon20ChevronRightOutline,
   Icon12Dropdown,
 } from "@vkontakte/icons";
-import { Tappable } from "../Tappable/Tappable";
+import { Tappable, TappableElementProps } from "../Tappable/Tappable";
 import { classNames } from "../../lib/classNames";
 import { SelectType } from "../Select/Select";
 import { CustomSelect } from "../CustomSelect/CustomSelect";
@@ -16,6 +16,8 @@ import { Paragraph } from "../Typography/Paragraph/Paragraph";
 import { AdaptivityProvider } from "../AdaptivityProvider/AdaptivityProvider";
 import "./CalendarHeader.css";
 
+type ArrowMonthProps = Omit<TappableElementProps, "onClick" | "aria-label">;
+
 export interface CalendarHeaderProps
   extends Pick<React.HTMLAttributes<HTMLDivElement>, "className"> {
   viewDate: Date;
@@ -28,6 +30,8 @@ export interface CalendarHeaderProps
   changeYearAriaLabel?: string;
   prevMonthIcon?: React.ReactNode;
   nextMonthIcon?: React.ReactNode;
+  prevMonthProps?: ArrowMonthProps;
+  nextMonthProps?: ArrowMonthProps;
   onChange(viewDate: Date): void;
   /**
    * Нажатие на кнопку переключения на следующий месяц.
@@ -48,6 +52,8 @@ export const CalendarHeader = ({
   onNextMonth,
   onPrevMonth,
   className,
+  prevMonthProps,
+  nextMonthProps,
   prevMonthAriaLabel = "Предыдущий месяц",
   nextMonthAriaLabel = "Следующий месяц",
   changeMonthAriaLabel = "Изменить месяц",
@@ -110,6 +116,7 @@ export const CalendarHeader = ({
             aria-label={`${prevMonthAriaLabel}, ${formatter.format(
               subMonths(viewDate, 1)
             )}`}
+            {...prevMonthProps}
           >
             {prevMonthIcon}
           </Tappable>
@@ -168,6 +175,7 @@ export const CalendarHeader = ({
             aria-label={`${nextMonthAriaLabel}, ${formatter.format(
               addMonths(viewDate, 1)
             )}`}
+            {...nextMonthProps}
           >
             {nextMonthIcon}
           </Tappable>

package/src/components/ChipsSelect/ChipsSelect.tsx

@@ -71,6 +71,8 @@ export interface ChipsSelectProps<Option extends ChipOption>
    * Закрытие выпадающего списка после выбора элемента
    */
   closeAfterSelect?: boolean;
+  fixDropdownWidth?: boolean;
+  forceDropdownPortal?: boolean;
 }
 
 type FocusActionType = "next" | "prev";
@@ -128,6 +130,8 @@ export const ChipsSelect = <Option extends ChipOption>(
     onChangeStart,
     before,
     options,
+    fixDropdownWidth,
+    forceDropdownPortal,
     ...restProps
   } = propsWithDefault;
 
@@ -411,6 +415,8 @@ export const ChipsSelect = <Option extends ChipOption>(
           onMouseLeave={onDropdownMouseLeave}
           fetching={fetching}
           vkuiClass="ChipsSelect__options"
+          sameWidth={fixDropdownWidth}
+          forcePortal={forceDropdownPortal}
         >
           {showCreatable && (
             <CustomSelectOption

package/src/components/Counter/Counter.css

@@ -195,3 +195,16 @@
   color: var(--segmented_control_tint);
 }
 /* [Конец] */
+
+/**
+ * CMP:
+ * SubnavigationButton
+ */
+.SubnavigationButton--selected:not(.SubnavigationButton--mode-tertiary)
+  .Counter {
+  background-color: var(
+    --button_primary_foreground,
+    var(--vkui--color_background_contrast)
+  );
+  color: var(--button_primary_background, var(--vkui--color_text_accent));
+}

package/src/components/FixedLayout/FixedLayout.css

@@ -44,17 +44,33 @@
  * CMP:
  * PanelHeader
  */
+/*
+ * TODO v5.0.0 объединить после удаления appearance токенов
+*/
 .PanelHeader ~ .FixedLayout--top,
 .PanelHeader ~ * .FixedLayout--top:not(.PanelHeader__fixed) {
-  top: calc(var(--panelheader_height) + var(--safe-area-inset-top));
+  top: calc(
+    var(--panelheader_height, var(--vkui--size_panel_header_height--regular)) +
+      var(--safe-area-inset-top)
+  );
 }
 
 .PanelHeader--ios ~ .FixedLayout--top,
 .PanelHeader--ios ~ * .FixedLayout--top:not(.PanelHeader__fixed) {
-  top: calc(var(--panelheader_height_ios) + var(--safe-area-inset-top));
+  top: calc(
+    var(
+        --panelheader_height_ios,
+        var(--vkui--size_panel_header_height--regular)
+      ) + var(--safe-area-inset-top)
+  );
 }
 
 .PanelHeader--vkcom ~ .FixedLayout--top,
 .PanelHeader--vkcom ~ * .FixedLayout--top:not(.PanelHeader__fixed) {
-  top: calc(var(--panelheader_height_vkcom) + var(--safe-area-inset-top));
+  top: calc(
+    var(
+        --panelheader_height_vkcom,
+        var(--vkui--size_panel_header_height--regular)
+      ) + var(--safe-area-inset-top)
+  );
 }

package/src/components/Gallery/Gallery.tsx

@@ -59,6 +59,7 @@ export const Gallery = ({
     if (onChange && safeSlideIndex !== slideIndex) {
       onChange(safeSlideIndex);
     }
+    setSlideIndex(safeSlideIndex);
   }, [onChange, safeSlideIndex, slideIndex]);
 
   return (

package/src/components/Gradient/Readme.md

@@ -49,7 +49,7 @@ const ExampleWithAdaptivity = () => {
             <Header>Учебные заведения и классы</Header>
             <SimpleCell
               before={<Icon28SchoolOutline />}
-              description="Екатеринбург"
+              subtitle="Екатеринбург"
             >
               Школа №180
             </SimpleCell>

package/src/components/Group/Group.css

@@ -7,11 +7,20 @@
   padding-bottom: 8px;
 }
 
-/* TODO v5.0.0 Новая адаптивность */
-.Group--sizeX-regular > .Group__inner {
+.Group--card.Group--padding-s > .Group__inner {
+  padding: 4px;
+}
+
+.Group--card.Group--padding-m > .Group__inner {
   padding: 8px;
 }
 
+/* TODO v5.0.0 Новая адаптивность */
+.Group--sizeX-compact > .Group__inner {
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .Group--card > .Group__inner {
   background: var(--background_content, var(--vkui--color_background_content));
   border-radius: var(--vkui--size_border_radius_paper--regular);

package/src/components/Group/Group.tsx

@@ -34,6 +34,10 @@ export interface GroupProps
    * по умолчанию 'plain'.
    */
   mode?: "plain" | "card";
+  /**
+   * Отвечает за отступы вокруг контента в режиме 'card'.
+   */
+  padding?: "s" | "m";
   children?: React.ReactNode;
 }
 
@@ -44,6 +48,7 @@ const GroupComponent = ({
   separator = "auto",
   getRootRef,
   mode,
+  padding = "m",
   sizeX,
   ...restProps
 }: GroupProps) => {
@@ -81,7 +86,8 @@ const GroupComponent = ({
         platform === IOS && "Group--ios",
         // TODO v5.0.0 Новая адаптивность
         `Group--sizeX-${sizeX}`,
-        `Group--${computedMode}`
+        `Group--${computedMode}`,
+        `Group--padding-${padding}`
       )}
     >
       <div vkuiClass="Group__inner">

package/src/components/Group/Readme.md

@@ -110,7 +110,7 @@ const SharedContent = () => {
               </IconButton>
             )
           }
-          description="Санкт-Петербург, Россия"
+          subtitle="Санкт-Петербург, Россия"
           before={<Avatar size={32} mode="app" />}
         >
           VK · Приложение для iPhone
@@ -127,7 +127,7 @@ const SharedContent = () => {
               </IconButton>
             )
           }
-          description="Санкт-Петербург, Россия"
+          subtitle="Санкт-Петербург, Россия"
           before={<Avatar size={32} mode="app" />}
         >
           VK · Браузер Chrome для macOS

package/src/components/Header/Header.css

@@ -2,7 +2,9 @@
   display: flex;
   align-items: baseline;
   justify-content: space-between;
-  padding: 0 16px;
+  padding: 0;
+  padding-left: var(--vkui--size_base_padding_horizontal--regular);
+  padding-right: var(--vkui--size_base_padding_horizontal--regular);
   user-select: text;
 }
 
@@ -96,9 +98,6 @@
 /**
  * iOS
  */
-.Header--ios {
-  padding: 0 12px;
-}
 
 .Header--ios .Header__main {
   margin: 13px 0 9px;

package/src/components/ModalRoot/ModalRoot.css

@@ -39,14 +39,26 @@
   top: var(--safe-area-inset-top);
 }
 
+/*
+ * TODO v5.0.0 объединить после удаления appearance токенов
+*/
 :not(.ModalRoot--desktop).ModalRoot--vkapps.ModalRoot--android
   .ModalRoot__viewport {
-  top: calc(var(--safe-area-inset-top) + var(--panelheader_height));
+  top: calc(
+    var(--safe-area-inset-top) +
+      var(--panelheader_height, var(--vkui--size_panel_header_height--regular))
+  );
 }
 
 :not(.ModalRoot--desktop).ModalRoot--vkapps.ModalRoot--ios
   .ModalRoot__viewport {
-  top: calc(var(--safe-area-inset-top) + var(--panelheader_height_ios));
+  top: calc(
+    var(--safe-area-inset-top) +
+      var(
+        --panelheader_height_ios,
+        var(--vkui--size_panel_header_height--regular)
+      )
+  );
 }
 
 .ModalRoot__modal {

package/src/components/Panel/Panel.css

@@ -54,6 +54,7 @@
   );
 }
 
+/* TODO: v5.0.0 новая адаптивность - 6 селекторов внизу */
 .Panel--sizeX-compact .Panel__centered .PanelHeader--sep + * {
   margin-top: calc(
     var(--panelheader_height, var(--vkui--size_panel_header_height--regular)) +
@@ -138,6 +139,7 @@
   );
 }
 
+/* TODO: v5.0.0 новая адаптивность */
 .Panel.Panel--sizeX-regular .Panel__in,
 .Panel.Panel--sizeX-regular::after {
   background-color: transparent;

package/src/components/PanelHeaderContent/Readme.md

@@ -1,6 +1,10 @@
 Компонент для отрисовки "сложного" содержимого шапки.
 
-```jsx
+> **Важно**
+>
+> Правая часть шапки скрыта по умолчанию, если требуется показать её, передайте в [`ConfigProvider`](https://vkcom.github.io/VKUI/#/ConfigProvider) свойство `webviewType={WebviewType.INTERNAL}`.
+
+```jsx { "props": { "webviewType": true } }
 const Example = () => {
   const platform = usePlatform();
   return (

package/src/components/PromoBanner/PromoBanner.tsx

@@ -121,7 +121,7 @@ export const PromoBanner = ({
           />
         }
         after={<Button mode="outline">{bannerData.ctaText}</Button>}
-        description={bannerData.domain}
+        subtitle={bannerData.domain}
       >
         {bannerData.title}
       </SimpleCell>

package/src/components/SimpleCell/Readme.md

@@ -83,13 +83,13 @@ const Example = () => {
           <Header mode="secondary">Список друзей</Header>
           <SimpleCell
             before={<Avatar size={48} src={getAvatarUrl("user_xyz")} />}
-            badge={<Icon12Verified />}
+            badgeAfterTitle={<Icon12Verified />}
             after={
               <IconButton>
                 <Icon28MessageOutline />
               </IconButton>
             }
-            description="Команда ВКонтакте"
+            subtitle="Команда ВКонтакте"
           >
             Игорь Фёдоров
           </SimpleCell>
@@ -100,7 +100,7 @@ const Example = () => {
                 <Icon28MessageOutline />
               </IconButton>
             }
-            description="Бот"
+            subtitle="Бот"
           >
             Artur Stambultsian
           </SimpleCell>