@vkontakte/vkui 4.35.1 → 4.36.0

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/Popper/Popper.tsx

@@ -81,6 +81,39 @@ const ARROW_PADDING = 8;
 const ARROW_WIDTH = 20;
 const ARROW_HEIGHT = 8;
 
+const preventOverflowModifier: Modifier<string> = {
+  name: "preventOverflow",
+  options: {
+    mainAxis: false,
+  },
+};
+
+const flipModifier: Modifier<string> = {
+  name: "flip",
+};
+
+const arrowModifier: Modifier<string> = {
+  name: "arrow",
+  options: {
+    padding: ARROW_PADDING,
+  },
+};
+
+const sameWidthModifier: Modifier<string> = {
+  name: "sameWidth",
+  enabled: true,
+  phase: "beforeWrite",
+  requires: ["computeStyles"],
+  fn: ({ state }) => {
+    state.styles.popper.width = `${state.rects.reference.width}px`;
+  },
+  effect: ({ state }) => {
+    state.elements.popper.style.width = `${
+      (state.elements.reference as HTMLElement).offsetWidth
+    }px`;
+  },
+};
+
 /**
  * @see https://vkcom.github.io/VKUI/#/Popper
  */
@@ -112,12 +145,7 @@ export const Popper = ({
 
   const modifiers = React.useMemo(() => {
     const modifiers: Array<Modifier<string>> = [
-      {
-        name: "preventOverflow",
-        options: {
-          mainAxis: false,
-        },
-      },
+      preventOverflowModifier,
       {
         name: "offset",
         options: {
@@ -127,37 +155,15 @@ export const Popper = ({
           ],
         },
       },
-      {
-        name: "flip",
-      },
+      flipModifier,
     ];
 
     if (arrow) {
-      modifiers.push({
-        name: "arrow",
-        options: {
-          padding: ARROW_PADDING,
-        },
-      });
+      modifiers.push(arrowModifier);
     }
 
     if (sameWidth) {
-      const sameWidth: Modifier<string> = {
-        name: "sameWidth",
-        enabled: true,
-        phase: "beforeWrite",
-        requires: ["computeStyles"],
-        fn: ({ state }) => {
-          state.styles.popper.width = `${state.rects.reference.width}px`;
-        },
-        effect: ({ state }) => {
-          state.elements.popper.style.width = `${
-            (state.elements.reference as HTMLElement).offsetWidth
-          }px`;
-        },
-      };
-
-      modifiers.push(sameWidth);
+      modifiers.push(sameWidthModifier);
     }
 
     if (customModifiers) {

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>