@vkontakte/vkui 4.33.4 → 4.34.2

package/src/components/IconButton/IconButton.css

@@ -17,6 +17,13 @@
   border-radius: 9999px;
 }
 
+/**
+ * TODO v5.0.0 поправить под новую адаптивность
+ */
+.IconButton--sizeY-compact {
+  height: 44px;
+}
+
 .IconButton[disabled] {
   opacity: var(--vkui--opacity_disable_accessibility);
 }
@@ -33,14 +40,42 @@
   padding: 16px 14px;
 }
 
+/**
+ * TODO v5.0.0 поправить под новую адаптивность
+ */
+.IconButton--sizeY-compact .Icon--16,
+.IconButton--sizeY-compact .Icon--16.Icon--w-8 {
+  padding: 14px;
+}
+
 .IconButton .Icon--24 {
   padding: 12px;
 }
 
+/**
+ * TODO v5.0.0 поправить под новую адаптивность
+ */
+.IconButton--sizeY-compact .Icon--24 {
+  padding: 10px;
+}
+
 .IconButton .Icon--28 {
   padding: 10px;
 }
 
+/**
+ * TODO v5.0.0 поправить под новую адаптивность
+ */
+.IconButton--sizeY-compact .Icon--28 {
+  padding: 8px;
+}
+
+/**
+ * CMP:
+ * - FormItem
+ * - FormLayoutGroup
+ * - FormField
+ */
 .FormItem--removable .Removable__content > .IconButton,
 .FormLayoutGroup--removable .Removable__content > .IconButton,
 .FormField__after .IconButton {
@@ -48,41 +83,27 @@
   align-items: center;
   align-content: center;
   justify-content: center;
-  width: 44px;
-  height: 44px;
-  border-radius: inherit;
+  width: var(--vkui--size_field_height--regular);
+  height: var(--vkui--size_field_height--regular);
+  border-radius: var(--vkui--size_border_radius--regular);
 }
 
 .FormField__after .IconButton .Icon.Icon.Icon {
   padding: 0;
 }
 
-/*
- * sizeY: COMPACT
+/**
+ * TODO v5.0.0 поправить под новую адаптивность
  */
-.IconButton--sizeY-compact {
-  height: 44px;
-}
-
 .FormField__after .IconButton--sizeY-compact {
-  width: 36px;
-  height: 36px;
+  width: var(--vkui--size_field_height--compact);
+  height: var(--vkui--size_field_height--compact);
 }
 
+/**
+ * TODO v5.0.0 поправить под новую адаптивность
+ */
 .FormItem--removable .Removable__content > .IconButton--sizeY-compact,
 .FormLayoutGroup--removable .Removable__content > .IconButton--sizeY-compact {
-  height: 36px;
-}
-
-.IconButton--sizeY-compact .Icon--16,
-.IconButton--sizeY-compact .Icon--16.Icon--w-8 {
-  padding: 14px;
-}
-
-.IconButton--sizeY-compact .Icon--24 {
-  padding: 10px;
-}
-
-.IconButton--sizeY-compact .Icon--28 {
-  padding: 8px;
+  height: var(--vkui--size_field_height--compact);
 }

package/src/components/InfoRow/InfoRow.tsx

@@ -11,11 +11,7 @@ export interface InfoRowProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/InfoRow
  */
-export const InfoRow: React.FunctionComponent<InfoRowProps> = ({
-  header,
-  children,
-  ...restProps
-}: InfoRowProps) => (
+export const InfoRow = ({ header, children, ...restProps }: InfoRowProps) => (
   <Headline {...restProps} vkuiClass="InfoRow" weight="3">
     {hasReactNode(header) && (
       <Subhead Component="span" vkuiClass="InfoRow__header">

package/src/components/InitialsAvatar/Readme.md

@@ -1,7 +1,7 @@
 Компонент для отображения текстовых аватаров на фоне градиента (например, когда у пользователя нет установленного изображения).
 Для лучшего отображения, рекомендуется использовать длину текста <b>не более 2 символов</b>.
 
-ВКонтакте использует формулу `user_id % 6 + 1` (см. функцию [`calcInitialsAvatarColor`](#/Utils)) для определения градиента пользователя. Например, у пользователя c id 106 будет 5-й (`l-blue`) цвет градиента.
+ВКонтакте использует формулу `user_id % 6 + 1` (см. функцию [`calcInitialsAvatarColor`](https://vkcom.github.io/VKUI/#/Utils)) для определения градиента пользователя. Например, у пользователя c id 106 будет 5-й (`l-blue`) цвет градиента.
 
 ```jsx { "props": { "layout": false, "iframe": false } }
 <div style={{ display: "flex", padding: 12, gap: 8, flexFlow: "row wrap" }}>

package/src/components/Input/Input.css

@@ -21,22 +21,31 @@
   border: none;
   appearance: none;
   text-overflow: ellipsis;
-  height: 42px;
-  line-height: 20px;
-  font-size: 16px;
+  font-weight: var(--vkui--font_text--font_weight--regular);
+  font-size: var(--vkui--font_text--font_size--regular);
+  line-height: var(--vkui--font_text--line_height--regular);
   color: var(--text_primary, var(--vkui--color_text_primary));
-  padding: 11px;
+  padding-right: 12px;
+  padding-left: 12px;
   position: relative;
   z-index: 2;
   background: transparent;
 }
 
+/**
+ * TODO v5.0.0 поправить под новую адаптивность
+ */
 .Input--sizeY-compact .Input__el {
-  height: 34px;
-  padding-top: 9px;
-  padding-bottom: 9px;
-  line-height: 20px;
-  font-size: 15px;
+  font-size: var(--vkui--font_text--font_size--compact);
+  line-height: var(--vkui--font_text--line_height--compact);
+}
+
+.Input--hasBefore .Input__el {
+  padding-left: 0;
+}
+
+.Input--hasAfter .Input__el {
+  padding-right: 0;
 }
 
 .Input__el:disabled {

package/src/components/Input/Input.tsx

@@ -1,10 +1,8 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { FormField, FormFieldProps } from "../FormField/FormField";
 import { HasAlign, HasRef, HasRootRef } from "../../types";
 import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
-import { usePlatform } from "../../hooks/usePlatform";
 import "./Input.css";
 
 export interface InputProps
@@ -15,7 +13,7 @@ export interface InputProps
     AdaptivityProps,
     FormFieldProps {}
 
-const InputComponent: React.FunctionComponent<InputProps> = ({
+const InputComponent = ({
   type = "text",
   align,
   getRef,
@@ -27,13 +25,14 @@ const InputComponent: React.FunctionComponent<InputProps> = ({
   after,
   ...restProps
 }: InputProps) => {
-  const platform = usePlatform();
   return (
     <FormField
       vkuiClass={classNames(
-        getClassName("Input", platform),
+        "Input",
         !!align && `Input--${align}`,
-        `Input--sizeY-${sizeY}`
+        `Input--sizeY-${sizeY}`, // TODO v5.0.0 поправить под новую адаптивность
+        before && "Input--hasBefore",
+        after && "Input--hasAfter"
       )}
       style={style}
       className={className}
@@ -53,3 +52,5 @@ const InputComponent: React.FunctionComponent<InputProps> = ({
 export const Input = withAdaptivity(InputComponent, {
   sizeY: true,
 });
+
+Input.displayName = "Input";

package/src/components/Input/Readme.md

@@ -1,34 +1,77 @@
 Надстройка над `<input type="text" />`. Компонент принимает все валидные для этого элемента свойства.
 
-```jsx
-const textInput = React.createRef();
-const clear = () => (textInput.current.value = "");
-
-<View activePanel="input">
-  <Panel id="input">
-    <PanelHeader>Input</PanelHeader>
-    <Group>
-      <FormItem top="Фамилия">
-        <Input type="text" defaultValue="Петров" />
-      </FormItem>
-      <FormItem>
-        <Input type="text" defaultValue="Иванов" align="center" />
-      </FormItem>
-      <FormItem>
-        <Input type="text" defaultValue="Сидоров" align="right" />
+```jsx { "props": { "layout": false, "iframe": false } }
+const ExampleBase = ({ formItemStatus }) => {
+  const [before, setBefore] = useState(undefined);
+  const [after, setAfter] = useState(undefined);
+  const [align, setAlign] = useState("left");
+  const [disabled, setDisabled] = useState(false);
+
+  return (
+    <FormLayout>
+      <FormItem top="align">
+        <Select
+          value={align}
+          onChange={(e) => setAlign(e.target.value)}
+          options={[
+            { label: "left", value: "left" },
+            { label: "center", value: "center" },
+            { label: "right", value: "right" },
+          ]}
+        />
       </FormItem>
-      <FormItem top="С иконкой">
+      <Checkbox
+        description="Icon24WalletOutline for example"
+        checked={!!before}
+        onChange={(e) =>
+          e.target.checked
+            ? setBefore(<Icon24WalletOutline />)
+            : setBefore(undefined)
+        }
+      >
+        before
+      </Checkbox>
+      <Checkbox
+        description="Icon20User for example"
+        checked={!!after}
+        onChange={(e) =>
+          e.target.checked ? setAfter(<Icon20User />) : setAfter(undefined)
+        }
+      >
+        after
+      </Checkbox>
+      <Checkbox
+        checked={disabled}
+        onChange={(e) => setDisabled(e.target.checked)}
+      >
+        disabled
+      </Checkbox>
+      <FormItem top="📝 Пример" status={formItemStatus}>
         <Input
+          before={before}
+          after={after}
           type="text"
-          defaultValue="Смирнов"
-          after={<Icon20User aria-hidden="true" />}
+          align={align}
+          defaultValue="Lorem ipsum dolor sit amet"
+          disabled={disabled}
         />
       </FormItem>
-      <FormItem top="С IconButton">
+    </FormLayout>
+  );
+};
+
+const ExampleWithIcon = ({ formItemStatus }) => {
+  const textInput = React.createRef();
+  const clear = () => (textInput.current.value = "");
+
+  return (
+    <FormLayout>
+      <FormItem top="📝 Пример с кликабельной иконкой" status={formItemStatus}>
         <Input
           getRef={textInput}
           type="text"
-          defaultValue="Кузнецов"
+          placeholder="Ну ведь брокколи это вкусно и полезно 😢"
+          defaultValue="Брокколи 🥦"
           after={
             <IconButton
               hoverMode="opacity"
@@ -40,7 +83,68 @@ const clear = () => (textInput.current.value = "");
           }
         />
       </FormItem>
-    </Group>
-  </Panel>
-</View>;
+    </FormLayout>
+  );
+};
+
+const Example = () => {
+  const [sizeY, setSizeY] = useState("regular");
+  const [formItemStatus, setFormItemStatus] = useState("default");
+
+  return (
+    <AdaptivityProvider sizeY={sizeY}>
+      <div style={rootContainerStyles}>
+        <div style={demoContainerStyles}>
+          <ExampleBase formItemStatus={formItemStatus} />
+          <Spacing size={16} />
+          <Separator />
+          <Spacing size={16} />
+          <ExampleWithIcon formItemStatus={formItemStatus} />
+        </div>
+
+        <div style={propsContainerStyles}>
+          <FormItem top="AdaptivityProvider[sizeY]">
+            <Select
+              value={sizeY}
+              onChange={(e) => setSizeY(e.target.value)}
+              options={[
+                { label: "compact", value: "compact" },
+                { label: "regular", value: "regular" },
+              ]}
+            />
+          </FormItem>
+          <FormItem top="FormItem[status]">
+            <Select
+              value={formItemStatus}
+              onChange={(e) => setFormItemStatus(e.target.value)}
+              options={[
+                { label: "default", value: "default" },
+                { label: "error", value: "error" },
+                { label: "valid", value: "valid" },
+              ]}
+            />
+          </FormItem>
+        </div>
+      </div>
+    </AdaptivityProvider>
+  );
+};
+
+const rootContainerStyles = {
+  display: "flex",
+  flexDirection: "row-reverse",
+  flexWrap: "wrap",
+};
+
+const demoContainerStyles = {
+  flexGrow: 2,
+  minWidth: 320,
+};
+
+const propsContainerStyles = {
+  minWidth: 200,
+  marginRight: "auto",
+};
+
+<Example />;
 ```

package/src/components/InputLike/InputLike.tsx

@@ -28,7 +28,7 @@ function getMaskElements(length: number) {
   return result;
 }
 
-export const InputLike: React.FC<InputLikeProps> = ({
+export const InputLike = ({
   value,
   length,
   index,
@@ -37,7 +37,7 @@ export const InputLike: React.FC<InputLikeProps> = ({
   onFocus,
   getRootRef,
   ...props
-}) => {
+}: InputLikeProps) => {
   const handleElementSelect = React.useCallback(
     (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
       stopPropagation(event);

package/src/components/InputLike/InputLikeDivider.tsx

@@ -1,9 +1,10 @@
 import * as React from "react";
 import "./InputLikeDivider.css";
 
-export const InputLikeDivider: React.FC<
-  React.InputHTMLAttributes<HTMLSpanElement>
-> = ({ children, ...props }) => {
+export const InputLikeDivider = ({
+  children,
+  ...props
+}: React.InputHTMLAttributes<HTMLSpanElement>) => {
   return (
     <span vkuiClass="InputLikeDivider" {...props}>
       {children}

package/src/components/Link/Link.css

@@ -1,5 +1,5 @@
 .Link {
-  color: var(--accent);
+  color: var(--accent, var(--vkui--color_text_link));
   text-decoration: none;
   border: 0;
   background: none;
@@ -11,6 +11,26 @@
   border-radius: 0;
 }
 
+@media (hover: hover) {
+  .Link:hover {
+    text-decoration: underline;
+  }
+}
+
+.Link--focus-visible {
+  /**
+   * На момент v4.33.0, реализация <FocusVisible /> не подошла, т.к. текст может быть многострочным.
+   * Поэтому используем свой класс и применяем `outline`.
+   *
+   * `!important` – чтобы перебить глобальное обнуление `outline` на `:focus`.
+   */
+  outline: 2px solid var(--accent, var(--vkui--color_stroke_accent)) !important;
+}
+
+.Link--has-visited:visited {
+  color: var(--vkui--color_text_link_visited);
+}
+
 .Link .Icon {
   margin-left: 4px;
   display: inline-block;

package/src/components/Link/Link.tsx

@@ -1,28 +1,26 @@
-import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
+import { classNames } from "../../lib/classNames";
 import { TappableProps, Tappable } from "../Tappable/Tappable";
 import "./Link.css";
 
-export type LinkProps = TappableProps;
+export interface LinkProps extends TappableProps {
+  /**
+   * Включает состояние `visited`, которое позволяет пользователю понять посещал ли он ссылку или нет
+   */
+  hasVisited?: boolean;
+}
 
 /**
  * @see https://vkcom.github.io/VKUI/#/Link
  */
-export const Link: React.FC<LinkProps> = ({
-  children,
-  ...restProps
-}: LinkProps) => {
-  const platform = usePlatform();
-
+export const Link = ({ hasVisited, children, ...restProps }: LinkProps) => {
   return (
     <Tappable
       Component={restProps.href ? "a" : "button"}
       {...restProps}
-      vkuiClass={getClassName("Link", platform)}
-      hasActive={false}
-      hoverMode="opacity"
-      focusVisibleMode="outside"
+      vkuiClass={classNames("Link", hasVisited && "Link--has-visited")}
+      hasHover={false}
+      activeMode="opacity"
+      focusVisibleMode="Link--focus-visible"
     >
       {children}
     </Tappable>

package/src/components/Link/Readme.md

@@ -1,8 +1,40 @@
 Надстройка над `<a />`. Компонент принимает все валидные для этого элемента свойства.
 
-```jsx static
-import { Link } from '@vkontakte/vkui';
+Все типографические свойства наследуются от родителя, а именно:
 
-<Link href="https://google.com" target="_blank">Google</Link>
-<Link href="/profile">Profile</Link>
+- семейство шрифта
+- размер шрифта
+- межстрочное расстояние
+- межбуквенное расстояние
+- вес шрифта
+
+```jsx { "props": { "layout": false, "iframe": false } }
+<div
+  style={{
+    padding: 24,
+  }}
+>
+  <Link href="#/About">О VKUI</Link>
+
+  <Spacing size={24} />
+
+  <Link href="https://google.com" target="_blank">
+    https://google.com <Icon24ExternalLinkOutline width={16} height={16} />
+  </Link>
+
+  <Spacing size={24} />
+
+  <div style={{ width: 304 }}>
+    Нажимая «Продолжить», вы принимаете{" "}
+    <Link href="#">пользовательское соглашение</Link> и{" "}
+    <Link href="#">политику конфиденциальности</Link>.
+  </div>
+
+  <Spacing size={24} />
+
+  <Link href="#/Link" hasVisited>
+    Если посетить эту ссылку, то она будет использовать состояние
+    <code>visited</code>
+  </Link>
+</div>
 ```

package/src/components/List/List.tsx

@@ -1,27 +1,22 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
 import { ListContext } from "./ListContext";
 import "./List.css";
 
 /**
  * @see https://vkcom.github.io/VKUI/#/List
  */
-export const List: React.FunctionComponent<
-  React.HTMLAttributes<HTMLDivElement>
-> = ({ children, ...restProps }: React.HTMLAttributes<HTMLDivElement>) => {
-  const platform = usePlatform();
+export const List = ({
+  children,
+  ...restProps
+}: React.HTMLAttributes<HTMLDivElement>) => {
   const [isDragging, toggleDrag] = React.useState(false);
 
   return (
     <div
       role="list"
       {...restProps}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames(getClassName("List", platform), {
-        "List--dragging": isDragging,
-      })}
+      vkuiClass={classNames("List", isDragging && "List--dragging")}
     >
       <ListContext.Provider value={React.useMemo(() => ({ toggleDrag }), [])}>
         {children}

package/src/components/MiniInfoCell/MiniInfoCell.css

@@ -1,19 +1,19 @@
 .MiniInfoCell {
   display: flex;
-  padding: 6px 12px;
+  padding: 6px var(--vkui--size_base_padding_horizontal--regular);
 }
 
 .MiniInfoCell--lvl-primary {
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
 }
 
 .MiniInfoCell--lvl-secondary {
-  color: var(--text_subhead);
+  color: var(--text_subhead, var(--vkui--color_text_subhead));
 }
 
 .MiniInfoCell__icon {
   margin-right: 12px;
-  color: var(--icon_outline_secondary);
+  color: var(--icon_outline_secondary, var(--vkui--color_icon_medium));
 }
 
 .MiniInfoCell__content {
@@ -45,23 +45,15 @@
 
 .MiniInfoCell--md-add,
 .MiniInfoCell--md-add .MiniInfoCell__icon {
-  color: var(--accent);
+  color: var(--accent, var(--vkui--color_icon_accent));
 }
 
 .MiniInfoCell--md-more,
 .MiniInfoCell--md-more .MiniInfoCell__icon {
-  color: var(--link_alternate);
+  color: var(--link_alternate, var(--vkui--color_icon_accent));
 }
 
 .MiniInfoCell--md-more {
   padding-top: 10px;
   padding-bottom: 10px;
 }
-
-/**
- * ANDROID
- */
-.MiniInfoCell--android {
-  padding-left: 16px;
-  padding-right: 16px;
-}