@vkontakte/vkui 4.30.0 → 4.33.0

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

@@ -53,7 +53,6 @@
             getAvatarUrl("user_xyz"),
           ]}
           size="m"
-          count={3}
           layout="vertical"
         >
           Алексей, Илья, Михаил

package/src/components/UsersStack/UsersStack.css

@@ -1,27 +1,30 @@
 .UsersStack {
   display: flex;
   align-items: center;
-  color: var(--text_secondary);
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
 }
 
 .UsersStack__photos {
   display: flex;
 }
 
-.UsersStack__photo {
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  border-radius: 50%;
-  background-color: var(--placeholder_icon_background);
+.UsersStack__fill {
+  fill: var(
+    --placeholder_icon_background,
+    var(--vkui--color_image_placeholder_alpha)
+  );
 }
 
 .UsersStack__photo--others {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #fff;
-  background: var(--content_placeholder_icon);
+  color: var(--vkui--color_icon_contrast_secondary);
+  background: var(
+    --content_placeholder_icon,
+    var(--vkui--color_icon_secondary)
+  );
+  border-radius: 50%;
 }
 
 .UsersStack--size-xs .UsersStack__photo {
@@ -43,27 +46,6 @@
   margin-left: -2px;
 }
 
-.UsersStack--size-xs .UsersStack__photo + .UsersStack__photo {
-  margin-left: -1px;
-  clip-path: url(#users_stack_mask_16_left);
-}
-
-.UsersStack--size-s .UsersStack__photo + .UsersStack__photo {
-  clip-path: url(#users_stack_mask_24_left);
-}
-
-.UsersStack--size-m .UsersStack__photo + .UsersStack__photo {
-  clip-path: url(#users_stack_mask_32_left);
-}
-
-.UsersStack--size-m.UsersStack--others .UsersStack__photo {
-  clip-path: url(#users_stack_mask_32_right);
-}
-
-.UsersStack--size-m.UsersStack--others .UsersStack__photo:last-child {
-  clip-path: none;
-}
-
 .UsersStack__text {
   min-width: 0;
   flex: 1;

package/src/components/UsersStack/UsersStack.tsx

@@ -1,11 +1,9 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
 import { classNames } from "../../lib/classNames";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { Footnote } from "../Typography/Footnote/Footnote";
 import { Caption } from "../Typography/Caption/Caption";
-import { Subhead } from "../Typography/Subhead/Subhead";
 import { createMasks } from "./masks";
 import { useDOM } from "../../lib/dom";
 import "./UsersStack.css";
@@ -18,7 +16,7 @@ export interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Размер аватарок
    */
-  size?: "xs" | "s" | "m";
+  size?: "xs" | "s" | "m"; // TODO: "s" | "m" | "l"
   /**
    * Вертикальный режим рекомендуется использовать с размером `m`
    */
@@ -30,16 +28,17 @@ export interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {
   visibleCount?: number;
 }
 
-const UsersStack: React.FC<UsersStackProps> = (props: UsersStackProps) => {
-  const platform = usePlatform();
-  const {
-    photos = [],
-    visibleCount = 0,
-    size,
-    layout,
-    children,
-    ...restProps
-  } = props;
+/**
+ * @see https://vkcom.github.io/VKUI/#/UsersStack
+ */
+export const UsersStack = ({
+  photos = [],
+  visibleCount = 3,
+  size = "s",
+  layout = "horizontal",
+  children,
+  ...restProps
+}: UsersStackProps) => {
   const { document } = useDOM();
 
   useIsomorphicLayoutEffect(() => {
@@ -47,57 +46,67 @@ const UsersStack: React.FC<UsersStackProps> = (props: UsersStackProps) => {
   }, [document]);
 
   const othersCount = Math.max(0, photos.length - visibleCount);
-  const canShowOthers = othersCount > 0 && size === "m";
+  const canShowOthers = othersCount > 0 && size !== "xs";
+  const CounterTypography = size === "m" ? Footnote : Caption;
+
+  const photoSize = {
+    xs: 16,
+    s: 24,
+    m: 32,
+  }[size];
+  const directionClip = canShowOthers ? "right" : "left";
 
   const photosShown = photos.slice(0, visibleCount);
 
   return (
     <div
       {...restProps}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
-        getClassName("UsersStack", platform),
+        "UsersStack",
         `UsersStack--size-${size}`,
         `UsersStack--l-${layout}`,
-        {
-          "UsersStack--others": canShowOthers,
-        }
+        canShowOthers && "UsersStack--others"
       )}
     >
       <div vkuiClass="UsersStack__photos" role="presentation">
-        {photosShown.map((photo, i) => (
-          <div
-            key={i}
-            vkuiClass="UsersStack__photo"
-            style={{ backgroundImage: `url(${photo})` }}
-          />
-        ))}
+        {photosShown.map((photo, i) => {
+          const direction =
+            i === 0 && !canShowOthers ? "circle" : directionClip;
+
+          const pathHref = `#users_stack_${photoSize}_${direction}`;
+          const clipPathHref = `url(#users_stack_mask_${photoSize}_${direction})`;
+
+          return (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              vkuiClass="UsersStack__photo"
+              key={i}
+              aria-hidden
+            >
+              <g clipPath={clipPathHref}>
+                <use vkuiClass="UsersStack__fill" href={pathHref} />
+                <image href={photo} width={photoSize} height={photoSize} />
+                <use href={pathHref} fill="none" stroke="rgba(0, 0, 0, 0.08)" />
+              </g>
+            </svg>
+          );
+        })}
 
         {canShowOthers && (
-          <Caption
+          <CounterTypography
+            caps
             weight="1"
+            level="2" // TODO: remove only level in #2343
             vkuiClass="UsersStack__photo UsersStack__photo--others"
-            aria-hidden="true"
+            aria-hidden
           >
             <span>+{othersCount}</span>
-          </Caption>
+          </CounterTypography>
         )}
       </div>
       {hasReactNode(children) && (
-        <Subhead Component="span" vkuiClass="UsersStack__text">
-          {children}
-        </Subhead>
+        <Footnote vkuiClass="UsersStack__text">{children}</Footnote>
       )}
     </div>
   );
 };
-
-UsersStack.defaultProps = {
-  photos: [],
-  size: "s",
-  visibleCount: 3,
-  layout: "horizontal",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default React.memo(UsersStack);

package/src/components/UsersStack/masks.tsx

@@ -20,24 +20,47 @@ export function createMasks(document?: Document): void {
   svgElement.style.height = "0px";
 
   svgElement.innerHTML = `<defs>
+  <path id="users_stack_16_left" d="M2,13.285A8 8 0 0 0 8 16A8 8 0 0 0 8 0A8 8 0 0 0 2 2.715A8 8 0 0 1 2,13.285" />
+  <circle id="users_stack_16_circle" cx="8" cy="8" r="8" />
+  
+  <path id="users_stack_24_left" d="M2,18.625A12 12 0 0 0 12 24A12 12 0 0 0 12 0A12 12 0 0 0 2 5.375A12 12 0 0 1 2,18.625" />
+  <circle id="users_stack_24_circle" cx="12" cy="12" r="12" />
+  <path id="users_stack_24_right" d="M22,18.625A12 12 0 0 1 12 24A12 12 0 0 1 12 0A12 12 0 0 1 22 5.375A12 12 0 0 0 22,18.625" />
+
+  <path id="users_stack_32_left" d="M2,23.75A16 16 0 0 0 16 32A16 16 0 0 0 16 0A16 16 0 0 0 2 8.25A16 16 0 0 1 2,23.75" />
+  <circle id="users_stack_32_circle" cx="16" cy="16" r="16" />
+  <path id="users_stack_32_right" d="M30,23.75A16 16 0 0 1 16 32A16 16 0 0 1 16 0A16 16 0 0 1 30 8.25A16 16 0 0 0 30,23.75" />
+
   <clipPath id="users_stack_mask_16_left">
-    <path transform="translate(1.5 0)" d="M1.20772 8C1.20772 6.32671 0.768742 4.75626 0 3.39821C1.44342 1.34278 3.8277 0 6.52463 0C10.9293 0 14.5 3.58172 14.5 8C14.5 12.4183 10.9293 16 6.52463 16C3.8277 16 1.44342 14.6572 0 12.6018C0.768742 11.2437 1.20772 9.6733 1.20772 8Z"></path>
+    <use href="#users_stack_16_left"/>
+  </clipPath>
+
+  <clipPath id="users_stack_mask_16_circle">
+    <use href="#users_stack_16_circle"/>
   </clipPath>
 
   <clipPath id="users_stack_mask_24_left">
-    <path d="M3.9971785,12 C3.9971785,9.49005736 3.33667467,7.13438366 2.18,5.09731189 C4.35181237,2.01417617 7.93927741,0 11.9971785,0 C18.6245955,0 23.9971785,5.372583 23.9971785,12 C23.9971785,18.627417 18.6245955,24 11.9971785,24 C7.93927741,24 4.35181237,21.9858238 2.18,18.9026881 C3.33667467,16.8656163 3.9971785,14.5099426 3.9971785,12 Z"></path>
+    <use href="#users_stack_24_left"/>
+  </clipPath>
+
+  <clipPath id="users_stack_mask_24_circle">
+    <use href="#users_stack_24_circle"/>
   </clipPath>
 
   <clipPath id="users_stack_mask_24_right">
-    <path d="M21.8171785,5.09731189 C20.6605038,7.13438366 20,9.49005736 20,12 C20,14.5099426 20.6605038,16.8656163 21.8171785,18.9026881 C19.6453661,21.9858238 16.0579011,24 12,24 C5.372583,24 3.90798505e-14,18.627417 3.90798505e-14,12 C3.90798505e-14,5.372583 5.372583,0 12,0 C16.0579011,0 19.6453661,2.01417617 21.8171785,5.09731189 Z"></path>
+    <use href="#users_stack_24_right"/>
   </clipPath>
 
   <clipPath id="users_stack_mask_32_left">
-    <path d="M2.13430019,23.9892466 C3.32858917,21.5820026 4,18.8694095 4,16 C4,13.1305905 3.32858917,10.4179974 2.13430019,8.0107534 C4.89924175,3.22241289 10.0733034,-2.30926389e-14 16,-2.30926389e-14 C24.836556,-2.30926389e-14 32,7.163444 32,16 C32,24.836556 24.836556,32 16,32 C10.0733034,32 4.89924175,28.7775871 2.13430019,23.9892466 L2.13430019,23.9892466 Z"></path>
+    <use href="#users_stack_32_left"/>
+  </clipPath>
+
+  <clipPath id="users_stack_mask_32_circle">
+    <use href="#users_stack_32_circle"/>
   </clipPath>
 
   <clipPath id="users_stack_mask_32_right">
-    <path d="M29.8656998,8.0107534 C28.6714108,10.4179974 28,13.1305905 28,16 C28,18.8694095 28.6714108,21.5820026 29.8656998,23.9892466 C27.1007583,28.7775871 21.9266966,32 16,32 C7.163444,32 3.90798505e-14,24.836556 3.90798505e-14,16 C3.90798505e-14,7.163444 7.163444,0 16,0 C21.9266966,0 27.1007583,3.22241289 29.8656998,8.0107534 Z"></path>
+    <use href="#users_stack_32_right"/>
   </clipPath>
 </defs>`;
 

package/src/components/View/View.css

@@ -5,6 +5,7 @@
   height: 100%;
   width: 100%;
   word-wrap: break-word;
+  font-family: var(--font-common);
 }
 
 .View--animated,
@@ -72,19 +73,6 @@
   display: none;
 }
 
-.View--vkcom,
-.View--android {
-  font-family: var(--font-common);
-}
-
-/**
- * Active panel
- */
-.View--vkcom .View__panel--active::before,
-.View--android .View__panel--active::before {
-  content: none;
-}
-
 /**
  * Panel transition
  */