@vkontakte/vkui 4.35.3 → 4.36.0

package/src/components/PanelHeaderContent/PanelHeaderContent.tsx

@@ -1,11 +1,12 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
 import { Tappable } from "../Tappable/Tappable";
 import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
+import { getClassName } from "../../helpers/getClassName";
 import { Caption } from "../Typography/Caption/Caption";
 import { Headline } from "../Typography/Headline/Headline";
-import { IOS, Platform } from "../../lib/platform";
+import { IOS, ANDROID, Platform } from "../../lib/platform";
 import { Text } from "../Typography/Text/Text";
 import { HasPlatform } from "../../types";
 import "./PanelHeaderContent.css";
@@ -82,7 +83,13 @@ export const PanelHeaderContent = ({
       {hasReactNode(before) && (
         <div vkuiClass="PanelHeaderContent__before">{before}</div>
       )}
-      <InComponent {...inProps} vkuiClass="PanelHeaderContent__in">
+      <InComponent
+        {...inProps}
+        vkuiClass={classNames(
+          "PanelHeaderContent__in",
+          !before && platform !== ANDROID && "PanelHeaderContent__in--centered"
+        )}
+      >
         {hasReactNode(status) && (
           <Caption vkuiClass="PanelHeaderContent__status">{status}</Caption>
         )}

package/src/components/PanelHeaderContext/PanelHeaderContext.css

@@ -34,49 +34,34 @@
   animation: vkui-animation-panelheadercontext-fade-out 0.2s ease;
 }
 
-/*
- iOS
- */
-
-.PanelHeaderContext--ios.PanelHeaderContext--opened .PanelHeaderContext__in {
+.PanelHeaderContext--opened .PanelHeaderContext__in {
   animation: vkui-animation-panelheadercontext-translate-in 0.2s ease;
 }
 
-.PanelHeaderContext--ios.PanelHeaderContext--closing .PanelHeaderContext__in {
+.PanelHeaderContext--closing .PanelHeaderContext__in {
   animation: vkui-animation-panelheadercontext-translate-out 0.2s ease;
 }
 
-.PanelHeaderContext--ios .List {
-  background: var(--header_background);
+.PanelHeaderContext .List {
+  background: var(--header_background, var(--vkui--color_background_content));
 }
 
 /*
  Android
  */
-.PanelHeaderContext--android .PanelHeaderContext__in,
-.PanelHeaderContext--vkcom .PanelHeaderContext__in {
+.PanelHeaderContext__in {
   padding: 8px;
   box-sizing: border-box;
 }
 
-.PanelHeaderContext--android.PanelHeaderContext--opened .PanelHeaderContext__in,
-.PanelHeaderContext--vkcom.PanelHeaderContext--opened .PanelHeaderContext__in {
-  animation: vkui-animation-panelheadercontext-translate-in 0.2s ease;
+.PanelHeaderContext--ios .PanelHeaderContext__in {
+  padding: 0;
 }
 
-.PanelHeaderContext--android.PanelHeaderContext--closing
-  .PanelHeaderContext__in,
-.PanelHeaderContext--vkcom.PanelHeaderContext--closing .PanelHeaderContext__in {
-  animation: vkui-animation-panelheadercontext-translate-out 0.2s ease;
-}
-
-.PanelHeaderContext--android .List,
-.PanelHeaderContext--vkcom .List,
-.PanelHeaderContext--desktop.PanelHeaderContext--ios .List {
+.PanelHeaderContext--rounded .List {
   overflow: hidden;
   border-radius: 12px;
   padding: 8px 0;
-  background: var(--header_background);
 }
 
 /*
@@ -85,13 +70,12 @@
 
 .PanelHeaderContext--desktop .PanelHeaderContext__in {
   padding: 12px 8px;
-  box-sizing: border-box;
 }
 
 .PanelHeaderContext--desktop .PanelHeaderContext__content {
   border-radius: 12px;
   overflow: hidden;
-  background: var(--header_background);
+  background: var(--header_background, var(--vkui--color_background_content));
 }
 
 .PanelHeaderContext--desktop .PanelHeaderContext__content {

package/src/components/PanelHeaderContext/PanelHeaderContext.tsx

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { FixedLayout } from "../FixedLayout/FixedLayout";
 import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
 import { ViewWidth } from "../AdaptivityProvider/AdaptivityContext";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { useDOM } from "../../lib/dom";
+import { IOS } from "../../lib/platform";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
 import { useTimeout } from "../../hooks/useTimeout";
@@ -69,12 +69,16 @@ export const PanelHeaderContext = ({
   return (
     <FixedLayout
       {...restProps}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames(getClassName("PanelHeaderContext", platform), {
-        "PanelHeaderContext--opened": opened,
-        "PanelHeaderContext--closing": closing,
-        "PanelHeaderContext--desktop": isDesktop,
-      })}
+      vkuiClass={classNames(
+        "PanelHeaderContext",
+        platform === IOS && "PanelHeaderContext--ios",
+        opened && "PanelHeaderContext--opened",
+        closing && "PanelHeaderContext--closing",
+        isDesktop && "PanelHeaderContext--desktop",
+        // TODO v5.0.0 поправить под новую адаптивность
+        (platform !== IOS || (platform === IOS && isDesktop)) &&
+          "PanelHeaderContext--rounded"
+      )}
       vertical="top"
     >
       <div

package/src/components/PanelHeaderContext/Readme.md

@@ -1,110 +1,94 @@
 ```jsx
-const Example = withPlatform(
-  withAdaptivity(
-    class ExampleClass extends React.Component {
-      constructor() {
-        this.state = {
-          contextOpened: true,
-          mode: "all",
-        };
-        this.toggleContext = this.toggleContext.bind(this);
-        this.select = this.select.bind(this);
-      }
+const Example = () => {
+  const [contextOpened, setContextOpened] = React.useState(true);
+  const [mode, setMode] = React.useState("all");
+  const platform = usePlatform();
+  const { viewWidth } = useAdaptivity();
 
-      toggleContext() {
-        this.setState({ contextOpened: !this.state.contextOpened });
-      }
+  const toggleContext = () => {
+    setContextOpened((prev) => !prev);
+  };
 
-      select(e) {
-        const mode = e.currentTarget.dataset.mode;
-        this.setState({ mode });
-        requestAnimationFrame(this.toggleContext);
-      }
+  const select = (e) => {
+    const mode = e.currentTarget.dataset.mode;
+    setMode(mode);
+    requestAnimationFrame(toggleContext);
+  };
 
-      render() {
-        const hasHeader = this.props.platform !== VKCOM;
-        const isDesktop = this.props.viewWidth >= ViewWidth.SMALL_TABLET;
+  const hasHeader = platform !== VKCOM;
+  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;
 
-        return (
-          <SplitLayout
-            style={{ justifyContent: "center" }}
-            header={hasHeader && <PanelHeader separator={false} />}
-          >
-            <SplitCol
-              animate={!isDesktop}
-              spaced={isDesktop}
-              width={isDesktop ? "560px" : "100%"}
-              maxWidth={isDesktop ? "560px" : "100%"}
+  return (
+    <SplitLayout
+      style={{ justifyContent: "center" }}
+      header={hasHeader && <PanelHeader separator={false} />}
+    >
+      <SplitCol
+        animate={!isDesktop}
+        spaced={isDesktop}
+        width={isDesktop ? "560px" : "100%"}
+        maxWidth={isDesktop ? "560px" : "100%"}
+      >
+        <View activePanel="context2">
+          <Panel id="context2">
+            <PanelHeader
+              before={<PanelHeaderBack />}
+              after={
+                <PanelHeaderButton>
+                  <Icon28AddOutline />
+                </PanelHeaderButton>
+              }
             >
-              <View activePanel="context2">
-                <Panel id="context2">
-                  <PanelHeader
-                    before={<PanelHeaderBack />}
-                    after={
-                      <PanelHeaderButton>
-                        <Icon28AddOutline />
-                      </PanelHeaderButton>
-                    }
-                  >
-                    <PanelHeaderContent
-                      aside={
-                        <Icon16Dropdown
-                          style={{
-                            transform: `rotate(${
-                              this.state.contextOpened ? "180deg" : "0"
-                            })`,
-                          }}
-                        />
-                      }
-                      onClick={this.toggleContext}
-                    >
-                      Communities
-                    </PanelHeaderContent>
-                  </PanelHeader>
-                  <PanelHeaderContext
-                    opened={this.state.contextOpened}
-                    onClose={this.toggleContext}
-                  >
-                    <List>
-                      <Cell
-                        before={<Icon28UsersOutline />}
-                        after={
-                          this.state.mode === "all" ? (
-                            <Icon24Done fill="var(--accent)" />
-                          ) : null
-                        }
-                        onClick={this.select}
-                        data-mode="all"
-                      >
-                        Communities
-                      </Cell>
-                      <Cell
-                        before={<Icon28SettingsOutline />}
-                        after={
-                          this.state.mode === "managed" ? (
-                            <Icon24Done fill="var(--accent)" />
-                          ) : null
-                        }
-                        onClick={this.select}
-                        data-mode="managed"
-                      >
-                        Managed Communities
-                      </Cell>
-                    </List>
-                  </PanelHeaderContext>
-                  <Group>
-                    <div style={{ height: 300 }} />
-                  </Group>
-                </Panel>
-              </View>
-            </SplitCol>
-          </SplitLayout>
-        );
-      }
-    },
-    { viewWidth: true }
-  )
-);
+              <PanelHeaderContent
+                aside={
+                  <Icon16Dropdown
+                    style={{
+                      transform: `rotate(${contextOpened ? "180deg" : "0"})`,
+                    }}
+                  />
+                }
+                onClick={toggleContext}
+              >
+                Communities
+              </PanelHeaderContent>
+            </PanelHeader>
+            <PanelHeaderContext opened={contextOpened} onClose={toggleContext}>
+              <List>
+                <Cell
+                  before={<Icon28UsersOutline />}
+                  after={
+                    mode === "all" ? (
+                      <Icon24Done fill="var(--vkui--color_icon_accent)" />
+                    ) : null
+                  }
+                  onClick={select}
+                  data-mode="all"
+                >
+                  Communities
+                </Cell>
+                <Cell
+                  before={<Icon28SettingsOutline />}
+                  after={
+                    mode === "managed" ? (
+                      <Icon24Done fill="var(--vkui--color_icon_accent)" />
+                    ) : null
+                  }
+                  onClick={select}
+                  data-mode="managed"
+                >
+                  Managed Communities
+                </Cell>
+              </List>
+            </PanelHeaderContext>
+            <Group>
+              <div style={{ height: 300 }} />
+            </Group>
+          </Panel>
+        </View>
+      </SplitCol>
+    </SplitLayout>
+  );
+};
 
 <Example />;
 ```

package/src/components/PanelHeaderEdit/PanelHeaderEdit.tsx

@@ -2,7 +2,7 @@ import {
   PanelHeaderButton,
   PanelHeaderButtonProps,
 } from "../PanelHeaderButton/PanelHeaderButton";
-import { ANDROID, VKCOM } from "../../lib/platform";
+import { IOS } from "../../lib/platform";
 import { Icon28EditOutline, Icon28DoneOutline } from "@vkontakte/icons";
 import { usePlatform } from "../../hooks/usePlatform";
 
@@ -36,7 +36,7 @@ export const PanelHeaderEdit = ({
 
   return (
     <PanelHeaderButton aria-label={iOSText} {...restProps}>
-      {platform === ANDROID || platform === VKCOM ? <AndroidIcon /> : iOSText}
+      {platform === IOS ? iOSText : <AndroidIcon />}
     </PanelHeaderButton>
   );
 };

package/src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx

@@ -3,7 +3,7 @@ import {
   PanelHeaderButtonProps,
 } from "../PanelHeaderButton/PanelHeaderButton";
 import { Icon28DoneOutline } from "@vkontakte/icons";
-import { ANDROID, VKCOM } from "../../lib/platform";
+import { IOS } from "../../lib/platform";
 import { usePlatform } from "../../hooks/usePlatform";
 import { getTitleFromChildren } from "../../lib/utils";
 
@@ -22,11 +22,7 @@ export const PanelHeaderSubmit = ({
       primary
       {...restProps}
     >
-      {platform === ANDROID || platform === VKCOM ? (
-        <Icon28DoneOutline />
-      ) : (
-        children
-      )}
+      {platform === IOS ? children : <Icon28DoneOutline />}
     </PanelHeaderButton>
   );
 };

package/src/components/PromoBanner/PromoBanner.css

@@ -1,18 +1,18 @@
 .PromoBanner {
   width: 100%;
   box-sizing: border-box;
-  outline: 1px solid var(--separator_alpha);
-  color: var(--text_primary);
-  background: var(--background_content);
+  outline: var(--thin-border) solid
+    var(--separator_alpha, var(--vkui--color_separator_primary_alpha));
+  color: var(--text_primary, var(--vkui--color_text_primary));
+  background: var(--background_content, var(--vkui--color_background_content));
   padding-bottom: 10px;
   position: relative;
 }
 
 .PromoBanner__head {
   display: flex;
-  padding-top: 14px;
-  padding-bottom: 10px;
-  color: var(--text_secondary);
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
+  padding: 14px var(--vkui--size_base_padding_horizontal--regular) 10px;
 }
 
 .PromoBanner__age {
@@ -25,7 +25,10 @@
   right: 0;
   width: 48px;
   height: 48px;
-  color: var(--placeholder_icon_foreground_primary);
+  color: var(
+    --placeholder_icon_foreground_primary,
+    var(--vkui--color_icon_secondary)
+  );
   display: flex;
   justify-content: center;
   align-items: center;
@@ -38,18 +41,3 @@
 .PromoBanner__pixels {
   display: none;
 }
-
-/* iOS */
-
-.PromoBanner--ios .PromoBanner__head {
-  padding-left: 12px;
-  padding-right: 12px;
-}
-
-/* Android */
-
-.PromoBanner--android .PromoBanner__head,
-.PromoBanner--vkcom .PromoBanner__head {
-  padding-left: 16px;
-  padding-right: 16px;
-}

package/src/components/PromoBanner/PromoBanner.tsx

@@ -4,8 +4,6 @@ import { Button } from "../Button/Button";
 import { SimpleCell } from "../SimpleCell/SimpleCell";
 import { Avatar } from "../Avatar/Avatar";
 import { Caption } from "../Typography/Caption/Caption";
-import { usePlatform } from "../../hooks/usePlatform";
-import { getClassName } from "../../helpers/getClassName";
 import { warnOnce } from "../../lib/warnOnce";
 import "./PromoBanner.css";
 
@@ -58,8 +56,6 @@ export const PromoBanner = ({
   isCloseButtonHidden,
   ...restProps
 }: PromoBannerProps) => {
-  const platform = usePlatform();
-
   const ageRestrictions =
     bannerData.ageRestrictions != null
       ? parseInt(bannerData.ageRestrictions)
@@ -96,7 +92,7 @@ export const PromoBanner = ({
   }, [statsPixels.playbackStarted]);
 
   return (
-    <div vkuiClass={getClassName("PromoBanner", platform)} {...restProps}>
+    <div vkuiClass="PromoBanner" {...restProps}>
       <div vkuiClass="PromoBanner__head">
         <Caption vkuiClass="PromoBanner__label">
           {bannerData.advertisingLabel || "Advertisement"}

package/src/components/RichTooltip/Readme.md

@@ -9,7 +9,7 @@
 <Checkbox style={{userSelect: 'none'}}>
   Специальные возможности
   <RichTooltip style={{maxWidth: 320}} content={
-    <Subhead style={{padding: '8px 12px', color: 'var(--text_primary)'}}>
+    <Subhead style={{padding: '8px 12px', color: 'var(--vkui--color_text_primary)'}}>
       Если включить эту настройку, элементы управления на сайте будут определены и озвучены синтезатором речи.
       <br/><br/>
       Настройка повышает доступность сайта и подходит для пользователей с ограниченными возможностями.
@@ -20,7 +20,7 @@
       verticalAlign: 'middle',
       position: 'relative',
       top: -1,
-      color: 'var(--icon_secondary)'
+      color: 'var(--vkui--color_icon_secondary)'
     }}/>
   </RichTooltip>
 </Checkbox>