@vkontakte/vkui 4.34.0 → 4.35.0

package/src/components/Snackbar/Readme.md

@@ -7,139 +7,111 @@
 После закрытия компонент вызывает обязательное свойство `onClose`, и вам необходимо убрать `Snackbar` со страницы.
 
 ```jsx
-class SnackBarExample extends React.Component {
-  constructor(props) {
-    super(props);
+const SnackBarExample = () => {
+  const [text, setText] = React.useState("");
+  const [snackbar, setSnackbar] = React.useState(null);
 
-    this.state = {
-      text: "",
-      snackbar: null,
-    };
-
-    this.openBaseWithAction = this.openBaseWithAction.bind(this);
-    this.openVertical = this.openVertical.bind(this);
-    this.openWithAvatar = this.openWithAvatar.bind(this);
-    this.openDark = this.openDark.bind(this);
-  }
+  const openBaseWithAction = () => {
+    if (snackbar) return;
+    setSnackbar(
+      <Snackbar
+        onClose={() => setSnackbar(null)}
+        action="Поделиться"
+        onActionClick={() => setText("Добавляем метку.")}
+        before={
+          <Avatar size={24} style={{ background: "var(--accent)" }}>
+            <Icon16Done fill="#fff" width={14} height={14} />
+          </Avatar>
+        }
+      >
+        Ссылка скопирована
+      </Snackbar>
+    );
+  };
 
-  componentDidMount() {
-    this.openBaseWithAction();
-  }
+  const openVertical = () => {
+    if (snackbar) return;
+    setSnackbar(
+      <Snackbar
+        layout="vertical"
+        onClose={() => setSnackbar(null)}
+        action="Перейти в раздел «Понравилось»"
+        onActionClick={() => setText("Открыта подробная информация.")}
+        before={
+          <Avatar size={24} style={{ background: "var(--accent)" }}>
+            <Icon16Done fill="#fff" width={14} height={14} />
+          </Avatar>
+        }
+      >
+        Ссылка сохранена в закладки
+      </Snackbar>
+    );
+  };
 
-  openBaseWithAction() {
-    if (this.state.snackbar) return;
-    this.setState({
-      snackbar: (
-        <Snackbar
-          onClose={() => this.setState({ snackbar: null })}
-          action="Поделиться"
-          onActionClick={() => this.setState({ text: "Добавляем метку." })}
-          before={
-            <Avatar size={24} style={{ background: "var(--accent)" }}>
-              <Icon16Done fill="#fff" width={14} height={14} />
-            </Avatar>
-          }
-        >
-          Ссылка скопирована
-        </Snackbar>
-      ),
-    });
-  }
+  const openWithAvatar = () => {
+    if (snackbar) return;
+    setSnackbar(
+      <Snackbar
+        onClose={() => setSnackbar(null)}
+        onActionClick={() => setText("Сообщение Ивану было отменено.")}
+        after={<Avatar src={getAvatarUrl("user_wayshev")} size={32} />}
+      >
+        Отправлено Ивану Барышеву
+      </Snackbar>
+    );
+  };
 
-  openVertical() {
-    if (this.state.snackbar) return;
-    this.setState({
-      snackbar: (
-        <Snackbar
-          layout="vertical"
-          onClose={() => this.setState({ snackbar: null })}
-          action="Перейти в раздел «Понравилось»"
-          onActionClick={() =>
-            this.setState({ text: "Открыта подробная информация." })
-          }
-          before={
-            <Avatar size={24} style={{ background: "var(--accent)" }}>
-              <Icon16Done fill="#fff" width={14} height={14} />
-            </Avatar>
-          }
-        >
-          Ссылка сохранена в закладки
-        </Snackbar>
-      ),
-    });
-  }
+  const openDark = () => {
+    if (snackbar) return;
+    setSnackbar(
+      <Snackbar
+        mode="dark"
+        onClose={() => setSnackbar(null)}
+        action="Поделиться"
+        onActionClick={() => setText("Добавляем метку.")}
+        before={
+          <Avatar size={24} style={{ background: "var(--accent)" }}>
+            <Icon16Done fill="#fff" width={14} height={14} />
+          </Avatar>
+        }
+      >
+        Ссылка скопирована
+      </Snackbar>
+    );
+  };
 
-  openWithAvatar() {
-    if (this.state.snackbar) return;
-    this.setState({
-      snackbar: (
-        <Snackbar
-          onClose={() => this.setState({ snackbar: null })}
-          onActionClick={() =>
-            this.setState({ text: "Сообщение Ивану было отменено." })
-          }
-          after={<Avatar src={getAvatarUrl("user_wayshev")} size={32} />}
-        >
-          Отправлено Ивану Барышеву
-        </Snackbar>
-      ),
-    });
-  }
+  React.useEffect(() => {
+    openBaseWithAction();
+  }, []);
 
-  openDark() {
-    if (this.state.snackbar) return;
-    this.setState({
-      snackbar: (
-        <AppearanceProvider appearance="dark">
-          <Snackbar
-            onClose={() => this.setState({ snackbar: null })}
-            action="Поделиться"
-            onActionClick={() => this.setState({ text: "Добавляем метку." })}
-            before={
-              <Avatar size={24} style={{ background: "var(--accent)" }}>
-                <Icon16Done fill="#fff" width={14} height={14} />
-              </Avatar>
-            }
-          >
-            Ссылка скопирована
-          </Snackbar>
-        </AppearanceProvider>
-      ),
-    });
-  }
+  return (
+    <View activePanel="example">
+      <Panel id="example">
+        <PanelHeader>Snackbar</PanelHeader>
+        <Group>
+          <CellButton onClick={openBaseWithAction}>
+            Уведомление с иконкой и кнопкой
+          </CellButton>
+          <CellButton onClick={openVertical}>
+            Вертикальное расположение
+          </CellButton>
+          <CellButton onClick={openWithAvatar}>
+            Уведомление с аватаркой
+          </CellButton>
+          <CellButton onClick={openDark}>Уведомление с темной темой</CellButton>
+        </Group>
 
-  render() {
-    return (
-      <View activePanel="example">
-        <Panel id="example">
-          <PanelHeader>Snackbar</PanelHeader>
+        {text && (
           <Group>
-            <CellButton onClick={this.openBaseWithAction}>
-              Уведомление с иконкой и кнопкой
-            </CellButton>
-            <CellButton onClick={this.openVertical}>
-              Вертикальное расположение
-            </CellButton>
-            <CellButton onClick={this.openWithAvatar}>
-              Уведомление с аватаркой
-            </CellButton>
-            <CellButton onClick={this.openDark}>
-              Уведомление с темной темой
-            </CellButton>
+            <Div>{text}</Div>
           </Group>
+        )}
 
-          {this.state.text && (
-            <Group>
-              <Div>{this.state.text}</Div>
-            </Group>
-          )}
-
-          {this.state.snackbar}
-        </Panel>
-      </View>
-    );
-  }
-}
+        {snackbar}
+      </Panel>
+    </View>
+  );
+};
 
 <SnackBarExample />;
 ```

package/src/components/Snackbar/Snackbar.css

@@ -14,8 +14,14 @@
   padding-bottom: calc(var(--tabbar_height) + var(--safe-area-inset-bottom));
 }
 
+.Snackbar__in,
+.Snackbar__body {
+  transition: transform 320ms var(--android-easing);
+}
+
 .Snackbar__in {
   padding: 8px;
+  animation: vkui-animation-snackbar-intro-vertical 340ms var(--android-easing);
 }
 
 .Snackbar--closing .Snackbar__in {
@@ -28,8 +34,13 @@
   min-height: 56px;
   display: flex;
   align-items: center;
-  background: var(--modal_card_background);
-  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.08);
+  background: var(--modal_card_background, var(--vkui--color_background_modal));
+  box-shadow: var(--vkui--elevation4);
+  border-radius: var(--vkui--size_border_radius--regular);
+}
+
+.Snackbar--dark .Snackbar__body {
+  background: var(--vkui--color_background_contrast_inverse);
 }
 
 .Snackbar__before {
@@ -56,7 +67,7 @@
 
 .Snackbar__content-text {
   flex: 1;
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
   width: 100%;
   display: -webkit-box;
   -webkit-line-clamp: 3;
@@ -64,16 +75,18 @@
   overflow: hidden;
 }
 
+.Snackbar--dark .Snackbar__content-text {
+  color: var(--vkui--color_text_contrast);
+}
+
 .Snackbar--l-horizontal .Snackbar__action {
   margin-right: calc(
     -1 * var(--vkui--size_button_tertiary_small_padding_horizontal--regular)
   );
   position: relative;
-  top: 2px;
 }
 
 .Snackbar--l-vertical .Snackbar__action {
-  margin-top: 2px;
   margin-bottom: -6px;
   margin-left: calc(
     -1 * var(--vkui--size_button_tertiary_small_padding_horizontal--regular)
@@ -94,28 +107,6 @@
   animation: vkui-animation-snackbar-intro-vertical 340ms var(--ios-easing);
 }
 
-.Snackbar--ios .Snackbar__body {
-  border-radius: 10px;
-}
-
-/* Android */
-.Snackbar--android .Snackbar__in,
-.Snackbar--android .Snackbar__body,
-.Snackbar--vkcom .Snackbar__in,
-.Snackbar--vkcom .Snackbar__body {
-  transition: transform 320ms var(--android-easing);
-}
-
-.Snackbar--android .Snackbar__in,
-.Snackbar--vkcom .Snackbar__in {
-  animation: vkui-animation-snackbar-intro-vertical 340ms var(--android-easing);
-}
-
-.Snackbar--android .Snackbar__body,
-.Snackbar--vkcom .Snackbar__body {
-  border-radius: 8px;
-}
-
 /**
  * Desktop
  */

package/src/components/Snackbar/Snackbar.tsx

@@ -2,11 +2,10 @@ import * as React from "react";
 import { Touch, TouchEvent } from "../Touch/Touch";
 import { classNames } from "../../lib/classNames";
 import { HasPlatform } from "../../types";
-import { getClassName } from "../../helpers/getClassName";
-import { ANDROID, VKCOM } from "../../lib/platform";
+import { ANDROID, IOS, VKCOM } from "../../lib/platform";
 import { rubber } from "../../lib/touch";
 import { withAdaptivity, ViewWidth } from "../../hoc/withAdaptivity";
-import { Text } from "../Typography/Text/Text";
+import { Paragraph } from "../Typography/Paragraph/Paragraph";
 import { Button } from "../Button/Button";
 import { AppRootPortal } from "../AppRoot/AppRootPortal";
 import { useWaitTransitionFinish } from "../../hooks/useWaitTransitionFinish";
@@ -52,6 +51,10 @@ export interface SnackbarProps
    * Обработчик закрытия уведомления
    */
   onClose: () => void;
+  /**
+   * Задает стиль снекбара
+   */
+  mode?: "default" | "dark";
 }
 
 const SnackbarComponent = ({
@@ -64,6 +67,7 @@ const SnackbarComponent = ({
   duration = 4000,
   onActionClick,
   onClose,
+  mode = "default",
   ...restProps
 }: SnackbarProps & AdaptivityContextInterface) => {
   const platform = usePlatform();
@@ -191,15 +195,14 @@ const SnackbarComponent = ({
     <AppRootPortal>
       <div
         {...restProps}
-        // eslint-disable-next-line vkui/no-object-expression-in-arguments
         vkuiClass={classNames(
-          getClassName("Snackbar", platform),
+          "Snackbar",
+          platform === IOS && "Snackbar--ios",
           `Snackbar--l-${resolvedLayout}`,
-          {
-            "Snackbar--closing": closing,
-            "Snackbar--touched": touched,
-            "Snackbar--desktop": isDesktop,
-          }
+          `Snackbar--${mode}`,
+          closing && "Snackbar--closing",
+          touched && "Snackbar--touched",
+          isDesktop && "Snackbar--desktop"
         )}
       >
         <Touch
@@ -213,13 +216,16 @@ const SnackbarComponent = ({
             {before && <div vkuiClass="Snackbar__before">{before}</div>}
 
             <div vkuiClass="Snackbar__content">
-              <Text vkuiClass="Snackbar__content-text">{children}</Text>
+              <Paragraph vkuiClass="Snackbar__content-text">
+                {children}
+              </Paragraph>
 
               {action && (
                 <Button
                   align="left"
                   hasHover={false}
                   mode="tertiary"
+                  appearance={mode === "dark" ? "overlay" : "accent"}
                   size="s"
                   vkuiClass="Snackbar__action"
                   onClick={handleActionClick}

package/src/components/SplitCol/SplitCol.css

@@ -7,7 +7,7 @@
 }
 
 .SplitCol--spaced {
-  padding: 0 var(--vkui--size_split_col_padding_horizontal--regular);
+  margin: 0 var(--vkui--size_split_col_padding_horizontal--regular);
 }
 
 .SplitCol--fixed {

package/src/components/SplitCol/SplitCol.tsx

@@ -14,6 +14,8 @@ export const SplitColContext = React.createContext<SplitColContextProps>({
   animate: true,
 });
 
+export const useSplitCol = () => React.useContext(SplitColContext);
+
 export interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {
   width?: number | string;
   maxWidth?: number | string;

package/src/components/SplitLayout/SplitLayout.css

@@ -16,18 +16,14 @@
 .SplitLayout__inner--header {
   position: relative;
   z-index: 11;
-}
-
-.SplitLayout--ios .SplitLayout__inner--header {
   margin-top: calc(
-    -1 * (var(--panelheader_height_ios) + var(--safe-area-inset-top))
+    -1 * (var(--panelheader_height) + var(--safe-area-inset-top))
   );
 }
 
-.SplitLayout--android .SplitLayout__inner--header,
-.SplitLayout--vkcom .SplitLayout__inner--header {
+.SplitLayout--ios .SplitLayout__inner--header {
   margin-top: calc(
-    -1 * (var(--panelheader_height) + var(--safe-area-inset-top))
+    -1 * (var(--panelheader_height_ios) + var(--safe-area-inset-top))
   );
 }
 

package/src/components/SplitLayout/SplitLayout.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
+import { IOS } from "../../lib/platform";
 import { HasRef, HasRootRef } from "../../types";
 import { PopoutRoot } from "../PopoutRoot/PopoutRoot";
 import { usePlatform } from "../../hooks/usePlatform";
@@ -37,7 +37,10 @@ export const SplitLayout = ({
 
   return (
     <PopoutRoot
-      vkuiClass={getClassName("SplitLayout", platform)}
+      vkuiClass={classNames(
+        "SplitLayout",
+        platform === IOS && "SplitLayout--ios"
+      )}
       popout={popout}
       modal={modal}
       getRootRef={getRootRef}
@@ -46,10 +49,10 @@ export const SplitLayout = ({
       <div
         {...restProps}
         ref={getRef}
-        // eslint-disable-next-line vkui/no-object-expression-in-arguments
-        vkuiClass={classNames("SplitLayout__inner", {
-          "SplitLayout__inner--header": !!header,
-        })}
+        vkuiClass={classNames(
+          "SplitLayout__inner",
+          !!header && "SplitLayout__inner--header"
+        )}
       >
         {children}
       </div>

package/src/components/Switch/Switch.css

@@ -183,6 +183,10 @@
  * CMP:
  * SimpleCell
  */
-.SimpleCell .Switch {
-  margin-left: 10px;
+.SimpleCell__after > .Switch {
+  margin-left: 12px;
+}
+
+.SimpleCell > .Switch:first-child {
+  margin-right: 12px;
 }

package/src/components/Tabbar/Tabbar.css

@@ -37,7 +37,10 @@
   left: 0;
   width: 100%;
   height: 1px;
-  background: var(--separator_common);
+  background: var(
+    --separator_common,
+    var(--vkui--color_separator_primary_alpha)
+  );
   transform-origin: center bottom;
   content: "";
 }

package/src/components/Tabbar/Tabbar.tsx

@@ -9,9 +9,29 @@ export interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {
    * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)
    */
   shadow?: boolean;
-  itemsLayout?: "vertical" | "horizontal" | "auto";
+  /**
+   * @deprecated будет удалено в 5.0.0. Используйте `mode`
+   */
+  itemsLayout?: "vertical" | "horizontal" | "auto"; // TODO v5.0.0 удалить, будет использоваться mode
+  /**
+   * Задает расположение элементов (вертикальное/горизонтальное)
+   */
+  mode?: "vertical" | "horizontal" | "auto";
 }
 
+const getItemsLayout = (
+  itemsLayout: TabbarProps["mode"],
+  children: TabbarProps["children"]
+) => {
+  switch (itemsLayout) {
+    case "horizontal":
+    case "vertical":
+      return itemsLayout;
+    default:
+      return React.Children.count(children) > 2 ? "vertical" : "horizontal";
+  }
+};
+
 /**
  * @see https://vkcom.github.io/VKUI/#/Tabbar
  */
@@ -19,26 +39,17 @@ export const Tabbar = ({
   children,
   shadow = true,
   itemsLayout,
+  mode,
   ...restProps
 }: TabbarProps) => {
   const platform = usePlatform();
 
-  const getItemsLayout = () => {
-    switch (itemsLayout) {
-      case "horizontal":
-      case "vertical":
-        return itemsLayout;
-      default:
-        return React.Children.count(children) > 2 ? "vertical" : "horizontal";
-    }
-  };
-
   return (
     <div
       vkuiClass={classNames(
         "Tabbar",
         platform === Platform.IOS && "Tabbar--ios",
-        `Tabbar--l-${getItemsLayout()}`,
+        `Tabbar--l-${getItemsLayout(itemsLayout ?? mode, children)}`,
         shadow && "Tabbar--shadow"
       )}
       {...restProps}

package/src/components/TabbarItem/TabbarItem.css

@@ -2,7 +2,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--tabbar_inactive_icon);
+  color: var(--tabbar_inactive_icon, var(--vkui--color_text_tertiary));
   text-decoration: none;
   border: none;
   outline: none;
@@ -21,7 +21,7 @@
 }
 
 .TabbarItem--selected {
-  color: var(--tabbar_active_icon);
+  color: var(--tabbar_active_icon, var(--vkui--color_text_accent_themed));
 }
 
 .TabbarItem__tappable {
@@ -53,9 +53,14 @@
 }
 
 .TabbarItem__icon {
+  color: var(--tabbar_inactive_icon, var(--vkui--color_icon_secondary));
   position: relative;
 }
 
+.TabbarItem--selected .TabbarItem__icon {
+  color: var(--tabbar_active_icon, var(--vkui--color_icon_accent_themed));
+}
+
 .TabbarItem__label .Counter {
   position: absolute;
   top: -2px;
@@ -78,13 +83,10 @@
 .Tabbar--l-vertical .TabbarItem__text {
   font-size: 10px;
   line-height: 12px;
-  font-weight: 500;
   margin-top: 2px;
 }
 
 .Tabbar--l-horizontal .TabbarItem__text {
-  font-size: 13px;
-  font-weight: 500;
   margin-left: 8px;
 }
 

package/src/components/TabbarItem/TabbarItem.tsx

@@ -1,10 +1,10 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
 import { Counter } from "../Counter/Counter";
 import { classNames } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
 import { Tappable } from "../Tappable/Tappable";
+import { Footnote } from "../Typography/Footnote/Footnote";
 import { Platform } from "../../lib/platform";
 import { HasComponent, HasRootRef } from "../../types";
 import { warnOnce } from "../../lib/warnOnce";
@@ -58,11 +58,13 @@ export const TabbarItem = ({
       {...restProps}
       disabled={disabled}
       href={href}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames(getClassName("TabbarItem", platform), {
-        "TabbarItem--selected": selected,
-        "TabbarItem--text": !!text,
-      })}
+      vkuiClass={classNames(
+        "TabbarItem",
+        platform === Platform.IOS && "TabbarItem--ios",
+        platform === Platform.ANDROID && "TabbarItem--android",
+        selected && "TabbarItem--selected",
+        !!text && "TabbarItem--text"
+      )}
     >
       <Tappable
         role="presentation"
@@ -89,7 +91,11 @@ export const TabbarItem = ({
             )}
           </div>
         </div>
-        {text && <div vkuiClass="TabbarItem__text">{text}</div>}
+        {text && (
+          <Footnote Component="div" vkuiClass="TabbarItem__text" weight="2">
+            {text}
+          </Footnote>
+        )}
       </div>
     </Component>
   );