@vkontakte/vkui 4.33.4 → 4.34.2

package/src/components/RichCell/Readme.md

@@ -4,28 +4,36 @@
     <PanelHeader>RichCell</PanelHeader>
     <Group>
       <RichCell
-        disabled
-        multiline
-        before={<Avatar size={72} src={getAvatarUrl("user_ti")} />}
-        text="Держи за обед в EZO"
-        caption="Вчера в 20:30"
-        after="+ 1 500 ₽"
+        before={<Avatar size={72} src={getAvatarUrl("")} />}
+        subhead="Subhead"
+        text="Text"
+        caption="Caption"
+        after="After"
+        afterCaption="After Caption"
+        bottom={
+          <UsersStack
+            photos={[getAvatarUrl(""), getAvatarUrl(""), getAvatarUrl("")]}
+          >
+            N общих друга
+          </UsersStack>
+        }
         actions={
           <ButtonGroup mode="horizontal" gap="s" stretched>
             <Button mode="primary" size="s">
-              Принять
+              Primary
             </Button>
             <Button mode="secondary" size="s">
-              Отклонить
+              Secondary
             </Button>
           </ButtonGroup>
         }
+        disabled
       >
-        Тарас Иванов
+        Children
       </RichCell>
+    </Group>
+    <Group header={<Header>Рекомендации друзей</Header>}>
       <RichCell
-        disabled
-        after={<Icon28UserAddOutline />}
         before={<Avatar size={72} src={getAvatarUrl("user_ilyagrshn")} />}
         caption="Команда ВКонтакте, Санкт-Петербург"
         bottom={
@@ -49,23 +57,74 @@
             </Button>
           </ButtonGroup>
         }
+        disabled
       >
         Илья Гришин
       </RichCell>
       <RichCell
-        before={<Avatar size={48} src={getAvatarUrl("user_lihachyov")} />}
-        text="Поездка в Лиссабон"
-        caption="Вчера в 20:30"
-        after="+ 1 500 ₽"
+        before={<Avatar size={72} src={getAvatarUrl("user_rom")} />}
+        after={<Icon24UserAddOutline />}
+        bottom={
+          <UsersStack
+            photos={[
+              getAvatarUrl("user_casper6479"),
+              getAvatarUrl("user_me"),
+              getAvatarUrl("user_evg"),
+            ]}
+          >
+            12 общих друзей
+          </UsersStack>
+        }
+        actions={
+          <ButtonGroup mode="horizontal" gap="s" stretched>
+            <Button mode="primary" size="s">
+              Добавить
+            </Button>
+            <Button mode="secondary" size="s">
+              Скрыть
+            </Button>
+          </ButtonGroup>
+        }
+        disabled
       >
-        Михаил Лихачев
+        Ром Захаров
       </RichCell>
+    </Group>
+    <Group header={<Header>История переводов</Header>}>
       <RichCell
-        before={<Avatar size={48} src={getAvatarUrl("user_tc")} />}
+        before={<Avatar size={48} src={getAvatarUrl("user_ti")} />}
+        text="Держи за обед в EZO"
+        caption="сегодня в 18:00"
+        after="+ 1 232 ₽"
+        afterCaption="Комиссия 1%"
+        actions={
+          <ButtonGroup mode="horizontal" gap="s" stretched>
+            <Button mode="primary" size="s">
+              Принять
+            </Button>
+            <Button mode="secondary" size="s">
+              Отклонить
+            </Button>
+          </ButtonGroup>
+        }
+        multiline
+        disabled
+      >
+        Тарас Иванов{" "}
+        <Icon16Verified
+          style={{
+            display: "inline-block",
+            color: "var(--vkui--color_icon_accent)",
+            verticalAlign: "text-top",
+          }}
+        />
+      </RichCell>
+      <RichCell
+        before={<Avatar size={48} src={getAvatarUrl("user_lihachyov")} />}
         caption="Вчера в 20:30"
-        after="- 700 ₽"
+        after="- 1 800 ₽"
       >
-        Тимофей Чаптыков
+        Михаил Лихачев
       </RichCell>
     </Group>
   </Panel>

package/src/components/RichCell/RichCell.css

@@ -1,107 +1,124 @@
 .RichCell {
   display: flex;
+  padding: 8px var(--vkui--size_base_padding_horizontal--regular);
   min-height: 64px;
-  padding-right: 16px;
-  padding-left: 16px;
   box-sizing: border-box;
-  white-space: nowrap;
-  text-decoration: none;
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
+  text-decoration: none; /* в случае если Component="a" */
 }
 
-.FormItem .RichCell {
-  width: 100%;
-  box-sizing: content-box;
-  margin: 0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
+/* TODO v5.0.0 Новая адаптивность */
+.RichCell--sizeY-compact {
+  min-height: 60px;
 }
 
-.RichCell--mult {
-  white-space: normal;
+.RichCell__before {
+  margin-right: 12px;
 }
 
 .RichCell__in {
-  flex-grow: 1;
-  max-width: 100%;
-  min-width: 0;
-  overflow: hidden;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  position: relative;
-  padding-top: 8px;
-  padding-bottom: 8px;
-  font-size: 0;
-  line-height: 0;
+  flex-grow: 1;
+  max-width: 100%;
+  min-width: 0;
 }
 
-.RichCell__in > :first-child:not(.RichCell__content) {
-  display: none;
-  pointer-events: none;
+.RichCell__content {
+  display: flex;
 }
 
-.RichCell__in > .Icon--28:first-child ~ *:not(.RichCell__actions) {
-  margin-right: 32px;
+.RichCell__content-before {
+  flex-grow: 1;
+  min-width: 0;
 }
 
-.RichCell__content {
+.RichCell__content-after {
   display: flex;
-}
-
-.RichCell__after {
+  flex-direction: column;
+  align-items: flex-end;
   flex-shrink: 0;
   padding-left: 4px;
-  white-space: nowrap;
+  box-sizing: border-box;
 }
 
-.RichCell__after .Icon--28 {
-  position: absolute;
-  right: 0;
-  color: var(--accent);
+.RichCell__content-after .Icon {
+  color: var(
+    --accent,
+    var(--vkui--color_icon_accent)
+  ); /* TODO v5.0.0 Удалить. Пользователю стоит самому перекращивать иконку. */
 }
 
-.RichCell > .Avatar--sz-72 + .RichCell__in .RichCell__after .Icon--28 {
-  top: 22px;
+.RichCell__after-children {
+  font-weight: var(--vkui--font_weight_accent2);
 }
 
-.RichCell > .Avatar--sz-48 + .RichCell__in .RichCell__after .Icon--28 {
-  top: 10px;
+.RichCell__after-caption {
+  margin-top: 2px;
+  font-size: var(--vkui--font_footnote--font_size--regular);
+  line-height: var(--vkui--font_footnote--line_height--regular);
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
 }
 
-.RichCell__children {
-  flex-grow: 1;
-  max-width: 100%;
-  min-width: 0;
+/* TODO v5.0.0 Новая адаптивность */
+.RichCell--sizeY-compact .RichCell__after-caption {
+  font-size: var(--vkui--font_caption1--font_size--regular);
+  line-height: var(--vkui--font_caption1--line_height--regular);
+}
+
+.RichCell__subhead {
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
 }
 
 .RichCell__caption {
-  display: block;
   margin-top: 1px;
-  color: var(--text_secondary);
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
 }
 
-.RichCell__children,
-.RichCell__text,
-.RichCell__caption {
-  overflow: hidden;
+.RichCell__children {
+  font-weight: var(--vkui--font_weight_accent2);
+}
+
+.RichCell--text-ellipsis .RichCell__subhead,
+.RichCell--text-ellipsis .RichCell__children,
+.RichCell--text-ellipsis .RichCell__text,
+.RichCell--text-ellipsis .RichCell__caption {
+  white-space: nowrap;
   text-overflow: ellipsis;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.RichCell__bottom {
+  margin-top: 5px;
 }
 
 .RichCell__actions {
-  display: flex;
+  display: flex; /* TODO v5.0.0 Удалить, т.к. надо теперь использовать `ButtonGroup` внутри `actions` */
   margin-top: 8px;
 }
 
-/**
- * iOS
- */
-.RichCell--ios {
-  padding-right: 12px;
-  padding-left: 12px;
+.RichCell__children,
+.RichCell__text,
+.RichCell__after-children {
+  font-size: var(--vkui--font_paragraph--font_size--regular);
+  line-height: var(--vkui--font_paragraph--line_height--regular);
+}
+
+/* TODO v5.0.0 Новая адаптивность */
+.RichCell--sizeY-compact .RichCell__children,
+.RichCell--sizeY-compact .RichCell__text,
+.RichCell--sizeY-compact .RichCell__after-children {
+  font-size: var(--vkui--font_subhead--font_size--regular);
+  line-height: var(--vkui--font_subhead--line_height--regular);
 }
 
 /**
- * sizeY === 'compact'
- */
-.RichCell--sizeY-compact {
-  min-height: 60px;
+ * CMP:
+ * FormItem
+ **/
+.FormItem .RichCell {
+  margin-right: calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
+  margin-left: calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
 }

package/src/components/RichCell/RichCell.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
-import { usePlatform } from "../../hooks/usePlatform";
-import { getClassName } from "../../helpers/getClassName";
 import { TappableProps, Tappable } from "../Tappable/Tappable";
-import { hasReactNode } from "../../lib/utils";
-import { Paragraph } from "../Typography/Paragraph/Paragraph";
 import { Subhead } from "../Typography/Subhead/Subhead";
 import { withAdaptivity } from "../../hoc/withAdaptivity";
 import "./RichCell.css";
 
 export interface RichCellProps extends TappableProps {
+  /**
+   * Контейнер для текста над `children`.
+   */
+  subhead?: React.ReactNode;
   /**
    * Контейнер для текста под `children`.
    */
@@ -19,87 +19,93 @@ export interface RichCellProps extends TappableProps {
    */
   caption?: React.ReactNode;
   /**
-   * Контейнер для контента под `caption`. Например `<UsersStack size="s" />`
+   * Контейнер для контента под `caption`. Например `<UsersStack size="s" />`.
    */
   bottom?: React.ReactNode;
   /**
-   * Кнопки-действия.
-   *
-   * Рекомендуется использовать [Button](#/Button) с параметрами:
+   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:
    *
    * - `mode="primary" size="s"`
    * - `mode="secondary" size="s"`
    *
-   * Для набора кнопок следует использовать [ButtonGroup](#/ButtonGroup) с параметрами:
+   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:
    *
    * - `mode="horizontal" gap="s" stretched`
    */
   actions?: React.ReactNode;
   /**
-   * `<Avatar size={48|72} />`
+   * `<Avatar size={40|48|72} />`.
    */
   before?: React.ReactNode;
   /**
-   * Иконка 28 или текст
+   * Иконка 24 или текст.
    */
   after?: React.ReactNode;
   /**
-   * Убирает анимацию нажатия
+   * Текст под `after`.
+   */
+  afterCaption?: React.ReactNode;
+  /**
+   * Убирает анимацию нажатия.
    */
   disabled?: boolean;
+  /**
+   * Включает многострочный режим для `subhead`, `children`, `text` и `caption`.
+   */
   multiline?: boolean;
 }
 
-const RichCellComponent: React.FC<RichCellProps> = ({
+const RichCellComponent = ({
+  subhead,
   children,
   text,
   caption,
   before,
   after,
+  afterCaption,
   bottom,
   actions,
   multiline,
   sizeY,
   ...restProps
-}) => {
-  const platform = usePlatform();
-
+}: RichCellProps) => {
   return (
     <Tappable
       {...restProps}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
-        getClassName("RichCell", platform),
-        {
-          "RichCell--mult": multiline,
-        },
+        "RichCell",
+        !multiline && "RichCell--text-ellipsis",
         `RichCell--sizeY-${sizeY}`
       )}
     >
-      {before}
+      {before && <div vkuiClass="RichCell__before">{before}</div>}
       <div vkuiClass="RichCell__in">
-        {/* Этот after будет скрыт из верстки. Он нужен для CSS */}
-        {after}
-        <Paragraph weight="2" vkuiClass="RichCell__content">
-          <div vkuiClass="RichCell__children">{children}</div>
-          {hasReactNode(after) && (
-            <div vkuiClass="RichCell__after">{after}</div>
+        <div vkuiClass="RichCell__content">
+          <div vkuiClass="RichCell__content-before">
+            {subhead && (
+              <Subhead Component="div" vkuiClass="RichCell__subhead">
+                {subhead}
+              </Subhead>
+            )}
+            <div vkuiClass="RichCell__children">{children}</div>
+            {text && <div vkuiClass="RichCell__text">{text}</div>}
+            {caption && (
+              <Subhead Component="div" vkuiClass="RichCell__caption">
+                {caption}
+              </Subhead>
+            )}
+          </div>
+          {(after || afterCaption) && (
+            <div vkuiClass="RichCell__content-after">
+              {after && <div vkuiClass="RichCell__after-children">{after}</div>}
+              {afterCaption && (
+                <div vkuiClass="RichCell__after-caption">{afterCaption}</div>
+              )}
+            </div>
           )}
-        </Paragraph>
-        {hasReactNode(text) && (
-          <Paragraph vkuiClass="RichCell__text">{text}</Paragraph>
-        )}
-        {hasReactNode(caption) && (
-          <Subhead Component="span" vkuiClass="RichCell__caption">
-            {caption}
-          </Subhead>
-        )}
-        {hasReactNode(bottom) && (
-          <div vkuiClass="RichCell__bottom">{bottom}</div>
-        )}
-        {hasReactNode(actions) && (
-          <div vkuiClass="RichCell__actions">{actions}</div>
-        )}
+        </div>
+        {bottom && <div vkuiClass="RichCell__bottom">{bottom}</div>}
+        {actions && <div vkuiClass="RichCell__actions">{actions}</div>}
       </div>
     </Tappable>
   );

package/src/components/RichTooltip/Readme.md

@@ -1,8 +1,8 @@
 > **Важно**
 >
-> Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](#/Unstable).
+> Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](https://vkcom.github.io/VKUI/#/Unstable).
 
-Тултип, открывающийся при наведении мыши на `children`. В отличие от [TextTooltip](#/TextTooltip), имеет меньше ограничений
+Тултип, открывающийся при наведении мыши на `children`. В отличие от [TextTooltip](https://vkcom.github.io/VKUI/#/TextTooltip), имеет меньше ограничений
 по содержимому. Компонент всё ещё предназначен для информирования пользователей, но внутри допускаются кнопки, ссылки, картинки.
 
 ```jsx { "props": { "layout": false, "iframe": true } }

package/src/components/RichTooltip/RichTooltip.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { HoverPopper, HoverPopperProps } from "../HoverPopper/HoverPopper";
 import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
@@ -12,7 +11,7 @@ export type RichTooltipProps = Omit<HoverPopperProps, "arrowClassName">;
 /**
  * @see https://vkcom.github.io/VKUI/#/RichTooltip
  */
-export const RichTooltip: React.FC<RichTooltipProps> = ({
+export const RichTooltip = ({
   children,
   arrow = true,
   ...popperProps

package/src/components/Root/Root.tsx

@@ -45,7 +45,7 @@ const warn = warnOnce("Root");
 /**
  * @see https://vkcom.github.io/VKUI/#/Root
  */
-export const Root: React.FC<RootProps> = ({
+export const Root = ({
   popout = null,
   modal,
   children,

package/src/components/ScreenSpinner/Icon48CancelCircle.tsx

@@ -0,0 +1,18 @@
+export const Icon48CancelCircle = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    vkuiClass="Icon"
+    width="48"
+    height="48"
+    viewBox="0 0 48 48"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M40 24c0 8.837-7.163 16-16 16S8 32.837 8 24 15.163 8 24 8s16 7.163 16 16Zm-10.08-4.33a1.125 1.125 0 0 0-1.59-1.59L24 22.409l-4.33-4.33a1.125 1.125 0 0 0-1.59 0l-.101.116a1.125 1.125 0 0 0 .1 1.476L22.41 24l-4.33 4.33a1.125 1.125 0 0 0 1.591 1.59L24 25.591l4.33 4.33c.439.439 1.151.439 1.59 0l.101-.116a1.125 1.125 0 0 0-.1-1.476L25.59 24l4.33-4.33Z"
+      fill="currentColor"
+    />
+  </svg>
+);

package/src/components/ScreenSpinner/Icon48DoneOutline.tsx

@@ -0,0 +1,19 @@
+export const Icon48DoneOutline = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    vkuiClass="Icon"
+    width="48"
+    height="48"
+    viewBox="0 0 48 48"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M9 24L19 34L39 14"
+      stroke="currentColor"
+      strokeWidth="3.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/src/components/ScreenSpinner/Readme.md

@@ -1,43 +1,64 @@
 Компонент-обертка над [Spinner](#!/Spinner).
 
-Передаётся в качестве значения свойства `popout` компонента [`SplitLayout`](#/SplitLayout).
+Передаётся в качестве значения свойства `popout` компонента [`SplitLayout`](https://vkcom.github.io/VKUI/#/SplitLayout).
 
 Рекомендуется использовать в случаях, когда требуется заблокировать интерфейс до завершения асинхронного процесса.
 
 ```jsx { "props": { "layout": false, "adaptivity": true } }
-class Example extends React.Component {
-  constructor(props) {
-    this.state = {
-      popout: null,
-    };
-  }
-
-  onClick() {
-    this.setState({ popout: <ScreenSpinner /> });
-    setTimeout(() => {
-      this.setState({ popout: null });
-    }, 2000);
-  }
-
-  render() {
-    return (
-      <SplitLayout popout={this.state.popout}>
-        <SplitCol>
-          <View activePanel="spinner">
-            <Panel id="spinner">
-              <PanelHeader>ScreenSpinner</PanelHeader>
-              <Group>
-                <CellButton onClick={this.onClick.bind(this)}>
-                  Запустить долгий процесс
-                </CellButton>
-              </Group>
-            </Panel>
-          </View>
-        </SplitCol>
-      </SplitLayout>
-    );
-  }
-}
-
-<Example />;
+const [popout, setPopout] = useState(null);
+
+const clearPopout = () => setPopout(null);
+
+const setLoadingScreenSpinner = () => {
+  setPopout(<ScreenSpinner state="loading" />);
+  setTimeout(clearPopout, 3000);
+};
+
+const setDoneScreenSpinner = () => {
+  setPopout(<ScreenSpinner state="loading" />);
+
+  setTimeout(() => {
+    setPopout(<ScreenSpinner state="done" aria-label="Успешно" />);
+
+    setTimeout(clearPopout, 1000);
+  }, 2000);
+};
+
+const setErrorScreenSpinner = () => {
+  setPopout(<ScreenSpinner state="loading" />);
+
+  setTimeout(() => {
+    setPopout(<ScreenSpinner state="error" aria-label="Произошла ошибка" />);
+
+    setTimeout(clearPopout, 1000);
+  }, 2000);
+};
+
+const setCancelableScreenSpinner = () => {
+  setPopout(<ScreenSpinner state="cancelable" onClick={clearPopout} />);
+};
+
+<SplitLayout popout={popout}>
+  <SplitCol>
+    <View activePanel="spinner">
+      <Panel id="spinner">
+        <PanelHeader>ScreenSpinner</PanelHeader>
+        <Group>
+          <CellButton onClick={setLoadingScreenSpinner}>
+            Запустить долгий процесс
+          </CellButton>
+          <CellButton onClick={setDoneScreenSpinner}>
+            Запустить успешный процесс
+          </CellButton>
+          <CellButton onClick={setErrorScreenSpinner}>
+            Запустить процесс с ошибкой
+          </CellButton>
+          <CellButton onClick={setCancelableScreenSpinner}>
+            Запустить отменяемый процесс
+          </CellButton>
+        </Group>
+      </Panel>
+    </View>
+  </SplitCol>
+</SplitLayout>;
 ```