@vkontakte/vkui 4.35.3 → 4.36.0

package/src/components/DateRangeInput/Readme.md

@@ -1,5 +1,8 @@
 Компонент выбора даты.
 
+- Если нужен календарь без поля ввода, используйте [CalendarRange](#!/CalendarRange).
+- Если нужен выбор одной даты, используйте [DateInput](#!/DateInput).
+
 > ⚠️ Данный компонент предназначен для использования на desktop. При использовании на ios/android работа компонента не гарантируется
 
 ```jsx { "props": { "layout": false, "iframe": false } }
@@ -11,6 +14,7 @@ const Example = () => {
   const [disableFuture, setDisableFuture] = useState(false);
   const [disablePickers, setDisablePickers] = useState(false);
   const [closeOnChange, setCloseOnChange] = useState(true);
+  const [disableCalendar, setDisableCalendar] = useState(false);
   const [locale, setLocale] = useState("ru");
 
   return (
@@ -48,6 +52,14 @@ const Example = () => {
             Включено
           </Checkbox>
         </FormItem>
+        <FormItem top="Отключить отображение выпадающего календаря">
+          <Checkbox
+            checked={disableCalendar}
+            onChange={(e) => setDisableCalendar(e.target.checked)}
+          >
+            Включено
+          </Checkbox>
+        </FormItem>
         <FormItem top="Локаль">
           <Select
             style={{ width: 100 }}
@@ -83,6 +95,7 @@ const Example = () => {
                 disableFuture={disableFuture}
                 closeOnChange={closeOnChange}
                 disablePickers={disablePickers}
+                disableCalendar={disableCalendar}
               />
             </LocaleProviderContext.Provider>
           </div>

package/src/components/DropdownIcon/DropdownIcon.tsx

@@ -1,16 +1,30 @@
 import * as React from "react";
-import { Icon20Dropdown, Icon24ChevronDown } from "@vkontakte/icons";
+import {
+  Icon20Dropdown,
+  Icon24ChevronDown,
+  Icon24ChevronUp,
+  Icon20ChevronUp,
+} from "@vkontakte/icons";
+import { classNames } from "../../lib/classNames";
 import { SizeType } from "../AdaptivityProvider/AdaptivityContext";
-import { getClassName } from "../../helpers/getClassName";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { usePlatform } from "../../hooks/usePlatform";
-import "./DropdownIcon.css";
 
-export const DropdownIcon = (props: React.HTMLAttributes<HTMLDivElement>) => {
-  const platform = usePlatform();
+export interface DropdownIconProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  opened?: boolean;
+}
+
+export const DropdownIcon = ({
+  opened = false,
+  ...restProps
+}: DropdownIconProps) => {
   const { sizeY } = useAdaptivity();
 
-  const Icon = sizeY === SizeType.COMPACT ? Icon20Dropdown : Icon24ChevronDown;
+  let Icon = sizeY === SizeType.COMPACT ? Icon20Dropdown : Icon24ChevronDown;
+
+  if (opened) {
+    Icon = sizeY === SizeType.COMPACT ? Icon20ChevronUp : Icon24ChevronUp;
+  }
 
-  return <Icon vkuiClass={getClassName("DropdownIcon", platform)} {...props} />;
+  return <Icon vkuiClass={classNames("DropdownIcon")} {...restProps} />;
 };

package/src/components/Epic/Readme.md

@@ -39,7 +39,8 @@ const Example = withAdaptivity(
                   style={
                     activeStory === "feed"
                       ? {
-                          backgroundColor: "var(--button_secondary_background)",
+                          backgroundColor:
+                            "var(--vkui--color_background_secondary)",
                           borderRadius: 8,
                         }
                       : {}
@@ -55,7 +56,8 @@ const Example = withAdaptivity(
                   style={
                     activeStory === "services"
                       ? {
-                          backgroundColor: "var(--button_secondary_background)",
+                          backgroundColor:
+                            "var(--vkui--color_background_secondary)",
                           borderRadius: 8,
                         }
                       : {}
@@ -71,7 +73,8 @@ const Example = withAdaptivity(
                   style={
                     activeStory === "messages"
                       ? {
-                          backgroundColor: "var(--button_secondary_background)",
+                          backgroundColor:
+                            "var(--vkui--color_background_secondary)",
                           borderRadius: 8,
                         }
                       : {}
@@ -87,7 +90,8 @@ const Example = withAdaptivity(
                   style={
                     activeStory === "clips"
                       ? {
-                          backgroundColor: "var(--button_secondary_background)",
+                          backgroundColor:
+                            "var(--vkui--color_background_secondary)",
                           borderRadius: 8,
                         }
                       : {}
@@ -103,7 +107,8 @@ const Example = withAdaptivity(
                   style={
                     activeStory === "profile"
                       ? {
-                          backgroundColor: "var(--button_secondary_background)",
+                          backgroundColor:
+                            "var(--vkui--color_background_secondary)",
                           borderRadius: 8,
                         }
                       : {}

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