@vkontakte/vkui 4.37.0 → 5.0.0

package/src/components/Button/Button.tsx

@@ -1,37 +1,17 @@
 import * as React from "react";
-import { classNames } from "../../lib/classNames";
+import { classNamesString } from "../../lib/classNames";
+import { Platform } from "../../lib/platform";
 import { ConfigProviderContext } from "../ConfigProvider/ConfigProviderContext";
 import { TappableProps, Tappable } from "../Tappable/Tappable";
-import { Title } from "../Typography/Title/Title";
-import { Text } from "../Typography/Text/Text";
-import { Subhead } from "../Typography/Subhead/Subhead";
-import { Caption } from "../Typography/Caption/Caption";
-import { HasAlign, HasComponent } from "../../types";
-import { usePlatform } from "../../hooks/usePlatform";
-import {
-  AdaptivityProps,
-  SizeType,
-  withAdaptivity,
-} from "../../hoc/withAdaptivity";
-import { PlatformType, IOS, VKCOM, ANDROID } from "../../lib/platform";
+import { HasAlign } from "../../types";
 import { Spinner } from "../Spinner/Spinner";
-import { Headline } from "../Typography/Headline/Headline";
-import "./Button.css";
+import { getSizeYClassName } from "../../helpers/getSizeYClassName";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { usePlatform } from "../../hooks/usePlatform";
+import styles from "./Button.module.css";
 
 export interface VKUIButtonProps extends HasAlign {
-  /**
-   Значения `commerce`, `destructive`, `overlay_...` будут упразднены в 5.0.0
-   */
-  mode?:
-    | "primary"
-    | "secondary"
-    | "tertiary"
-    | "outline"
-    | "commerce"
-    | "destructive"
-    | "overlay_primary"
-    | "overlay_secondary"
-    | "overlay_outline";
+  mode?: "primary" | "secondary" | "tertiary" | "outline";
   appearance?: "accent" | "positive" | "negative" | "neutral" | "overlay";
   size?: "s" | "m" | "l";
   stretched?: boolean;
@@ -44,174 +24,68 @@ export interface ButtonProps
   extends Omit<TappableProps, "size">,
     VKUIButtonProps {}
 
-interface ButtonTypographyProps extends HasComponent {
-  size: ButtonProps["size"];
-  platform: PlatformType | undefined;
-  sizeY: AdaptivityProps["sizeY"];
-  children?: ButtonProps["children"];
-}
-
-const ButtonTypography = ({
-  size,
-  sizeY,
-  platform,
-  ...restProps
-}: ButtonTypographyProps) => {
-  const isCompact = sizeY === SizeType.COMPACT;
-
-  switch (size) {
-    case "l":
-      if (isCompact) {
-        return <Text weight="2" {...restProps} />;
-      }
-      if (platform === ANDROID) {
-        return <Headline weight="2" {...restProps} />;
-      }
-      return <Title level="3" weight="2" {...restProps} />;
-    case "m":
-      if (isCompact) {
-        return (
-          <Subhead weight={platform === VKCOM ? "3" : "2"} {...restProps} />
-        );
-      }
-
-      return <Text weight="2" {...restProps} />;
-    case "s":
-    default:
-      if (platform === IOS) {
-        return <Subhead weight="2" {...restProps} />;
-      }
-
-      if (platform === VKCOM) {
-        return <Caption {...restProps} />;
-      }
-
-      if (isCompact) {
-        return <Caption weight="2" {...restProps} />;
-      }
-
-      return <Subhead weight="2" {...restProps} />;
-  }
-};
-
-interface ResolvedButtonAppearance {
-  resolvedAppearance: ButtonProps["appearance"];
-  resolvedMode: ButtonProps["mode"];
-}
-
-function resolveButtonAppearance(
-  appearance: ButtonProps["appearance"],
-  mode: ButtonProps["mode"]
-): ResolvedButtonAppearance {
-  let resolvedAppearance: ButtonProps["appearance"] = appearance;
-  let resolvedMode: ButtonProps["mode"] = mode;
-
-  if (appearance === undefined) {
-    switch (mode) {
-      case "tertiary":
-      case "secondary":
-      case "primary":
-      case "outline":
-        resolvedAppearance = "accent";
-        break;
-      case "commerce":
-        resolvedMode = "primary";
-        resolvedAppearance = "positive";
-        break;
-      case "destructive":
-        resolvedMode = "primary";
-        resolvedAppearance = "negative";
-        break;
-      case "overlay_primary":
-        resolvedMode = "primary";
-        resolvedAppearance = "overlay";
-        break;
-      case "overlay_secondary":
-        resolvedMode = "secondary";
-        resolvedAppearance = "overlay";
-        break;
-      case "overlay_outline":
-        resolvedMode = "outline";
-        resolvedAppearance = "overlay";
-        break;
-    }
-  }
-
-  return {
-    resolvedAppearance,
-    resolvedMode,
-  };
-}
-
-const ButtonComponent = ({
+/**
+ * @see https://vkcom.github.io/VKUI/#/Button
+ */
+export const Button = ({
   size = "s",
   mode = "primary",
-  appearance,
+  appearance = "accent",
   stretched = false,
   align = "center",
   children,
   before,
   after,
   getRootRef,
-  sizeY,
   Component = "button",
   loading,
   onClick,
   stopPropagation = true,
+  className,
   ...restProps
 }: ButtonProps) => {
-  const platform = usePlatform();
   const hasIcons = Boolean(before || after);
   const hasIconOnly = !children && Boolean(after) !== Boolean(before);
-  const { resolvedMode, resolvedAppearance } = resolveButtonAppearance(
-    appearance,
-    mode
-  );
   const hasNewTokens = React.useContext(ConfigProviderContext).hasNewTokens;
+  const { sizeY } = useAdaptivity();
+  const platform = usePlatform();
 
   return (
     <Tappable
-      hoverMode={hasNewTokens ? "Button--hover" : "background"}
-      activeMode={hasNewTokens ? "Button--active" : "opacity"}
+      hoverMode={hasNewTokens ? styles["Button--hover"] : "background"}
+      activeMode={hasNewTokens ? styles["Button--active"] : "opacity"}
       {...restProps}
       Component={restProps.href ? "a" : Component}
       onClick={loading ? undefined : onClick}
       focusVisibleMode="outside"
       stopPropagation={stopPropagation}
-      vkuiClass={classNames(
-        "Button",
-        `Button--sz-${size}`,
-        `Button--lvl-${resolvedMode}`,
-        `Button--clr-${resolvedAppearance}`,
-        `Button--aln-${align}`,
-        `Button--sizeY-${sizeY}`,
-        stretched && "Button--stretched",
-        hasIcons && "Button--with-icon",
-        hasIconOnly && "Button--singleIcon",
-        loading && "Button--loading"
+      className={classNamesString(
+        className,
+        styles.Button,
+        styles[`Button--size-${size}`],
+        styles[`Button--mode-${mode}`],
+        styles[`Button--appearance-${appearance}`],
+        styles[`Button--align-${align}`],
+        getSizeYClassName("Button", sizeY, styles),
+        platform === Platform.ANDROID && styles[`Button--android`],
+        platform === Platform.IOS && styles[`Button--ios`],
+        stretched && styles["Button--stretched"],
+        hasIcons && styles["Button--with-icon"],
+        hasIconOnly && styles["Button--singleIcon"],
+        loading && styles["Button--loading"]
       )}
       getRootRef={getRootRef}
     >
-      {loading && <Spinner size="small" vkuiClass="Button__spinner" />}
-      <span vkuiClass="Button__in">
+      {loading && <Spinner size="small" className={styles.Button__spinner} />}
+      <span className={styles.Button__in}>
         {before && (
-          <span vkuiClass="Button__before" role="presentation">
+          <span className={styles.Button__before} role="presentation">
             {before}
           </span>
         )}
-        {children && (
-          <ButtonTypography
-            size={size}
-            sizeY={sizeY}
-            platform={platform}
-            vkuiClass="Button__content"
-            Component="span"
-          >
-            {children}
-          </ButtonTypography>
-        )}
+        {children && <span className={styles.Button__content}>{children}</span>}
         {after && (
-          <span vkuiClass="Button__after" role="presentation">
+          <span className={styles.Button__after} role="presentation">
             {after}
           </span>
         )}
@@ -219,12 +93,3 @@ const ButtonComponent = ({
     </Tappable>
   );
 };
-
-/**
- * @see https://vkcom.github.io/VKUI/#/Button
- */
-export const Button = withAdaptivity(ButtonComponent, {
-  sizeY: true,
-});
-
-Button.displayName = "Button";

package/src/components/Button/Readme.md

@@ -18,6 +18,13 @@ const Example = () => {
   const [addAfter, setAddAfter] = useState(false);
   const [addText, setAddText] = useState(true);
   const [hasLink, setHasLink] = useState(false);
+  const platform = usePlatform();
+
+  React.useEffect(() => {
+    if (platform === Platform.VKCOM) {
+      setSizeY("compact");
+    }
+  }, [platform]);
 
   const buttonBefore =
     addBefore &&
@@ -111,7 +118,11 @@ const Example = () => {
             onChange={(e) => setSizeY(e.target.value)}
             options={[
               { label: "compact", value: "compact" },
-              { label: "regular", value: "regular" },
+              {
+                label: "regular",
+                value: "regular",
+                disabled: platform === Platform.VKCOM,
+              },
             ]}
           />
         </FormItem>

package/src/components/Button/__image_snapshots__/button-android-light-1-snap.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2d3438a097c67dc4888518047f9280e10dde423b5f8d5dcc819524a90439d63c
+size 334505

package/src/components/Button/__image_snapshots__/button-ios-light-1-snap.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e7aa7670bb799c2b110ea993d4579b3c4cb482065be1238d73b90aac0d2bfb72
+size 339288

package/src/components/Button/__image_snapshots__/button-vkcom-light-1-snap.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:296f5fff526d410c14c716a60b5e3d8a0a620603e2af2210d7a5d44f2e7ae068
+size 238979

package/src/components/ButtonGroup/ButtonGroup.e2e.tsx

@@ -0,0 +1,84 @@
+import { Icon24Attach, Icon24Add } from "@vkontakte/icons";
+import { Button } from "../Button/Button";
+import { ButtonGroup, ButtonGroupProps } from "./ButtonGroup";
+import { describeScreenshotFuzz } from "../../testing/e2e/utils";
+
+describe("ButtonGroup", () => {
+  describeScreenshotFuzz(
+    ({ mode, gap, stretched, style, children }: ButtonGroupProps) => (
+      <ButtonGroup
+        mode="vertical"
+        gap={gap}
+        stretched={stretched}
+        style={style}
+      >
+        <Button size="l" appearance="accent" stretched>
+          {children || "Разрешить"}
+        </Button>
+        <Button size="l" appearance="accent" stretched>
+          Завершить
+        </Button>
+        <ButtonGroup mode="vertical" gap={gap} stretched>
+          <ButtonGroup mode={mode} gap={gap} stretched>
+            <Button size="l" appearance="negative" stretched>
+              {children || "Не сейчас"}
+            </Button>
+            <Button size="l" appearance="positive" stretched>
+              Продолжить
+            </Button>
+          </ButtonGroup>
+          <ButtonGroup mode="horizontal" gap="space" stretched={stretched}>
+            <Button
+              size="l"
+              appearance="accent"
+              mode="tertiary"
+              before={<Icon24Attach />}
+              stretched
+            >
+              Прикрепить файл
+            </Button>
+            <Button size="l" appearance="accent" before={<Icon24Add />} />
+          </ButtonGroup>
+        </ButtonGroup>
+      </ButtonGroup>
+    ),
+    [
+      {
+        gap: ["none", "space", "s", "m"],
+        style: [{ minWidth: 300 }],
+      },
+      {
+        stretched: [undefined, true],
+        children: [undefined, "Этот оооооочень длинный-длинный текст"],
+      },
+    ]
+  );
+});
+
+describe("ButtonGroup align", () => {
+  describeScreenshotFuzz(
+    ({ align }: ButtonGroupProps) => (
+      <ButtonGroup mode="vertical" align={align} style={{ width: "100%" }}>
+        <Button size="l" appearance="accent">
+          Разрешить
+        </Button>
+        <Button size="l" appearance="accent">
+          Завершить
+        </Button>
+        <ButtonGroup>
+          <Button size="l" appearance="negative">
+            Не сейчас
+          </Button>
+          <Button size="l" appearance="positive">
+            Продолжить
+          </Button>
+        </ButtonGroup>
+      </ButtonGroup>
+    ),
+    [
+      {
+        align: ["left", "center", "right"],
+      },
+    ]
+  );
+});

package/src/components/ButtonGroup/ButtonGroup.test.tsx

@@ -0,0 +1,6 @@
+import { baselineComponent } from "../../testing/utils";
+import { ButtonGroup } from "./ButtonGroup";
+
+describe("ButtonGroup", () => {
+  baselineComponent(ButtonGroup);
+});

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { classNames } from "../../lib/classNames";
+import { classNamesString } from "../../lib/classNames";
 import type { HasRootRef, AlignType } from "../../types";
-import "./ButtonGroup.css";
+import styles from "./ButtonGroup.module.css";
 
 export interface ButtonGroupProps
   extends React.HTMLAttributes<HTMLDivElement>,
@@ -35,17 +35,19 @@ export const ButtonGroup = ({
   stretched = false,
   align = "left" /* NOTE: Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */,
   getRootRef,
+  className,
   children,
   ...restProps
 }: ButtonGroupProps) => {
   return (
     <div
-      vkuiClass={classNames(
-        "ButtonGroup",
-        `ButtonGroup--mode-${mode}`,
-        gap !== "none" && `ButtonGroup--gap-${gap}`,
-        stretched && "ButtonGroup--stretched",
-        `ButtonGroup--align-${align}`
+      className={classNamesString(
+        className,
+        styles.ButtonGroup,
+        styles[`ButtonGroup--mode-${mode}`],
+        gap !== "none" && styles[`ButtonGroup--gap-${gap}`],
+        stretched && styles["ButtonGroup--stretched"],
+        align && styles[`ButtonGroup--align-${align}`]
       )}
       role="group"
       ref={getRootRef}

package/src/components/ButtonGroup/Readme.md

@@ -62,7 +62,7 @@ const ButtonGroupPropsForm = ({ caption, defaultProps, onChange }) => {
       </Checkbox>
       {caption && (
         <FormItem>
-          <Caption level="1">({caption})</Caption>
+          <Footnote>({caption})</Footnote>
         </FormItem>
       )}
     </React.Fragment>

package/src/components/ButtonGroup/__image_snapshots__/buttongroup-align-android-light-1-snap.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a4f05a90f2c2f616a465d472e938d91c643b36b1359536644787dfd8f64b3656
+size 23014

package/src/components/ButtonGroup/__image_snapshots__/buttongroup-align-ios-light-1-snap.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c7541efeef9527db1a907b202119f57e1d1efde305aeb0952345df6a2f78ec2b
+size 23766

package/src/components/ButtonGroup/__image_snapshots__/buttongroup-align-vkcom-light-1-snap.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8c99f20045e0a1099b812ae466901bf255422ae7634d08ccdc9ce2307f83876e
+size 21905

package/src/components/ButtonGroup/__image_snapshots__/buttongroup-android-light-1-snap.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d7790499bd914b8f22bf9bea7df8121077e66c2f760280354c8f61752beb3403
+size 94576

package/src/components/ButtonGroup/__image_snapshots__/buttongroup-ios-light-1-snap.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bafb4bc9a410d139c12b33f9e30a951f3b48ee4b2598f664a5f4d8e74ae49e97
+size 96970

package/src/components/ButtonGroup/__image_snapshots__/buttongroup-vkcom-light-1-snap.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4fecad438c3e06977f0e339be0247e51d452810585175e6fbe12581f127f4845
+size 97460

package/src/components/Calendar/Calendar.e2e.tsx

@@ -0,0 +1,36 @@
+import { Calendar, CalendarProps } from "./Calendar";
+import { describeScreenshotFuzz } from "../../testing/e2e/utils";
+
+describe("Calendar", () => {
+  describeScreenshotFuzz(
+    (props: CalendarProps) => <Calendar {...props} />,
+    [
+      {
+        value: [new Date("1970-05-05")],
+        shouldDisableDate: [undefined, () => true],
+      },
+      {
+        value: [new Date("1970-05-05")],
+        showNeighboringMonth: [false, true],
+      },
+      {
+        value: [new Date("1970-05-05")],
+        size: ["s", "m"],
+      },
+      {
+        value: [new Date("1970-05-05")],
+        weekStartsOn: [0, 1],
+      },
+      {
+        value: [new Date("1970-05-05")],
+        enableTime: [true, false],
+        doneButtonText: [undefined, "Done"],
+      },
+      {
+        value: [new Date("1970-05-05")],
+        nextMonthIcon: [undefined, <span key="next">&gt;</span>],
+        prevMonthIcon: [undefined, <span key="prev">&lt;</span>],
+      },
+    ]
+  );
+});

package/src/components/Calendar/Calendar.test.tsx

@@ -0,0 +1,6 @@
+import { Calendar } from "./Calendar";
+import { baselineComponent } from "../../testing/utils";
+
+describe("Calendar", () => {
+  baselineComponent(Calendar);
+});

package/src/components/Calendar/__image_snapshots__/calendar-android-light-1-snap.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:08ba8140b2abe44d502d5b461055bac7bfc3911de1658e4e5061141c1ffa3a36
+size 280010

package/src/components/Calendar/__image_snapshots__/calendar-ios-light-1-snap.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a8f7b4436db15e73b16a5ac17fcd059df2dae0a3fe3db29e8b065656d49a30fa
+size 280347

package/src/components/Calendar/__image_snapshots__/calendar-vkcom-light-1-snap.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:db78126db857704f96e76f9d79716d5d453b549db256ba4f3a1f81bb295cbb8f
+size 284543

package/src/components/CalendarDay/CalendarDay.test.tsx

@@ -0,0 +1,26 @@
+import { screen, render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { CalendarDay, CalendarDayProps } from "./CalendarDay";
+
+const day = new Date("1970-01-01");
+const onChange = jest.fn();
+
+const CalendarDayTest = (
+  testProps: Omit<CalendarDayProps, "day" | "onChange">
+) => <CalendarDay day={day} onChange={onChange} {...testProps} />;
+
+describe("CalendarDay", () => {
+  it("calls callback with day on click", () => {
+    render(<CalendarDayTest />);
+    userEvent.click(screen.getByText("1"));
+
+    expect(onChange).toHaveBeenCalledWith(day);
+  });
+  it("renders hidden div", () => {
+    render(<CalendarDayTest hidden />);
+
+    expect(
+      document.querySelector(".vkuiCalendarDay__hidden")
+    ).toBeInTheDocument();
+  });
+});

package/src/components/CalendarDays/CalendarDays.tsx

@@ -7,7 +7,7 @@ import {
 import { getDaysNames, getWeeks } from "../../lib/calendar";
 import { LocaleProviderContext } from "../LocaleProviderContext/LocaleProviderContext";
 import { classNames } from "../../lib/classNames";
-import { Caption } from "../Typography/Caption/Caption";
+import { Footnote } from "../Typography/Footnote/Footnote";
 import "./CalendarDays.css";
 
 export interface CalendarDaysProps
@@ -85,9 +85,9 @@ export const CalendarDays = ({
         )}
       >
         {daysNames.map((dayName) => (
-          <Caption key={dayName} level="1" vkuiClass="CalendarDays__weekday">
+          <Footnote key={dayName} vkuiClass="CalendarDays__weekday">
             {dayName}
-          </Caption>
+          </Footnote>
         ))}
       </div>
 

package/src/components/CalendarHeader/CalendarHeader.test.tsx

@@ -0,0 +1,27 @@
+import { render } from "@testing-library/react";
+import { CalendarHeader } from "./CalendarHeader";
+
+describe("CalendarHeader", () => {
+  it("displays prev month button", () => {
+    const viewDate = new Date("1970-01-01");
+    const onChange = jest.fn();
+    const { container } = render(
+      <CalendarHeader viewDate={viewDate} onChange={onChange} prevMonth />
+    );
+
+    expect(
+      container.getElementsByClassName("vkuiCalendarHeader__nav-icon-prev")[0]
+    ).toBeTruthy();
+  });
+  it("displays next month button", () => {
+    const viewDate = new Date("1970-01-01");
+    const onChange = jest.fn();
+    const { container } = render(
+      <CalendarHeader viewDate={viewDate} onChange={onChange} nextMonth />
+    );
+
+    expect(
+      container.getElementsByClassName("vkuiCalendarHeader__nav-icon-next")[0]
+    ).toBeTruthy();
+  });
+});