@vkontakte/vkui 4.33.2 → 4.34.0

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>;
 ```

package/src/components/ScreenSpinner/ScreenSpinner.css

@@ -2,22 +2,57 @@
   animation: vkui-screen-spinner-intro 0.3s ease;
 }
 
+.ScreenSpinner--state-cancelable {
+  cursor: pointer;
+}
+
+.ScreenSpinner__spinner {
+  opacity: 1;
+}
+
+.ScreenSpinner--hideSpinner .ScreenSpinner__spinner {
+  opacity: 0;
+  transition: opacity 0.1s ease;
+}
+
 .ScreenSpinner__container {
+  position: relative;
   width: 88px;
   height: 88px;
-  background: var(--tabbar_background);
-  box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.08), 0 0 8px 0 rgba(0, 0, 0, 0.08);
-  border-radius: 8px;
+  background: var(--tabbar_background, var(--vkui--color_background_modal));
+  box-shadow: var(--vkui--elevation4);
+  border-radius: var(--vkui--size_border_radius--regular);
+  color: var(--overlay_status_icon, --vkui--color_icon_medium);
+}
+
+.ScreenSpinner__icon {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.ScreenSpinner--ios .ScreenSpinner__container {
-  background: var(--modal_card_background);
-  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 0 96px 0 rgba(0, 0, 0, 0.16);
-  border-radius: 10px;
+.ScreenSpinner__icon .Icon {
+  animation: vkui-screen-spinner-intro 0.2s ease;
 }
 
-.ScreenSpinner--ios .ScreenSpinner__spinner {
-  color: var(--overlay_status_icon);
+.ScreenSpinner--state-done .ScreenSpinner__icon .Icon path {
+  stroke-dasharray: 50;
+  stroke-dashoffset: 50;
+  animation: vkui-screen-spinner-iconDone 0.6s 0.3s var(--ios-easing) forwards;
+}
+
+@keyframes vkui-screen-spinner-iconDone {
+  from {
+    stroke-dashoffset: 50;
+  }
+
+  to {
+    stroke-dashoffset: 0;
+  }
 }
 
 @keyframes vkui-screen-spinner-intro {

package/src/components/ScreenSpinner/ScreenSpinner.tsx

@@ -1,42 +1,60 @@
-import * as React from "react";
 import { Spinner, SpinnerProps } from "../Spinner/Spinner";
+import { Icon24Cancel } from "@vkontakte/icons";
+import { Icon48DoneOutline } from "./Icon48DoneOutline";
+import { Icon48CancelCircle } from "./Icon48CancelCircle";
 import { PopoutWrapper } from "../PopoutWrapper/PopoutWrapper";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
 import { useScrollLock } from "../AppRoot/ScrollContext";
+import { classNames } from "../../lib/classNames";
 import "./ScreenSpinner.css";
 
-export type ScreenSpinnerProps = React.HTMLAttributes<HTMLDivElement> &
-  SpinnerProps;
+export interface ScreenSpinnerProps extends SpinnerProps {
+  state?: "loading" | "cancelable" | "done" | "error";
+}
 
 /**
  * @see https://vkcom.github.io/VKUI/#/ScreenSpinner
  */
-export const ScreenSpinner: React.FC<ScreenSpinnerProps> = ({
+export const ScreenSpinner = ({
   style,
   className,
+  state = "loading",
   size = "large",
   "aria-label": ariaLabel = "Пожалуйста, подождите...",
+  onClick,
   ...restProps
 }: ScreenSpinnerProps) => {
-  const platform = usePlatform();
+  const hideSpinner = state === "done" || state === "error";
+
+  const Icon = {
+    loading: () => null,
+    cancelable: Icon24Cancel,
+    done: Icon48DoneOutline,
+    error: Icon48CancelCircle,
+  }[state];
 
   useScrollLock();
 
   return (
     <PopoutWrapper
       hasMask={false}
-      vkuiClass={getClassName("ScreenSpinner", platform)}
+      vkuiClass={classNames(
+        "ScreenSpinner",
+        hideSpinner && "ScreenSpinner--hideSpinner",
+        `ScreenSpinner--state-${state}`
+      )}
       className={className}
       style={style}
     >
-      <div vkuiClass="ScreenSpinner__container">
+      <div vkuiClass="ScreenSpinner__container" onClick={onClick}>
         <Spinner
           vkuiClass="ScreenSpinner__spinner"
           size={size}
           aria-label={ariaLabel}
           {...restProps}
         />
+        <div vkuiClass="ScreenSpinner__icon">
+          <Icon aria-hidden />
+        </div>
       </div>
     </PopoutWrapper>
   );