@vkontakte/vkui 4.29.1 → 4.32.0

package/src/components/Tooltip/Readme.md

@@ -48,12 +48,12 @@ class Example extends React.Component {
           <PanelHeader>Tooltip</PanelHeader>
           <Group>
             <List>
-              <Cell>Музыка</Cell>
-              <Cell>Видео</Cell>
-              <Cell>Игры</Cell>
-              <Cell>Закладки</Cell>
-              <Cell>Документы</Cell>
-              <Cell>Денежные переводы</Cell>
+              <SimpleCell>Музыка</SimpleCell>
+              <SimpleCell>Видео</SimpleCell>
+              <SimpleCell>Игры</SimpleCell>
+              <SimpleCell>Закладки</SimpleCell>
+              <SimpleCell>Документы</SimpleCell>
+              <SimpleCell>Денежные переводы</SimpleCell>
             </List>
           </Group>
           <Group>
@@ -64,49 +64,37 @@ class Example extends React.Component {
               onClose={() => this.setState({ tooltip: false })}
               offsetX={10}
             >
-              <Cell onClick={() => this.setState({ activePanel: "tooltip2" })}>
+              <SimpleCell
+                onClick={() => this.setState({ activePanel: "tooltip2" })}
+              >
                 VK Pay
-              </Cell>
+              </SimpleCell>
             </Tooltip>
           </Group>
         </Panel>
 
         <Panel id="tooltip2">
           <PanelHeader
-            left={
-              <PanelHeaderButton
-                onClick={() => this.setState({ activePanel: "tooltip" })}
+            before={
+              <Tooltip
+                isShown={this.state.tooltip2}
+                onClose={() =>
+                  this.setState({ tooltip2: false, tooltip3: true })
+                }
+                text="Нажмите на кнопку, если хотите вернуться"
+                header="Назад"
               >
-                {this.props.platform === ANDROID ||
-                this.props.platform === VKCOM ? (
-                  <Icon24Back />
-                ) : (
-                  <Icon28ChevronBack />
-                )}
-              </PanelHeaderButton>
-            }
-            right={
-              <PanelHeaderButton>
-                <Tooltip
-                  isShown={this.state.tooltip2}
-                  onClose={() =>
-                    this.setState({ tooltip2: false, tooltip3: true })
-                  }
-                  cornerOffset={-10}
-                  offsetX={7}
-                  text="Обновлённый раздел поможет найти друзей"
-                  header="Рекомендации друзей"
-                >
-                  <Icon24Add />
-                </Tooltip>
-              </PanelHeaderButton>
+                <PanelHeaderBack
+                  onClick={() => this.setState({ activePanel: "tooltip" })}
+                />
+              </Tooltip>
             }
           >
             Tooltip
           </PanelHeader>
           <Group>
             <List>
-              <Cell
+              <SimpleCell
                 before={
                   <Tooltip
                     text="Теперь у нас появились аватарки в списках. Правда круто?"
@@ -120,25 +108,25 @@ class Example extends React.Component {
                 description="Веб-сайт"
               >
                 Команда ВКонтакте
-              </Cell>
-              <Cell before={<Avatar />} description="Музыкант">
+              </SimpleCell>
+              <SimpleCell before={<Avatar />} description="Музыкант">
                 Robbie Williams
-              </Cell>
-              <Cell before={<Avatar />} description="Издательский дом">
+              </SimpleCell>
+              <SimpleCell before={<Avatar />} description="Издательский дом">
                 ПостНаука
-              </Cell>
-              <Cell before={<Avatar />} description="Издательский дом">
+              </SimpleCell>
+              <SimpleCell before={<Avatar />} description="Издательский дом">
                 ПостНаука
-              </Cell>
-              <Cell before={<Avatar />} description="Издательский дом">
+              </SimpleCell>
+              <SimpleCell before={<Avatar />} description="Издательский дом">
                 ПостНаука
-              </Cell>
-              <Cell before={<Avatar />} description="Издательский дом">
+              </SimpleCell>
+              <SimpleCell before={<Avatar />} description="Издательский дом">
                 ПостНаука
-              </Cell>
-              <Cell before={<Avatar />} description="Издательский дом">
+              </SimpleCell>
+              <SimpleCell before={<Avatar />} description="Издательский дом">
                 ПостНаука
-              </Cell>
+              </SimpleCell>
             </List>
           </Group>
         </Panel>

package/src/components/Tooltip/Tooltip.tsx

@@ -152,6 +152,9 @@ function isVerticalPlacement(placement: Placement) {
   return placement.startsWith("top") || placement.startsWith("bottom");
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Tooltip
+ */
 const Tooltip: React.FC<TooltipProps> = ({
   children,
   isShown: _isShown,

package/src/components/Touch/Touch.tsx

@@ -63,6 +63,9 @@ export type TouchEventHandler = (e: TouchEvent) => void;
 export type ClickHandler = (e: React.MouseEvent<HTMLElement>) => void;
 export type DragHandler = (e: React.DragEvent<HTMLElement>) => void;
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Touch
+ */
 export const Touch: React.FC<TouchProps> = ({
   onStart,
   onStartX,

package/src/components/Typography/Caption/Caption.tsx

@@ -19,6 +19,9 @@ export interface CaptionProps
 
 const warn = warnOnce("Caption");
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Caption
+ */
 export const Caption: React.FC<CaptionProps> = ({
   children,
   weight,

package/src/components/Typography/Footnote/Footnote.css

@@ -0,0 +1,26 @@
+.Footnote {
+  display: block;
+  margin: 0;
+  font-size: var(--vkui--font_footnote--font_size--regular);
+  line-height: var(--vkui--font_footnote--line_height--regular);
+  font-weight: var(--vkui--font_footnote--font_weight--regular);
+}
+
+.Footnote--caps {
+  font-size: var(--vkui--font_footnote_caps--font_size--regular);
+  line-height: var(--vkui--font_footnote_caps--line_height--regular);
+  font-weight: var(--vkui--font_footnote_caps--font_weight--regular);
+  text-transform: uppercase;
+}
+
+.Footnote--w-1 {
+  font-weight: var(--vkui--font_weight_accent1);
+}
+
+.Footnote--w-2 {
+  font-weight: var(--vkui--font_weight_accent2);
+}
+
+.Footnote--w-3 {
+  font-weight: var(--vkui--font_weight_accent3);
+}

package/src/components/Typography/Footnote/Footnote.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { HasComponent } from "../../../types";
+import { classNames } from "../../../lib/classNames";
+import "./Footnote.css";
+
+export interface FootnoteProps
+  extends React.AllHTMLAttributes<HTMLElement>,
+    HasComponent {
+  /**
+   * Задаёт начертание шрифта отличное от стандартного.
+   */
+  weight?: "1" | "2" | "3";
+  caps?: boolean;
+}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Footnote
+ */
+export const Footnote = ({
+  children,
+  weight,
+  caps,
+  Component = "span",
+  ...restProps
+}: FootnoteProps) => {
+  return (
+    <Component
+      {...restProps}
+      vkuiClass={classNames(
+        "Footnote",
+        caps && "Footnote--caps",
+        weight && `Footnote--w-${weight}`
+      )}
+    >
+      {children}
+    </Component>
+  );
+};

package/src/components/Typography/Footnote/Readme.md

@@ -0,0 +1,18 @@
+```jsx { "props": { "layout": false, "iframe": false } }
+<div style={{ display: "flex", flexDirection: "column", gap: 16, padding: 20 }}>
+  <Footnote>Footnote</Footnote>
+  <Footnote caps>Footnote CAPS</Footnote>
+</div>
+```
+
+## Кастомизация
+
+Есть возможность переопределить жирность.
+
+```jsx { "props": { "layout": false, "iframe": false } }
+<div style={{ display: "flex", flexDirection: "column", gap: 16, padding: 20 }}>
+  <Footnote weight="1">Footnote weight 1</Footnote>
+  <Footnote weight="2">Footnote weight 2</Footnote>
+  <Footnote weight="3">Footnote weight 3</Footnote>
+</div>
+```

package/src/components/Typography/Headline/Headline.css

@@ -1,25 +1,62 @@
 .Headline {
   display: block;
   margin: 0;
-  font-size: 16px;
-  line-height: 20px;
 }
 
+.Headline--l-1 {
+  font-size: var(--vkui--font_headline1--font_size--regular);
+  line-height: var(--vkui--font_headline1--line_height--regular);
+  font-weight: var(--vkui--font_headline1--font_weight--regular);
+}
+
+.Headline--l-2 {
+  font-size: var(--vkui--font_headline2--font_size--regular);
+  line-height: var(--vkui--font_headline2--line_height--regular);
+  font-weight: var(--vkui--font_headline2--font_weight--regular);
+}
+
+/* TODO: новая адаптивность */
+.Headline--sizeY-compact.Headline--l-1 {
+  font-size: var(--vkui--font_headline1--font_size--compact);
+  line-height: var(--vkui--font_headline1--line_height--compact);
+}
+
+.Headline--sizeY-compact.Headline--l-2 {
+  font-size: var(--vkui--font_headline2--font_size--compact);
+  line-height: var(--vkui--font_headline2--line_height--compact);
+}
+
+/* TODO удалить перед релизом 5.0.0 */
 .Headline--w-regular {
   font-weight: 400;
 }
 
+/* TODO удалить перед релизом 5.0.0 */
 .Headline--w-medium {
   font-weight: 500;
 }
 
+/* TODO удалить перед релизом 5.0.0 */
 .Headline--w-semibold {
   font-weight: 600;
 }
 
 /**
  * ANDROID
+ * TODO удалить перед релизом 5.0.0
  */
 .Headline--android.Headline--w-semibold {
   font-weight: 500;
 }
+
+.Headline--w-1 {
+  font-weight: var(--vkui--font_weight_accent1);
+}
+
+.Headline--w-2 {
+  font-weight: var(--vkui--font_weight_accent2);
+}
+
+.Headline--w-3 {
+  font-weight: var(--vkui--font_weight_accent3);
+}

package/src/components/Typography/Headline/Headline.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { HasComponent } from "../../../types";
 import { usePlatform } from "../../../hooks/usePlatform";
+import { useAdaptivity } from "../../../hooks/useAdaptivity";
 import { classNames } from "../../../lib/classNames";
 import { getClassName } from "../../../helpers/getClassName";
 import "./Headline.css";
@@ -8,22 +9,35 @@ import "./Headline.css";
 export interface HeadlineProps
   extends React.AllHTMLAttributes<HTMLElement>,
     HasComponent {
-  weight: "regular" | "medium" | "semibold";
+  /**
+   * Задаёт начертание шрифта отличное от стандартного.
+   *
+   * > ⚠️ Начертания `"semibold"`, `medium` и `"regular"` устарели и будут удалены в 5.0.0. Используйте значения `"1"`, `"2"` и `"3"`.
+   */
+  weight?: "regular" | "medium" | "semibold" | "1" | "2" | "3";
+  level?: "1" | "2";
 }
 
-const Headline: React.FC<HeadlineProps> = ({
+/**
+ * @see https://vkcom.github.io/VKUI/#/Headline
+ */
+export const Headline: React.FC<HeadlineProps> = ({
   children,
-  weight = "regular",
-  Component = "h3",
+  weight = "3",
+  level = "1",
+  Component = "h3", // TODO: v5 h4
   ...restProps
 }: HeadlineProps) => {
   const platform = usePlatform();
+  const { sizeY } = useAdaptivity();
 
   return (
     <Component
       {...restProps}
       vkuiClass={classNames(
-        getClassName("Headline", platform),
+        getClassName("Headline", platform), // TODO: v5 remove
+        `Headline--sizeY-${sizeY}`, // TODO: новая адаптивность
+        `Headline--l-${level}`,
         `Headline--w-${weight}`
       )}
     >
@@ -31,6 +45,3 @@ const Headline: React.FC<HeadlineProps> = ({
     </Component>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default Headline;

package/src/components/Typography/Headline/Readme.md

@@ -1,24 +1,26 @@
-Упрощения в Android-версии (происходят автоматически):
+```jsx { "props": { "layout": false, "iframe": false } }
+<div style={{ padding: 20 }}>
+  <Headline level="1" style={{ marginBottom: 16 }}>
+    Headline 1
+  </Headline>
+  <Headline level="2">Headline 2</Headline>
+</div>
+```
+
+## Кастомизация
 
-- `semibold` превращается в `medium`
+Есть возможность переопределить жирность.
 
-```jsx
-<View activePanel="test">
-  <Panel id="test">
-    <PanelHeader>Headline</PanelHeader>
-    <Group>
-      <Div>
-        <Headline weight="regular" style={{ marginBottom: 16 }}>
-          Headline regular
-        </Headline>
-        <Headline weight="medium" style={{ marginBottom: 16 }}>
-          Headline medium
-        </Headline>
-        <Headline weight="semibold" style={{ marginBottom: 16 }}>
-          Headline semibold
-        </Headline>
-      </Div>
-    </Group>
-  </Panel>
-</View>
+```jsx { "props": { "layout": false, "iframe": false } }
+<div style={{ padding: 20 }}>
+  <Headline level="2" weight="1" style={{ marginBottom: 16 }}>
+    Headline 2 weight 1
+  </Headline>
+  <Headline level="2" weight="2" style={{ marginBottom: 16 }}>
+    Headline 2 weight 2
+  </Headline>
+  <Headline level="2" weight="3">
+    Headline 2 weight 3
+  </Headline>
+</div>
 ```

package/src/components/Typography/Paragraph/Paragraph.tsx

@@ -15,6 +15,10 @@ export interface ParagraphProps
 }
 
 const warn = warnOnce("Paragraph");
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Paragraph
+ */
 export const Paragraph: React.FC<ParagraphProps> = ({
   Component = "span",
   getRootRef,

package/src/components/Typography/Subhead/Subhead.tsx

@@ -17,6 +17,10 @@ export interface SubheadProps
 }
 
 const warn = warnOnce("Subhead");
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Subhead
+ */
 export const Subhead: React.FC<SubheadProps> = ({
   children,
   weight,

package/src/components/Typography/Text/Readme.md

@@ -1,22 +1,19 @@
-Упрощения в Android-версии (происходят автоматически):
+```jsx { "props": { "layout": false, "iframe": false } }
+<div style={{ padding: 20 }}>
+  <Text>Text</Text>
+</div>
+```
+
+## Кастомизация
 
-- `semibold` превращается в `medium`
+Есть возможность переопределить жирность.
 
-```jsx
-<View activePanel="test">
-  <Panel id="test">
-    <PanelHeader>Text</PanelHeader>
-    <Group>
-      <Div>
-        <Text weight="regular" style={{ marginBottom: 16 }}>
-          Text regular
-        </Text>
-        <Text weight="medium" style={{ marginBottom: 16 }}>
-          Text medium
-        </Text>
-        <Text weight="semibold">Text semibold</Text>
-      </Div>
-    </Group>
-  </Panel>
-</View>
+```jsx { "props": { "layout": false, "iframe": false } }
+<div style={{ padding: 20 }}>
+  <Text weight="1">Text weight 1</Text>
+  <Spacing size={16} />
+  <Text weight="2">Text weight 2</Text>
+  <Spacing size={16} />
+  <Text weight="3">Text weight 3</Text>
+</div>
 ```

package/src/components/Typography/Text/Text.css

@@ -1,25 +1,40 @@
 .Text {
   display: block;
   margin: 0;
-  font-size: 15px;
-  line-height: 20px;
+  font-size: var(--vkui--font_text--font_size--regular);
+  line-height: var(--vkui--font_text--line_height--regular);
+  font-weight: var(--vkui--font_text--font_weight--regular);
 }
 
+/* TODO v5.0.0 перевести на новую адаптивность */
+.Text--sizeY-compact {
+  font-size: var(--vkui--font_text--font_size--compact);
+  line-height: var(--vkui--font_text--line_height--compact);
+}
+
+/* TODO удалить перед релизом 5.0.0 */
 .Text--w-regular {
   font-weight: 400;
 }
 
+/* TODO удалить перед релизом 5.0.0 */
 .Text--w-medium {
   font-weight: 500;
 }
 
+/* TODO удалить перед релизом 5.0.0 */
 .Text--w-semibold {
   font-weight: 600;
 }
 
-/**
- * ANDROID
- */
-.Text--android.Text--w-semibold {
-  font-weight: 500;
+.Text--w-1 {
+  font-weight: var(--vkui--font_weight_accent1);
+}
+
+.Text--w-2 {
+  font-weight: var(--vkui--font_weight_accent2);
+}
+
+.Text--w-3 {
+  font-weight: var(--vkui--font_weight_accent3);
 }

package/src/components/Typography/Text/Text.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
-import { usePlatform } from "../../../hooks/usePlatform";
+import { useAdaptivity } from "../../../hooks/useAdaptivity";
 import { classNames } from "../../../lib/classNames";
-import { getClassName } from "../../../helpers/getClassName";
 import { HasComponent, HasRootRef } from "../../../types";
 import { warnOnce } from "../../../lib/warnOnce";
 import "./Text.css";
@@ -10,19 +9,25 @@ export interface TextProps
   extends React.AllHTMLAttributes<HTMLElement>,
     HasRootRef<HTMLElement>,
     HasComponent {
-  weight: "regular" | "medium" | "semibold";
+  /**
+   * Задаёт начертание шрифта, отличное от стандартного.
+   *
+   * > ⚠️ Начертания `"semibold"`, `medium` и `"regular"` устарели и будут удалены в 5.0.0. Используйте значения `"1"`, `"2"` и `"3"`.
+   */
+  weight?: "regular" | "medium" | "semibold" | "1" | "2" | "3";
 }
 
 const warn = warnOnce("Text");
-const Text: React.FC<TextProps> = ({
+/**
+ * @see https://vkcom.github.io/VKUI/#/Text
+ */
+export const Text: React.FC<TextProps> = ({
   children,
-  weight = "regular",
+  weight,
   Component = "span",
   getRootRef,
   ...restProps
 }: TextProps) => {
-  const platform = usePlatform();
-
   if (
     process.env.NODE_ENV === "development" &&
     typeof Component !== "string" &&
@@ -34,19 +39,30 @@ const Text: React.FC<TextProps> = ({
     );
   }
 
+  if (
+    process.env.NODE_ENV === "development" &&
+    weight &&
+    ["semibold", "medium", "regular"].includes(weight)
+  ) {
+    warn(
+      `Начертание weight="${weight}" устарело и будет удалено в 5.0.0. Используйте значения "1", "2" и "3"`
+    );
+  }
+
+  const { sizeY } = useAdaptivity();
+
   return (
     <Component
       {...restProps}
       ref={getRootRef}
       vkuiClass={classNames(
-        getClassName("Text", platform),
-        `Text--w-${weight}`
+        "Text",
+        // TODO v5.0.0 перевести на новую адаптивность
+        `Text--sizeY-${sizeY}`,
+        weight && `Text--w-${weight}`
       )}
     >
       {children}
     </Component>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default Text;

package/src/components/Typography/Title/Title.tsx

@@ -25,6 +25,10 @@ export interface TitleProps
 }
 
 const warn = warnOnce("Title");
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Title
+ */
 export const Title: React.FC<TitleProps> = ({
   children,
   weight,

package/src/components/UsersStack/UsersStack.tsx

@@ -30,6 +30,9 @@ export interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {
   visibleCount?: number;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/UsersStack
+ */
 const UsersStack: React.FC<UsersStackProps> = (props: UsersStackProps) => {
   const platform = usePlatform();
   const {

package/src/components/View/View.tsx

@@ -106,6 +106,10 @@ export interface ViewState {
 }
 
 const warn = warnOnce("View");
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/View
+ */
 class View extends React.Component<ViewProps & DOMProps, ViewState> {
   constructor(props: ViewProps) {
     super(props);

package/src/components/WriteBar/WriteBar.tsx

@@ -31,6 +31,9 @@ export interface WriteBarProps
   children?: never;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/WriteBar
+ */
 export const WriteBar: React.FC<WriteBarProps> = (props: WriteBarProps) => {
   const platform = usePlatform();
   const {

package/src/components/WriteBarIcon/WriteBarIcon.tsx

@@ -11,7 +11,7 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
 import { IOS } from "../../lib/platform";
-import Counter from "../Counter/Counter";
+import { Counter } from "../Counter/Counter";
 import Tappable from "../Tappable/Tappable";
 import { warnOnce } from "../../lib/warnOnce";
 import { hasReactNode } from "../../lib/utils";
@@ -37,6 +37,9 @@ export interface WriteBarIconProps
 const warn = warnOnce("WriteBarIcon");
 const IS_DEV = process.env.NODE_ENV === "development";
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/WriteBarIcon
+ */
 export const WriteBarIcon: React.FC<WriteBarIconProps> = ({
   mode,
   children,