@vkontakte/vkui 4.27.1 → 4.28.1

package/package.json

@@ -1,14 +1,9 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.27.1",
+  "version": "4.28.1",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
-  "license": "MIT",
-  "description": "VKUI library",
-  "repository": "https://github.com/VKCOM/VKUI",
-  "homepage": "https://vkcom.github.io/VKUI/",
-  "defaultSchemeId": "bright_light",
   "sideEffects": [
     "./dist/lib/polyfills.js",
     "./dist/index.js",
@@ -18,6 +13,11 @@
     "./dist/cssm/index.js",
     "*.css"
   ],
+  "license": "MIT",
+  "description": "VKUI library",
+  "repository": "https://github.com/VKCOM/VKUI",
+  "homepage": "https://vkcom.github.io/VKUI/",
+  "defaultSchemeId": "bright_light",
   "devDependencies": {
     "@babel/cli": "^7.16.8",
     "@babel/core": "^7.16.7",
@@ -45,9 +45,9 @@
     "@typescript-eslint/parser": "^2.0.0",
     "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v9.29.0",
     "@vkontakte/eslint-config": "2.5.0",
-    "@vkontakte/icons": "^1.136.0",
+    "@vkontakte/icons": "^1.145.1",
     "@vkontakte/vk-bridge": "^2.1.3",
-    "@vkontakte/vkui-tokens": "4.3.1",
+    "@vkontakte/vkui-tokens": "4.4.0",
     "autoprefixer": "^10.4.2",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.3",
@@ -76,9 +76,8 @@
     "jest-playwright-preset": "^1.4.1",
     "lint-staged": "^12.1.2",
     "mini-css-extract-plugin": "^2.5.2",
-    "playwright": "^1.8.0",
-    "playwright-chromium": "^1.8.0",
-    "playwright-core": "^1.8.0",
+    "playwright": "1.17.2",
+    "playwright-chromium": "1.17.2",
     "postcss": "^8.4.5",
     "postcss-cli": "^9.1.0",
     "postcss-csso": "^6.0.0",
@@ -206,7 +205,11 @@
     "@babel/runtime": "^7.14.6",
     "@popperjs/core": "^2.9.2",
     "@vkontakte/vkjs": "^0.22.2",
+    "date-fns": "^2.28.0",
     "mitt": "^3.0.0",
     "react-popper": "^2.2.5"
+  },
+  "engines": {
+    "yarn": ">=1.21.1 <=1.22.18"
   }
 }

package/src/components/ActionSheet/ActionSheet.tsx

@@ -6,7 +6,7 @@ import { ActionSheetDropdownDesktop } from "./ActionSheetDropdownDesktop";
 import { ActionSheetDropdown } from "./ActionSheetDropdown";
 import { hasReactNode, noop } from "../../lib/utils";
 import { ActionSheetContext, ItemClickHandler } from "./ActionSheetContext";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import { usePlatform } from "../../hooks/usePlatform";
 import { useTimeout } from "../../hooks/useTimeout";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
@@ -117,17 +117,14 @@ export const ActionSheet: React.FC<ActionSheetProps> = ({
           <header vkuiClass="ActionSheet__header">
             {hasReactNode(header) && (
               <Caption
-                level="1"
-                weight={platform === IOS ? "semibold" : "medium"}
+                weight={platform === IOS ? "1" : "2"}
                 vkuiClass="ActionSheet__title"
               >
                 {header}
               </Caption>
             )}
             {hasReactNode(text) && (
-              <Caption level="1" weight="regular" vkuiClass="ActionSheet__text">
-                {text}
-              </Caption>
+              <Caption vkuiClass="ActionSheet__text">{text}</Caption>
             )}
           </header>
         )}

package/src/components/ActionSheetItem/ActionSheetItem.tsx

@@ -13,7 +13,7 @@ import {
   ActionSheetContext,
   ActionSheetContextType,
 } from "../ActionSheet/ActionSheetContext";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import Headline from "../Typography/Headline/Headline";
 import {
   withAdaptivity,
@@ -150,17 +150,9 @@ const ActionSheetItemComponent: React.FC<ActionSheetItemProps> = ({
         </div>
         {hasReactNode(subtitle) &&
           (sizeY === SizeType.COMPACT ? (
-            <Caption
-              weight="regular"
-              vkuiClass="ActionSheetItem__subtitle"
-              level="1"
-            >
-              {subtitle}
-            </Caption>
+            <Caption vkuiClass="ActionSheetItem__subtitle">{subtitle}</Caption>
           ) : (
-            <Subhead weight="regular" vkuiClass="ActionSheetItem__subtitle">
-              {subtitle}
-            </Subhead>
+            <Subhead vkuiClass="ActionSheetItem__subtitle">{subtitle}</Subhead>
           ))}
       </div>
       {selectable && (

package/src/components/Alert/Alert.tsx

@@ -12,7 +12,7 @@ import Button, { ButtonProps } from "../Button/Button";
 import { hasReactNode } from "../../lib/utils";
 import Headline from "../Typography/Headline/Headline";
 import Title from "../Typography/Title/Title";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import ModalDismissButton from "../ModalDismissButton/ModalDismissButton";
 import { FocusTrap } from "../FocusTrap/FocusTrap";
 import {
@@ -154,14 +154,10 @@ class AlertComponent extends React.Component<TAlertProps, AlertState> {
   renderText(text: React.ReactNode) {
     switch (this.props.platform) {
       case VKCOM:
-        return (
-          <Caption vkuiClass="Alert__text" level="1" weight="regular">
-            {text}
-          </Caption>
-        );
+        return <Caption vkuiClass="Alert__text">{text}</Caption>;
       case IOS:
         return (
-          <Caption vkuiClass="Alert__text" level="2" weight="regular">
+          <Caption vkuiClass="Alert__text" level="2">
             {text}
           </Caption>
         );

package/src/components/Alert/Readme.md

@@ -33,13 +33,13 @@ class Example extends React.Component {
     };
 
     this.openAction = this.openAction.bind(this);
-    this.openDeleteion = this.openDeleteion.bind(this);
+    this.openDeletion = this.openDeletion.bind(this);
     this.closePopout = this.closePopout.bind(this);
     this.addActionLogItem = this.addActionLogItem.bind(this);
   }
 
   componentDidMount() {
-    this.openDeleteion();
+    this.openDeletion();
   }
 
   addActionLogItem(value) {
@@ -75,7 +75,7 @@ class Example extends React.Component {
     });
   }
 
-  openDeleteion() {
+  openDeletion() {
     this.setState({
       popout: (
         <Alert
@@ -114,7 +114,7 @@ class Example extends React.Component {
               <PanelHeader>Alert</PanelHeader>
               <Group>
                 <CellButton onClick={this.openAction}>Лишить права</CellButton>
-                <CellButton onClick={this.openDeleteion}>
+                <CellButton onClick={this.openDeletion}>
                   Удалить документ
                 </CellButton>
                 {this.state.actionsLog.map((value, i) => (

package/src/components/AppRoot/Readme.md

@@ -1,9 +1,9 @@
-Обязательный компонент-обёртка над приложением. В нём инкапсулирована логика [режимов подкючения](#/Modes).
+Обязательный компонент-обёртка над приложением. В нём инкапсулирована логика [режимов подключения](#/Modes).
 
 ## Режимы скролла
 
 Навигационные компоненты VKUI — `Root, View, Panel, Epic` — запоминают скролл экрана и восстанавливают его при возвращении. embedded-приложения поддерживают два режима скролла:
 
 - `global` (по умолчанию) — VKUI-приложение скроллится вместе со страницей.
-- `contain` — VKUI-приложние живет в отдельной зоне и скроллится независимо внутри `AppRoot` (например, в модалке).
+- `contain` — VKUI-приложение живет в отдельной зоне и скроллится независимо внутри `AppRoot` (например, в модалке).
   Режимы переключают через `<AppRoot scroll="...">`.

package/src/components/Banner/Banner.tsx

@@ -101,7 +101,7 @@ const BannerSubheader: React.FC<BannerTypographyProps> = ({
   return size === "m" ? (
     <Text weight="regular" {...restProps} />
   ) : (
-    <Subhead weight="regular" {...restProps} />
+    <Subhead {...restProps} />
   );
 };
 

package/src/components/Button/Button.css

@@ -511,6 +511,16 @@
 /**
  * CMP:
  * Banner
+ *
+ * ====================
+ *
+ * FIXME Следует поправить компонент на уровне уровне дизайн-системы
+ *  Сейчас нет возможности использовать `ButtonGroup`, т.к. эти стили конфликтуют с `ButtonGroup.css`:
+ *  1. Есть привзяка к компоненту `.Button--lvl-tertiary`. Главная проблема, т.к. отступы в `ButtonGroup.css` не зависят от типа кнопки.
+ *  2. `margin-top` следует выставить обёртке `.Banner__actions`. Нужно иметь ввиду, что значение отступа меняются в зависимости от типа кнопки (см. п. 1)
+ *  2. `margin-right` добавляет лишний оступ,
+ *  3. `6px` конфликтуют со значениями в `gap`,
+ *  4. У обёртки `.Banner__actions` выставлен отрицительный внешний снизу в 6px.
  */
 .Banner__actions > .Button {
   margin-top: 12px;
@@ -544,6 +554,15 @@
 /**
  * CMP:
  * ModalCardBase
+ *
+ * ====================
+ *
+ * FIXME Следует поправить компонент на уровне уровне дизайн-системы
+ *  Сейчас нет возможности использовать `ButtonGroup`, т.к. эти стили конфликтуют с `ButtonGroup.css`:
+ *  1. `flex: 1` конфликтует с `stretched={false}`.
+ *  2. `margin-right` добавляет лишний оступ,
+ *  3. `6px` конфликтуют со значениями в `gap`,
+ *  4. У обёртки `.ModalCardBase__actions` выставлены отрицительные внешние отступы слева/справа в 6px.
  */
 .ModalCardBase__actions .Button {
   flex: 1;
@@ -563,7 +582,13 @@
 /**
  * CMP:
  * RichCell
+ *
+ * ====================
+ *
+ * @depracated Пользователям следует использовать `ButtonGroup` (см. пример `RichCell/Readme.md`).
+ *
+ * TODO Сейчас стиль сохранён для обртаной совместимости. Удалить в следующей мажорной версии.
  */
-.RichCell__actions .Button + .Button {
+.RichCell__actions > .Button + .Button {
   margin-left: 8px;
 }

package/src/components/Button/Button.tsx

@@ -5,7 +5,7 @@ import Tappable, { TappableProps } from "../Tappable/Tappable";
 import Title from "../Typography/Title/Title";
 import Text from "../Typography/Text/Text";
 import Subhead from "../Typography/Subhead/Subhead";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import { HasAlign, HasComponent } from "../../types";
 import { usePlatform } from "../../hooks/usePlatform";
 import {
@@ -69,10 +69,7 @@ const ButtonTypography: React.FC<ButtonTypographyProps> = (
     case "m":
       if (isCompact) {
         return (
-          <Subhead
-            weight={platform === VKCOM ? "regular" : "medium"}
-            {...restProps}
-          />
+          <Subhead weight={platform === VKCOM ? "3" : "2"} {...restProps} />
         );
       }
 
@@ -80,18 +77,18 @@ const ButtonTypography: React.FC<ButtonTypographyProps> = (
     case "s":
     default:
       if (platform === IOS) {
-        return <Subhead weight="medium" {...restProps} />;
+        return <Subhead weight="2" {...restProps} />;
       }
 
       if (platform === VKCOM) {
-        return <Caption level="1" weight="regular" {...restProps} />;
+        return <Caption {...restProps} />;
       }
 
       if (isCompact) {
-        return <Caption level="1" weight="medium" {...restProps} />;
+        return <Caption weight="2" {...restProps} />;
       }
 
-      return <Subhead weight="medium" {...restProps} />;
+      return <Subhead weight="2" {...restProps} />;
   }
 };
 

package/src/components/ButtonGroup/ButtonGroup.css

@@ -0,0 +1,52 @@
+.ButtonGroup {
+  display: inline-flex;
+  align-items: flex-start; /* Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */
+}
+
+.ButtonGroup--stretched {
+  display: flex;
+  width: 100%;
+}
+
+.ButtonGroup--mode-vertical {
+  flex-direction: column;
+}
+
+.ButtonGroup--mode-horizontal {
+  flex-direction: row;
+}
+
+/* stylelint-disable vkui/atomic */
+
+/**
+ * # Обоснование
+ * Чтобы не завязываться на класс компонента, используем каскад и универсальный селектор.
+ */
+
+/* "gap" для mode="vertical" */
+.ButtonGroup--mode-vertical.ButtonGroup--gap-space > *:not(:first-child) {
+  margin-top: var(--vkui--size_button_group_gap_space--regular);
+}
+
+.ButtonGroup--mode-vertical.ButtonGroup--gap-s > *:not(:first-child) {
+  margin-top: var(--vkui--size_button_group_gap_small--regular);
+}
+
+.ButtonGroup--mode-vertical.ButtonGroup--gap-m > *:not(:first-child) {
+  margin-top: var(--vkui--size_button_group_gap_medium--regular);
+}
+
+/* "gap" для mode="horizontal" */
+.ButtonGroup--mode-horizontal.ButtonGroup--gap-space > *:not(:last-child) {
+  margin-right: var(--vkui--size_button_group_gap_space--regular);
+}
+
+.ButtonGroup--mode-horizontal.ButtonGroup--gap-s > *:not(:last-child) {
+  margin-right: var(--vkui--size_button_group_gap_small--regular);
+}
+
+.ButtonGroup--mode-horizontal.ButtonGroup--gap-m > *:not(:last-child) {
+  margin-right: var(--vkui--size_button_group_gap_medium--regular);
+}
+
+/* stylelint-enable vkui/atomic */

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import type { HasRootRef } from "../../types";
+import "./ButtonGroup.css";
+
+export interface ButtonGroupProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    HasRootRef<HTMLDivElement> {
+  /**
+   * Задает расположение элементов внутри группы, вертикальное или горизонтальное.
+   */
+  mode?: "vertical" | "horizontal";
+  /**
+   * Выставляет в зависимости от `mode` отступ по вертикали или горизонтали.
+   */
+  gap?: "none" | "space" | "s" | "m";
+  /**
+   * Растягивает компонент на всю ширину контейнера.
+   *
+   * Note: Для потомков соответствующее поведение нужно определять самостоятельно, где это необходимо.
+   */
+  stretched?: boolean;
+}
+
+export const ButtonGroup: React.FC<ButtonGroupProps> = ({
+  mode = "horizontal",
+  gap = "m",
+  stretched = false,
+  getRootRef,
+  children,
+  ...restProps
+}) => {
+  return (
+    <div
+      vkuiClass={classNames(
+        "ButtonGroup",
+        `ButtonGroup--mode-${mode}`,
+        gap !== "none" && `ButtonGroup--gap-${gap}`,
+        stretched && "ButtonGroup--stretched"
+      )}
+      role="group"
+      ref={getRootRef}
+      {...restProps}
+    >
+      {children}
+    </div>
+  );
+};