@vkontakte/vkui 4.35.4 → 4.37.0

package/src/components/FormField/FormField.css

@@ -1,11 +1,18 @@
 .FormField {
   position: relative;
+  z-index: 1;
   display: flex;
   align-items: center;
   box-sizing: border-box;
   min-height: var(--vkui--size_field_height--regular);
 }
 
+/* stylelint-disable-next-line vkui/atomic */
+.FormField > * {
+  border-radius: inherit;
+  z-index: 6;
+}
+
 /**
  * TODO v5.0.0 поправить под новую адаптивность
  */
@@ -16,7 +23,7 @@
 .FormField__before,
 .FormField__after {
   position: relative;
-  z-index: 2;
+  z-index: 7;
   display: flex;
   align-items: center;
   align-content: center;
@@ -70,16 +77,20 @@
  * CMP:
  * FormItem
  */
-.FormItem--error .FormField__border {
+.FormItem--error .FormField__border,
+.FormField--status-error .FormField__border {
   background-color: var(
     --field_error_background,
     var(--vkui--color_background_negative_tint)
   );
   border-color: var(--field_error_border, var(--vkui--color_stroke_negative));
+  z-index: 3;
 }
 
-.FormItem--valid .FormField__border {
+.FormItem--valid .FormField__border,
+.FormField--status-valid .FormField__border {
   border-color: var(--field_valid_border, var(--vkui--color_stroke_positive));
+  z-index: 3;
 }
 /* [end] */
 
@@ -101,15 +112,16 @@
     --icon_tertiary_alpha,
     var(--vkui--color_field_border_alpha--hover)
   );
+  z-index: 4;
 }
 
 /**
  * FIXME: необходимо заменить на `useFocusVisible()`
  */
 .FormField:focus-within .FormField__border,
-.FormField *:focus ~ .FormField__border,
-.ChipsInput--focused .FormField__border {
+.FormField *:focus ~ .FormField__border {
   border-color: var(--accent, var(--vkui--color_stroke_accent));
+  z-index: 5;
 }
 
 /**
@@ -149,5 +161,45 @@
  * ChipsInput
  */
 .ChipsInput .FormField__after {
-  z-index: 3;
+  z-index: 7;
+}
+
+/**
+ * CMP:
+ * FormLayoutGroup
+ */
+.FormLayoutGroup--segmented .FormField {
+  z-index: auto;
+}
+
+.FormLayoutGroup--segmented
+  > .FormItem:not(:first-of-type):not(:last-of-type)
+  .FormField__border,
+.FormLayoutGroup--segmented
+  .Removable__content
+  > .FormItem:not(:first-of-type):not(:last-of-type)
+  .FormField__border {
+  border-radius: 0;
+}
+
+.FormLayoutGroup--segmented
+  > *:first-of-type:not(:last-of-type)
+  .FormField__border,
+.FormLayoutGroup--segmented
+  .Removable__content
+  > *:first-of-type:not(:last-of-type)
+  .FormField__border {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.FormLayoutGroup--segmented
+  > .FormItem:not(:first-of-type):last-of-type
+  .FormField__border,
+.FormLayoutGroup--segmented
+  .Removable__content
+  > .FormItem:not(:first-of-type):last-of-type
+  .FormField__border {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }

package/src/components/FormField/FormField.tsx

@@ -10,6 +10,7 @@ export const FormFieldMode = {
 } as const;
 
 export interface FormFieldProps {
+  status?: "default" | "error" | "valid";
   /**
    * Добавляет иконку слева.
    *
@@ -44,6 +45,7 @@ interface FormFieldOwnProps
  */
 export const FormField = ({
   Component = "div",
+  status = "default",
   children,
   getRootRef,
   before,
@@ -75,6 +77,7 @@ export const FormField = ({
       vkuiClass={classNames(
         "FormField",
         `FormField--${mode}`,
+        `FormField--status-${status}`,
         `FormField--sizeY-${sizeY}`, // TODO v5.0.0 поправить под новую адаптивность
         disabled && "FormField--disabled",
         !disabled && hover && "FormField--hover"

package/src/components/FormItem/FormItem.css

@@ -74,19 +74,21 @@
   min-width: 1px;
 }
 
-.FormLayoutGroup--horizontal .FormItem + .FormItem {
+.FormLayoutGroup--horizontal:not(.FormLayoutGroup--segmented)
+  .FormItem
+  + .FormItem {
   margin-left: 24px;
 }
 
 .FormItem--withTop .FormItem__removable,
-.FormLayoutGroup--removable .FormItem--withTop {
+.FormLayoutGroup--horizontal .FormItem--withTop {
   margin-top: calc(
     -2px - var(--vkui--font_subhead--line_height--regular) - 8px
   );
 }
 
 .FormItem--withTop.FormItem--sizeY-compact .FormItem__removable,
-.FormLayoutGroup--removable .FormItem--withTop.FormItem--sizeY-compact {
+.FormLayoutGroup--horizontal .FormItem--withTop.FormItem--sizeY-compact {
   margin-top: calc(
     -2px - var(--vkui--font_subhead--line_height--compact) - 6px
   );

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/Gallery.tsx

@@ -59,6 +59,7 @@ export const Gallery = ({
     if (onChange && safeSlideIndex !== slideIndex) {
       onChange(safeSlideIndex);
     }
+    setSlideIndex(safeSlideIndex);
   }, [onChange, safeSlideIndex, slideIndex]);
 
   return (

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

@@ -49,7 +49,7 @@ const ExampleWithAdaptivity = () => {
             <Header>Учебные заведения и классы</Header>
             <SimpleCell
               before={<Icon28SchoolOutline />}
-              description="Екатеринбург"
+              subtitle="Екатеринбург"
             >
               Школа №180
             </SimpleCell>

package/src/components/Group/Group.css

@@ -7,11 +7,20 @@
   padding-bottom: 8px;
 }
 
-/* TODO v5.0.0 Новая адаптивность */
-.Group--sizeX-regular > .Group__inner {
+.Group--card.Group--padding-s > .Group__inner {
+  padding: 4px;
+}
+
+.Group--card.Group--padding-m > .Group__inner {
   padding: 8px;
 }
 
+/* TODO v5.0.0 Новая адаптивность */
+.Group--sizeX-compact > .Group__inner {
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .Group--card > .Group__inner {
   background: var(--background_content, var(--vkui--color_background_content));
   border-radius: var(--vkui--size_border_radius_paper--regular);

package/src/components/Group/Group.tsx

@@ -34,6 +34,10 @@ export interface GroupProps
    * по умолчанию 'plain'.
    */
   mode?: "plain" | "card";
+  /**
+   * Отвечает за отступы вокруг контента в режиме 'card'.
+   */
+  padding?: "s" | "m";
   children?: React.ReactNode;
 }
 
@@ -44,6 +48,7 @@ const GroupComponent = ({
   separator = "auto",
   getRootRef,
   mode,
+  padding = "m",
   sizeX,
   ...restProps
 }: GroupProps) => {
@@ -81,7 +86,8 @@ const GroupComponent = ({
         platform === IOS && "Group--ios",
         // TODO v5.0.0 Новая адаптивность
         `Group--sizeX-${sizeX}`,
-        `Group--${computedMode}`
+        `Group--${computedMode}`,
+        `Group--padding-${padding}`
       )}
     >
       <div vkuiClass="Group__inner">

package/src/components/Group/Readme.md

@@ -110,7 +110,7 @@ const SharedContent = () => {
               </IconButton>
             )
           }
-          description="Санкт-Петербург, Россия"
+          subtitle="Санкт-Петербург, Россия"
           before={<Avatar size={32} mode="app" />}
         >
           VK · Приложение для iPhone
@@ -127,7 +127,7 @@ const SharedContent = () => {
               </IconButton>
             )
           }
-          description="Санкт-Петербург, Россия"
+          subtitle="Санкт-Петербург, Россия"
           before={<Avatar size={32} mode="app" />}
         >
           VK · Браузер Chrome для macOS