@vkontakte/vkui 4.35.2 → 4.36.1

package/src/components/FormLayoutGroup/FormLayoutGroup.css

@@ -2,6 +2,8 @@
   display: flex;
   padding: var(--vkui--size_form_item_padding_vertical--regular)
     var(--vkui--size_base_padding_horizontal--regular);
+  flex-wrap: wrap;
+  align-items: flex-start;
 }
 
 .FormLayoutGroup__removable {
@@ -10,6 +12,24 @@
   max-width: 100%;
 }
 
+.FormLayoutGroup__offset {
+  display: none;
+}
+
+.FormLayoutGroup--horizontal .FormItem--withTop ~ .FormLayoutGroup__offset {
+  order: -1;
+  display: block;
+  min-width: 100%;
+  height: calc(2px + var(--vkui--font_subhead--line_height--regular) + 8px);
+}
+
+/* TODO v5.0.0 перевести на новую адаптивность */
+.FormLayoutGroup--sizeY-compact.FormLayoutGroup--horizontal
+  .FormItem--withTop
+  ~ .FormLayoutGroup__offset {
+  height: calc(2px + var(--vkui--font_subhead--line_height--compact) + 6px);
+}
+
 /**
  * iOS
  * TODO: v5 удалить
@@ -22,3 +42,18 @@
   padding-left: 0;
   padding-right: 0;
 }
+
+.FormLayoutGroup--segmented {
+  position: relative;
+  z-index: 1;
+}
+
+/* stylelint-disable vkui/atomic */
+.FormLayoutGroup--segmented > * {
+  min-width: 0;
+  flex: 1;
+}
+
+.FormLayoutGroup--segmented > *:not(:first-child) {
+  margin-left: calc(-1 * var(--thin-border));
+}

package/src/components/FormLayoutGroup/FormLayoutGroup.tsx

@@ -18,6 +18,11 @@ export interface FormLayoutGroupProps
    * Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.
    */
   removable?: boolean;
+
+  /**
+   * Только для режима horizontal. Дает возможность склеить несколько `FormItem`.
+   */
+  segmented?: boolean;
 }
 
 /**
@@ -27,6 +32,7 @@ export const FormLayoutGroup = ({
   children,
   mode = "vertical",
   removable,
+  segmented,
   removePlaceholder = "Удалить",
   onRemove = noop,
   getRootRef,
@@ -35,6 +41,7 @@ export const FormLayoutGroup = ({
   const platform = usePlatform();
   const { sizeY } = useAdaptivity();
   const isRemovable = removable && mode === "horizontal";
+  const isSegmented = segmented && mode === "horizontal";
   const rootEl = useExternRef(getRootRef);
 
   return (
@@ -44,7 +51,8 @@ export const FormLayoutGroup = ({
         getClassName("FormLayoutGroup", platform), // TODO: v5 remove
         `FormLayoutGroup--sizeY-${sizeY}`,
         `FormLayoutGroup--${mode}`,
-        isRemovable && "FormLayoutGroup--removable"
+        isRemovable && "FormLayoutGroup--removable",
+        isSegmented && "FormLayoutGroup--segmented"
       )}
       {...restProps}
     >
@@ -62,7 +70,10 @@ export const FormLayoutGroup = ({
           {children}
         </Removable>
       ) : (
-        children
+        <React.Fragment>
+          {children}
+          <span vkuiClass="FormLayoutGroup__offset" aria-hidden />
+        </React.Fragment>
       )}
     </div>
   );

package/src/components/FormLayoutGroup/Readme.md

@@ -2,62 +2,72 @@
 по горизонтали.
 
 ```jsx
-class Example extends React.Component {
-  constructor(props) {
-    super(props);
+const Example = () => {
+  const [showDates, setShowDates] = useState(true);
+  const toggleDates = (value) => {
+    setShowDates(value);
+  };
 
-    this.state = {
-      showDates: true,
-    };
-  }
+  return (
+    <View activePanel="FormLayoutGroup">
+      <Panel id="FormLayoutGroup">
+        <PanelHeader>FormLayoutGroup</PanelHeader>
+        <Group>
+          <FormLayout>
+            <FormLayoutGroup mode="vertical">
+              <FormItem top="Имя">
+                <Input />
+              </FormItem>
+              <FormItem top="Фамилия">
+                <Input />
+              </FormItem>
+            </FormLayoutGroup>
 
-  toggleDates(showDates) {
-    this.setState({ showDates });
-  }
+            <FormLayoutGroup mode="horizontal" segmented>
+              <FormItem top="Имя ящика">
+                <Input />
+              </FormItem>
+              <FormItem>
+                <Select
+                  options={[
+                    "@mail.ru",
+                    "@internet.ru",
+                    "@bk.ru",
+                    "@inbox.ru",
+                    "@list.ru",
+                  ].map((i) => ({
+                    label: i,
+                    value: i,
+                  }))}
+                  defaultValue={"@mail.ru"}
+                />
+              </FormItem>
+            </FormLayoutGroup>
 
-  render() {
-    const { showDates } = this.state;
-
-    return (
-      <View activePanel="FormLayoutGroup">
-        <Panel id="FormLayoutGroup">
-          <PanelHeader>FormLayoutGroup</PanelHeader>
-          <Group>
-            <FormLayout>
-              <FormLayoutGroup mode="vertical">
-                <FormItem top="Имя">
+            {!showDates ? (
+              <CellButton onClick={() => toggleDates(true)}>
+                Указать даты поездки
+              </CellButton>
+            ) : (
+              <FormLayoutGroup
+                mode="horizontal"
+                removable
+                onRemove={() => toggleDates(false)}
+              >
+                <FormItem bottom="Дата начала поездки">
                   <Input />
                 </FormItem>
-                <FormItem top="Фамилия">
+                <FormItem bottom="Дата конца поездки">
                   <Input />
                 </FormItem>
               </FormLayoutGroup>
-
-              {!showDates ? (
-                <CellButton onClick={() => this.toggleDates(true)}>
-                  Указать даты поездки
-                </CellButton>
-              ) : (
-                <FormLayoutGroup
-                  mode="horizontal"
-                  removable
-                  onRemove={() => this.toggleDates(false)}
-                >
-                  <FormItem bottom="Дата начала поездки">
-                    <Input />
-                  </FormItem>
-                  <FormItem bottom="Дата конца поездки">
-                    <Input />
-                  </FormItem>
-                </FormLayoutGroup>
-              )}
-            </FormLayout>
-          </Group>
-        </Panel>
-      </View>
-    );
-  }
-}
+            )}
+          </FormLayout>
+        </Group>
+      </Panel>
+    </View>
+  );
+};
 
 <Example />;
 ```

package/src/components/FormStatus/FormStatus.css

@@ -1,13 +1,13 @@
 .FormStatus {
   border-radius: 10px;
   padding: 12px;
-  background: var(--field_background);
-  color: var(--text_subhead);
+  background: var(--field_background, var(--vkui--color_field_background));
+  color: var(--text_subhead, var(--vkui--color_text_subhead));
 }
 
 .FormStatus__header,
 .FormStatus b:first-child {
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
 }
 
 .FormStatus__header:not(:last-child),
@@ -16,8 +16,11 @@
 }
 
 .FormStatus--error {
-  background: var(--field_error_background);
-  color: var(--field_error_border);
+  background: var(
+    --field_error_background,
+    var(--vkui--color_background_negative_tint)
+  );
+  color: var(--field_error_border, var(--vkui--color_text_negative));
 }
 
 .FormStatus--error .FormStatus__header,

package/src/components/FormStatus/FormStatus.tsx

@@ -1,7 +1,5 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
 import { Headline } from "../Typography/Headline/Headline";
 import { Caption } from "../Typography/Caption/Caption";
 import { hasReactNode } from "../../lib/utils";
@@ -12,7 +10,10 @@ export interface FormStatusProps extends React.HTMLAttributes<HTMLDivElement> {
   header?: React.ReactNode;
 }
 
+/* TODO: v5.0.0 удалить */
+
 /**
+ * @deprecated Этот компонент устарел и будет удален в v5.0.0. Используйте [`Banner`](#/Banner).
  * @see https://vkcom.github.io/VKUI/#/FormStatus
  */
 export const FormStatus = ({
@@ -22,15 +23,10 @@ export const FormStatus = ({
   dangerouslySetInnerHTML,
   ...restProps
 }: FormStatusProps) => {
-  const platform = usePlatform();
-
   return (
     <div
       {...restProps}
-      vkuiClass={classNames(
-        getClassName("FormStatus", platform),
-        `FormStatus--${mode}`
-      )}
+      vkuiClass={classNames("FormStatus", `FormStatus--${mode}`)}
     >
       {hasReactNode(header) && (
         <Headline weight="2" vkuiClass="FormStatus__header">

package/src/components/FormStatus/Readme.md

@@ -1,3 +1,7 @@
+> **Deprecated:** этот компонент устарел и будет удален в 5.0.0.
+>
+> Используйте [`Banner`](https://vkcom.github.io/VKUI/#/Banner).
+
 Компонент используется для отображения статуса формы. Например, когда в форме допущена ошибка, и нет возможности
 указать на конкретное поле. Заголовок и текст опциональны.
 

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

@@ -1,5 +1,5 @@
 .Link {
-  color: var(--accent, var(--vkui--color_text_link));
+  color: var(--text_link, var(--vkui--color_text_link));
   text-decoration: none;
   border: 0;
   background: none;
@@ -31,6 +31,7 @@
   color: var(--vkui--color_text_link_visited);
 }
 
+/* stylelint-disable-next-line vkui/atomic */
 .Link .Icon {
   margin-left: 4px;
   display: inline-block;

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",