@vkontakte/vkui 4.35.4 → 4.37.0

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/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/SplitLayout/SplitLayout.css

@@ -17,13 +17,19 @@
   position: relative;
   z-index: 11;
   margin-top: calc(
-    -1 * (var(--panelheader_height) + var(--safe-area-inset-top))
+    -1 * (var(
+            --panelheader_height,
+            var(--vkui--size_panel_header_height--regular)
+          ) + var(--safe-area-inset-top))
   );
 }
 
 .SplitLayout--ios .SplitLayout__inner--header {
   margin-top: calc(
-    -1 * (var(--panelheader_height_ios) + var(--safe-area-inset-top))
+    -1 * (var(
+            --panelheader_height_ios,
+            var(--vkui--size_panel_header_height--regular)
+          ) + var(--safe-area-inset-top))
   );
 }
 

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/Readme.md

@@ -1,4 +1,4 @@
-Компонент, используемый в качестве кнопок в [SubnavigationBar](https://vkcom.github.io/VKUI/#/SubnavigationBar).
+Компонент, используемый в качестве кнопок в [SubnavigationBar](#/SubnavigationBar).
 
 Этот компонент может использоваться:
 
@@ -6,123 +6,140 @@
 - В качестве кнопки, для управления контентом на странице. Например, показать модальную страницу с фильтрами или сразу активировать какой-то фильтр.
 
 ```jsx
-const SubnavigationButtonExample = () => {
+const filters = ["Мой размер", "В наличии", "Высокий рейтинг", "Избранное"];
+
+const SubnavigationFilter = (props) => {
+  const [state, setState] = useState(() => new Set());
+
+  const addItem = (item) => {
+    setState((prev) => new Set(prev).add(item));
+  };
+
+  const removeItem = (item) => {
+    setState((prev) => {
+      const next = new Set(prev);
+
+      next.delete(item);
+
+      return next;
+    });
+  };
+
+  const toggleItem = (item) => {
+    if (state.has(item)) {
+      removeItem(item);
+    } else {
+      addItem(item);
+    }
+  };
+
+  const propsDescription = Object.keys(props)
+    .map((keys) => `${keys}="${props[keys]}"`)
+    .join(" ");
+
   return (
-    <View activePanel="example">
-      <Panel id="example">
-        <PanelHeader>SubnavigationButton</PanelHeader>
-        <Group>
-          <SubnavigationBar>
-            <SubnavigationButton before={<Icon24Filter />} expandable>
-              Фильтры
-            </SubnavigationButton>
-
-            <SubnavigationButton
-              before={<Icon24Filter />}
-              selected
-              expandable
-              after={
-                <Counter mode="primary" size="s">
-                  3
-                </Counter>
-              }
-            >
-              Фильтры
-            </SubnavigationButton>
-          </SubnavigationBar>
-
-          <SubnavigationBar>
-            <SubnavigationButton
-              before={<Icon24ScanViewfinderOutline />}
-              size="l"
-            >
-              Сканировать QR
-            </SubnavigationButton>
-
-            <SubnavigationButton before={<Icon24UserAddOutline />} size="l">
-              Добавить друга
-            </SubnavigationButton>
-          </SubnavigationBar>
-
-          <SubnavigationBar>
-            <SubnavigationButton>Мой размер</SubnavigationButton>
-
-            <SubnavigationButton selected>Мой размер</SubnavigationButton>
-          </SubnavigationBar>
-
-          <SubnavigationBar>
-            <SubnavigationButton
-              after={
-                <Counter mode="prominent" size="s">
-                  3
-                </Counter>
-              }
-            >
-              Новинки
-            </SubnavigationButton>
-          </SubnavigationBar>
-
-          <SubnavigationBar>
-            <SubnavigationButton
-              before={<Icon24Filter />}
-              selected
-              expandable
-              after={
-                <Counter mode="primary" size="s">
-                  3
-                </Counter>
-              }
-            >
-              Фильтры
-            </SubnavigationButton>
-
-            <SubnavigationButton selected>Мой размер</SubnavigationButton>
-
-            <SubnavigationButton>В наличии</SubnavigationButton>
-
-            <SubnavigationButton before={<Icon24FavoriteOutline />}>
-              Избранное
-            </SubnavigationButton>
-          </SubnavigationBar>
-        </Group>
-
-        <Group>
-          <Header>Уменьшение шрифта</Header>
-
-          <SubnavigationBar>
-            <SubnavigationButton
-              before={<Icon24ScanViewfinderOutline />}
-              size="l"
-              textLevel={1}
-            >
-              Сканировать QR
-            </SubnavigationButton>
-          </SubnavigationBar>
-
-          <SubnavigationBar>
-            <SubnavigationButton
-              before={<Icon24ScanViewfinderOutline />}
-              size="l"
-              textLevel={2}
-            >
-              Сканировать QR
-            </SubnavigationButton>
-          </SubnavigationBar>
-
-          <SubnavigationBar>
-            <SubnavigationButton
-              before={<Icon24ScanViewfinderOutline />}
-              size="l"
-              textLevel={3}
-            >
-              Сканировать QR
-            </SubnavigationButton>
-          </SubnavigationBar>
-        </Group>
-      </Panel>
-    </View>
+    <Group>
+      <Header mode="secondary">{propsDescription}</Header>
+      <SubnavigationBar>
+        {filters.map((item) => (
+          <SubnavigationButton
+            key={item}
+            selected={state.has(item)}
+            onClick={() => toggleItem(item)}
+            {...props}
+          >
+            {item}
+          </SubnavigationButton>
+        ))}
+      </SubnavigationBar>
+    </Group>
   );
 };
 
-<SubnavigationButtonExample />;
+<View activePanel="example">
+  <Panel id="example">
+    <PanelHeader>SubnavigationButton</PanelHeader>
+    <Group>
+      <SubnavigationBar>
+        <SubnavigationButton before={<Icon24Filter />} expandable>
+          Фильтры
+        </SubnavigationButton>
+
+        <SubnavigationButton
+          before={<Icon24Filter />}
+          selected
+          expandable
+          after={
+            <Counter mode="primary" size="s">
+              3
+            </Counter>
+          }
+        >
+          Фильтры
+        </SubnavigationButton>
+      </SubnavigationBar>
+
+      <SubnavigationBar>
+        <SubnavigationButton before={<Icon24ScanViewfinderOutline />} size="l">
+          Сканировать QR
+        </SubnavigationButton>
+
+        <SubnavigationButton before={<Icon24UserAddOutline />} size="l">
+          Добавить друга
+        </SubnavigationButton>
+      </SubnavigationBar>
+
+      <SubnavigationBar>
+        <SubnavigationButton>Мой размер</SubnavigationButton>
+
+        <SubnavigationButton selected>Мой размер</SubnavigationButton>
+      </SubnavigationBar>
+
+      <SubnavigationBar>
+        <SubnavigationButton
+          after={
+            <Counter mode="prominent" size="s">
+              3
+            </Counter>
+          }
+        >
+          Новинки
+        </SubnavigationButton>
+      </SubnavigationBar>
+
+      <SubnavigationBar>
+        <SubnavigationButton
+          before={<Icon24Filter />}
+          selected
+          expandable
+          after={
+            <Counter mode="primary" size="s">
+              3
+            </Counter>
+          }
+        >
+          Фильтры
+        </SubnavigationButton>
+
+        <SubnavigationButton selected>Мой размер</SubnavigationButton>
+
+        <SubnavigationButton>В наличии</SubnavigationButton>
+
+        <SubnavigationButton before={<Icon24FavoriteOutline />}>
+          Избранное
+        </SubnavigationButton>
+      </SubnavigationBar>
+    </Group>
+
+    <SubnavigationFilter mode="primary" />
+    <SubnavigationFilter mode="outline" />
+    <SubnavigationFilter mode="tertiary" />
+    <SubnavigationFilter size="s" />
+    <SubnavigationFilter size="m" />
+    <SubnavigationFilter size="l" />
+    <SubnavigationFilter textLevel={1} />
+    <SubnavigationFilter textLevel={2} />
+    <SubnavigationFilter textLevel={3} />
+  </Panel>
+</View>;
 ```

package/src/components/SubnavigationButton/SubnavigationButton.css

@@ -1,9 +1,7 @@
 .SubnavigationButton {
   display: inline-block;
-  background-color: var(--modal_card_background);
-  color: var(--text_primary);
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.08), 0 2px 24px rgba(0, 0, 0, 0.08);
   user-select: none;
+  border-radius: var(--vkui--size_border_radius--regular);
 }
 
 .SubnavigationButton__in {
@@ -12,13 +10,54 @@
   justify-content: center;
 }
 
-.SubnavigationButton__before {
-  margin-right: 8px;
-  color: var(--accent);
+/**
+ * size s
+ */
+
+.SubnavigationButton--s .SubnavigationButton__in {
+  height: var(--vkui--size_button_small_height--regular);
+}
+
+/**
+ * size m
+ */
+
+.SubnavigationButton--m .SubnavigationButton__in {
+  height: var(--vkui--size_button_medium_height--regular);
+}
+
+/**
+ * size l
+ */
+
+.SubnavigationButton--l .SubnavigationButton__in {
+  height: var(--vkui--size_button_large_height--regular);
+}
+
+/**
+ * SizeY = compact
+ *
+ * TODO v5.0.0 поправить под новую адаптивность
+ */
+
+.SubnavigationButton--sizeY-compact.SubnavigationButton--s
+  .SubnavigationButton__in {
+  height: var(--vkui--size_button_small_height--compact);
+}
+
+.SubnavigationButton--sizeY-compact.SubnavigationButton--m
+  .SubnavigationButton__in {
+  height: var(--vkui--size_button_medium_height--compact);
+}
+
+.SubnavigationButton--sizeY-compact.SubnavigationButton--l
+  .SubnavigationButton__in {
+  height: var(--vkui--size_button_large_height--compact);
 }
 
-.SubnavigationButton__before .Icon--24 {
-  margin-left: -4px;
+.SubnavigationButton__before {
+  margin-right: 8px;
+  color: var(--accent, var(--vkui--color_icon_accent));
 }
 
 .SubnavigationButton__label {
@@ -35,69 +74,76 @@
 .SubnavigationButton__expandableIcon {
   margin-left: 8px;
   margin-top: 1px; /* Смещает иконку относительно текста */
-  color: var(--icon_secondary);
-}
-
-/**
- * selected
- */
-
-.SubnavigationButton--selected {
-  background-color: var(--button_primary_background);
-  color: var(--button_primary_foreground);
+  color: var(--icon_secondary, var(--vkui--color_icon_secondary));
 }
 
-.SubnavigationButton--selected .SubnavigationButton__before {
-  color: inherit;
+.SubnavigationButton__before:first-child,
+.SubnavigationButton__label:first-child {
+  padding-left: var(
+    --vkui--size_button_base_small_padding_horizontal_icon--regular
+  );
 }
 
-.SubnavigationButton--selected .Counter {
-  background-color: var(--button_primary_foreground);
-  color: var(--button_primary_background);
-}
-
-.SubnavigationButton--selected .SubnavigationButton__expandableIcon {
-  color: inherit;
+.SubnavigationButton__after:last-child,
+.SubnavigationButton__label:last-child,
+.SubnavigationButton__expandableIcon {
+  padding-right: var(
+    --vkui--size_button_base_small_padding_horizontal_icon--regular
+  );
 }
 
 /**
- * size m
+ * mode
  */
 
-.SubnavigationButton--m .SubnavigationButton__in {
-  height: 36px;
-  padding: 0 14px;
+.SubnavigationButton--mode-primary {
+  background-color: var(
+    --modal_card_background,
+    var(--vkui--color_background_modal)
+  );
+  box-shadow: var(--vkui--elevation3);
 }
 
-/**
- * size l
- */
-
-.SubnavigationButton--l .SubnavigationButton__in {
-  height: 44px;
-  padding: 0 14px;
+.SubnavigationButton--mode-outline {
+  box-shadow: inset 0 0 0 var(--thin-border)
+    var(--vkui--color_field_border_alpha);
 }
 
 /**
- * iOS
+ * selected
  */
 
-.SubnavigationButton--ios {
-  border-radius: 10px;
+.SubnavigationButton--selected {
+  background-color: var(
+    --button_primary_background,
+    var(--vkui--color_background_accent)
+  );
+  color: var(--button_primary_foreground, var(--vkui--color_text_contrast));
+  box-shadow: none;
+  border: none;
 }
 
-/**
- * Android
- */
+.SubnavigationButton--selected.SubnavigationButton--mode-tertiary {
+  background-color: var(--vkui--color_transparent--active);
+  color: var(--vkui--color_text_primary);
+}
 
-.SubnavigationButton--android {
-  border-radius: 8px;
+.SubnavigationButton--selected:not(.SubnavigationButton--mode-tertiary)
+  .SubnavigationButton__before,
+.SubnavigationButton--selected:not(.SubnavigationButton--mode-tertiary)
+  .SubnavigationButton__expandableIcon {
+  color: inherit;
 }
 
 /**
- * VKCOM
+ * CMP:
+ * SubnavigationBar
  */
+.SubnavigationBar .SubnavigationButton + .SubnavigationButton {
+  margin-left: var(--vkui--size_subnavigation_bar_gap--regular);
+}
 
-.SubnavigationButton--vkcom {
-  border-radius: 4px;
+.SubnavigationBar--fixed .SubnavigationButton {
+  flex: 1;
+  min-width: 0;
 }