@vkontakte/vkui 4.22.0 → 4.24.0

package/src/components/Button/Button.tsx

@@ -1,54 +1,81 @@
-import * as React from 'react';
-import { getClassName } from '../../helpers/getClassName';
-import { classNames } from '../../lib/classNames';
-import Tappable, { TappableProps } 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 { Platform, IOS, VKCOM } from '../../lib/platform';
-import Spinner from '../Spinner/Spinner';
-import './Button.css';
+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";
+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 { Platform, IOS, VKCOM } from "../../lib/platform";
+import Spinner from "../Spinner/Spinner";
+import "./Button.css";
 
 export interface VKUIButtonProps extends HasAlign {
-  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'commerce' | 'destructive' | 'overlay_primary' | 'overlay_secondary' | 'overlay_outline';
-  size?: 's' | 'm' | 'l';
+  /**
+   Значения `commerce`, `destructive`, `overlay_...` будут упразднены в 5.0.0
+   */
+  mode?:
+    | "primary"
+    | "secondary"
+    | "tertiary"
+    | "outline"
+    | "commerce"
+    | "destructive"
+    | "overlay_primary"
+    | "overlay_secondary"
+    | "overlay_outline";
+  appearance?: "accent" | "positive" | "negative" | "neutral" | "overlay";
+  size?: "s" | "m" | "l";
   stretched?: boolean;
   before?: React.ReactNode;
   after?: React.ReactNode;
   loading?: boolean;
 }
 
-export interface ButtonProps extends Omit<TappableProps, 'size'>, VKUIButtonProps {}
+export interface ButtonProps
+  extends Omit<TappableProps, "size">,
+    VKUIButtonProps {}
 
 interface ButtonTypographyProps extends HasComponent {
-  size: ButtonProps['size'];
+  size: ButtonProps["size"];
   platform: Platform;
-  sizeY: AdaptivityProps['sizeY'];
-  children?: ButtonProps['children'];
+  sizeY: AdaptivityProps["sizeY"];
+  children?: ButtonProps["children"];
 }
 
-const ButtonTypography: React.FC<ButtonTypographyProps> = (props: ButtonTypographyProps) => {
+const ButtonTypography: React.FC<ButtonTypographyProps> = (
+  props: ButtonTypographyProps
+) => {
   const { size, sizeY, platform, ...restProps } = props;
   const isCompact = sizeY === SizeType.COMPACT;
 
   switch (size) {
-    case 'l':
+    case "l":
       if (isCompact) {
         return <Text weight="medium" {...restProps} />;
       }
 
       return <Title level="3" weight="medium" {...restProps} />;
-    case 'm':
+    case "m":
       if (isCompact) {
-        return <Subhead weight={platform === VKCOM ? 'regular' : 'medium'} {...restProps} />;
+        return (
+          <Subhead
+            weight={platform === VKCOM ? "regular" : "medium"}
+            {...restProps}
+          />
+        );
       }
 
       return <Text weight="medium" {...restProps} />;
-    case 's':
+    case "s":
     default:
       if (platform === IOS) {
         return <Subhead weight="medium" {...restProps} />;
@@ -66,11 +93,61 @@ const ButtonTypography: React.FC<ButtonTypographyProps> = (props: ButtonTypograp
   }
 };
 
+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 Button: React.FC<ButtonProps> = (props: ButtonProps) => {
   const platform = usePlatform();
   const {
     size,
     mode,
+    appearance,
     stretched,
     align,
     children,
@@ -78,35 +155,42 @@ const Button: React.FC<ButtonProps> = (props: ButtonProps) => {
     after,
     getRootRef,
     sizeY,
-    Component = 'button',
+    Component = "button",
     loading,
     onClick,
     ...restProps
   } = props;
-
   const hasIcons = Boolean(before || after);
+  const { resolvedMode, resolvedAppearance } = resolveButtonAppearance(
+    appearance,
+    mode
+  );
+  const hasNewTokens = React.useContext(ConfigProviderContext).hasNewTokens;
 
   return (
     <Tappable
       {...restProps}
-      Component={restProps.href ? 'a' : Component}
+      Component={restProps.href ? "a" : Component}
       onClick={loading ? null : onClick}
       focusVisibleMode="outside"
-      vkuiClass={
-        classNames(
-          getClassName('Button', platform),
-          `Button--sz-${size}`,
-          `Button--lvl-${mode}`,
-          `Button--aln-${align}`,
-          `Button--sizeY-${sizeY}`,
-          {
-            ['Button--stretched']: stretched,
-            ['Button--with-icon']: hasIcons,
-          },
-        )
-      }
+      vkuiClass={classNames(
+        getClassName("Button", platform),
+        `Button--sz-${size}`,
+        `Button--lvl-${resolvedMode}`,
+        `Button--clr-${resolvedAppearance}`,
+        `Button--aln-${align}`,
+        `Button--sizeY-${sizeY}`,
+        {
+          ["Button--stretched"]: stretched,
+          ["Button--with-icon"]: hasIcons,
+          ["Button--singleIcon"]: Boolean(
+            (!children && !after && before) || (!children && after && !before)
+          ),
+        }
+      )}
       getRootRef={getRootRef}
-      activeMode="opacity"
+      hoverMode={hasNewTokens ? "Button--hover" : "background"}
+      activeMode={hasNewTokens ? "Button--active" : "opacity"}
     >
       {loading && <Spinner size="small" vkuiClass="Button__spinner" />}
       <span vkuiClass="Button__in">
@@ -129,9 +213,9 @@ const Button: React.FC<ButtonProps> = (props: ButtonProps) => {
 };
 
 Button.defaultProps = {
-  mode: 'primary',
-  align: 'center',
-  size: 's',
+  mode: "primary",
+  align: "center",
+  size: "s",
   stretched: false,
   stopPropagation: true,
 };

package/src/components/Button/Readme.md

@@ -1,133 +1,186 @@
- ```jsx
-<View activePanel="button">
-  <Panel id="button">
-    <PanelHeader>Button</PanelHeader>
-    <Group header={<Header mode="secondary">Типы кнопок</Header>}>
-      <Div>
-        <Button>Primary</Button>
-      </Div>
-      <Div>
-        <Button mode="secondary">Secondary</Button>
-      </Div>
-      <Div>
-        <Button mode="tertiary">Tertiary</Button>
-      </Div>
-      <Div>
-        <Button mode="outline">Outline</Button>
-      </Div>
-      <Div>
-        <Button mode="commerce">Commerce</Button>
-      </Div>
-      <Div>
-        <Button mode="destructive">Destructive</Button>
-      </Div>
-      <Div style={{ background: '#232323' }}>
-        <Button mode="overlay_primary">Overlay Primary</Button>
-      </Div>
-      <Div style={{ background: '#232323' }}>
-        <Button mode="overlay_secondary">Overlay Secondary</Button>
-      </Div>
-      <Div style={{ background: '#232323' }}>
-        <Button mode="overlay_outline">Overlay Outline</Button>
-      </Div>
-    </Group>
-    <Group header={<Header mode="secondary">Типы кнопок с disabled="true"</Header>}>
-      <Div>
-        <Button disabled>Primary</Button>
-      </Div>
-      <Div>
-        <Button disabled mode="secondary">Secondary</Button>
-      </Div>
-      <Div>
-        <Button disabled mode="tertiary">Tertiary</Button>
-      </Div>
-      <Div>
-        <Button disabled mode="outline">Outline</Button>
-      </Div>
-      <Div>
-        <Button disabled mode="commerce">Commerce</Button>
-      </Div>
-      <Div>
-        <Button disabled mode="destructive">Destructive</Button>
-      </Div>
-      <Div style={{ background: '#232323' }}>
-        <Button disabled mode="overlay_primary">Overlay Primary</Button>
-      </Div>
-      <Div style={{ background: '#232323' }}>
-        <Button disabled mode="overlay_secondary">Overlay Secondary</Button>
-      </Div>
-      <Div style={{ background: '#232323' }}>
-        <Button disabled mode="overlay_outline">Overlay Outline</Button>
-      </Div>
-    </Group>
-    <Group header={<Header mode="secondary">Допустимые размеры</Header>}>
-      <Div>
-        <Button>Small</Button>
-      </Div>
-      <Div>
-        <Button size="m">Medium</Button>
-      </Div>
-      <Div>
-        <Button size="l" mode="secondary">Large</Button>
-      </Div>
-    </Group>
-    <Group header={<Header mode="secondary">Растягивание по ширине</Header>}>
-      <Div>
-        <Button size="l">No stretch</Button>
-      </Div>
-      <Div style={{display: 'flex'}}>
-        <Button size="l" stretched style={{ marginRight: 8 }}>Stretched</Button>
-        <Button size="l" stretched mode="secondary">Stretched</Button>
-      </Div>
-    </Group>
-    <Group header={<Header mode="secondary">Кнопки с иконками</Header>}>
-      <Div>
-        <Button before={<Icon16Add/>}>Add item</Button>
-      </Div>
-      <Div>
-        <Button size="l" before={<Icon24Add/>} after={<Counter>16</Counter>}>Add item</Button>
-      </Div>
-      <Div>
-        <Button mode="secondary" size="l" before={<Icon24Add/>} after={<Counter>16</Counter>}>Add item</Button>
-      </Div>
-      <Div>
-        <Button mode="tertiary" size="l" before={<Icon24Add/>} after={<Counter>16</Counter>}>Add item</Button>
-      </Div>
-      <Div>
-        <Button mode="outline" size="l" before={<Icon24Add/>} after={<Counter>16</Counter>}>Add item</Button>
-      </Div>
-      <Div>
-        <Button mode="commerce" size="l" before={<Icon24Add/>} after={<Counter>16</Counter>}>Add item</Button>
-      </Div>
-      <Div>
-        <Button before={<Icon24Camera/>} size="l">Take a photo</Button>
-      </Div>
-      <Div>
-        <Button size="l" after={<Counter>16</Counter>}>Button</Button>
-      </Div>
-      <Div>
-        <Button size="l" before={<Icon24Camera/>} after={<Counter>16</Counter>}>Button</Button>
-      </Div>
-      <Div>
-        <Button mode="secondary" before={<Icon24Shuffle/>} size="l">Shuffle</Button>
-      </Div>
-    </Group>
-    <Group header={<Header mode="secondary">Состояние загрузки</Header>}>
-      <Div>
-        <Button size="s" loading>Button</Button>
-      </Div>
-      <Div>
-        <Button size="m" loading>Button</Button>
-      </Div>
-      <Div>
-        <Button size="l" loading>Button</Button>
-      </Div>
-    </Group>
-    <Group header={<Header mode="secondary">Ссылки в виде кнопок</Header>}>
-      <Div>
-        <Button href="#">I am link</Button>
-      </Div>
-    </Group>
-  </Panel>
-</View>
+```jsx { "props": { "layout": false, "iframe": false } }
+const containerStyles = {
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  width: "100%",
+};
+
+const Example = () => {
+  const [appearance, setAppearance] = useState("accent");
+  const [sizeY, setSizeY] = useState("compact");
+  const [stretched, setStretched] = useState(false);
+  const [disabled, setDisabled] = useState(false);
+  const [size, setSize] = useState("s");
+  const [loading, setLoading] = useState(false);
+  const [addBefore, setAddBefore] = useState(false);
+  const [addAfter, setAddAfter] = useState(false);
+  const [addText, setAddText] = useState(true);
+  const [hasLink, setHasLink] = useState(false);
+
+  const buttonBefore =
+    addBefore &&
+    (size === "s" ? (
+      <Icon12Add />
+    ) : size === "m" ? (
+      <Icon16Add />
+    ) : (
+      <Icon24Add />
+    ));
+  const buttonAfter =
+    addAfter &&
+    (size === "s" ? (
+      <Icon12Tag />
+    ) : size === "m" ? (
+      <Icon24ChevronCompactRight />
+    ) : (
+      <Counter>16</Counter>
+    ));
+  const buttonLink = hasLink ? "#" : undefined;
+  const buttonText = addText ? "Button" : undefined;
+
+  return (
+    <div style={{ display: "flex", flexDirection: "row-reverse" }}>
+      <AdaptivityProvider sizeY={sizeY}>
+        <div
+          style={{
+            background: appearance === "overlay" ? "#232323" : "unset",
+            ...containerStyles,
+          }}
+        >
+          <Div>
+            <Button
+              href={buttonLink}
+              before={buttonBefore}
+              after={buttonAfter}
+              appearance={appearance}
+              stretched={stretched}
+              disabled={disabled}
+              size={size}
+              loading={loading}
+            >
+              {buttonText}
+            </Button>
+          </Div>
+          <Div>
+            <Button
+              href={buttonLink}
+              before={buttonBefore}
+              after={buttonAfter}
+              appearance={appearance}
+              stretched={stretched}
+              mode="secondary"
+              disabled={disabled}
+              size={size}
+              loading={loading}
+            >
+              {buttonText}
+            </Button>
+          </Div>
+          <Div>
+            <Button
+              href={buttonLink}
+              before={buttonBefore}
+              after={buttonAfter}
+              appearance={appearance}
+              stretched={stretched}
+              mode="tertiary"
+              disabled={disabled}
+              size={size}
+              loading={loading}
+            >
+              {buttonText}
+            </Button>
+          </Div>
+          <Div>
+            <Button
+              href={buttonLink}
+              before={buttonBefore}
+              after={buttonAfter}
+              appearance={appearance}
+              stretched={stretched}
+              mode="outline"
+              disabled={disabled}
+              size={size}
+              loading={loading}
+            >
+              {buttonText}
+            </Button>
+          </Div>
+        </div>
+      </AdaptivityProvider>
+      <div style={{ minWidth: 200 }}>
+        <FormItem top="appearance">
+          <Select
+            value={appearance}
+            onChange={(e) => setAppearance(e.target.value)}
+            options={[
+              { label: "accent", value: "accent" },
+              { label: "positive", value: "positive" },
+              { label: "negative", value: "negative" },
+              { label: "neutral", value: "neutral" },
+              { label: "overlay", value: "overlay" },
+            ]}
+          />
+        </FormItem>
+        <FormItem top="size">
+          <Select
+            value={size}
+            onChange={(e) => setSize(e.target.value)}
+            options={[
+              { label: "s", value: "s" },
+              { label: "m", value: "m" },
+              { label: "l", value: "l" },
+            ]}
+          />
+        </FormItem>
+        <FormItem top="sizeY">
+          <Select
+            value={sizeY}
+            onChange={(e) => setSizeY(e.target.value)}
+            options={[
+              { label: "compact", value: "compact" },
+              { label: "regular", value: "regular" },
+            ]}
+          />
+        </FormItem>
+        <FormItem top="props">
+          <Checkbox onChange={(e) => setStretched(e.target.checked)}>
+            stretched
+          </Checkbox>
+          <Checkbox onChange={(e) => setLoading(e.target.checked)}>
+            loading
+          </Checkbox>
+          <Checkbox onChange={(e) => setDisabled(e.target.checked)}>
+            disabled
+          </Checkbox>
+          <Checkbox
+            disabled={!(addBefore || addAfter)}
+            onChange={(e) => setAddText(e.target.checked)}
+            checked={addText}
+          >
+            add text
+          </Checkbox>
+          <Checkbox
+            disabled={!(addText || addAfter)}
+            onChange={(e) => setAddBefore(e.target.checked)}
+          >
+            add before
+          </Checkbox>
+          <Checkbox
+            disabled={!(addText || addBefore)}
+            onChange={(e) => setAddAfter(e.target.checked)}
+          >
+            add after
+          </Checkbox>
+          <Checkbox onChange={(e) => setHasLink(e.target.checked)}>
+            add href
+          </Checkbox>
+        </FormItem>
+      </div>
+    </div>
+  );
+};
+
+<Example />;
 ```

package/src/components/Card/Card.css

@@ -10,7 +10,7 @@
 }
 
 .Card--md-shadow {
-  box-shadow: 0 2px 24px 0 rgba(0, 0, 0, .08), 0 0 2px 0 rgba(0, 0, 0, .08);
+  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);
 }
 
@@ -24,7 +24,7 @@
   top: 0;
   width: 100%;
   height: 100%;
-  content: '';
+  content: "";
   display: block;
   border: var(--thin-border) solid var(--input_border);
   z-index: 1;

package/src/components/Card/Card.tsx

@@ -1,32 +1,37 @@
-import * as React from 'react';
-import { classNames } from '../../lib/classNames';
-import { getClassName } from '../../helpers/getClassName';
-import { usePlatform } from '../../hooks/usePlatform';
-import { HasRootRef } from '../../types';
-import './Card.css';
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { getClassName } from "../../helpers/getClassName";
+import { usePlatform } from "../../hooks/usePlatform";
+import { HasRootRef } from "../../types";
+import "./Card.css";
 
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
-  mode?: 'tint' | 'shadow' | 'outline';
+export interface CardProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    HasRootRef<HTMLDivElement> {
+  mode?: "tint" | "shadow" | "outline";
 }
 
-const Card: React.FunctionComponent<CardProps> = ({ mode, children, getRootRef, ...restProps }: CardProps) => {
+const Card: React.FunctionComponent<CardProps> = ({
+  mode,
+  children,
+  getRootRef,
+  ...restProps
+}: CardProps) => {
   const platform = usePlatform();
 
   return (
     <div
       {...restProps}
       ref={getRootRef}
-      vkuiClass={classNames(getClassName('Card', platform), `Card--md-${mode}`)}
+      vkuiClass={classNames(getClassName("Card", platform), `Card--md-${mode}`)}
     >
-      <div vkuiClass="Card__in">
-        {children}
-      </div>
+      <div vkuiClass="Card__in">{children}</div>
     </div>
   );
 };
 
 Card.defaultProps = {
-  mode: 'tint',
+  mode: "tint",
 };
 
 export default Card;