@vkontakte/vkui 4.34.0 → 4.35.0

package/src/components/TabsItem/TabsItem.css

@@ -1,178 +1,263 @@
 .TabsItem {
-  white-space: nowrap;
-  text-align: center;
   box-sizing: border-box;
-  flex-shrink: 0;
   display: flex;
-  align-items: baseline;
+  align-items: center;
   justify-content: center;
+  padding: 4px 8px;
+  min-width: 0;
+  max-width: 100%;
+  min-height: 32px;
+  border-radius: var(--vkui--size_border_radius--regular);
+  transition: background-color 150ms ease-out;
 }
 
-.Tabs--default .TabsItem {
-  color: var(--text_tertiary);
-  max-width: 100%;
-  min-width: 0;
+.TabsItem--withGaps {
+  margin-top: 8px;
+  margin-left: 6px;
+  margin-bottom: 8px;
+}
+
+/* TODO v5.0.0 новая адаптивность */
+.TabsItem--sizeY-compact {
+  padding-top: 2px;
+  padding-bottom: 2px;
+  min-height: 28px;
+}
+
+.TabsItem[disabled] {
+  opacity: var(--vkui--opacity_disable_accessibility);
+}
+
+/* mode="default" */
+.TabsItem--default {
+  position: relative;
   flex-basis: 0;
-  flex-shrink: 0;
   flex-grow: 1;
-  position: relative;
-  padding-left: 16px;
-  padding-right: 16px;
+  flex-shrink: 0;
+  padding: 12px 16px;
+  min-height: 48px;
 }
 
-.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;
+/* TODO v5.0.0 новая адаптивность */
+.TabsItem--sizeY-compact.TabsItem--default {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  min-height: 44px;
 }
 
-.Tabs--default .TabsItem::after {
+.TabsItem--hover.TabsItem--default {
+  background-color: var(--vkui--color_transparent--hover);
+}
+
+/* mode="accent" */
+.TabsItem--accent {
+  transition: background-color 150ms ease-out, box-shadow 150ms ease-out;
+}
+
+.TabsItem--selected.TabsItem--accent {
+  background-color: var(
+    --header_alternate_background,
+    var(--vkui--color_background_modal)
+  );
+  box-shadow: var(--vkui--elevation2);
+}
+
+.TabsItem--hover.TabsItem--accent {
+  background-color: var(
+    --control_background,
+    var(--vkui--color_background_secondary)
+  );
+}
+
+.TabsItem--accent::before {
   content: "";
-  display: block;
   position: absolute;
-  left: 16px;
-  bottom: 8px;
-  width: calc(100% - 32px);
-  height: 2px;
-  border-radius: 2px;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border: var(--thin-border) solid transparent;
+  border-radius: inherit;
+  pointer-events: none;
 }
 
-.Tabs--default .TabsItem--selected {
-  color: var(--text_primary);
+.TabsItem--selected.TabsItem--accent::before {
+  border-color: var(--separator_common, var(--vkui--color_separator_primary));
 }
 
-.Tabs--default .TabsItem--selected::after {
-  background: var(--accent);
+/* mode="secondary" */
+.TabsItem--selected.TabsItem--secondary {
+  background-color: var(--vkui--color_background_secondary_alpha);
 }
 
-.HorizontalScroll .TabsItem {
-  min-width: 64px;
-  flex-basis: auto;
+.TabsItem--hover.TabsItem--secondary {
+  background-color: var(--vkui--color_background_secondary_alpha--hover);
 }
 
-.Tabs--buttons .TabsItem {
-  border-radius: 10px;
-  box-sizing: border-box;
-  padding: 0 16px;
+/* Элемент */
+.TabsItem__before {
+  margin-right: 6px;
+  color: var(--icon_outline_medium, var(--vkui--color_icon_medium));
+  transition: color 150ms ease-out;
 }
 
-.Tabs--buttons .TabsItem__in {
-  padding: 6px 0;
+.TabsItem--selected .TabsItem__before {
+  color: var(--text_primary, var(--vkui--color_icon_primary));
 }
 
-/* Для случая, когда внутри Tabs нет HorizontalScroll */
-.Tabs--buttons .Tabs__in > .TabsItem:first-child {
-  margin-left: 8px;
+.TabsItem--selected.TabsItem--accent .TabsItem__before {
+  color: var(--header_tint_alternate, var(--vkui--color_icon_accent_themed));
 }
 
-.Tabs--buttons .TabsItem:not(:last-child) {
-  margin-right: 8px;
+.TabsItem--selected.TabsItem--secondary .TabsItem__before {
+  opacity: 0.72;
 }
 
-.Tabs--buttons .TabsItem {
-  background-color: var(--header_background);
-  color: var(--header_tab_inactive_text);
+/* Элемент */
+.TabsItem__label {
+  max-width: 100%;
+  overflow: hidden;
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: color 150ms ease-out;
+  min-width: 0;
+}
+
+.TabsItem--selected .TabsItem__label {
+  color: var(--text_primary, var(--vkui--color_text_primary));
 }
 
-.Tabs--buttons .TabsItem--selected {
-  background-color: var(--header_tab_active_background);
-  color: var(--header_tab_active_text);
+.TabsItem--selected.TabsItem--accent .TabsItem__label {
+  color: var(--header_tint_alternate, var(--vkui--color_text_accent_themed));
 }
 
-.Tabs--buttons .TabsItem {
-  color: var(--panel_tab_inactive_text);
+.TabsItem--selected.TabsItem--secondary .TabsItem__label {
+  opacity: 0.72;
+}
+
+/* Элемент */
+.TabsItem__status {
+  margin-left: 6px;
 }
 
-.Tabs--buttons .TabsItem--selected {
-  background-color: var(--panel_tab_active_background);
-  color: var(--panel_tab_active_text);
+.TabsItem__status--count {
+  color: var(--text_tertiary, var(--vkui--color_text_tertiary));
 }
 
-.TabsItem__after .Icon--dropdown_16 {
-  color: var(--header_tint);
-  transform-origin: 50% calc(50% + 1px);
-  transform: translateY(1px);
+/* Элемент */
+.TabsItem__after {
   margin-left: 6px;
+  color: var(--header_tint_alternate, var(--vkui--color_icon_accent_themed));
+}
+
+/* Элемент */
+.TabsItem__underline {
+  position: absolute;
+  left: 16px;
+  right: 16px;
+  bottom: 5px;
+  height: 2px;
+  border-radius: 2px;
+  background-color: var(--accent, var(--vkui--color_background_accent));
+  opacity: 0;
+  transition: opacity 150ms ease-out;
+  pointer-events: none;
 }
 
-/*
-  iOS
+/* TODO v5.0.0 новая адаптивность */
+.TabsItem--sizeY-compact .TabsItem__underline {
+  bottom: 3px;
+}
+
+.TabsItem__underline[data-selected="true"] {
+  opacity: 1;
+}
+
+/**
+ * CMP:
+ * Tabs
  */
-.Tabs--ios.Tabs--segmented .TabsItem {
-  border: 1px solid;
-  padding: 0 12px;
+.Tabs--vkcom .TabsItem {
+  flex-grow: 0;
+  min-width: auto;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.Tabs--vkcom .TabsItem__underline {
+  right: 2px;
+  bottom: 0;
+  left: 2px;
+}
+
+/**
+ * CMP:
+ * HorizontalScroll
+ */
+.HorizontalScroll .TabsItem {
+  min-width: 64px;
+  flex-basis: auto;
+  flex-grow: 1;
+  flex-shrink: 0;
+}
+
+/* TODO v5.0.0 Удалить mode="segmented" */
+/* [Начало] */
+.TabsItem--ios.TabsItem--segmented {
+  border: 1px solid var(--segmented_control_tint);
+  padding: 7px 12px;
   max-width: 100%;
   flex-basis: 0;
-  flex-shrink: 0;
   flex-grow: 1;
+  flex-shrink: 0;
   border-radius: 0;
 }
 
-.Tabs--ios.Tabs--segmented .TabsItem__in {
-  padding: 7px 0;
-}
-
-.Tabs--ios.Tabs--segmented .TabsItem:not(:first-child) {
+.TabsItem--ios.TabsItem--segmented: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 {
+.TabsItem--ios.TabsItem--segmented: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);
+.TabsItem--ios.TabsItem--segmented:last-child {
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
 }
 
-.Tabs--ios.Tabs--segmented .TabsItem--selected {
+.TabsItem--ios.TabsItem--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);
+.TabsItem--ios.TabsItem--segmented:not(.TabsItem--selected).TabsItem--active {
+  background-color: var(--separator_common);
 }
 
-.PanelHeader--ios
-  .Tabs--segmented.TabsItem:not(.TabsItem--selected).TabsItem--active
-  .TabsItem__in {
-  opacity: 0.7;
+.Tabs--header .TabsItem--ios.TabsItem--segmented.TabsItem--selected {
+  background-color: var(--header_tint_alternate);
+  color: var(--header_background);
 }
 
-.PanelHeader--ios .Tabs--segmented .TabsItem {
-  border-color: var(--header_tint);
-  color: var(--header_tint);
+.TabsItem--ios.TabsItem--segmented .TabsItem__label {
+  color: var(--segmented_control_tint);
 }
 
-.Tabs--ios.Tabs--segmented.Tabs--header .TabsItem--selected {
-  background-color: var(--header_tint);
-  color: var(--header_background);
+.TabsItem--ios.TabsItem--segmented.TabsItem--selected .TabsItem__label {
+  color: var(--background_content);
 }
 
-/*
-  VKCOM
-  */
-
-.Tabs--vkcom .TabsItem--vkcom {
-  flex-grow: 0;
-  min-width: auto;
-  padding-left: 10px;
-  padding-right: 10px;
+.PanelHeader--ios
+  .TabsItem--segmented:not(.TabsItem--selected).TabsItem--active
+  .TabsItem__label {
+  opacity: 0.7;
 }
 
-.Tabs--vkcom .TabsItem--vkcom::after {
-  left: 2px;
-  bottom: 0;
-  width: calc(100% - 4px);
+.PanelHeader--ios .TabsItem--segmented {
+  border-color: var(--header_tint_alternate);
+  color: var(--header_tint_alternate);
 }
+/* [Конец] */

package/src/components/TabsItem/TabsItem.tsx

@@ -1,55 +1,107 @@
 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 { IOS, VKCOM } from "../../lib/platform";
 import { usePlatform } from "../../hooks/usePlatform";
-import { hasReactNode } from "../../lib/utils";
-import { TabsProps, TabsModeContext } from "../Tabs/Tabs";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { TabsModeContext, TabsContextProps } 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> {
+  /**
+   * Добавляет иконку слева.
+   *
+   * - Для `mode="default"` используйте иконки размером 24.
+   * - Для всех остальных `mode` используйте иконки размером 20.
+   */
+  before?: React.ReactNode;
+  /**
+   * Добавляет элемент слева от `after`.
+   *
+   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode="prominent"`.
+   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode="prominent" size="s"`.
+   * - `number` – для показа текстового блока с переданным числом.
+   */
+  status?: React.ReactElement | number;
+  /**
+   * Добавляет иконку справа.
+   *
+   * Например, `<Icon16Dropdown />`
+   */
   after?: React.ReactNode;
   selected?: boolean;
+  disabled?: boolean;
 }
 
 /**
  * @see https://vkcom.github.io/VKUI/#/TabsItem
  */
 export const TabsItem = ({
+  before,
   children,
-  selected = false,
+  status,
   after,
+  selected = false,
   ...restProps
 }: TabsItemProps) => {
   const platform = usePlatform();
-  const mode: TabsProps["mode"] = React.useContext(TabsModeContext);
-
-  let ItemTypography =
-    mode === "buttons" || mode === "segmented" ? Subhead : Headline;
+  const { sizeY } = useAdaptivity();
+  const { mode, withGaps }: TabsContextProps =
+    React.useContext(TabsModeContext);
+  let statusComponent = null;
 
-  if (platform === VKCOM) {
-    ItemTypography = Text;
+  if (status) {
+    statusComponent =
+      typeof status === "number" ? (
+        <Subhead
+          Component="span"
+          vkuiClass="TabsItem__status TabsItem__status--count"
+          weight="2"
+        >
+          {status}
+        </Subhead>
+      ) : (
+        <span vkuiClass="TabsItem__status">{status}</span>
+      );
   }
 
   return (
     <Tappable
       {...restProps}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames(getClassName("TabsItem", platform), {
-        "TabsItem--selected": selected,
-      })}
-      hasActive={mode === "segmented"}
+      vkuiClass={classNames(
+        "TabsItem",
+        (platform === IOS || platform === VKCOM) && `TabsItem--${platform}`,
+        mode && `TabsItem--${mode}`,
+        selected && "TabsItem--selected",
+        // TODO v5.0.0 новая адаптивность
+        sizeY && `TabsItem--sizeY-${sizeY}`,
+        withGaps && "TabsItem--withGaps"
+      )}
+      hoverMode="TabsItem--hover"
       activeMode="TabsItem--active"
       focusVisibleMode={mode === "segmented" ? "outside" : "inside"}
+      hasActive={mode === "segmented"}
     >
-      <ItemTypography Component="span" vkuiClass="TabsItem__in" weight="2">
+      {before && <div vkuiClass="TabsItem__before">{before}</div>}
+      <Headline
+        Component="span"
+        vkuiClass="TabsItem__label"
+        level={mode === "default" ? "1" : "2"}
+        weight="2"
+      >
         {children}
-      </ItemTypography>
-      {hasReactNode(after) && <div vkuiClass="TabsItem__after">{after}</div>}
+      </Headline>
+      {statusComponent}
+      {after && <div vkuiClass="TabsItem__after">{after}</div>}
+      {mode === "default" && (
+        <div
+          vkuiClass="TabsItem__underline"
+          aria-hidden
+          data-selected={selected}
+        />
+      )}
     </Tappable>
   );
 };

package/src/components/TextTooltip/TextTooltip.css

@@ -1,18 +1,48 @@
 .TextTooltip {
-  border-radius: 8px;
-  background: rgba(
-    44,
-    45,
-    46,
-    0.88
-  ); /*TODO узнать у дизайнеров название токена*/
-
+  border-radius: var(--vkui--size_border_radius--regular);
+  background-color: var(--vkui--color_background_modal);
   padding: 8px 12px 9px;
-  color: var(--white);
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.04), 0 4px 32px rgba(0, 0, 0, 0.16);
+  color: var(--vkui--color_text_primary);
+  box-shadow: var(--vkui--elevation3);
   animation: vkui-popper-fadein 0.2s ease;
 }
 
 .TextTooltip__arrow {
-  color: rgba(44, 45, 46, 0.88);
+  color: var(--vkui--color_background_modal);
+}
+
+.TextTooltip--accent {
+  background-color: var(--vkui--color_background_accent_tint);
+  color: var(--vkui--color_text_contrast);
+}
+
+.TextTooltip--accent .TextTooltip__arrow {
+  color: var(--vkui--color_background_accent_tint);
+}
+
+.TextTooltip--white {
+  background-color: var(--vkui--color_background_contrast);
+  color: var(--vkui--color_text_primary_invariably);
+}
+
+.TextTooltip--white .TextTooltip__arrow {
+  color: var(--vkui--color_background_contrast);
+}
+
+.TextTooltip--black {
+  background-color: var(--vkui--color_background_contrast_inverse);
+  color: var(--vkui--color_text_contrast);
+}
+
+.TextTooltip--black .TextTooltip__arrow {
+  color: var(--vkui--color_background_contrast_inverse);
+}
+
+.TextTooltip--inversion {
+  background-color: var(--vkui--color_background_modal_inverse);
+  color: var(--vkui--color_text_contrast_themed);
+}
+
+.TextTooltip--inversion .TextTooltip__arrow {
+  color: var(--vkui--color_background_modal_inverse);
 }

package/src/components/TextTooltip/TextTooltip.tsx

@@ -1,10 +1,9 @@
 import * as React from "react";
 import { HoverPopper, HoverPopperProps } from "../HoverPopper/HoverPopper";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
 import { Subhead } from "../Typography/Subhead/Subhead";
 import { prefixClass } from "../../lib/prefixClass";
+import { classNames } from "../../lib/classNames";
 import "./TextTooltip.css";
 
 export interface TextTooltipProps
@@ -17,6 +16,10 @@ export interface TextTooltipProps
    * Заголовок тултипа
    */
   header?: React.ReactNode;
+  /**
+   * Стиль отображения подсказки
+   */
+  appearance?: "accent" | "neutral" | "white" | "black" | "inversion";
 }
 
 /**
@@ -26,30 +29,23 @@ export const TextTooltip = ({
   children,
   text,
   header,
+  appearance = "black", // TODO v5 сменить по умолчанию на "neutral"
   ...popperProps
 }: TextTooltipProps) => {
-  const platform = usePlatform();
-
   return (
     <HoverPopper
-      vkuiClass={getClassName("TextTooltip", platform)}
+      vkuiClass={classNames("TextTooltip", `TextTooltip--${appearance}`)}
       arrow
       arrowClassName={prefixClass("TextTooltip__arrow")}
       content={
         <React.Fragment>
           {hasReactNode(header) && (
-            <Subhead
-              Component="span"
-              weight="2"
-              vkuiClass="TextTooltip__header"
-            >
+            <Subhead weight="2" vkuiClass="TextTooltip__header">
               {header}
             </Subhead>
           )}
           {hasReactNode(text) && (
-            <Subhead Component="span" vkuiClass="TextTooltip__text">
-              {text}
-            </Subhead>
+            <Subhead vkuiClass="TextTooltip__text">{text}</Subhead>
           )}
         </React.Fragment>
       }

package/src/components/Textarea/Textarea.css

@@ -9,8 +9,9 @@
   box-sizing: border-box;
   resize: none;
   appearance: none;
-  line-height: 20px;
-  font-size: 16px;
+  font-weight: var(--vkui--font_text--font_weight--regular);
+  font-size: var(--vkui--font_text--font_size--regular);
+  line-height: var(--vkui--font_text--line_height--regular);
   color: var(--text_primary, var(--vkui--color_text_primary));
   padding: 12px;
   max-height: 204px;
@@ -26,12 +27,15 @@
 
 /* TODO. v5.0.0 Новая адаптивность */
 .Textarea--sizeY-compact .Textarea__el {
-  font-size: 15px;
+  font-size: var(--vkui--font_text--font_size--compact);
+  line-height: var(--vkui--font_text--line_height--compact);
   max-height: 196px;
 }
 
 .Textarea__el::placeholder {
   color: var(--field_text_placeholder, var(--vkui--color_text_secondary));
+  /* Для Firefox */
+  opacity: 1;
 }
 
 .Textarea__el:disabled {

package/src/components/Textarea/Textarea.tsx

@@ -18,9 +18,6 @@ export interface TextareaProps
   defaultValue?: string;
 }
 
-/**
- * @see https://vkcom.github.io/VKUI/#/Textarea
- */
 const TextareaComponent = ({
   defaultValue = "",
   grow = true,
@@ -78,5 +75,9 @@ const TextareaComponent = ({
   );
 };
 
-// eslint-disable-next-line import/no-default-export
+/**
+ * @see https://vkcom.github.io/VKUI/#/Textarea
+ */
 export const Textarea = withAdaptivity(TextareaComponent, { sizeY: true });
+
+Textarea.displayName = "Textarea";