@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/Tabs/Tabs.css

@@ -0,0 +1,102 @@
+.Tabs__in,
+.Tabs .HorizontalScroll__in-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.PanelHeader .Tabs {
+  overflow: hidden;
+  font-family: var(--font-common);
+}
+
+.PanelHeader .Tabs::after {
+  display: block;
+  width: 1000px;
+  content: "";
+}
+
+.Tabs .HorizontalScroll {
+  min-width: 100%;
+}
+
+.Tabs--buttons {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.Tabs--default,
+.Tabs--default .HorizontalScroll__in-wrapper {
+  justify-content: center;
+}
+
+.Tabs--buttons,
+.Tabs--default .HorizontalScroll__in-wrapper {
+  justify-content: flex-start;
+}
+
+.Tabs--sizeX-compact.Tabs--buttons .HorizontalScroll__in-wrapper::after,
+.Tabs--sizeX-compact.Tabs--buttons .HorizontalScroll__in-wrapper::before {
+  display: block;
+  width: 8px;
+  flex-shrink: 0;
+  height: 1px;
+  content: "";
+}
+
+/*
+ iOS
+ */
+
+.Tabs--ios.Tabs--segmented {
+  padding: 4px 12px 8px;
+}
+
+/* Нужно для закрашивания прозрачной области нижнего инсета на iphone x */
+.FixedLayout--ios.FixedLayout--bottom .Tabs::after {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  content: "";
+  background: var(--background_content);
+}
+
+.FixedLayout--ios.FixedLayout--bottom .Tabs__in,
+.FixedLayout--ios.FixedLayout--bottom .Separator {
+  position: relative;
+  z-index: 2;
+}
+
+/**
+ * Counter inside TabsItem
+ */
+
+.TabsItem .Counter {
+  margin-left: 8px;
+}
+
+.Tabs .TabsItem .Counter--secondary {
+  background: var(--panel_tab_inactive_text);
+  color: var(--white);
+}
+
+.Tabs .TabsItem--selected .Counter--secondary {
+  background: var(--panel_tab_active_text);
+  color: var(--panel_tab_active_background);
+}
+
+.Tabs--ios.Tabs--segmented .TabsItem .Counter--secondary {
+  background: var(--segmented_control_tint);
+  color: var(--background_content);
+}
+
+.Tabs--ios.Tabs--segmented .TabsItem--selected .Counter--secondary {
+  background: var(--background_content);
+  color: var(--segmented_control_tint);
+}
+
+.Tabs--ios.Tabs--segmented .TabsItem .Counter--s-m {
+  position: relative;
+  top: 1px;
+}

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { HasRootRef } from "../../types";
+import { usePlatform } from "../../hooks/usePlatform";
+import { IOS } from "../../lib/platform";
+import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
+import "./Tabs.css";
+
+export interface TabsProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    HasRootRef<HTMLDivElement>,
+    AdaptivityProps {
+  mode?: "default" | "buttons" | "segmented";
+}
+
+export const TabsModeContext =
+  React.createContext<TabsProps["mode"]>("default");
+
+const Tabs: React.FunctionComponent<TabsProps> = ({
+  children,
+  mode,
+  getRootRef,
+  sizeX,
+  ...restProps
+}: TabsProps) => {
+  const platform = usePlatform();
+
+  if (platform !== IOS && mode === "segmented") {
+    mode = "default";
+  }
+
+  return (
+    <div
+      {...restProps}
+      ref={getRootRef}
+      vkuiClass={classNames(
+        getClassName("Tabs", platform),
+        `Tabs--${mode}`,
+        `Tabs--sizeX-${sizeX}`
+      )}
+    >
+      <div vkuiClass="Tabs__in">
+        <TabsModeContext.Provider value={mode}>
+          {children}
+        </TabsModeContext.Provider>
+      </div>
+    </div>
+  );
+};
+
+Tabs.defaultProps = {
+  mode: "default",
+};
+
+// eslint-disable-next-line import/no-default-export
+export default withAdaptivity(Tabs, { sizeX: true });

package/src/components/TabsItem/TabsItem.css

@@ -0,0 +1,178 @@
+.TabsItem {
+  white-space: nowrap;
+  text-align: center;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+}
+
+.Tabs--default .TabsItem {
+  color: var(--text_tertiary);
+  max-width: 100%;
+  min-width: 0;
+  flex-basis: 0;
+  flex-shrink: 0;
+  flex-grow: 1;
+  position: relative;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.Tabs--default .TabsItem__in {
+  overflow: hidden;
+  overflow: -moz-hidden-unscrollable; /* Лечит баг с ломающимся выравниванием по baseline в FF https://stackoverflow.com/questions/4310047/css-why-is-vertical-align-baseline-stop-working-on-firefox-when-using-overflow */
+  text-overflow: ellipsis;
+  padding: 14px 0;
+}
+
+.Tabs--default .TabsItem::after {
+  content: "";
+  display: block;
+  position: absolute;
+  left: 16px;
+  bottom: 8px;
+  width: calc(100% - 32px);
+  height: 2px;
+  border-radius: 2px;
+}
+
+.Tabs--default .TabsItem--selected {
+  color: var(--text_primary);
+}
+
+.Tabs--default .TabsItem--selected::after {
+  background: var(--accent);
+}
+
+.HorizontalScroll .TabsItem {
+  min-width: 64px;
+  flex-basis: auto;
+}
+
+.Tabs--buttons .TabsItem {
+  border-radius: 10px;
+  box-sizing: border-box;
+  padding: 0 16px;
+}
+
+.Tabs--buttons .TabsItem__in {
+  padding: 6px 0;
+}
+
+/* Для случая, когда внутри Tabs нет HorizontalScroll */
+.Tabs--buttons .Tabs__in > .TabsItem:first-child {
+  margin-left: 8px;
+}
+
+.Tabs--buttons .TabsItem:not(:last-child) {
+  margin-right: 8px;
+}
+
+.Tabs--buttons .TabsItem {
+  background-color: var(--header_background);
+  color: var(--header_tab_inactive_text);
+}
+
+.Tabs--buttons .TabsItem--selected {
+  background-color: var(--header_tab_active_background);
+  color: var(--header_tab_active_text);
+}
+
+.Tabs--buttons .TabsItem {
+  color: var(--panel_tab_inactive_text);
+}
+
+.Tabs--buttons .TabsItem--selected {
+  background-color: var(--panel_tab_active_background);
+  color: var(--panel_tab_active_text);
+}
+
+.TabsItem__after .Icon--dropdown_16 {
+  color: var(--header_tint);
+  transform-origin: 50% calc(50% + 1px);
+  transform: translateY(1px);
+  margin-left: 6px;
+}
+
+/*
+  iOS
+ */
+.Tabs--ios.Tabs--segmented .TabsItem {
+  border: 1px solid;
+  padding: 0 12px;
+  max-width: 100%;
+  flex-basis: 0;
+  flex-shrink: 0;
+  flex-grow: 1;
+  border-radius: 0;
+}
+
+.Tabs--ios.Tabs--segmented .TabsItem__in {
+  padding: 7px 0;
+}
+
+.Tabs--ios.Tabs--segmented .TabsItem:not(:first-child) {
+  border-left: none;
+}
+
+.Tabs--ios.Tabs--segmented .TabsItem:last-child {
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
+}
+
+.Tabs--ios.Tabs--segmented .TabsItem:first-child {
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+}
+
+.Tabs--ios.Tabs--segmented .TabsItem {
+  border-color: var(--segmented_control_tint);
+  color: var(--segmented_control_tint);
+}
+
+.Tabs--ios.Tabs--segmented .TabsItem--selected {
+  background-color: var(--segmented_control_tint);
+}
+
+.Tabs--ios.Tabs--segmented .TabsItem--selected {
+  color: var(--background_content);
+}
+
+.Tabs--ios.Tabs--segmented .TabsItem:not(.TabsItem--selected).TabsItem--active {
+  background: var(--separator_common);
+}
+
+.PanelHeader--ios
+  .Tabs--segmented.TabsItem:not(.TabsItem--selected).TabsItem--active
+  .TabsItem__in {
+  opacity: 0.7;
+}
+
+.PanelHeader--ios .Tabs--segmented .TabsItem {
+  border-color: var(--header_tint);
+  color: var(--header_tint);
+}
+
+.Tabs--ios.Tabs--segmented.Tabs--header .TabsItem--selected {
+  background-color: var(--header_tint);
+  color: var(--header_background);
+}
+
+/*
+  VKCOM
+  */
+
+.Tabs--vkcom .TabsItem--vkcom {
+  flex-grow: 0;
+  min-width: auto;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.Tabs--vkcom .TabsItem--vkcom::after {
+  left: 2px;
+  bottom: 0;
+  width: calc(100% - 4px);
+}

package/src/components/TabsItem/TabsItem.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import Tappable from "../Tappable/Tappable";
+import { classNames } from "../../lib/classNames";
+import { VKCOM } from "../../lib/platform";
+import { usePlatform } from "../../hooks/usePlatform";
+import { hasReactNode } from "../../lib/utils";
+import { TabsProps, TabsModeContext } from "../Tabs/Tabs";
+import Headline from "../Typography/Headline/Headline";
+import Subhead from "../Typography/Subhead/Subhead";
+import Text from "../Typography/Text/Text";
+import "./TabsItem.css";
+
+export interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {
+  after?: React.ReactNode;
+  selected?: boolean;
+}
+
+const TabsItem: React.FC<TabsItemProps> = ({
+  children,
+  selected,
+  after,
+  ...restProps
+}: TabsItemProps) => {
+  const platform = usePlatform();
+  const mode: TabsProps["mode"] = React.useContext(TabsModeContext);
+
+  let TypographyComponent =
+    mode === "buttons" || mode === "segmented" ? Subhead : Headline;
+
+  if (platform === VKCOM) {
+    TypographyComponent = Text;
+  }
+
+  return (
+    <Tappable
+      {...restProps}
+      vkuiClass={classNames(getClassName("TabsItem", platform), {
+        "TabsItem--selected": selected,
+      })}
+      hasActive={mode === "segmented"}
+      activeMode="TabsItem--active"
+      focusVisibleMode={mode === "segmented" ? "outside" : "inside"}
+    >
+      <TypographyComponent
+        Component="span"
+        vkuiClass="TabsItem__in"
+        weight="medium"
+      >
+        {children}
+      </TypographyComponent>
+      {hasReactNode(after) && <div vkuiClass="TabsItem__after">{after}</div>}
+    </Tappable>
+  );
+};
+
+TabsItem.defaultProps = {
+  selected: false,
+};
+
+// eslint-disable-next-line import/no-default-export
+export default TabsItem;

package/src/components/Tappable/Tappable.css

@@ -0,0 +1,141 @@
+.Tappable {
+  position: relative;
+  cursor: pointer;
+}
+
+.Tappable[disabled],
+.Tappable[aria-disabled="true"] {
+  cursor: default;
+}
+
+.Tappable--focus-visible {
+  outline: none;
+}
+
+/**
+ * active
+ * increased specificity to override CellButton styles
+ */
+.Tappable--active-background.Tappable--active-background.Tappable--active-background {
+  background: var(--background_highlighted);
+}
+
+.Tappable--active-opacity.Tappable--active-opacity.Tappable--active-opacity {
+  opacity: 0.7;
+}
+
+/**
+ * hover
+ */
+.Tappable__hoverShadow {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  overflow: hidden;
+  border-radius: inherit;
+}
+
+.Tappable--hover-background > .Tappable__hoverShadow {
+  background: var(--background_hover);
+}
+
+.Tappable--hover-opacity {
+  opacity: 0.8;
+}
+
+/**
+ * mouse
+ */
+.Tappable--mouse {
+  transition: opacity 0.15s ease-out;
+}
+
+.Tappable--mouse .Tappable__hoverShadow {
+  transition: background-color 0.15s ease-out;
+}
+
+/**
+ * iOS tappable
+ */
+.Tappable--ios {
+  position: relative;
+  border-radius: 10px;
+  transition: background-color 0.15s ease-out;
+}
+
+.Tappable--ios.Tappable--active-background {
+  transition: none;
+}
+
+/**
+ * Android tappable
+ */
+.Tappable--android {
+  position: relative;
+  transition: background-color 0.15s ease-out;
+  border-radius: 8px;
+}
+
+.Tappable--android .Tappable__waves {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  overflow: hidden;
+  border-radius: inherit;
+  /* Fix for Safari: css animation + border-radius + overflow ignores parent border-radius */
+  will-change: transform;
+}
+
+.Tappable--android .Tappable__wave {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 24px;
+  height: 24px;
+  margin: -12px 0 0 -12px;
+  opacity: 0;
+  content: "";
+  border-radius: 50%;
+  background: rgba(127, 127, 127, 0.1);
+  animation: vkui-animation-wave 0.3s var(--android-easing);
+}
+
+/**
+ * VKCOM tappable
+ */
+.Tappable--vkcom {
+  transition: background-color 0.15s ease-out;
+  border-radius: 8px;
+}
+
+/**
+ * overrides
+ */
+.Tappable--sizeX-compact {
+  border-radius: 0;
+}
+
+/**
+ * Animations
+ */
+@keyframes vkui-animation-wave {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  30% {
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(8);
+    opacity: 0;
+  }
+}