@vkontakte/vkui 4.35.3 → 4.36.0

package/src/components/Gallery/Readme.md

@@ -8,39 +8,73 @@ const [showArrows, setShowArrows] = useState(true);
     <PanelHeader>Gallery</PanelHeader>
     <Group header={<Header mode="secondary">Sticks right</Header>}>
       <Gallery slideWidth="90%" bullets="dark">
-        <div style={{ backgroundColor: "var(--destructive)" }} />
+        <div
+          style={{ backgroundColor: "var(--vkui--color_background_negative)" }}
+        />
         <img
           src="https://picsum.photos/1024/640"
           style={{ display: "block" }}
         />
-        <div style={{ backgroundColor: "var(--accent)" }} />
+        <div
+          style={{ backgroundColor: "var(--vkui--color_background_accent)" }}
+        />
       </Gallery>
     </Group>
     <Group header={<Header mode="secondary">Sticks left</Header>}>
       <Gallery slideWidth="90%" align="right">
-        <div style={{ height: 150, backgroundColor: "var(--destructive)" }} />
-        <div style={{ backgroundColor: "var(--button_commerce_background)" }} />
-        <div style={{ backgroundColor: "var(--accent)" }} />
+        <div
+          style={{
+            height: 150,
+            backgroundColor: "var(--vkui--color_background_negative)",
+          }}
+        />
+        <div
+          style={{ backgroundColor: "var(--vkui--color_background_positive)" }}
+        />
+        <div
+          style={{ backgroundColor: "var(--vkui--color_background_accent)" }}
+        />
       </Gallery>
     </Group>
     <Group header={<Header mode="secondary">Centered</Header>}>
       <Gallery slideWidth="90%" align="center">
-        <div style={{ backgroundColor: "var(--destructive)" }} />
-        <div style={{ backgroundColor: "var(--button_commerce_background)" }} />
-        <div style={{ backgroundColor: "var(--accent)" }} />
+        <div
+          style={{ backgroundColor: "var(--vkui--color_background_negative)" }}
+        />
+        <div
+          style={{ backgroundColor: "var(--vkui--color_background_positive)" }}
+        />
+        <div
+          style={{ backgroundColor: "var(--vkui--color_background_accent)" }}
+        />
       </Gallery>
     </Group>
     <Group header={<Header mode="secondary">Custom width</Header>}>
       <Gallery slideWidth="custom" style={{ height: 150 }}>
-        <div style={{ width: 200, backgroundColor: "var(--destructive)" }} />
+        <div
+          style={{
+            width: 200,
+            backgroundColor: "var(--vkui--color_background_negative)",
+          }}
+        />
         <div
           style={{
             width: 120,
-            backgroundColor: "var(--button_commerce_background)",
+            backgroundColor: "var(--vkui--color_background_positive)",
+          }}
+        />
+        <div
+          style={{
+            width: 70,
+            backgroundColor: "var(--vkui--color_background_accent)",
+          }}
+        />
+        <div
+          style={{
+            width: 220,
+            backgroundColor: "var(--vkui--color_icon_secondary)",
           }}
         />
-        <div style={{ width: 70, backgroundColor: "var(--accent)" }} />
-        <div style={{ width: 220, backgroundColor: "var(--icon_secondary)" }} />
       </Gallery>
     </Group>
     <Group header={<Header mode="secondary">Arrows</Header>}>
@@ -50,9 +84,15 @@ const [showArrows, setShowArrows] = useState(true);
         bullets="dark"
         showArrows
       >
-        <div style={{ backgroundColor: "var(--destructive)" }} />
-        <div style={{ backgroundColor: "var(--button_commerce_background)" }} />
-        <div style={{ backgroundColor: "var(--accent)" }} />
+        <div
+          style={{ backgroundColor: "var(--vkui--color_background_negative)" }}
+        />
+        <div
+          style={{ backgroundColor: "var(--vkui--color_background_positive)" }}
+        />
+        <div
+          style={{ backgroundColor: "var(--vkui--color_background_accent)" }}
+        />
       </Gallery>
     </Group>
     <Group header={<Header mode="secondary">Controlled</Header>}>
@@ -65,9 +105,15 @@ const [showArrows, setShowArrows] = useState(true);
         isDraggable={isDraggable}
         showArrows={showArrows}
       >
-        <div style={{ backgroundColor: "var(--destructive)" }} />
-        <div style={{ backgroundColor: "var(--button_commerce_background)" }} />
-        <div style={{ backgroundColor: "var(--accent)" }} />
+        <div
+          style={{ backgroundColor: "var(--vkui--color_background_negative)" }}
+        />
+        <div
+          style={{ backgroundColor: "var(--vkui--color_background_positive)" }}
+        />
+        <div
+          style={{ backgroundColor: "var(--vkui--color_background_accent)" }}
+        />
       </Gallery>
 
       <FormItem>

package/src/components/Header/Header.css

@@ -10,7 +10,7 @@
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
 }
 
 .Header__content {
@@ -34,30 +34,26 @@
 }
 
 .Header__subtitle {
-  color: var(--text_secondary);
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
 }
 
 .Header--mode-primary .Header__content:not(:last-child) {
   margin-top: -1px;
 }
 
-.Header--mode-secondary .Header__main,
+.Header--mode-secondary:not(.Header--pi) .Header__main,
 .Header--mode-tertiary .Header__main {
-  color: var(--text_secondary);
-}
-
-.Header--pi .Header__main {
-  color: var(--text_primary);
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
 }
 
 .Header__indicator {
-  color: var(--text_secondary);
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
   margin-left: 6px;
   flex-shrink: 0;
 }
 
 .Header--mode-primary .Header__indicator {
-  color: var(--text_subhead);
+  color: var(--text_subhead, var(--vkui--color_text_subhead));
 }
 
 .Header:not(.Header--pi) .Header__indicator {
@@ -75,7 +71,7 @@
 
 .Header__aside > .Icon {
   position: relative;
-  color: var(--icon_secondary);
+  color: var(--icon_secondary, var(--vkui--color_icon_secondary));
 }
 
 .Header__aside > .Icon--24 {
@@ -125,7 +121,7 @@
 }
 
 .Header--vkcom .Header__main {
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
 }
 
 .Header--vkcom.Header--mode-primary .Header__content:not(:last-child) {

package/src/components/Header/Header.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
 import { HasComponent, HasPlatform, HasRootRef } from "../../types";
@@ -90,11 +89,13 @@ export const Header = ({
     <header
       {...restProps}
       ref={getRootRef}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
-        getClassName("Header", platform),
+        "Header",
+        platform === Platform.VKCOM && "Header--vkcom",
+        platform === Platform.ANDROID && "Header--android",
+        platform === Platform.IOS && "Header--ios",
         `Header--mode-${mode}`,
-        { "Header--pi": isPrimitiveReactNode(indicator) }
+        isPrimitiveReactNode(indicator) && "Header--pi"
       )}
     >
       <div vkuiClass="Header__main">
@@ -105,10 +106,10 @@ export const Header = ({
           platform={platform}
         >
           <span
-            // eslint-disable-next-line vkui/no-object-expression-in-arguments
-            vkuiClass={classNames("Header__content-in", {
-              "Header__content-in--multiline": multiline,
-            })}
+            vkuiClass={classNames(
+              "Header__content-in",
+              multiline && "Header__content-in--multiline"
+            )}
           >
             {children}
           </span>

package/src/components/HorizontalCell/Readme.md

@@ -25,7 +25,7 @@ const HorizontalCellExample = withPlatform(
         width: 220,
         height: 124,
         borderRadius: 8,
-        border: "1px solid var(--placeholder_icon_background)",
+        border: "1px solid var(--vkui--color_image_placeholder_alpha)",
         objectFit: "cover",
       };
 

package/src/components/IconButton/IconButton.tsx

@@ -34,10 +34,10 @@ const IconButtonComponent = ({
 
   return (
     <Tappable
-      {...restProps}
-      Component={restProps.href ? "a" : Component}
       activeEffectDelay={200}
       activeMode="background"
+      {...restProps}
+      Component={restProps.href ? "a" : Component}
       vkuiClass={classNames(
         "IconButton",
         `IconButton--sizeY-${sizeY}`,

package/src/components/Input/Input.css

@@ -28,7 +28,7 @@
   padding-right: 12px;
   padding-left: 12px;
   position: relative;
-  z-index: 2;
+  z-index: 6;
   background: transparent;
 }
 

package/src/components/Input/Input.tsx

@@ -23,6 +23,7 @@ const InputComponent = ({
   style,
   before,
   after,
+  status,
   ...restProps
 }: InputProps) => {
   return (
@@ -40,6 +41,7 @@ const InputComponent = ({
       before={before}
       after={after}
       disabled={restProps.disabled}
+      status={status}
     >
       <input {...restProps} type={type} vkuiClass="Input__el" ref={getRef} />
     </FormField>

package/src/components/List/List.tsx

@@ -3,13 +3,12 @@ import { classNames } from "../../lib/classNames";
 import { ListContext } from "./ListContext";
 import "./List.css";
 
+export type ListProps = React.HTMLAttributes<HTMLDivElement>;
+
 /**
  * @see https://vkcom.github.io/VKUI/#/List
  */
-export const List = ({
-  children,
-  ...restProps
-}: React.HTMLAttributes<HTMLDivElement>) => {
+export const List = ({ children, ...restProps }: ListProps) => {
   const [isDragging, toggleDrag] = React.useState(false);
 
   return (

package/src/components/ModalDismissButton/ModalDismissButton.css

@@ -7,7 +7,7 @@
   height: 56px;
   padding: 18px;
   box-sizing: border-box;
-  color: var(--white);
+  color: var(--white, var(--vkui--color_icon_contrast));
   transition: opacity 0.15s ease-out;
 }
 
@@ -18,7 +18,7 @@
   right: 14px;
   bottom: 14px;
   left: 14px;
-  background-color: rgba(0, 0, 0, 0.35);
+  background: var(--vkui--color_overlay_primary);
   border-radius: 50%;
   position: absolute;
 }
@@ -28,10 +28,10 @@
   transform: translateX(0);
 }
 
-.ModalDismissButton--hover {
-  opacity: 0.6;
+.ModalDismissButton--hover.ModalDismissButton::before {
+  background: var(--vkui--color_overlay_primary--hover);
 }
 
-.ModalDismissButton--active {
-  opacity: 1;
+.ModalDismissButton--active.ModalDismissButton::before {
+  background: var(--vkui--color_overlay_primary--active);
 }

package/src/components/ModalDismissButton/ModalDismissButton.tsx

@@ -1,8 +1,6 @@
 import * as React from "react";
 import { Icon20Cancel } from "@vkontakte/icons";
 import { Tappable } from "../Tappable/Tappable";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
 import "./ModalDismissButton.css";
 
 export type ModalDismissButtonProps = React.HTMLAttributes<HTMLButtonElement>;
@@ -14,11 +12,9 @@ export const ModalDismissButton = ({
   "aria-label": ariaLabel = "Закрыть",
   ...restProps
 }: ModalDismissButtonProps) => {
-  const platform = usePlatform();
-
   return (
     <Tappable
-      vkuiClass={getClassName("ModalDismissButton", platform)}
+      vkuiClass="ModalDismissButton"
       {...restProps}
       aria-label={ariaLabel}
       activeMode="ModalDismissButton--active"

package/src/components/ModalDismissButton/Readme.md

@@ -8,7 +8,7 @@ const CustomPopout = withAdaptivity(
       <PopoutWrapper onClick={onClose}>
         <div
           style={{
-            backgroundColor: "var(--background_content)",
+            backgroundColor: "var(--vkui--color_background_content)",
             borderRadius: 8,
             position: "relative",
             padding: "12px",

package/src/components/ModalPage/ModalPage.css

@@ -1,4 +1,6 @@
 .ModalPage {
+  display: flex;
+  justify-content: center;
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -9,9 +11,7 @@
 }
 
 .ModalPage--desktop {
-  display: flex;
   align-items: center;
-  justify-content: center;
 }
 
 .ModalPage__in-wrap {
@@ -26,22 +26,65 @@
   transition: transform 320ms var(--android-easing);
 }
 
-.ModalRoot--switching .ModalPage__in-wrap {
-  pointer-events: none;
+.ModalPage--ios .ModalPage__in-wrap {
+  transition: transform 400ms var(--ios-easing);
+}
+
+.ModalPage--desktop .ModalPage__in-wrap {
+  position: relative;
+  align-items: initial;
+  margin: 32px 56px;
+  height: auto;
+  max-height: 640px;
+  opacity: 0;
+  transform: none;
+  transition: opacity 340ms var(--android-easing);
+}
+
+@media (max-height: 672px) {
+  .ModalPage--desktop .ModalPage__in-wrap {
+    max-height: calc(100% - 32px * 2);
+  }
+}
+
+.ModalPage--s .ModalPage__in-wrap {
+  max-width: var(--vkui--size_popup_small--regular);
+}
+
+.ModalPage--m .ModalPage__in-wrap {
+  max-width: var(--vkui--size_popup_medium--regular);
+}
+
+.ModalPage--l .ModalPage__in-wrap {
+  max-width: var(--vkui--size_popup_large--regular);
+}
+
+/* Для VKCOM `size` работать не будет */
+.ModalPage--vkcom .ModalPage__in-wrap {
+  max-width: 448px;
 }
 
 .ModalPage__in {
-  width: 416px;
-  max-width: 100%;
-  margin: 0 auto;
-  background: var(--background_content);
+  background-color: var(
+    --background_content,
+    var(--vkui--color_background_modal)
+  );
   overflow: visible;
   position: relative;
   box-sizing: border-box;
+  width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
-  border-radius: 12px 12px 0 0;
+  border-top-right-radius: var(--vkui--size_border_radius_paper--regular);
+  border-top-left-radius: var(--vkui--size_border_radius_paper--regular);
+}
+
+.ModalPage--desktop .ModalPage__in {
+  height: auto;
+  box-shadow: var(--vkui--elevation3);
+  border-bottom-right-radius: var(--vkui--size_border_radius_paper--regular);
+  border-bottom-left-radius: var(--vkui--size_border_radius_paper--regular);
 }
 
 .ModalPage__header {
@@ -75,72 +118,35 @@
   padding-bottom: var(--safe-area-inset-bottom);
 }
 
-.ModalRoot__modal--collapsed .ModalPage__content,
-.ModalRoot__modal--dragging .ModalPage__content {
-  overflow: hidden;
-  touch-action: pan-y;
-}
-
 .ModalPage__footer {
-  background: var(--background_content);
+  background-color: var(
+    --background_content,
+    var(--vkui--color_background_modal)
+  );
   position: relative;
   z-index: 10;
 }
 
-.ModalRoot--touched .ModalPage__footer {
-  transition: none;
-}
-
-/**
- * iOS
- */
-.ModalPage--ios .ModalPage__in-wrap {
-  transition: transform 400ms var(--ios-easing);
-}
-
-.ModalPage--ios .ModalPage__in {
-  border-radius: 14px 14px 0 0;
-}
-
 /**
- * VKCOM
+ * CMP:
+ * ModalRoot
+ *
+ * [дополнительно] также ищи в файле `ModalRoot__modal--expandable`
  */
-.ModalPage--vkcom .ModalPage__in {
-  border-radius: 8px 8px 0 0;
-  width: 448px;
-}
-
-/**
- * desktop
- */
-
-.ModalPage--desktop .ModalPage__in-wrap {
-  align-items: center;
-  opacity: 0;
-  transition: opacity 340ms var(--android-easing);
-  width: auto;
-  height: auto;
-  position: relative;
-  transform: none;
+.ModalRoot--touched .ModalPage__in-wrap {
+  transition: none;
 }
 
-.ModalPage--desktop .ModalPage__in {
-  height: auto;
-  max-height: 640px;
-  box-shadow: 0 16px 16px rgba(0, 0, 0, 0.16), 0 0 8px rgba(0, 0, 0, 0.12);
-  border-radius: 8px;
+.ModalRoot--switching .ModalPage__in-wrap {
+  pointer-events: none;
 }
 
-@media (max-height: 672px) {
-  .ModalPage--desktop .ModalPage__in {
-    max-height: calc(100vh - 32px);
-  }
+.ModalRoot__modal--collapsed .ModalPage__content,
+.ModalRoot__modal--dragging .ModalPage__content {
+  overflow: hidden;
+  touch-action: pan-y;
 }
 
-/**
- * common
- */
-
-.ModalRoot--touched .ModalPage__in-wrap {
+.ModalRoot--touched .ModalPage__footer {
   transition: none;
 }

package/src/components/ModalPage/ModalPage.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import {
   ModalRootContext,
@@ -7,7 +6,7 @@ import {
 } from "../ModalRoot/ModalRootContext";
 import { usePlatform } from "../../hooks/usePlatform";
 import { useOrientationChange } from "../../hooks/useOrientationChange";
-import { withAdaptivity, ViewWidth } from "../../hoc/withAdaptivity";
+import { withAdaptivity } from "../../hoc/withAdaptivity";
 import {
   AdaptivityContextInterface,
   AdaptivityProps,
@@ -29,6 +28,14 @@ export interface ModalPageProps
    * Шапка модальной страницы, `<ModalPageHeader />`
    */
   header?: React.ReactNode;
+  /**
+   * Задаёт контенту максимальную ширину.
+   *
+   * > ⚠️ **Заметки:**
+   * > - Для `viewWidth < SMALL_TABLET_SIZE` будет всегда `"s"`
+   * > - Для `platform === VKCOM` максимальная ширина зашита, её не изменить.
+   */
+  size?: "s" | "m" | "l";
   /**
    * Будет вызвано при начале открытия модалки.
    */
@@ -54,6 +61,10 @@ export interface ModalPageProps
    */
   dynamicContentHeight?: boolean;
   getModalContentRef?: React.Ref<HTMLDivElement>;
+  /**
+   * Скрывает кнопку закрытия (актуально для iOS, т.к. можно отрисовать кнопку закрытия внутри модалки)
+   */
+  hideCloseButton?: boolean;
 }
 
 const warn = warnOnce("ModalPage");
@@ -61,6 +72,7 @@ const warn = warnOnce("ModalPage");
 const ModalPageComponent = ({
   children,
   header,
+  size: sizeProp = "s",
   viewWidth,
   viewHeight,
   sizeX,
@@ -74,6 +86,7 @@ const ModalPageComponent = ({
   getModalContentRef,
   nav,
   id,
+  hideCloseButton = false,
   ...restProps
 }: ModalPageProps & AdaptivityContextInterface) => {
   const { updateModalHeight } = React.useContext(ModalRootContext);
@@ -88,8 +101,8 @@ const ModalPageComponent = ({
   ]);
 
   const isDesktop = useAdaptivityIsDesktop();
-  const canShowCloseBtn =
-    viewWidth >= ViewWidth.SMALL_TABLET || platform === Platform.VKCOM;
+  const isCloseButtonShown = !hideCloseButton && isDesktop;
+  const size = isDesktop ? sizeProp : "s";
 
   const modalContext = React.useContext(ModalRootContext);
   const { refs } = useModalRegistry(
@@ -101,13 +114,13 @@ const ModalPageComponent = ({
     <div
       {...restProps}
       id={id}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
-        getClassName("ModalPage", platform),
-        `ModalPage--sizeX-${sizeX}`,
-        {
-          "ModalPage--desktop": isDesktop,
-        }
+        "ModalPage",
+        platform === Platform.IOS && "ModalPage--ios",
+        platform === Platform.VKCOM && "ModalPage--vkcom",
+        `ModalPage--sizeX-${sizeX}`, // TODO v5.0.0 поправить под новую адаптивность
+        isDesktop && "ModalPage--desktop",
+        size && `ModalPage--${size}`
       )}
     >
       <div vkuiClass="ModalPage__in-wrap" ref={refs.innerElement}>
@@ -127,7 +140,7 @@ const ModalPageComponent = ({
               <div vkuiClass="ModalPage__content-in">{children}</div>
             </div>
           </div>
-          {canShowCloseBtn && (
+          {isCloseButtonShown && (
             <ModalDismissButton onClick={onClose || modalContext.onClose} />
           )}
         </div>

package/src/components/ModalPageHeader/ModalPageHeader.css

@@ -1,24 +1,21 @@
 .ModalPageHeader {
-  position: relative;
-  z-index: 2;
-
   --safe-area-inset-top: 0;
-}
 
-.ModalPageHeader--desktop.ModalPageHeader--android {
-  padding-left: 6px;
-  padding-right: 6px;
+  position: relative;
+  z-index: 2;
 }
 
-.ModalPageHeader--desktop.ModalPageHeader--ios {
-  padding-left: 4px;
+.ModalPageHeader--withGaps {
   padding-right: 4px;
+  padding-left: 4px;
 }
 
-.ModalPageHeader .Icon--dismiss_24 {
-  color: var(--placeholder_icon_foreground_primary);
+.ModalPageHeader--desktop.ModalPageHeader--withGaps {
+  padding-right: 8px;
+  padding-left: 8px;
 }
 
+.ModalPageHeader .Icon--dismiss_24, /* Note: <Icon24Dismiss /> по документации используется только для iOS  */
 .ModalPageHeader .Icon--cancel_24 {
-  color: var(--icon_secondary);
+  color: var(--icon_secondary, var(--vkui--color_icon_secondary));
 }