@vkontakte/vkui 4.35.4 → 4.37.0

package/src/components/Alert/Alert.css

@@ -1,8 +1,24 @@
 .Alert {
   user-select: none;
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
   position: relative;
+  min-width: 280px;
   max-width: 416px;
+  margin: auto 24px;
+  box-shadow: var(--vkui--elevation4);
+  border-radius: var(--vkui--size_border_radius_paper--regular);
+  animation: vkui-animation-android-alert-intro 0.2s var(--android-easing);
+}
+
+.Alert--desktop {
+  width: 100%;
+}
+
+.Alert--closing {
+  transform: scale(0.95);
+  opacity: 0;
+  transition: transform 0.2s var(--android-easing),
+    opacity 0.2s var(--android-easing);
 }
 
 .Alert::before {
@@ -11,7 +27,10 @@
   top: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--modal_card_background);
+  background-color: var(
+    --modal_card_background,
+    var(--vkui--color_background_modal)
+  );
   z-index: 1;
   content: "";
   border-radius: inherit;
@@ -20,6 +39,7 @@
 .Alert__content {
   position: relative;
   z-index: 2;
+  padding: 24px 24px 20px;
 }
 
 .Alert__action {
@@ -32,6 +52,41 @@
   max-width: 100%;
   position: relative;
   z-index: 2;
+  padding: 0 16px 16px;
+}
+
+.Alert__header {
+  margin-bottom: 8px;
+}
+
+.Alert__text {
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
+}
+
+.Alert--h .Alert__actions {
+  justify-content: flex-end;
+}
+
+.Alert--h .Alert__button {
+  margin-left: 8px;
+}
+
+.Alert--v .Alert__actions {
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.Alert--v .Alert__button {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
+.Alert--v .Alert__button:first-child {
+  margin-top: 0;
+}
+
+.Alert--v .Alert__button:last-child {
+  margin-bottom: 0;
 }
 
 /**
@@ -39,12 +94,14 @@
  */
 .Alert--ios {
   width: 270px;
-  border-radius: 12px;
+  min-width: 270px;
   overflow: hidden;
   animation: vkui-animation-ios-alert-intro 0.3s var(--ios-easing);
+  box-shadow: none;
 }
 
 .Alert--ios.Alert--closing {
+  transform: none;
   opacity: 0;
   transition: opacity 0.3s var(--ios-easing);
 }
@@ -58,6 +115,10 @@
   margin-bottom: 7px;
 }
 
+.Alert--ios .Alert__text {
+  color: inherit;
+}
+
 .Alert--ios .Alert__content::after {
   content: "";
   position: absolute;
@@ -65,19 +126,27 @@
   height: 1px;
   right: 0;
   left: 0;
-  background: var(--action_sheet_separator);
+  background: var(
+    --action_sheet_separator,
+    var(--vkui--color_separator_primary_alpha)
+  );
   transform-origin: center bottom;
 }
 
+.Alert--ios .Alert__actions {
+  padding: initial;
+}
+
 .Alert--ios.Alert--v .Alert__actions {
   flex-direction: column;
+  align-items: initial;
 }
 
 .Alert--ios .Alert__action {
   position: relative;
   font-size: 17px;
   line-height: 44px;
-  color: var(--accent);
+  color: var(--accent, var(--vkui--color_text_accent));
   border: 0;
   padding: 0 6px;
   margin: 0;
@@ -97,7 +166,10 @@
 .Alert--ios .Alert__action::after {
   content: "";
   position: absolute;
-  background: var(--action_sheet_separator);
+  background: var(
+    --action_sheet_separator,
+    var(--vkui--color_separator_primary_alpha)
+  );
 }
 
 .Alert--ios.Alert--h .Alert__action::after {
@@ -169,76 +241,7 @@
 }
 
 .Alert--ios .Alert__action--destructive {
-  color: var(--destructive);
-}
-
-/**
- * Android & VKCOM
- */
-.Alert--android {
-  min-width: 280px;
-  margin: auto 24px;
-  box-shadow: 0 20px 35px 0 rgba(0, 0, 0, 0.3), 0 0 35px 0 rgba(0, 0, 0, 0.22);
-  border-radius: 12px;
-  animation: vkui-animation-android-alert-intro 0.2s ease;
-}
-
-.Alert--desktop.Alert--android {
-  width: 416px;
-}
-
-.Alert--android.Alert--closing,
-.Alert--vkcom.Alert--closing {
-  transform: scale(0.95);
-  opacity: 0;
-  transition: transform 0.2s var(--android-easing),
-    opacity 0.2s var(--android-easing);
-}
-
-.Alert--android .Alert__content {
-  padding: 24px 24px 20px;
-}
-
-.Alert--android .Alert__header,
-.Alert--vkcom .Alert__header {
-  margin-bottom: 8px;
-}
-
-.Alert--android .Alert__text,
-.Alert--vkcom .Alert__text {
-  color: var(--text_secondary);
-}
-
-.Alert--android .Alert__actions {
-  padding: 0 16px 16px;
-}
-
-.Alert--android.Alert--h .Alert__actions,
-.Alert--vkcom.Alert--h .Alert__actions {
-  justify-content: flex-end;
-}
-
-.Alert--android.Alert--v .Alert__actions {
-  flex-direction: column;
-  align-items: flex-end;
-}
-
-.Alert--android.Alert--v .Alert__button {
-  margin-top: 4px;
-  margin-bottom: 4px;
-}
-
-.Alert--android.Alert--v .Alert__button:first-child {
-  margin-top: 0;
-}
-
-.Alert--android.Alert--v .Alert__button:last-child {
-  margin-bottom: 0;
-}
-
-.Alert--android.Alert--h .Alert__button,
-.Alert--vkcom.Alert--h .Alert__button {
-  margin-left: 8px;
+  color: var(--destructive, var(--vkui--color_text_negative));
 }
 
 /**
@@ -247,10 +250,7 @@
 
 .Alert--vkcom {
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 0 96px rgba(0, 0, 0, 0.16);
-  border-radius: 8px;
   width: 400px;
-  margin: auto 24px;
-  animation: vkui-animation-android-alert-intro 0.2s ease;
 }
 
 .Alert--vkcom .Alert__content {

package/src/components/Alert/Alert.tsx

@@ -1,9 +1,8 @@
 import * as React from "react";
 import { Tappable } from "../Tappable/Tappable";
 import { PopoutWrapper } from "../PopoutWrapper/PopoutWrapper";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
-import { ANDROID, VKCOM, IOS } from "../../lib/platform";
+import { VKCOM, IOS } from "../../lib/platform";
 import { ViewWidth } from "../../hoc/withAdaptivity";
 import { Button, ButtonProps } from "../Button/Button";
 import { hasReactNode, stopPropagation } from "../../lib/utils";
@@ -111,15 +110,15 @@ const AlertAction = ({
     );
   }
 
-  let mode: ButtonProps["mode"] =
-    action.mode === "cancel" ? "secondary" : "primary";
+  let mode: ButtonProps["mode"] = "tertiary";
 
-  if (platform === ANDROID) {
-    mode = "tertiary";
+  // TODO v5.0.0 поправить под новую адаптивность
+  if (viewWidth === ViewWidth.DESKTOP && action.mode === "destructive") {
+    mode = "destructive";
+  }
 
-    if (viewWidth === ViewWidth.DESKTOP && action.mode === "destructive") {
-      mode = "destructive";
-    }
+  if (platform === VKCOM) {
+    mode = action.mode === "cancel" ? "secondary" : "primary";
   }
 
   return (
@@ -163,11 +162,10 @@ export const Alert = ({
   const resolvedActionsLayout: AlertProps["actionsLayout"] =
     platform === VKCOM ? "horizontal" : actionsLayout;
   const canShowCloseButton =
-    platform === VKCOM ||
-    (platform === ANDROID && viewWidth >= ViewWidth.SMALL_TABLET);
-  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;
+    platform !== IOS && viewWidth >= ViewWidth.SMALL_TABLET;
+  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET; // TODO v5.0.0 поправить под новую адаптивность
 
-  const timeout = platform === ANDROID || platform === VKCOM ? 200 : 300;
+  const timeout = platform === IOS ? 300 : 200;
 
   const close = React.useCallback(() => {
     setClosing(true);
@@ -221,7 +219,9 @@ export const Alert = ({
         onClose={close}
         timeout={timeout}
         vkuiClass={classNames(
-          getClassName("Alert", platform),
+          "Alert",
+          platform === IOS && "Alert--ios",
+          platform === VKCOM && "Alert--vkcom",
           resolvedActionsLayout === "vertical" ? "Alert--v" : "Alert--h",
           closing && "Alert--closing",
           isDesktop && "Alert--desktop"

package/src/components/Alert/Readme.md

@@ -23,111 +23,90 @@
 > 5. Порядок кнопок должен быть одинаковым на всех платформах (см. пункт 2).
 
 ```jsx { "props": { "layout": false, "adaptivity": true } }
-class Example extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      popout: null,
-      actionsLog: [],
-    };
-
-    this.openAction = this.openAction.bind(this);
-    this.openDeletion = this.openDeletion.bind(this);
-    this.closePopout = this.closePopout.bind(this);
-    this.addActionLogItem = this.addActionLogItem.bind(this);
-  }
-
-  componentDidMount() {
-    this.openDeletion();
-  }
-
-  addActionLogItem(value) {
-    this.setState({
-      actionsLog: [...this.state.actionsLog, value],
-    });
-  }
-
-  openAction() {
-    this.setState({
-      popout: (
-        <Alert
-          actions={[
-            {
-              title: "Лишить права",
-              mode: "destructive",
-              autoclose: true,
-              action: () =>
-                this.addActionLogItem("Право на модерацию контента убрано."),
-            },
-            {
-              title: "Отмена",
-              autoclose: true,
-              mode: "cancel",
-            },
-          ]}
-          actionsLayout="vertical"
-          onClose={this.closePopout}
-          header="Подтвердите действие"
-          text="Вы уверены, что хотите лишить пользователя права на модерацию контента?"
-        />
-      ),
-    });
-  }
-
-  openDeletion() {
-    this.setState({
-      popout: (
-        <Alert
-          actions={[
-            {
-              title: "Отмена",
-              autoclose: true,
-              mode: "cancel",
-            },
-            {
-              title: "Удалить",
-              autoclose: true,
-              mode: "destructive",
-              action: () => this.addActionLogItem("Документ удален."),
-            },
-          ]}
-          actionsLayout="horizontal"
-          onClose={this.closePopout}
-          header="Удаление документа"
-          text="Вы уверены, что хотите удалить этот документ?"
-        />
-      ),
-    });
-  }
-
-  closePopout() {
-    this.setState({ popout: null });
-  }
-
-  render() {
-    return (
-      <SplitLayout popout={this.state.popout}>
-        <SplitCol>
-          <View activePanel="alert">
-            <Panel id="alert">
-              <PanelHeader>Alert</PanelHeader>
-              <Group>
-                <CellButton onClick={this.openAction}>Лишить права</CellButton>
-                <CellButton onClick={this.openDeletion}>
-                  Удалить документ
-                </CellButton>
-                {this.state.actionsLog.map((value, i) => (
-                  <Div key={i}>{value}</Div>
-                ))}
-              </Group>
-            </Panel>
-          </View>
-        </SplitCol>
-      </SplitLayout>
+const Example = () => {
+  const [popout, setPopout] = React.useState(null);
+  const [actionsLog, setActionsLog] = React.useState([]);
+
+  const addActionLogItem = (value) => {
+    setActionsLog([...actionsLog, value]);
+  };
+
+  const closePopout = () => {
+    setPopout(null);
+  };
+
+  const openAction = () => {
+    setPopout(
+      <Alert
+        actions={[
+          {
+            title: "Лишить права",
+            mode: "destructive",
+            autoclose: true,
+            action: () =>
+              addActionLogItem("Право на модерацию контента убрано."),
+          },
+          {
+            title: "Отмена",
+            autoclose: true,
+            mode: "cancel",
+          },
+        ]}
+        actionsLayout="vertical"
+        onClose={closePopout}
+        header="Подтвердите действие"
+        text="Вы уверены, что хотите лишить пользователя права на модерацию контента?"
+      />
+    );
+  };
+
+  const openDeletion = () => {
+    setPopout(
+      <Alert
+        actions={[
+          {
+            title: "Отмена",
+            autoclose: true,
+            mode: "cancel",
+          },
+          {
+            title: "Удалить",
+            autoclose: true,
+            mode: "destructive",
+            action: () => addActionLogItem("Документ удален."),
+          },
+        ]}
+        actionsLayout="horizontal"
+        onClose={closePopout}
+        header="Удаление документа"
+        text="Вы уверены, что хотите удалить этот документ?"
+      />
     );
-  }
-}
+  };
+
+  React.useEffect(() => {
+    openDeletion();
+  }, []);
+
+  return (
+    <SplitLayout popout={popout}>
+      <SplitCol>
+        <View activePanel="alert">
+          <Panel id="alert">
+            <PanelHeader>Alert</PanelHeader>
+            <Group>
+              <CellButton onClick={openAction}>Лишить права</CellButton>
+              <CellButton onClick={openDeletion}>Удалить документ</CellButton>
+              {actionsLog.map((value, i) => (
+                <Div key={i}>{value}</Div>
+              ))}
+            </Group>
+          </Panel>
+        </View>
+      </SplitCol>
+    </SplitLayout>
+  );
+};
 
 <Example />;
 ```

package/src/components/AppRoot/AppRoot.css

@@ -1,3 +1,4 @@
+/* stylelint-disable vkui/atomic */
 .vkui__root--embedded {
   transform: translate3d(0, 0, 0);
   overflow-x: hidden;
@@ -12,7 +13,7 @@
 }
 
 .vkui--sizeX-regular {
-  background: var(--background_page);
+  background: var(--background_page, var(--vkui--color_background));
 }
 
 .AppRoot--no-mouse {

package/src/components/AppRoot/AppRoot.tsx

@@ -227,10 +227,7 @@ export const AppRoot = withAdaptivity<AppRootProps>(
     ) : (
       <div
         ref={rootRef}
-        // eslint-disable-next-line vkui/no-object-expression-in-arguments
-        vkuiClass={classNames("AppRoot", {
-          "AppRoot--no-mouse": !hasMouse,
-        })}
+        vkuiClass={classNames("AppRoot", !hasMouse && "AppRoot--no-mouse")}
         {...props}
       >
         {content}

package/src/components/Avatar/Avatar.tsx

@@ -96,15 +96,12 @@ export const Avatar = ({
   return (
     <div
       {...restProps}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         "Avatar",
         `Avatar--type-${mode}`,
         `Avatar--sz-${size}`,
-        {
-          "Avatar--shadow": shadow,
-          "Avatar--failed": failedImage,
-        }
+        shadow && "Avatar--shadow",
+        failedImage && "Avatar--failed"
       )}
       className={className}
       ref={getRootRef}
@@ -136,12 +133,12 @@ export const Avatar = ({
       {overlayIcon && (
         <Tappable
           Component="button"
-          // eslint-disable-next-line vkui/no-object-expression-in-arguments
-          vkuiClass={classNames("Avatar__overlay", {
-            "Avatar__overlay--visible": overlayAction === "always",
-            "Avatar__overlay--light": overlayMode === "light",
-            "Avatar__overlay--dark": overlayMode === "dark",
-          })}
+          vkuiClass={classNames(
+            "Avatar__overlay",
+            overlayAction === "always" && "Avatar__overlay--visible",
+            overlayMode === "light" && "Avatar__overlay--light",
+            overlayMode === "dark" && "Avatar__overlay--dark"
+          )}
           hoverMode="Avatar__overlay--visible"
           focusVisibleMode="Avatar__overlay--focus-visible"
           hasActive={false}
@@ -152,12 +149,13 @@ export const Avatar = ({
       )}
       {badge && (
         <div
-          // eslint-disable-next-line vkui/no-object-expression-in-arguments
-          vkuiClass={classNames("Avatar__badge", {
-            "Avatar__badge--large": size >= 96,
-            "Avatar__badge--shadow":
-              badge !== "online" && badge !== "online-mobile",
-          })}
+          vkuiClass={classNames(
+            "Avatar__badge",
+            size >= 96 && "Avatar__badge--large",
+            badge !== "online" &&
+              badge !== "online-mobile" &&
+              "Avatar__badge--shadow"
+          )}
         >
           {badge === "online" ? (
             <div vkuiClass="Avatar__badge-online">

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,15 +550,15 @@
         before={
           <Avatar mode="image" src={getAvatarUrl("audio_arctic_monkeys")} />
         }
-        description="Arctic Monkeys"
-        after={<Icon24MoreHorizontal fill="var(--accent)" />}
+        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="Лето (звери)"
-        after={<Icon24MoreHorizontal fill="var(--accent)" />}
+        subtitle="Лето (звери)"
+        after={<Icon24MoreHorizontal fill="var(--vkui--color_icon_accent)" />}
       >
         6 утра
       </SimpleCell>
@@ -566,8 +566,8 @@
         before={
           <Avatar mode="image" src={getAvatarUrl("audio_depeche_mode")} />
         }
-        description="Depeche Mode"
-        after={<Icon24MoreHorizontal fill="var(--accent)" />}
+        subtitle="Depeche Mode"
+        after={<Icon24MoreHorizontal fill="var(--vkui--color_icon_accent)" />}
       >
         Enjoy the Silence
       </SimpleCell>