@vkontakte/vkui 4.35.1 → 4.36.0

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;
+}

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,
                           }
                         : {}