@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/Button/Button.tsx

@@ -0,0 +1,225 @@
+import * as React from "react";
+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 { 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 {
+  /**
+   Значения `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 {}
+
+interface ButtonTypographyProps extends HasComponent {
+  size: ButtonProps["size"];
+  platform: PlatformType | undefined;
+  sizeY: AdaptivityProps["sizeY"];
+  children?: ButtonProps["children"];
+}
+
+const ButtonTypography: React.FC<ButtonTypographyProps> = (
+  props: ButtonTypographyProps
+) => {
+  const { size, sizeY, platform, ...restProps } = props;
+  const isCompact = sizeY === SizeType.COMPACT;
+
+  switch (size) {
+    case "l":
+      if (isCompact) {
+        return <Text weight="medium" {...restProps} />;
+      }
+      if (platform === ANDROID) {
+        return <Headline weight="medium" {...restProps} />;
+      }
+      return <Title level="3" weight="2" {...restProps} />;
+    case "m":
+      if (isCompact) {
+        return (
+          <Subhead weight={platform === VKCOM ? "3" : "2"} {...restProps} />
+        );
+      }
+
+      return <Text weight="medium" {...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 Button: React.FC<ButtonProps> = (props: ButtonProps) => {
+  const platform = usePlatform();
+  const {
+    size,
+    mode,
+    appearance,
+    stretched,
+    align,
+    children,
+    before,
+    after,
+    getRootRef,
+    sizeY,
+    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}
+      onClick={loading ? undefined : onClick}
+      focusVisibleMode="outside"
+      vkuiClass={classNames(
+        "Button",
+        `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}
+      hoverMode={hasNewTokens ? "Button--hover" : "background"}
+      activeMode={hasNewTokens ? "Button--active" : "opacity"}
+    >
+      {loading && <Spinner size="small" vkuiClass="Button__spinner" />}
+      <span vkuiClass="Button__in">
+        {before && <span vkuiClass="Button__before">{before}</span>}
+        {children && (
+          <ButtonTypography
+            size={size}
+            sizeY={sizeY}
+            platform={platform}
+            vkuiClass="Button__content"
+            Component="span"
+          >
+            {children}
+          </ButtonTypography>
+        )}
+        {after && <span vkuiClass="Button__after">{after}</span>}
+      </span>
+    </Tappable>
+  );
+};
+
+Button.defaultProps = {
+  mode: "primary",
+  align: "center",
+  size: "s",
+  stretched: false,
+  stopPropagation: true,
+};
+
+// eslint-disable-next-line import/no-default-export
+export default withAdaptivity(Button, {
+  sizeY: true,
+});

package/src/components/Button/Readme.md

@@ -0,0 +1,186 @@
+```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/ButtonGroup/ButtonGroup.css

@@ -0,0 +1,52 @@
+.ButtonGroup {
+  display: inline-flex;
+  align-items: flex-start; /* Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */
+}
+
+.ButtonGroup--stretched {
+  display: flex;
+  width: 100%;
+}
+
+.ButtonGroup--mode-vertical {
+  flex-direction: column;
+}
+
+.ButtonGroup--mode-horizontal {
+  flex-direction: row;
+}
+
+/* stylelint-disable vkui/atomic */
+
+/**
+ * # Обоснование
+ * Чтобы не завязываться на класс компонента, используем каскад и универсальный селектор.
+ */
+
+/* "gap" для mode="vertical" */
+.ButtonGroup--mode-vertical.ButtonGroup--gap-space > *:not(:first-child) {
+  margin-top: var(--vkui--size_button_group_gap_space--regular);
+}
+
+.ButtonGroup--mode-vertical.ButtonGroup--gap-s > *:not(:first-child) {
+  margin-top: var(--vkui--size_button_group_gap_small--regular);
+}
+
+.ButtonGroup--mode-vertical.ButtonGroup--gap-m > *:not(:first-child) {
+  margin-top: var(--vkui--size_button_group_gap_medium--regular);
+}
+
+/* "gap" для mode="horizontal" */
+.ButtonGroup--mode-horizontal.ButtonGroup--gap-space > *:not(:last-child) {
+  margin-right: var(--vkui--size_button_group_gap_space--regular);
+}
+
+.ButtonGroup--mode-horizontal.ButtonGroup--gap-s > *:not(:last-child) {
+  margin-right: var(--vkui--size_button_group_gap_small--regular);
+}
+
+.ButtonGroup--mode-horizontal.ButtonGroup--gap-m > *:not(:last-child) {
+  margin-right: var(--vkui--size_button_group_gap_medium--regular);
+}
+
+/* stylelint-enable vkui/atomic */

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import type { HasRootRef } from "../../types";
+import "./ButtonGroup.css";
+
+export interface ButtonGroupProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    HasRootRef<HTMLDivElement> {
+  /**
+   * Задает расположение элементов внутри группы, вертикальное или горизонтальное.
+   */
+  mode?: "vertical" | "horizontal";
+  /**
+   * Выставляет в зависимости от `mode` отступ по вертикали или горизонтали.
+   */
+  gap?: "none" | "space" | "s" | "m";
+  /**
+   * Растягивает компонент на всю ширину контейнера.
+   *
+   * Note: Для потомков соответствующее поведение нужно определять самостоятельно, где это необходимо.
+   */
+  stretched?: boolean;
+}
+
+export const ButtonGroup: React.FC<ButtonGroupProps> = ({
+  mode = "horizontal",
+  gap = "m",
+  stretched = false,
+  getRootRef,
+  children,
+  ...restProps
+}) => {
+  return (
+    <div
+      vkuiClass={classNames(
+        "ButtonGroup",
+        `ButtonGroup--mode-${mode}`,
+        gap !== "none" && `ButtonGroup--gap-${gap}`,
+        stretched && "ButtonGroup--stretched"
+      )}
+      role="group"
+      ref={getRootRef}
+      {...restProps}
+    >
+      {children}
+    </div>
+  );
+};