@vkontakte/vkui 4.35.2 → 4.36.1

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>

package/src/components/Search/Search.css

@@ -4,6 +4,7 @@
   font-family: var(--font-common);
   transform: translate3d(0, 0, 0);
   line-height: normal;
+  padding: 8px 16px;
 }
 
 .Search__in {
@@ -11,7 +12,6 @@
 }
 
 .Search__width {
-  height: var(--search_default_height);
   white-space: nowrap;
   color: transparent;
   width: 10000px;
@@ -26,25 +26,24 @@
   top: 0;
   width: calc(100% - 1px);
   height: 100%;
-  border-radius: 10px;
+  border-radius: var(--vkui--size_border_radius--regular);
 }
 
 .Search__input {
   -webkit-appearance: none; /* не используем textfield из-за бага в iOS 15.1 http://www.openradar.me/FB9744107 */
   border: none;
   margin: 0;
-  height: var(--search_default_height);
   position: relative;
   padding: 0 22px 0 36px;
   box-sizing: border-box;
   font-size: 17px;
-  border-radius: 10px;
+  border-radius: var(--vkui--size_border_radius--regular);
   max-width: 100%;
   flex-grow: 1;
   min-width: 0;
   background-color: transparent;
   z-index: 2;
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
 }
 
 .Search__input::-webkit-search-decoration,
@@ -55,7 +54,8 @@
 }
 
 .Search--has-after .Search__input {
-  border-radius: 10px 0 0 10px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
 .Search--has-value .Search__input,
@@ -72,8 +72,6 @@
 
 .Search__after-width {
   font-size: 17px;
-  height: var(--search_default_height);
-  line-height: var(--search_default_height);
   padding-left: 12px;
   padding-right: 4px;
   flex-shrink: 0;
@@ -88,7 +86,6 @@
   cursor: text;
   z-index: 1;
   text-align: left;
-  height: var(--search_default_height);
   font-size: 0;
   padding-left: 12px;
   padding-right: 22px;
@@ -98,7 +95,6 @@
 }
 
 .Search__placeholder-in {
-  height: var(--search_default_height);
   display: flex;
   align-items: center;
   overflow: hidden;
@@ -111,6 +107,7 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+  color: var(--vkui--color_text_secondary);
 }
 
 .Search--has-value .Search__placeholder-text {
@@ -129,7 +126,6 @@
 
 .Search__icon {
   width: 40px;
-  height: var(--search_default_height);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -140,7 +136,6 @@
   position: absolute;
   left: 100%;
   top: 0;
-  line-height: var(--search_default_height);
   z-index: 2;
   transform: translate(0);
   transition: transform 0.3s var(--ios-easing);
@@ -179,7 +174,8 @@
   width: 10px;
   content: "";
   top: 0;
-  border-radius: 0 10px 10px 0;
+  border-radius: 0 var(--vkui--size_border_radius--regular)
+    var(--vkui--size_border_radius--regular) 0;
   cursor: text;
   pointer-events: none;
 }
@@ -188,6 +184,38 @@
   padding-top: 4px;
 }
 
+.Search__width,
+.Search__input,
+.Search__after-width,
+.Search__placeholder,
+.Search__placeholder-in,
+.Search__icon {
+  height: var(--vkui--size_search_height--compact);
+}
+
+.Search__after-width,
+.Search__after {
+  line-height: var(--vkui--size_search_height--compact);
+}
+
+/*
+  sizeY-regular
+ */
+
+.Search--sizeY-regular .Search__width,
+.Search--sizeY-regular .Search__input,
+.Search--sizeY-regular .Search__after-width,
+.Search--sizeY-regular .Search__placeholder,
+.Search--sizeY-regular .Search__placeholder-in,
+.Search--sizeY-regular .Search__icon {
+  height: var(--vkui--size_search_height--regular);
+}
+
+.Search--sizeY-regular .Search__after-width,
+.Search--sizeY-regular .Search__after {
+  line-height: var(--vkui--size_search_height--regular);
+}
+
 /*
   Themes
  */
@@ -196,15 +224,41 @@
   default
  */
 .Search {
-  background: var(--search_bar_background);
+  background: var(
+    --search_bar_background,
+    var(--vkui--color_background_content)
+  );
 }
 
 .Search__control {
-  background-color: var(--search_bar_field_background);
+  background-color: var(
+    --search_bar_field_background,
+    var(--vkui--color_search_field_background)
+  );
+}
+
+.Search__in:hover .Search__control,
+.Search__in:hover .Search__after-width,
+.Search__in:hover .Search__after::after {
+  background-color: var(--vkui--color_search_field_background--hover);
+}
+
+.Search__in:hover .Search__after-width {
+  color: var(--vkui--color_search_field_background--hover);
+}
+
+.Search__in:active .Search__control,
+.Search__in:active .Search__after-width,
+.Search__in:active .Search__after::after {
+  background-color: var(--vkui--color_search_field_background--active);
+}
+
+.Search__in:active .Search__after-width {
+  color: var(--vkui--color_search_field_background--active);
 }
 
 .Search__input {
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
 }
 
 .Search__placeholder {
@@ -212,79 +266,101 @@
 }
 
 .Search__after-width {
-  background: var(--search_bar_field_background);
-  color: var(--search_bar_field_background);
+  background: var(
+    --search_bar_field_background,
+    var(--vkui--color_search_field_background)
+  );
+  color: var(
+    --search_bar_field_background,
+    var(--vkui--color_search_field_background)
+  );
 }
 
 .Search__after {
-  background: var(--search_bar_background);
-  color: var(--accent);
+  background: var(
+    --search_bar_background,
+    var(--vkui--color_background_content)
+  );
+  color: var(--accent, var(--vkui--color_icon_accent_themed));
 }
 
 .Search__after::after {
-  background-color: var(--search_bar_field_background);
+  background-color: var(
+    --search_bar_field_background,
+    var(--vkui--color_search_field_background)
+  );
 }
 
 .Search__after::before {
-  background-color: var(--search_bar_background);
+  background-color: var(
+    --search_bar_background,
+    var(--vkui--color_background_content)
+  );
 }
 
 /*
   header
  */
 .PanelHeader .Search {
-  background: var(--header_background);
+  background: var(--header_background, var(--vkui--color_header_background));
 }
 
 .PanelHeader .Search__control {
-  background-color: var(--header_search_field_background);
+  background-color: var(
+    --header_search_field_background,
+    var(--vkui--color_search_field_background)
+  );
 }
 
 .PanelHeader .Search__input {
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
 }
 
 .PanelHeader .Search__placeholder {
-  color: var(--header_search_field_tint);
+  color: var(--header_search_field_tint, var(--vkui--color_icon_secondary));
 }
 
 .PanelHeader .Search__after-width {
-  background: var(--header_search_field_background);
-  color: var(--header_search_field_background);
+  background: var(
+    --header_search_field_background,
+    var(--vkui--color_search_field_background)
+  );
+  color: var(
+    --header_search_field_background,
+    var(--vkui--color_search_field_background)
+  );
 }
 
 .PanelHeader .Search__after {
-  background: var(--header_background);
-  color: var(--header_tint);
+  background: var(--header_background, var(--vkui--color_header_background));
+  color: var(--header_tint, var(--vkui--color_icon_accent_themed));
 }
 
 .PanelHeader .Search__after::after {
-  background-color: var(--header_search_field_background);
+  background-color: var(
+    --header_search_field_background,
+    var(--vkui--color_search_field_background)
+  );
 }
 
 .PanelHeader .Search__after::before {
-  background-color: var(--header_background);
-}
-
-/**
-  iOS
- */
-.Search--ios {
-  padding: 8px 12px;
-}
-
-/**
-  Android
- */
-.Search--android {
-  padding: 8px 16px;
+  background-color: var(
+    --header_background,
+    var(--vkui--color_header_background)
+  );
 }
 
 /**
   VKCOM
 */
 
+.Search--vkcom {
+  padding: initial;
+}
+
 .Search--vkcom,
+.Search--vkcom .Search__in:hover .Search__control,
+.Search--vkcom .Search__in:active .Search__control,
 .PanelHeader--vkcom .Search {
   background: transparent;
 }
@@ -326,7 +402,10 @@
 }
 
 .Search--vkcom .Search__icon:hover {
-  background-color: var(--background_hover);
+  background-color: var(
+    --background_hover,
+    var(--vkui--color_background_secondary_alpha--hover)
+  );
   border-radius: 50%;
 }
 
@@ -339,7 +418,7 @@
 }
 
 .Search--vkcom .Search__separator {
-  color: var(--input_border);
+  color: var(--input_border, var(--vkui--color_separator_primary));
 }
 
 .Group--card .Search--vkcom {
@@ -361,3 +440,10 @@
 .Group--card .Search--vkcom .Search__input {
   padding-left: 44px;
 }
+
+/**
+  IOS
+*/
+.Search--ios {
+  padding: 8px 12px;
+}