@vkontakte/vkui 4.36.1 → 4.37.0

package/src/components/SimpleCell/SimpleCell.css

@@ -36,12 +36,17 @@
   padding-right: 16px;
 }
 
+.SimpleCell__subhead {
+  color: var(--text_subhead, var(--vkui--color_text_subhead));
+}
+
 .SimpleCell__text {
   text-overflow: ellipsis;
   overflow: hidden;
 }
 
-.SimpleCell__subtitle {
+.SimpleCell__subtitle,
+.SimpleCell__extraSubtitle {
   color: var(--text_secondary, var(--vkui--color_text_secondary));
 }
 

package/src/components/SimpleCell/SimpleCell.tsx

@@ -9,6 +9,7 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { withAdaptivity, SizeType } from "../../hoc/withAdaptivity";
+import { Subhead } from "../Typography/Subhead/Subhead";
 import { Headline } from "../Typography/Headline/Headline";
 import { Footnote } from "../Typography/Footnote/Footnote";
 import { Caption } from "../Typography/Caption/Caption";
@@ -20,18 +21,48 @@ export interface SimpleCellOwnProps extends HasComponent {
    */
   before?: React.ReactNode;
   /**
+   * @deprecated будет удалено в v5.0.0, используйте свойство rightBadge
    * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.
    */
   badge?: React.ReactNode;
+  /**
+   * Иконка 12 или `<Badge />`. Добавится слева от текста `children`.
+   */
+  badgeBeforeTitle?: React.ReactNode;
+  /**
+   * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.
+   */
+  badgeAfterTitle?: React.ReactNode;
+  /**
+   * Иконка 12. Добавится слева от текста `subtitle`.
+   */
+  badgeBeforeSubtitle?: React.ReactNode;
+  /**
+   * Иконка 12. Добавится справа от текста `subtitle`.
+   */
+  badgeAfterSubtitle?: React.ReactNode;
   /**
    * Контейнер для текста справа от `children`.
    */
   indicator?: React.ReactNode;
+  /**
+   * Дополнительная строка текста над `children`.
+   */
+  subhead?: React.ReactNode;
+  /**
+   * Дополнительная строка текста под `children`.
+   */
+  subtitle?: React.ReactNode;
+  /**
+   * Дополнительная строка текста под `children` и `subtitle`.
+   */
+  extraSubtitle?: React.ReactNode;
   /**
    * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.
    */
   after?: React.ReactNode;
   /**
+   * @deprecated будет удалено в v5.0.0, используйте свойство subtitle
    * Контейнер для текста под `children`.
    */
   description?: React.ReactNode;
@@ -43,15 +74,18 @@ export interface SimpleCellOwnProps extends HasComponent {
    * В iOS добавляет chevron справа. Передавать `true`, если предполагается переход при клике по ячейке.
    */
   expandable?: boolean;
+  /**
+   * Включает многострочный режим для отображения текста
+   */
   multiline?: boolean;
 }
 
 export interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}
 
-type SimpleCellTypographyProps = React.HTMLAttributes<HTMLDivElement> &
+type SubtitleTypographyProps = React.HTMLAttributes<HTMLDivElement> &
   HasComponent;
 
-const SimpleCellTypography = (props: SimpleCellTypographyProps) => {
+const SubtitleTypography = (props: SubtitleTypographyProps) => {
   const { sizeY } = useAdaptivity();
 
   if (sizeY === SizeType.COMPACT) {
@@ -63,6 +97,10 @@ const SimpleCellTypography = (props: SimpleCellTypographyProps) => {
 
 const SimpleCellComponent = ({
   badge,
+  badgeBeforeTitle,
+  badgeAfterTitle = badge,
+  badgeBeforeSubtitle,
+  badgeAfterSubtitle,
   before,
   indicator,
   children,
@@ -71,6 +109,9 @@ const SimpleCellComponent = ({
   expandable,
   multiline,
   sizeY,
+  subhead,
+  subtitle = description,
+  extraSubtitle,
   ...restProps
 }: SimpleCellProps) => {
   const platform = usePlatform();
@@ -88,7 +129,18 @@ const SimpleCellComponent = ({
     >
       {before}
       <div vkuiClass="SimpleCell__main">
+        {subhead && (
+          <Subhead
+            Component="span"
+            vkuiClass="SimpleCell__text SimpleCell__subhead"
+          >
+            {subhead}
+          </Subhead>
+        )}
         <div vkuiClass="SimpleCell__content">
+          {badgeBeforeTitle && (
+            <span vkuiClass="SimpleCell__badge">{badgeBeforeTitle}</span>
+          )}
           <Headline
             Component="span"
             vkuiClass="SimpleCell__children"
@@ -96,17 +148,28 @@ const SimpleCellComponent = ({
           >
             {children}
           </Headline>
-          {hasReactNode(badge) && (
-            <span vkuiClass="SimpleCell__badge">{badge}</span>
+          {hasReactNode(badgeAfterTitle) && (
+            <span vkuiClass="SimpleCell__badge">{badgeAfterTitle}</span>
           )}
         </div>
-        {description && (
+        {subtitle && (
           <div vkuiClass="SimpleCell__content">
-            <SimpleCellTypography vkuiClass="SimpleCell__text SimpleCell__subtitle">
-              {description}
-            </SimpleCellTypography>
+            {badgeBeforeSubtitle && (
+              <span vkuiClass="SimpleCell__badge">{badgeBeforeSubtitle}</span>
+            )}
+            <SubtitleTypography vkuiClass="SimpleCell__text SimpleCell__subtitle">
+              {subtitle}
+            </SubtitleTypography>
+            {badgeAfterSubtitle && (
+              <span vkuiClass="SimpleCell__badge">{badgeAfterSubtitle}</span>
+            )}
           </div>
         )}
+        {extraSubtitle && (
+          <SubtitleTypography vkuiClass="SimpleCell__text SimpleCell__extraSubtitle">
+            {extraSubtitle}
+          </SubtitleTypography>
+        )}
       </div>
       {hasReactNode(indicator) && (
         <Headline Component="span" weight="3" vkuiClass="SimpleCell__indicator">

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/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);
 }
 
-.SubnavigationButton__before .Icon--24 {
-  margin-left: -4px;
+/**
+ * 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 {
+  margin-right: 8px;
+  color: var(--accent, var(--vkui--color_icon_accent));
 }
 
 .SubnavigationButton__label {
@@ -35,71 +74,65 @@
 .SubnavigationButton__expandableIcon {
   margin-left: 8px;
   margin-top: 1px; /* Смещает иконку относительно текста */
-  color: var(--icon_secondary);
+  color: var(--icon_secondary, var(--vkui--color_icon_secondary));
 }
 
-/**
- * selected
- */
-
-.SubnavigationButton--selected {
-  background-color: var(--button_primary_background);
-  color: var(--button_primary_foreground);
+.SubnavigationButton__before:first-child,
+.SubnavigationButton__label:first-child {
+  padding-left: var(
+    --vkui--size_button_base_small_padding_horizontal_icon--regular
+  );
 }
 
-.SubnavigationButton--selected .SubnavigationButton__before {
-  color: inherit;
-}
-
-.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--android {
-  border-radius: 8px;
+.SubnavigationButton--selected.SubnavigationButton--mode-tertiary {
+  background-color: var(--vkui--color_transparent--active);
+  color: var(--vkui--color_text_primary);
 }
 
-/**
- * VKCOM
- */
-
-.SubnavigationButton--vkcom {
-  border-radius: 4px;
+.SubnavigationButton--selected:not(.SubnavigationButton--mode-tertiary)
+  .SubnavigationButton__before,
+.SubnavigationButton--selected:not(.SubnavigationButton--mode-tertiary)
+  .SubnavigationButton__expandableIcon {
+  color: inherit;
 }
 
 /**