@vkontakte/vkui 4.25.0 → 4.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.25.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.0.0-rc.71",
+    "@vkontakte/vkui-tokens": "4.3.0",
     "autoprefixer": "^10.4.2",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.3",
@@ -147,7 +147,7 @@
     "size": "yarn clear && concurrently 'yarn:babel' 'yarn:postcss' && size-limit",
     "size:ci": "yarn install --frozen-lockfile --ignore-scripts && yarn build:no-types",
     "styleguide": "cross-env NODE_ENV=development styleguidist server --config=styleguide/config.js",
-    "styleguide:props": "cross-env NODE_ENV=development VKUI_STYLEGUIDE_PROPSPARSER=1 styleguidist server --config=styleguide/config.js",
+    "styleguide:props": "VKUI_STYLEGUIDE_PROPSPARSER=1 yarn styleguide",
     "styleguide:build": "cross-env NODE_ENV=production styleguidist build --config=styleguide/config.js",
     "dev": "yarn clear && concurrently \"yarn:tsc-dev\" \"yarn:babel-dev\" \"yarn:postcss-dev\"",
     "dev-cjs": "yarn clear && concurrently \"yarn:tsc-cjs-dev\" \"yarn:babel-cjs-dev\" \"yarn:postcss-dev\"",

package/postcss.config.js

@@ -10,6 +10,10 @@ const { defaultSchemeId } = require("./package.json");
 
 const animationsSource = path.join(__dirname, "src/styles/animations.css");
 const cssPropSources = [
+  path.join(
+    __dirname,
+    "node_modules/@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/onlyVariables.css"
+  ),
   path.join(__dirname, "src/styles/bright_light.css"),
   path.join(__dirname, "src/styles/constants.css"),
   animationsSource,
@@ -27,7 +31,12 @@ let plugins = [
   // postcss-custom-properties only works with :root
   scopeRoot({
     customPropRoot: ".vkui__root, .vkui__portal-root",
-    except: path.resolve(`./src/styles/${defaultSchemeId}.css`),
+    except: [
+      path.resolve(`./src/styles/${defaultSchemeId}.css`),
+      path.resolve(
+        "./node_modules/@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/onlyVariables.css"
+      ),
+    ],
   }),
   autoprefixer(),
   cssModules({

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,10 +46,10 @@ export interface ActionSheetItemProps
   onImmediateClick?: React.MouseEventHandler<HTMLElement>;
 }
 
-const ActionSheetItem: React.FC<ActionSheetItemProps> = ({
+const ActionSheetItemComponent: React.FC<ActionSheetItemProps> = ({
   children,
   autoclose,
-  mode,
+  mode = "default",
   meta,
   subtitle,
   before,
@@ -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,9 +185,6 @@ const ActionSheetItem: React.FC<ActionSheetItemProps> = ({
   );
 };
 
-ActionSheetItem.defaultProps = {
-  mode: "default",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(ActionSheetItem, { sizeY: true });
+export const ActionSheetItem = withAdaptivity(ActionSheetItemComponent, {
+  sizeY: true,
+});

package/src/components/AdaptivityProvider/AdaptivityProvider.tsx

@@ -135,5 +135,4 @@ function calculateAdaptivity(
   return { viewWidth, viewHeight, sizeX, sizeY, hasMouse, deviceHasHover };
 }
 
-// eslint-disable-next-line import/no-default-export
-export default AdaptivityProvider;
+export { AdaptivityProvider };

package/src/components/Alert/Alert.tsx

@@ -15,7 +15,10 @@ import Title from "../Typography/Title/Title";
 import Caption from "../Typography/Caption/Caption";
 import ModalDismissButton from "../ModalDismissButton/ModalDismissButton";
 import { FocusTrap } from "../FocusTrap/FocusTrap";
-import { AdaptivityContextInterface } from "../AdaptivityProvider/AdaptivityContext";
+import {
+  AdaptivityContextInterface,
+  AdaptivityProps,
+} from "../AdaptivityProvider/AdaptivityContext";
 import "./Alert.css";
 
 export type AlertActionInterface = AlertAction &
@@ -31,7 +34,7 @@ export interface AlertAction extends Pick<ButtonProps, "Component" | "href"> {
 export interface AlertProps
   extends React.HTMLAttributes<HTMLElement>,
     HasPlatform,
-    AdaptivityContextInterface {
+    AdaptivityProps {
   actionsLayout?: "vertical" | "horizontal";
   actions?: AlertAction[];
   header?: React.ReactNode;
@@ -39,6 +42,8 @@ export interface AlertProps
   onClose?: VoidFunction;
 }
 
+export type TAlertProps = AlertProps & AdaptivityContextInterface;
+
 export interface AlertState {
   closing: boolean;
 }
@@ -47,8 +52,8 @@ type TransitionEndHandler = (e?: TransitionEvent) => void;
 
 type ItemClickHander = (item: AlertActionInterface) => () => void;
 
-class Alert extends React.Component<AlertProps, AlertState> {
-  constructor(props: AlertProps) {
+class AlertComponent extends React.Component<TAlertProps, AlertState> {
+  constructor(props: TAlertProps) {
     super(props);
     this.element = React.createRef();
     this.state = {
@@ -60,7 +65,7 @@ class Alert extends React.Component<AlertProps, AlertState> {
 
   private transitionFinishTimeout: number | undefined = undefined;
 
-  static defaultProps: Partial<AlertProps> = {
+  static defaultProps: Partial<TAlertProps> = {
     actionsLayout: "horizontal",
     actions: [],
   };
@@ -131,13 +136,13 @@ class Alert extends React.Component<AlertProps, 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>
         );
@@ -238,7 +243,7 @@ class Alert extends React.Component<AlertProps, AlertState> {
     } = this.props;
     const { closing } = this.state;
 
-    const resolvedActionsLayout: AlertProps["actionsLayout"] =
+    const resolvedActionsLayout: TAlertProps["actionsLayout"] =
       platform === VKCOM ? "horizontal" : actionsLayout;
     const canShowCloseButton =
       platform === VKCOM ||
@@ -280,9 +285,8 @@ class Alert extends React.Component<AlertProps, AlertState> {
   }
 }
 
-// eslint-disable-next-line import/no-default-export
-export default withPlatform(
-  withAdaptivity(Alert, {
+export const Alert = withPlatform(
+  withAdaptivity(AlertComponent, {
     viewWidth: true,
   })
 );

package/src/components/AppRoot/AppRoot.tsx

@@ -209,6 +209,3 @@ export const AppRoot = withAdaptivity<AppRootProps>(
     hasMouse: true,
   }
 );
-
-// eslint-disable-next-line import/no-default-export
-export default AppRoot;

package/src/components/AppearanceProvider/AppearanceProvider.tsx

@@ -2,13 +2,36 @@ import * as React from "react";
 import { AppearanceType } from "@vkontakte/vk-bridge";
 import { AppearanceProviderContext } from "./AppearanceProviderContext";
 import { getScheme } from "../../helpers/getScheme";
-import { classNames } from "../../lib/classNames";
+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",
@@ -31,9 +54,10 @@ export const AppearanceProvider: React.FC<AppearanceProviderProps> = ({
       {React.Children.map(children, (child) => {
         if (React.isValidElement(child)) {
           return React.cloneElement(child, {
-            className: classNames(
+            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.css

@@ -4,11 +4,11 @@
   box-sizing: border-box;
   text-decoration: none;
   border: none;
-  min-height: var(--vkui--size_button_small_height--regular, 28px);
+  min-height: var(--vkui--size_button_small_height--compact);
   margin: 0;
   padding: 0;
   user-select: none;
-  border-radius: var(--vkui--size_border_radius--regular, 8px);
+  border-radius: var(--vkui--size_border_radius--regular);
   max-width: 100%;
 }
 
@@ -41,7 +41,7 @@
 }
 
 .Button[disabled] {
-  opacity: var(--vkui--opacity_disable, 0.4);
+  opacity: var(--vkui--opacity_disable);
 }
 
 .Button--lvl-primary[disabled]:not(.Button--clr-overlay):not(.Button--clr-negative):not(.Button--clr-positive),
@@ -163,15 +163,7 @@
 /* Mode = Secondary */
 .Button--lvl-secondary {
   background-color: var(
-    --content_tint_background,
-    var(--vkui--color_background_secondary)
-  );
-}
-
-/* Only for VKCOM */
-.Button--vkcom.Button--lvl-secondary {
-  background-color: var(
-    --control_background,
+    --button_secondary_background,
     var(--vkui--color_background_secondary)
   );
 }
@@ -490,52 +482,30 @@
   transform: translateY(-1px);
 }
 
-/**
- * iOS
- */
-.Button--ios {
-  min-height: 26px;
-  border-radius: 10px;
-}
-
-/**
- * VKCOM
- */
-.Button--vkcom {
-  min-height: 26px;
-  border-radius: 4px;
-}
-
-.Button--vkcom.Button--lvl-secondary .Icon,
-.Button--vkcom.Button--lvl-tertiary .Icon,
-.Button--vkcom.Button--lvl-outline .Icon {
-  opacity: 0.72;
-}
-
 /**
  * sizeY COMPACT
  */
 .Button--sz-m {
-  min-height: var(--vkui--size_button_medium_height--compact, 32px);
+  min-height: var(--vkui--size_button_medium_height--compact);
 }
 
 .Button--sz-l {
-  min-height: var(--vkui--size_button_large_height--compact, 36px);
+  min-height: var(--vkui--size_button_large_height--compact);
 }
 
 /**
  * sizeY REGULAR
  */
 .Button--sizeY-regular {
-  min-height: var(--vkui--size_button_small_height--regular, 30px);
+  min-height: var(--vkui--size_button_small_height--regular);
 }
 
 .Button--sizeY-regular.Button--sz-m {
-  min-height: var(--vkui--size_button_medium_height--regular, 36px);
+  min-height: var(--vkui--size_button_medium_height--regular);
 }
 
 .Button--sizeY-regular.Button--sz-l {
-  min-height: var(--vkui--size_button_large_height--regular, 44px);
+  min-height: var(--vkui--size_button_large_height--regular);
 }
 
 /**

package/src/components/Button/Button.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { ConfigProviderContext } from "../ConfigProvider/ConfigProviderContext";
 import Tappable, { TappableProps } from "../Tappable/Tappable";
@@ -14,8 +13,9 @@ import {
   SizeType,
   withAdaptivity,
 } from "../../hoc/withAdaptivity";
-import { Platform, IOS, VKCOM } 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 {
@@ -46,7 +46,7 @@ export interface ButtonProps
 
 interface ButtonTypographyProps extends HasComponent {
   size: ButtonProps["size"];
-  platform: Platform | undefined;
+  platform: PlatformType | undefined;
   sizeY: AdaptivityProps["sizeY"];
   children?: ButtonProps["children"];
 }
@@ -62,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 (
@@ -174,7 +176,7 @@ const Button: React.FC<ButtonProps> = (props: ButtonProps) => {
       onClick={loading ? undefined : onClick}
       focusVisibleMode="outside"
       vkuiClass={classNames(
-        getClassName("Button", platform),
+        "Button",
         `Button--sz-${size}`,
         `Button--lvl-${resolvedMode}`,
         `Button--clr-${resolvedAppearance}`,

package/src/components/Card/Card.css

@@ -1,6 +1,10 @@
 .Card {
   position: relative;
-  background: var(--content_tint_background);
+  background: var(
+    --content_tint_background,
+    var(--vkui--color_background_secondary)
+  );
+  border-radius: var(--vkui--size_card_border_radius--regular);
 }
 
 .Card__in {
@@ -10,12 +14,16 @@
 }
 
 .Card--md-shadow {
-  box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.08), 0 0 2px 0 rgba(0, 0, 0, 0.08);
-  background: var(--modal_card_background);
+  box-shadow: var(
+    --vkui--elevation3,
+    0 2px 24px 0 rgba(0, 0, 0, 0.08),
+    0 0 2px 0 rgba(0, 0, 0, 0.08)
+  );
+  background: var(--modal_card_background, var(--vkui--color_background_modal));
 }
 
 .Card--md-outline {
-  background: var(--modal_card_background);
+  background: var(--modal_card_background, var(--vkui--color_background_modal));
 }
 
 .Card--md-outline::before {
@@ -26,25 +34,50 @@
   height: 100%;
   content: "";
   display: block;
-  border: var(--thin-border) solid var(--input_border);
+  border: var(--thin-border) solid
+    var(--input_border, var(--vkui--color_image_border_alpha));
   z-index: 1;
   box-sizing: border-box;
   border-radius: inherit;
 }
 
 /**
-  * iOS
+ * 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%;
+}
 
-.Card--ios {
-  border-radius: 10px;
+.CardScroll--m .Card {
+  width: 62%;
+}
+
+.CardScroll--l .Card {
+  width: 100%;
 }
 
 /**
- * Android, VKCOM
+ * CMP:
+ * Group
+ * SplitCol
  */
+.Group--card .CardScroll--l .Card,
+.SplitCol--spaced .CardScroll--l .Card {
+  width: calc(100% - 32px);
+  margin-right: 16px;
+}
 
-.Card--android,
-.Card--vkcom {
-  border-radius: 8px;
+.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: 8px;
-  flex-shrink: 0;
-}
-
 .CardScroll__gap {
   display: block;
   flex-shrink: 0;
@@ -17,81 +12,36 @@
   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%;
-}
-
-/**
- * iOS
- */
-
-.CardScroll--ios .CardScroll__gap {
-  width: 12px;
-}
-
-/**
- * Android & VKCOM
- */
-
-.CardScroll--android .CardScroll__gap,
-.CardScroll--vkcom .CardScroll__gap {
-  width: 16px;
+.CardScroll--withSpaces .CardScroll__gap {
+  width: var(--vkui--size_base_padding_horizontal--regular);
 }
 
 /**
+ * CMP:
  * SplitCol
  */
-
-.SplitCol--spaced .CardScroll {
+.SplitCol--spaced .CardScroll--withSpaces .CardScroll {
   margin-left: -16px;
   margin-right: -16px;
 }
 
-.SplitCol--spaced .CardScroll__gap {
+.SplitCol--spaced .CardScroll--withSpaces .CardScroll__gap {
   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 {
+.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:first-child {
-  padding-top: 8px;
+.Group--card .CardScroll--withSpaces:first-child {
+  padding-top: var(--vkui--size_cardgrid_padding_vertical--regular);
 }
 
-.Group--card .CardScroll:last-child {
-  padding-bottom: 8px;
+.Group--card .CardScroll--withSpaces:last-child {
+  padding-bottom: var(--vkui--size_cardgrid_padding_vertical--regular);
 }