@vkontakte/vkui 4.26.0 → 4.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.26.0",
+  "version": "4.27.0",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -47,7 +47,7 @@
     "@vkontakte/eslint-config": "2.5.0",
     "@vkontakte/icons": "^1.136.0",
     "@vkontakte/vk-bridge": "^2.1.3",
-    "@vkontakte/vkui-tokens": "4.2.0",
+    "@vkontakte/vkui-tokens": "4.3.0",
     "autoprefixer": "^10.4.2",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.3",

package/src/components/ActionSheetItem/ActionSheetItem.tsx

@@ -14,6 +14,7 @@ import {
   ActionSheetContextType,
 } from "../ActionSheet/ActionSheetContext";
 import Caption from "../Typography/Caption/Caption";
+import Headline from "../Typography/Headline/Headline";
 import {
   withAdaptivity,
   AdaptivityProps,
@@ -45,7 +46,7 @@ export interface ActionSheetItemProps
   onImmediateClick?: React.MouseEventHandler<HTMLElement>;
 }
 
-const ActionSheetItem: React.FC<ActionSheetItemProps> = ({
+const ActionSheetItemComponent: React.FC<ActionSheetItemProps> = ({
   children,
   autoclose,
   mode = "default",
@@ -117,30 +118,33 @@ const ActionSheetItem: React.FC<ActionSheetItemProps> = ({
             </React.Fragment>
           ) : (
             <React.Fragment>
-              <Title
-                weight={mode === "cancel" ? "medium" : "regular"}
-                level={
-                  isCompact || hasReactNode(before) || platform === ANDROID
-                    ? "3"
-                    : "2"
-                }
-                vkuiClass="ActionSheetItem__children"
-              >
-                {children}
-              </Title>
-              {hasReactNode(meta) && (
+              {platform === ANDROID ? (
+                <Headline weight={mode === "cancel" ? "medium" : "regular"}>
+                  {children}
+                </Headline>
+              ) : (
                 <Title
-                  weight="regular"
-                  level={
-                    isCompact || hasReactNode(before) || platform === ANDROID
-                      ? "3"
-                      : "2"
-                  }
-                  vkuiClass="ActionSheetItem__meta"
+                  weight={mode === "cancel" ? "2" : "3"}
+                  level={isCompact || hasReactNode(before) ? "3" : "2"}
+                  vkuiClass="ActionSheetItem__children"
                 >
-                  {meta}
+                  {children}
                 </Title>
               )}
+              {hasReactNode(meta) &&
+                (platform === ANDROID ? (
+                  <Headline weight={mode === "cancel" ? "medium" : "regular"}>
+                    {children}
+                  </Headline>
+                ) : (
+                  <Title
+                    weight="3"
+                    level={isCompact || hasReactNode(before) ? "3" : "2"}
+                    vkuiClass="ActionSheetItem__meta"
+                  >
+                    {meta}
+                  </Title>
+                ))}
             </React.Fragment>
           )}
         </div>
@@ -181,8 +185,6 @@ const ActionSheetItem: React.FC<ActionSheetItemProps> = ({
   );
 };
 
-const ActionSheetItemWithAdaptivity = withAdaptivity(ActionSheetItem, {
+export const ActionSheetItem = withAdaptivity(ActionSheetItemComponent, {
   sizeY: true,
 });
-
-export { ActionSheetItemWithAdaptivity as ActionSheetItem };

package/src/components/Alert/Alert.tsx

@@ -52,7 +52,7 @@ type TransitionEndHandler = (e?: TransitionEvent) => void;
 
 type ItemClickHander = (item: AlertActionInterface) => () => void;
 
-class Alert extends React.Component<TAlertProps, AlertState> {
+class AlertComponent extends React.Component<TAlertProps, AlertState> {
   constructor(props: TAlertProps) {
     super(props);
     this.element = React.createRef();
@@ -136,13 +136,13 @@ class Alert extends React.Component<TAlertProps, AlertState> {
         );
       case IOS:
         return (
-          <Title vkuiClass="Alert__header" weight="semibold" level="3">
+          <Title vkuiClass="Alert__header" weight="1" level="3">
             {header}
           </Title>
         );
       case ANDROID:
         return (
-          <Title vkuiClass="Alert__header" weight="medium" level="2">
+          <Title vkuiClass="Alert__header" weight="2" level="2">
             {header}
           </Title>
         );
@@ -285,10 +285,8 @@ class Alert extends React.Component<TAlertProps, AlertState> {
   }
 }
 
-const AlertWithPlatformAndAdaptivity = withPlatform(
-  withAdaptivity(Alert, {
+export const Alert = withPlatform(
+  withAdaptivity(AlertComponent, {
     viewWidth: true,
   })
 );
-
-export { AlertWithPlatformAndAdaptivity as Alert };

package/src/components/AppearanceProvider/AppearanceProvider.tsx

@@ -4,11 +4,34 @@ import { AppearanceProviderContext } from "./AppearanceProviderContext";
 import { getScheme } from "../../helpers/getScheme";
 import { classNamesString } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
+import { Platform } from "../../lib/platform";
 
 export interface AppearanceProviderProps {
   appearance?: AppearanceType;
 }
 
+export const generateVKUITokensClassName = (
+  platform: string,
+  appearance: string
+): string => {
+  let tokensPlatform;
+  switch (platform) {
+    case Platform.ANDROID:
+      tokensPlatform = "vkBase";
+      break;
+    case Platform.IOS:
+      tokensPlatform = "vkIOS";
+      break;
+    case Platform.VKCOM:
+      tokensPlatform = "vkCom";
+      break;
+    default:
+      tokensPlatform = platform;
+  }
+
+  return `vkui--${tokensPlatform}--${appearance}`;
+};
+
 export const AppearanceProvider: React.FC<AppearanceProviderProps> = ({
   children,
   appearance = "light",
@@ -33,7 +56,8 @@ export const AppearanceProvider: React.FC<AppearanceProviderProps> = ({
           return React.cloneElement(child, {
             className: classNamesString(
               child.props.className,
-              `vkui${appearanceContext.scheme}`
+              `vkui${appearanceContext.scheme}`,
+              generateVKUITokensClassName(platform, appearance)
             ),
           });
         }

package/src/components/Banner/Banner.tsx

@@ -88,7 +88,7 @@ const BannerHeader: React.FC<BannerTypographyProps> = ({
   ...restProps
 }) => {
   return size === "m" ? (
-    <Title level="2" weight="medium" {...restProps} />
+    <Title level="2" weight="2" {...restProps} />
   ) : (
     <Headline weight="medium" {...restProps} />
   );

package/src/components/Button/Button.tsx

@@ -13,8 +13,9 @@ import {
   SizeType,
   withAdaptivity,
 } from "../../hoc/withAdaptivity";
-import { IOS, VKCOM, PlatformType } from "../../lib/platform";
+import { PlatformType, IOS, VKCOM, ANDROID } from "../../lib/platform";
 import Spinner from "../Spinner/Spinner";
+import Headline from "../Typography/Headline/Headline";
 import "./Button.css";
 
 export interface VKUIButtonProps extends HasAlign {
@@ -61,8 +62,10 @@ const ButtonTypography: React.FC<ButtonTypographyProps> = (
       if (isCompact) {
         return <Text weight="medium" {...restProps} />;
       }
-
-      return <Title level="3" weight="medium" {...restProps} />;
+      if (platform === ANDROID) {
+        return <Headline weight="medium" {...restProps} />;
+      }
+      return <Title level="3" weight="2" {...restProps} />;
     case "m":
       if (isCompact) {
         return (

package/src/components/Card/Card.css

@@ -40,3 +40,44 @@
   box-sizing: border-box;
   border-radius: inherit;
 }
+
+/**
+ * CMP:
+ * CardScroll
+ */
+.CardScroll .Card {
+  margin-right: var(--vkui--size_cardgrid_padding--regular);
+  flex-shrink: 0;
+}
+
+.CardScroll .Card:last-of-type {
+  margin-right: 0;
+}
+
+.CardScroll--s .Card {
+  width: 40%;
+}
+
+.CardScroll--m .Card {
+  width: 62%;
+}
+
+.CardScroll--l .Card {
+  width: 100%;
+}
+
+/**
+ * CMP:
+ * Group
+ * SplitCol
+ */
+.Group--card .CardScroll--l .Card,
+.SplitCol--spaced .CardScroll--l .Card {
+  width: calc(100% - 32px);
+  margin-right: 16px;
+}
+
+.Group--card .CardScroll--l .Card:last-of-type,
+.SplitCol--spaced .CardScroll--l .Card:last-of-type {
+  margin-right: 0;
+}

package/src/components/Card/Card.tsx

@@ -11,8 +11,8 @@ export interface CardProps
   mode?: "tint" | "shadow" | "outline";
 }
 
-const Card: React.FunctionComponent<CardProps> = ({
-  mode,
+export const Card: React.FC<CardProps> = ({
+  mode = "tint",
   children,
   getRootRef,
   ...restProps
@@ -29,10 +29,3 @@ const Card: React.FunctionComponent<CardProps> = ({
     </div>
   );
 };
-
-Card.defaultProps = {
-  mode: "tint",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default Card;

package/src/components/CardScroll/CardScroll.css

@@ -3,11 +3,6 @@
   align-items: stretch;
 }
 
-.CardScroll .Card {
-  margin-right: var(--vkui--size_cardgrid_padding--regular);
-  flex-shrink: 0;
-}
-
 .CardScroll__gap {
   display: block;
   flex-shrink: 0;
@@ -17,30 +12,14 @@
   margin-top: 16px;
 }
 
-.CardScroll .Card:last-of-type {
-  margin-right: 0;
-}
-
-.CardScroll--s .Card {
-  width: 40%;
-}
-
-.CardScroll--m .Card {
-  width: 62%;
-}
-
-.CardScroll--l .Card {
-  width: 100%;
-}
-
 .CardScroll--withSpaces .CardScroll__gap {
   width: var(--vkui--size_base_padding_horizontal--regular);
 }
 
 /**
+ * CMP:
  * SplitCol
  */
-
 .SplitCol--spaced .CardScroll--withSpaces .CardScroll {
   margin-left: -16px;
   margin-right: -16px;
@@ -50,31 +29,15 @@
   width: 16px;
 }
 
-.SplitCol--spaced .CardScroll--l .Card {
-  width: calc(100% - 32px);
-}
-
-.SplitCol--spaced .CardScroll--l .Card:not(:last-of-type) {
-  margin-right: 16px;
-}
-
 /**
+ * CMP:
  * Group
  */
-
 .Group--card .CardScroll--withSpaces {
   margin-left: -8px;
   margin-right: -8px;
 }
 
-.Group--card .CardScroll--l .Card {
-  width: calc(100% - 32px);
-}
-
-.Group--card .CardScroll--l .Card:not(:last-of-type) {
-  margin-right: 16px;
-}
-
 .Group--card .CardScroll--withSpaces:first-child {
   padding-top: var(--vkui--size_cardgrid_padding_vertical--regular);
 }

package/src/components/CardScroll/CardScroll.tsx

@@ -1,35 +1,32 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { usePlatform } from "../../hooks/usePlatform";
 import HorizontalScroll, {
   HorizontalScrollProps,
 } from "../HorizontalScroll/HorizontalScroll";
-import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
 import { useDOM } from "../../lib/dom";
 import "./CardScroll.css";
 
-export interface CardScrollProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    AdaptivityProps {
+export interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
-   * При size = "s", "m", "l" у Card будет явно задана ширина в %
-   * При size = false ширина Card будет регулироваться контентом внутри
+   * При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.
    */
   size?: "s" | "m" | "l" | false;
   showArrows?: HorizontalScrollProps["showArrows"];
-  withSpaces: boolean;
+  withSpaces?: boolean;
 }
 
-const CardScroll: React.FC<CardScrollProps> = ({
+export const CardScroll: React.FC<CardScrollProps> = ({
   children,
-  size,
+  size = "s",
   showArrows = true,
-  sizeX,
   withSpaces = true,
   ...restProps
 }: CardScrollProps) => {
   const platform = usePlatform();
+  const { sizeX } = useAdaptivity();
 
   const refContainer = React.useRef<HTMLDivElement>(null);
   const gapRef = React.useRef<HTMLDivElement>(null);
@@ -117,10 +114,3 @@ const CardScroll: React.FC<CardScrollProps> = ({
     </div>
   );
 };
-
-CardScroll.defaultProps = {
-  size: "s",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(CardScroll, { sizeX: true });

package/src/components/CardScroll/Readme.md

@@ -1,5 +1,6 @@
-Горизонтальный скролл для [Card](#!/Card). Согласно дизайну, высота `Card` должна масштабироваться относительно её ширины.  
-В примерах это достигается с помощью процентного `padding-bottom`. Пропорции следующие:
+Горизонтальный скролл для [Card](#!/Card).
+
+Согласно дизайну, высота `Card` должна масштабироваться относительно её ширины. В примерах это достигается с помощью процентного `padding-bottom`. Пропорции следующие:
 
 - `size="s"`: высота равна 66% ширины;
 - `size="m"`: высота равна 42% ширины;

package/src/components/Chip/Chip.tsx

@@ -18,7 +18,7 @@ export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
   after?: React.ReactNode;
 }
 
-const Chip: React.FC<ChipProps> = ({
+export const Chip: React.FC<ChipProps> = ({
   value = "",
   option,
   removable = true,
@@ -73,6 +73,3 @@ const Chip: React.FC<ChipProps> = ({
     </div>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default Chip;

package/src/components/ChipsInput/ChipsInput.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { HasAlign, HasRef, HasRootRef } from "../../types";
 import { FormField, FormFieldProps } from "../FormField/FormField";
 import { classNames } from "../../lib/classNames";
-import Chip, { ChipProps } from "../Chip/Chip";
+import { Chip, ChipProps } from "../Chip/Chip";
 import { noop } from "../../lib/utils";
 import { useChipsInput } from "./useChipsInput";
 import { useAdaptivity } from "../../hooks/useAdaptivity";

package/src/components/ConfigProvider/ConfigProvider.tsx

@@ -15,10 +15,13 @@ import {
   AppearanceScheme,
   Scheme,
 } from "../../helpers/scheme";
-import { AppearanceProvider } from "../AppearanceProvider/AppearanceProvider";
-import { Platform } from "../../lib/platform";
+import {
+  AppearanceProvider,
+  generateVKUITokensClassName,
+} from "../AppearanceProvider/AppearanceProvider";
 
-export interface ConfigProviderProps extends ConfigProviderContextInterface {
+export interface ConfigProviderProps
+  extends Partial<ConfigProviderContextInterface> {
   /**
    * @deprecated будет удалено в 5.0.0, устанавливать тему следует через appearance
    * Цветовая схема приложения
@@ -59,28 +62,6 @@ const deriveAppearance = (scheme: Scheme | undefined): AppearanceType =>
     ? "dark"
     : "light";
 
-const generateVKUITokensClassName = (
-  platform: string,
-  appearance: string
-): string => {
-  let tokensPlatform;
-  switch (platform) {
-    case Platform.ANDROID:
-      tokensPlatform = "vkBase";
-      break;
-    case Platform.IOS:
-      tokensPlatform = "vkIOS";
-      break;
-    case Platform.VKCOM:
-      tokensPlatform = "vkCom";
-      break;
-    default:
-      tokensPlatform = platform;
-  }
-
-  return `vkui--${tokensPlatform}--${appearance}`;
-};
-
 const ConfigProvider: React.FC<ConfigProviderProps> = ({
   children,
   ...props

package/src/components/ConfigProvider/ConfigProviderContext.tsx

@@ -11,12 +11,12 @@ export interface ConfigProviderContextInterface {
   /**
    * Подсказывает приложению, обёрнутому в `ConfigProvider`, где открыто приложение: внутри webview или в мобильном браузере
    */
-  isWebView?: boolean;
+  isWebView: boolean;
   /**
    * Тип вебвью.<br>
    * В случае `WebviewType.VKAPPS` интерфейс будет адаптирован для отображения в вебвью Mini Apps (системные контролы в правой части шапки)
    */
-  webviewType?: WebviewType.INTERNAL | WebviewType.VKAPPS;
+  webviewType: WebviewType.INTERNAL | WebviewType.VKAPPS;
   /**
    * Тип приложения
    */
@@ -28,12 +28,12 @@ export interface ConfigProviderContextInterface {
   /**
    * Включена ли анимация переходов между экранами в `Root` и `View`
    */
-  transitionMotionEnabled?: boolean;
+  transitionMotionEnabled: boolean;
   /**
    * Платформа
    */
-  platform?: PlatformType;
-  hasNewTokens?: boolean;
+  platform: PlatformType;
+  hasNewTokens: boolean;
 }
 
 export const defaultConfigProviderProps = {

package/src/components/ContentCard/ContentCard.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import Card, { CardProps } from "../Card/Card";
+import { Card, CardProps } from "../Card/Card";
 import Caption from "../Typography/Caption/Caption";
 import Title from "../Typography/Title/Title";
 import Text from "../Typography/Text/Text";
@@ -131,7 +131,7 @@ const ContentCard: React.FC<ContentCardProps> = (props: ContentCardProps) => {
             </Caption>
           )}
           {hasReactNode(header) && (
-            <Title vkuiClass="ContentCard__text" weight="semibold" level="3">
+            <Title vkuiClass="ContentCard__text" weight="3" level="1">
               {header}
             </Title>
           )}

package/src/components/FocusVisible/FocusVisible.css

@@ -1,5 +1,4 @@
-.Switch--focus-visible > .FocusVisible,
-.Tappable--focus-visible > .FocusVisible {
+[class$="--focus-visible"] > .FocusVisible {
   position: absolute;
   top: 2px;
   left: 2px;
@@ -13,8 +12,7 @@
   z-index: 0;
 }
 
-.Switch--focus-visible > .FocusVisible--outside,
-.Tappable--focus-visible > .FocusVisible--outside {
+[class$="--focus-visible"] > .FocusVisible--outside {
   top: -2px;
   left: -2px;
   right: -2px;
@@ -28,8 +26,7 @@
  * navigating accessible vkui apps via keyboard
  */
 @media (prefers-reduced-motion: no-preference) {
-  .Tappable--focus-visible > .FocusVisible,
-  .Switch--focus-visible > .FocusVisible {
+  [class$="--focus-visible"] > .FocusVisible {
     top: 4px;
     left: 4px;
     right: 4px;
@@ -39,8 +36,7 @@
     will-change: top, left, bottom, right;
   }
 
-  .Tappable--focus-visible > .FocusVisible--outside,
-  .Switch--focus-visible > .FocusVisible--outside {
+  [class$="--focus-visible"] > .FocusVisible--outside {
     top: 0;
     left: 0;
     bottom: 0;

package/src/components/FormItem/Readme.md

@@ -113,8 +113,20 @@ class Example extends React.Component {
               </FormItem>
 
               <FormItem top="Тип документа">
-                <Radio name="type">Паспорт</Radio>
-                <Radio name="type">Загран</Radio>
+                <SegmentedControl
+                  size="m"
+                  name="type"
+                  options={[
+                    {
+                      label: "Паспорт РФ",
+                      value: "russian",
+                    },
+                    {
+                      label: "Заграничный",
+                      value: "international",
+                    },
+                  ]}
+                />
               </FormItem>
 
               {this.addressItems.map(({ label, name }) => (

package/src/components/Gradient/Gradient.tsx

@@ -7,12 +7,12 @@ export interface GradientProps extends React.HTMLAttributes<HTMLDivElement> {
   to?: "top" | "bottom";
 }
 
-const Gradient: React.FunctionComponent<GradientProps> = ({
-  mode,
+export const Gradient: React.FC<GradientProps> = ({
+  mode = "tint",
   children,
-  to,
+  to = "top",
   ...restProps
-}: GradientProps) => {
+}) => {
   return (
     <div
       role="presentation"
@@ -27,11 +27,3 @@ const Gradient: React.FunctionComponent<GradientProps> = ({
     </div>
   );
 };
-
-Gradient.defaultProps = {
-  mode: "tint",
-  to: "top",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default Gradient;

package/src/components/Gradient/Readme.md

@@ -20,7 +20,7 @@ const Example = ({ sizeX }) => {
             <Title
               style={{ marginBottom: 8, marginTop: 20 }}
               level="2"
-              weight="medium"
+              weight="2"
             >
               Алексей Мазелюк
             </Title>

package/src/components/Header/Header.tsx

@@ -41,7 +41,7 @@ const HeaderContent: React.FC<HeaderContentProps> = ({
     switch (mode) {
       case "primary":
       case "tertiary":
-        return <Title weight="semibold" level="3" {...restProps} />;
+        return <Title weight="1" level="3" {...restProps} />;
       case "secondary":
         return <Caption level="1" weight="semibold" caps {...restProps} />;
     }

package/src/components/ModalCardBase/ModalCardBase.tsx

@@ -12,7 +12,7 @@ import {
 } from "../../hoc/withAdaptivity";
 import { HasRootRef } from "../../types";
 import { PanelHeaderButton } from "../PanelHeaderButton/PanelHeaderButton";
-import { IOS } from "../../lib/platform";
+import { ANDROID, IOS } from "../../lib/platform";
 import ModalDismissButton from "../ModalDismissButton/ModalDismissButton";
 import { Icon24Dismiss } from "@vkontakte/icons";
 import { useKeyboard } from "../../hooks/useKeyboard";
@@ -99,7 +99,7 @@ export const ModalCardBase = withAdaptivity<
           {hasReactNode(header) && (
             <Title
               level="2"
-              weight="semibold"
+              weight={platform === ANDROID ? "2" : "1"}
               vkuiClass="ModalCardBase__header"
             >
               {header}