@vkontakte/vkui 4.35.2 → 4.36.1

package/src/components/Search/Search.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { withPlatform } from "../../hoc/withPlatform";
-import { getClassName } from "../../helpers/getClassName";
 import {
   Icon16SearchOutline,
   Icon16Clear,
@@ -18,6 +17,7 @@ import { Headline } from "../Typography/Headline/Headline";
 import { Separator } from "../Separator/Separator";
 import { useExternRef } from "../../hooks/useExternRef";
 import { useEnsuredControl } from "../../hooks/useEnsuredControl";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
 import "./Search.css";
 
 export type InputRef = (element: HTMLInputElement) => void;
@@ -84,6 +84,7 @@ const SearchComponent = ({
   const inputRef = useExternRef(getRef);
   const [isFocused, setFocused] = React.useState(false);
   const [value, onChange] = useEnsuredControl(inputProps, { defaultValue });
+  const { sizeY } = useAdaptivity();
 
   const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {
     setFocused(true);
@@ -123,13 +124,17 @@ const SearchComponent = ({
 
   return (
     <div
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames(getClassName("Search", platform), {
-        "Search--focused": isFocused,
-        "Search--has-value": !!value,
-        "Search--has-after": !!after,
-        "Search--has-icon": !!icon,
-      })}
+      vkuiClass={classNames(
+        "Search",
+        platform === VKCOM && "Search--vkcom",
+        platform === IOS && "Search--ios",
+        // TODO: V5 перенести на новую адаптивность
+        `Search--sizeY-${sizeY}`,
+        isFocused && "Search--focused",
+        value && "Search--has-value",
+        icon && "Search--has-after",
+        after && "Search--has-icon"
+      )}
       className={className}
       style={style}
     >

package/src/components/Select/Select.css

@@ -14,7 +14,7 @@
   width: 100%;
   height: 100%;
   opacity: 0;
-  z-index: 3;
+  z-index: 7;
   font-size: 16px;
 }
 
@@ -26,7 +26,7 @@
   color: var(--text_primary, var(--vkui--color_text_primary));
   box-sizing: border-box;
   position: relative;
-  z-index: 2;
+  z-index: 6;
   overflow: hidden;
 }
 

package/src/components/SelectMimicry/Readme.md

@@ -44,7 +44,7 @@ class Example extends React.Component {
                   }
                   after={
                     this.state.country === "Россия" ? (
-                      <Icon24Done fill="var(--accent)" />
+                      <Icon24Done fill="var(--vkui--color_icon_accent)" />
                     ) : null
                   }
                 >
@@ -56,7 +56,7 @@ class Example extends React.Component {
                   }
                   after={
                     this.state.country === "Италия" ? (
-                      <Icon24Done fill="var(--accent)" />
+                      <Icon24Done fill="var(--vkui--color_icon_accent)" />
                     ) : null
                   }
                 >
@@ -68,7 +68,7 @@ class Example extends React.Component {
                   }
                   after={
                     this.state.country === "Англия" ? (
-                      <Icon24Done fill="var(--accent)" />
+                      <Icon24Done fill="var(--vkui--color_icon_accent)" />
                     ) : null
                   }
                 >

package/src/components/SelectMimicry/SelectMimicry.tsx

@@ -15,7 +15,7 @@ export interface SelectMimicryProps
     HasAlign,
     HasRootRef<HTMLElement>,
     AdaptivityProps,
-    Pick<FormFieldProps, "before" | "after"> {
+    Pick<FormFieldProps, "before" | "after" | "status"> {
   multiline?: boolean;
   disabled?: boolean;
   selectType?: keyof typeof SelectType;
@@ -35,6 +35,7 @@ const SelectMimicryComponent = ({
   before,
   after = <DropdownIcon />,
   selectType = SelectType.default,
+  status,
   ...restProps
 }: SelectMimicryProps) => {
   const platform = usePlatform();
@@ -61,6 +62,7 @@ const SelectMimicryComponent = ({
       before={before}
       after={after}
       mode={getFormFieldModeFromSelectType(selectType)}
+      status={status}
     >
       <div vkuiClass="Select__container">
         {/* TODO v5.0.0 поправить под новую адаптивность */}

package/src/components/SliderSwitch/SliderSwitch.tsx

@@ -178,11 +178,11 @@ class SliderSwitch extends React.Component<
           <div vkuiClass="SliderSwitch__border" />
         )}
         <div
-          // eslint-disable-next-line vkui/no-object-expression-in-arguments
-          vkuiClass={classNames("SliderSwitch__slider", {
-            ["SliderSwitch--firstActive"]: firstActive,
-            ["SliderSwitch--secondActive"]: secondActive,
-          })}
+          vkuiClass={classNames(
+            "SliderSwitch__slider",
+            firstActive && "SliderSwitch--firstActive",
+            secondActive && "SliderSwitch--secondActive"
+          )}
         />
         <input type="hidden" name={name} value={activeValue} />
         <SliderSwitchButton

package/src/components/SliderSwitch/SliderSwitchButton.tsx

@@ -34,13 +34,13 @@ export const SliderSwitchButton = ({
   return (
     <Tappable
       {...restProps}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames(getClassName("SliderSwitch__button", platform), {
-        ["SliderSwitch__button--active"]: active,
-        ["SliderSwitch__button--hover"]: !active && hovered,
-        ["SliderSwitch__button--activeHover"]: active && hovered,
-        ["SliderSwitch__button--focus"]: focus && !hovered,
-      })}
+      vkuiClass={classNames(
+        getClassName("SliderSwitch__button", platform),
+        active && "SliderSwitch__button--active",
+        !active && hovered && "SliderSwitch__button--hover",
+        active && hovered && "SliderSwitch__button--activeHover",
+        focus && !hovered && "SliderSwitch__button--focus"
+      )}
       Component="button"
       type="button"
       getRootRef={getRootRef}

package/src/components/Snackbar/Readme.md

@@ -19,7 +19,10 @@ const SnackBarExample = () => {
         action="Поделиться"
         onActionClick={() => setText("Добавляем метку.")}
         before={
-          <Avatar size={24} style={{ background: "var(--accent)" }}>
+          <Avatar
+            size={24}
+            style={{ background: "var(--vkui--color_background_accent)" }}
+          >
             <Icon16Done fill="#fff" width={14} height={14} />
           </Avatar>
         }
@@ -38,7 +41,10 @@ const SnackBarExample = () => {
         action="Перейти в раздел «Понравилось»"
         onActionClick={() => setText("Открыта подробная информация.")}
         before={
-          <Avatar size={24} style={{ background: "var(--accent)" }}>
+          <Avatar
+            size={24}
+            style={{ background: "var(--vkui--color_background_accent)" }}
+          >
             <Icon16Done fill="#fff" width={14} height={14} />
           </Avatar>
         }
@@ -70,7 +76,10 @@ const SnackBarExample = () => {
         action="Поделиться"
         onActionClick={() => setText("Добавляем метку.")}
         before={
-          <Avatar size={24} style={{ background: "var(--accent)" }}>
+          <Avatar
+            size={24}
+            style={{ background: "var(--vkui--color_background_accent)" }}
+          >
             <Icon16Done fill="#fff" width={14} height={14} />
           </Avatar>
         }

package/src/components/Spacing/Readme.md

@@ -31,23 +31,23 @@
     <Group
       header={<Header mode="secondary">Default Spacing (empty, 8px)</Header>}
     >
-      <Cell before={<Icon28Notifications />}>Уведомления</Cell>
-      <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
+      <SimpleCell before={<Icon28Notifications />}>Уведомления</SimpleCell>
+      <SimpleCell before={<Icon28BlockOutline />}>Не беспокоить</SimpleCell>
 
       <Spacing />
 
-      <Cell before={<Icon28UserOutline />}>Учётная запись</Cell>
-      <Cell before={<Icon28SlidersOutline />}>Основные</Cell>
+      <SimpleCell before={<Icon28UserOutline />}>Учётная запись</SimpleCell>
+      <SimpleCell before={<Icon28SlidersOutline />}>Основные</SimpleCell>
     </Group>
 
     <Group header={<Header mode="secondary">Spacing 16px</Header>}>
-      <Cell before={<Icon28Notifications />}>Уведомления</Cell>
-      <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
+      <SimpleCell before={<Icon28Notifications />}>Уведомления</SimpleCell>
+      <SimpleCell before={<Icon28BlockOutline />}>Не беспокоить</SimpleCell>
 
       <Spacing size={16} />
 
-      <Cell before={<Icon28UserOutline />}>Учётная запись</Cell>
-      <Cell before={<Icon28SlidersOutline />}>Основные</Cell>
+      <SimpleCell before={<Icon28UserOutline />}>Учётная запись</SimpleCell>
+      <SimpleCell before={<Icon28SlidersOutline />}>Основные</SimpleCell>
     </Group>
 
     <Group
@@ -55,15 +55,15 @@
         <Header mode="secondary">Spacing with centered separator 16px</Header>
       }
     >
-      <Cell before={<Icon28Notifications />}>Уведомления</Cell>
-      <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
+      <SimpleCell before={<Icon28Notifications />}>Уведомления</SimpleCell>
+      <SimpleCell before={<Icon28BlockOutline />}>Не беспокоить</SimpleCell>
 
       <Spacing size={16}>
         <Separator />
       </Spacing>
 
-      <Cell before={<Icon28UserOutline />}>Учётная запись</Cell>
-      <Cell before={<Icon28SlidersOutline />}>Основные</Cell>
+      <SimpleCell before={<Icon28UserOutline />}>Учётная запись</SimpleCell>
+      <SimpleCell before={<Icon28SlidersOutline />}>Основные</SimpleCell>
     </Group>
 
     <Group
@@ -73,15 +73,15 @@
         </Header>
       }
     >
-      <Cell before={<Icon28Notifications />}>Уведомления</Cell>
-      <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
+      <SimpleCell before={<Icon28Notifications />}>Уведомления</SimpleCell>
+      <SimpleCell before={<Icon28BlockOutline />}>Не беспокоить</SimpleCell>
 
       <Spacing>
         <Separator />
       </Spacing>
 
-      <Cell before={<Icon28UserOutline />}>Учётная запись</Cell>
-      <Cell before={<Icon28SlidersOutline />}>Основные</Cell>
+      <SimpleCell before={<Icon28UserOutline />}>Учётная запись</SimpleCell>
+      <SimpleCell before={<Icon28SlidersOutline />}>Основные</SimpleCell>
     </Group>
 
     <Group
@@ -91,15 +91,15 @@
         </Header>
       }
     >
-      <Cell before={<Icon28Notifications />}>Уведомления</Cell>
-      <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
+      <SimpleCell before={<Icon28Notifications />}>Уведомления</SimpleCell>
+      <SimpleCell before={<Icon28BlockOutline />}>Не беспокоить</SimpleCell>
 
       <Spacing size={12} />
       <Separator />
       <Spacing size={20} />
 
-      <Cell before={<Icon28UserOutline />}>Учётная запись</Cell>
-      <Cell before={<Icon28SlidersOutline />}>Основные</Cell>
+      <SimpleCell before={<Icon28UserOutline />}>Учётная запись</SimpleCell>
+      <SimpleCell before={<Icon28SlidersOutline />}>Основные</SimpleCell>
     </Group>
   </Panel>
 </View>

package/src/components/Spacing/Spacing.css

@@ -12,12 +12,16 @@
   padding-right: var(--vkui--size_base_padding_horizontal--regular);
 }
 
+.Spacing--separator-top {
+  justify-content: start;
+}
+
 .Spacing--separator-center {
   justify-content: center;
 }
 
 .Spacing--separator-bottom {
-  flex-direction: column-reverse;
+  justify-content: end;
 }
 
 .Spacing--separator::after {

package/src/components/SplitLayout/Readme.md

@@ -57,7 +57,7 @@ const Example = withAdaptivity(
                       i === panel
                         ? {
                             backgroundColor:
-                              "var(--button_secondary_background)",
+                              "var(--vkui--color_background_secondary)",
                             borderRadius: 8,
                           }
                         : {}

package/src/components/SubnavigationBar/SubnavigationBar.css

@@ -4,29 +4,17 @@
 }
 
 .SubnavigationBar__scrollIn {
-  padding: 20px 0;
+  padding-top: calc(
+    var(--vkui--size_subnavigation_bar_padding_vertical--regular) + 8px
+  );
+  padding-bottom: calc(
+    var(--vkui--size_subnavigation_bar_padding_vertical--regular) + 8px
+  );
   display: flex;
 }
 
 .SubnavigationBar__scrollIn::before,
 .SubnavigationBar__scrollIn::after {
   content: "";
-  min-width: 16px;
-}
-
-.SubnavigationBar .SubnavigationButton + .SubnavigationButton {
-  margin-left: 8px;
-}
-
-.SubnavigationBar--fixed .SubnavigationButton {
-  flex: 1;
-  min-width: 0;
-}
-
-/**
- * iOS
- */
-.SubnavigationBar--ios .SubnavigationBar__scrollIn::before,
-.SubnavigationBar--ios .SubnavigationBar__scrollIn::after {
-  min-width: 12px;
+  min-width: var(--vkui--size_base_padding_horizontal--regular);
 }

package/src/components/SubnavigationBar/SubnavigationBar.tsx

@@ -1,7 +1,5 @@
 import * as React from "react";
-import { usePlatform } from "../../hooks/usePlatform";
 import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
 import {
   HorizontalScroll,
   HorizontalScrollProps,
@@ -37,8 +35,6 @@ export const SubnavigationBar = ({
   scrollAnimationDuration,
   ...restProps
 }: SubnavigationBarProps) => {
-  const platform = usePlatform();
-
   let ScrollWrapper: React.ElementType;
   let scrollWrapperProps = {};
 
@@ -57,10 +53,7 @@ export const SubnavigationBar = ({
   return (
     <div
       {...restProps}
-      vkuiClass={classNames(
-        getClassName("SubnavigationBar", platform),
-        `SubnavigationBar--${mode}`
-      )}
+      vkuiClass={classNames("SubnavigationBar", `SubnavigationBar--${mode}`)}
     >
       <ScrollWrapper vkuiClass="SubnavigationBar__in" {...scrollWrapperProps}>
         <div vkuiClass="SubnavigationBar__scrollIn">{children}</div>

package/src/components/SubnavigationButton/SubnavigationButton.css

@@ -101,3 +101,16 @@
 .SubnavigationButton--vkcom {
   border-radius: 4px;
 }
+
+/**
+ * CMP:
+ * SubnavigationBar
+ */
+.SubnavigationBar .SubnavigationButton + .SubnavigationButton {
+  margin-left: var(--vkui--size_subnavigation_bar_gap--regular);
+}
+
+.SubnavigationBar--fixed .SubnavigationButton {
+  flex: 1;
+  min-width: 0;
+}

package/src/components/SubnavigationButton/SubnavigationButton.tsx

@@ -63,13 +63,10 @@ export const SubnavigationButton = ({
       {...restProps}
       hasActive={false}
       focusVisibleMode="outside"
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("SubnavigationButton", platform),
         `SubnavigationButton--${size}`,
-        {
-          "SubnavigationButton--selected": selected,
-        }
+        selected && "SubnavigationButton--selected"
       )}
       aria-label={getTitleFromChildren(children)}
     >

package/src/components/TabbarItem/Readme.md

@@ -6,7 +6,12 @@ const [text, setText] = useState("one");
 const [horizontalText, setHorizontalText] = useState("one");
 const [indicator, setIndicator] = useState("one");
 
-<div style={{ background: "var(--background_page)", padding: "10px 0" }}>
+<div
+  style={{
+    background: "var(--vkui--color_background)",
+    padding: "10px 0",
+  }}
+>
   <div style={{ maxWidth: 768, margin: "auto" }}>
     <Tabbar style={{ position: "static", margin: "0 0 10px" }}>
       <TabbarItem selected={simple === "one"} onClick={() => setSimple("one")}>

package/src/components/Tabs/Readme.md

@@ -38,14 +38,22 @@ const Example = ({ sizeX }) => {
           <List>
             <Cell
               before={<Icon28UsersOutline />}
-              after={mode === "all" && <Icon24Done fill="var(--accent)" />}
+              after={
+                mode === "all" && (
+                  <Icon24Done fill="var(--vkui--color_icon_accent)" />
+                )
+              }
               onClick={() => setMode("all")}
             >
               Communities
             </Cell>
             <Cell
               before={<Icon28SettingsOutline />}
-              after={mode === "managed" && <Icon24Done fill="var(--accent)" />}
+              after={
+                mode === "managed" && (
+                  <Icon24Done fill="var(--vkui--color_icon_accent)" />
+                )
+              }
               onClick={() => setMode("managed")}
             >
               Managed Communities

package/src/components/TabsItem/TabsItem.css

@@ -102,7 +102,7 @@
 }
 
 .TabsItem--selected .TabsItem__before {
-  color: var(--text_primary, var(--vkui--color_icon_primary));
+  color: var(--vkui--color_icon_primary);
 }
 
 .TabsItem--selected.TabsItem--accent .TabsItem__before {

package/src/components/Tappable/Tappable.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import mitt from "mitt";
-import { noop } from "@vkontakte/vkjs";
+import { noop } from "../../lib/utils";
 import { Touch, TouchEvent, TouchProps } from "../Touch/Touch";
 import TouchRootContext from "../Touch/TouchContext";
 import { classNames } from "../../lib/classNames";
@@ -284,7 +284,6 @@ const TappableComponent = ({
     stop(activeDuration >= 100 ? 0 : activeEffectDelay - activeDuration);
   }
 
-  // eslint-disable-next-line vkui/no-object-expression-in-arguments
   const classes = classNames(
     "Tappable",
     platform === IOS && "Tappable--ios",
@@ -294,15 +293,14 @@ const TappableComponent = ({
     hasHover && hovered && !isPresetHoverMode && hoverMode,
     hasActive && active && !isPresetActiveMode && activeMode,
     focusVisible && !isPresetFocusVisibleMode && focusVisibleMode,
-    {
-      "Tappable--active": hasActive && active,
-      "Tappable--mouse": hasMouse,
-      [`Tappable--hover-${hoverMode}`]:
-        hasHover && hovered && isPresetHoverMode,
-      [`Tappable--active-${activeMode}`]:
-        hasActive && active && isPresetActiveMode,
-      "Tappable--focus-visible": focusVisible,
-    }
+    hasActive && active && "Tappable--active",
+    hasMouse && "Tappable--mouse",
+    hasHover && hovered && isPresetHoverMode && `Tappable--hover-${hoverMode}`,
+    hasActive &&
+      active &&
+      isPresetActiveMode &&
+      `Tappable--active-${activeMode}`,
+    focusVisible && "Tappable--focus-visible"
   );
 
   const handlers: RootComponentProps = {

package/src/components/Textarea/Textarea.css

@@ -16,7 +16,7 @@
   padding: 12px;
   max-height: 204px;
   border: none;
-  z-index: 2;
+  z-index: 6;
   position: relative;
   background: transparent;
 }

package/src/components/Textarea/Textarea.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
-import { FormField } from "../FormField/FormField";
+import { FormField, FormFieldProps } from "../FormField/FormField";
 import { HasRef, HasRootRef } from "../../types";
 import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
 import { useEnsuredControl } from "../../hooks/useEnsuredControl";
@@ -12,7 +12,8 @@ export interface TextareaProps
     HasRef<HTMLTextAreaElement>,
     HasRootRef<HTMLElement>,
     AdaptivityProps,
-    Pick<React.CSSProperties, "maxHeight"> {
+    Pick<React.CSSProperties, "maxHeight">,
+    Pick<FormFieldProps, "status"> {
   grow?: boolean;
   onResize?(el: HTMLTextAreaElement): void;
   defaultValue?: string;
@@ -29,6 +30,7 @@ const TextareaComponent = ({
   sizeY,
   rows = 2,
   maxHeight,
+  status,
   ...restProps
 }: TextareaProps) => {
   const [value, onChange] = useEnsuredControl(restProps, { defaultValue });
@@ -61,6 +63,7 @@ const TextareaComponent = ({
       style={style}
       getRootRef={getRootRef}
       disabled={restProps.disabled}
+      status={status}
     >
       <textarea
         {...restProps}

package/src/components/Tooltip/Readme.md

@@ -159,7 +159,7 @@ const ExampleWithPlatform = withPlatform(Example);
       border: "1px solid",
       margin: "100px 100px 0",
       position: "relative",
-      background: "var(--background_content)",
+      background: "var(--vkui--color_background_content)",
       zIndex: 1,
     }}
   >
@@ -175,7 +175,7 @@ const ExampleWithPlatform = withPlatform(Example);
       border: "1px solid",
       margin: "64px 100px 100px",
       position: "relative",
-      background: "var(--background_content)",
+      background: "var(--vkui--color_background_content)",
       zIndex: 1,
     }}
   >

package/src/components/Touch/Readme.md

@@ -9,7 +9,7 @@ const circleStyle = {
   width: 40,
   height: 40,
   borderRadius: "50%",
-  background: "var(--accent)",
+  background: "var(--vkui--color_background_accent)",
   position: "absolute",
   left: "50%",
   top: "50%",
@@ -19,7 +19,7 @@ const circleStyle = {
 
 const containerStyle = {
   height: 200,
-  border: "8px solid var(--icon_secondary)",
+  border: "8px solid var(--vkui--color_icon_secondary)",
   position: "relative",
 };
 
@@ -91,8 +91,8 @@ class Example extends React.Component {
               style={{
                 ...containerStyle,
                 borderColor: this.limitExceeded
-                  ? "var(--destructive)"
-                  : "var(--icon_secondary)",
+                  ? "var(--vkui--color_icon_negative)"
+                  : "var(--vkui--color_icon_secondary)",
               }}
             >
               <Touch

package/src/components/Typography/Headline/Headline.css

@@ -60,3 +60,13 @@
 .Headline--w-3 {
   font-weight: var(--vkui--font_weight_accent3);
 }
+
+/**
+ * CMP:
+ * PanelHeaderContent
+ */
+.PanelHeaderContent__children .Headline {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/src/components/Typography/Text/Text.css

@@ -38,3 +38,13 @@
 .Text--w-3 {
   font-weight: var(--vkui--font_weight_accent3);
 }
+
+/**
+ * CMP:
+ * PanelHeaderContent
+ */
+.PanelHeaderContent__children .Text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}