@vkontakte/vkui 4.33.3 → 4.34.1

package/src/components/Gradient/Readme.md

@@ -1,21 +1,30 @@
 ```jsx
-const Example = ({ sizeX }) => {
+import { Icon16Done, Icon16Down, Icon16Up } from "@vkontakte/icons";
+
+const ExampleWithAdaptivity = () => {
+  const { sizeX } = useAdaptivity();
+  const [direction, setDirection] = React.useState("top");
+
+  const styles = {
+    margin: sizeX === SizeType.REGULAR ? "-7px -7px 0 -7px" : 0,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    textAlign: "center",
+    padding: 32,
+  };
+
+  if (direction === "bottom") {
+    styles.borderRadius = "inherit";
+  }
+
   return (
     <View activePanel="gradient">
       <Panel id="gradient">
         <PanelHeader>Gradient</PanelHeader>
         <Group>
-          <Gradient
-            style={{
-              margin: sizeX === SizeType.REGULAR ? "-7px -7px 0 -7px" : 0,
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
-              textAlign: "center",
-              padding: 32,
-            }}
-          >
+          <Gradient mode="tint" to={direction} style={styles}>
             <Avatar size={96} />
             <Title
               style={{ marginBottom: 8, marginTop: 20 }}
@@ -24,7 +33,12 @@ const Example = ({ sizeX }) => {
             >
               Алексей Мазелюк
             </Title>
-            <Text style={{ marginBottom: 24, color: "var(--text_secondary)" }}>
+            <Text
+              style={{
+                marginBottom: 24,
+                color: "var(--vkui--color_text_secondary)",
+              }}
+            >
               Учащийся
             </Text>
             <Button size="m" mode="secondary">
@@ -44,12 +58,36 @@ const Example = ({ sizeX }) => {
             </CellButton>
           </Group>
         </Group>
+        <Group>
+          <Group
+            mode="plain"
+            header={<Header mode="secondary">Направление to="bottom"</Header>}
+          >
+            <Gradient to="bottom">
+              <div style={{ height: 150 }} />
+            </Gradient>
+          </Group>
+          <Group
+            mode="plain"
+            header={<Header mode="secondary">Тип градиента white</Header>}
+          >
+            <Gradient mode="white">
+              <div style={{ height: 150 }} />
+            </Gradient>
+          </Group>
+          <Group
+            mode="plain"
+            header={<Header mode="secondary">Тип градиента black</Header>}
+          >
+            <Gradient mode="black">
+              <div style={{ height: 150 }} />
+            </Gradient>
+          </Group>
+        </Group>
       </Panel>
     </View>
   );
 };
 
-const ExampleWithAdaptivity = withAdaptivity(Example, { sizeX: true });
-
 <ExampleWithAdaptivity />;
 ```

package/src/components/Group/Group.css

@@ -1,5 +1,5 @@
 .Group {
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
 }
 
 .Group__inner {
@@ -7,13 +7,14 @@
   padding-bottom: 8px;
 }
 
+/* TODO v5.0.0 Новая адаптивность */
 .Group--sizeX-regular > .Group__inner {
   padding: 8px;
 }
 
 .Group--card > .Group__inner {
-  background: var(--background_content);
-  border-radius: 8px;
+  background: var(--background_content, var(--vkui--color_background_content));
+  border-radius: var(--vkui--size_border_radius--regular);
   position: relative;
 }
 
@@ -29,19 +30,12 @@
   box-shadow: inset 0 0 0 var(--thin-border) var(--input_border);
 }
 
-.Group--plain .Group__inner > .Tabs--default:first-child {
-  margin-top: -8px;
-}
-
-.Group--card > .Group__inner > .Tabs--default:first-child {
-  margin-top: -4px;
-}
-
 .Group--plain > .Group__separator {
   padding-top: 8px;
   padding-bottom: 8px;
 }
 
+/* TODO v5.0.0 Новая адаптивность */
 .Group--sizeX-regular.Group--plain > .Group__separator {
   padding: 8px;
 }
@@ -51,6 +45,7 @@
 }
 
 .Group:last-of-type > .Group__separator--force,
+/* TODO v5.0.0 Новая адаптивность */
 .Group--sizeX-regular.Group--card:last-of-type > .Group__separator {
   display: block;
 }
@@ -58,7 +53,7 @@
 .Group__description {
   display: block;
   padding: 4px 16px 16px;
-  color: var(--text_secondary);
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
 }
 
 .Group .Group > .Group__inner,
@@ -82,8 +77,9 @@
   padding: 4px 12px 16px;
 }
 
-/**
- * VKCOM
+/*
+ * CMP:
+ * PanelHeader
  */
 .PanelHeader--vkcom ~ .Group--card:first-of-type,
 .PanelHeader--vkcom + * .Group--card:first-of-type {

package/src/components/Group/Group.tsx

@@ -1,8 +1,9 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
+import { IOS } from "../../lib/platform";
 import { classNames } from "../../lib/classNames";
 import { HasRootRef } from "../../types";
 import { usePlatform } from "../../hooks/usePlatform";
+import { Spacing } from "../Spacing/Spacing";
 import { Separator } from "../Separator/Separator";
 import { hasReactNode } from "../../lib/utils";
 import { Caption } from "../Typography/Caption/Caption";
@@ -33,19 +34,19 @@ export interface GroupProps
    * по умолчанию 'plain'.
    */
   mode?: "plain" | "card";
+  children?: React.ReactNode;
 }
 
-const GroupComponent: React.FC<GroupProps> = (props: GroupProps) => {
-  const {
-    header,
-    description,
-    children,
-    separator = "auto",
-    getRootRef,
-    mode,
-    sizeX,
-    ...restProps
-  } = props;
+const GroupComponent = ({
+  header,
+  description,
+  children,
+  separator = "auto",
+  getRootRef,
+  mode,
+  sizeX,
+  ...restProps
+}: GroupProps) => {
   const { isInsideModal } = React.useContext(ModalRootContext);
   const platform = usePlatform();
 
@@ -56,12 +57,29 @@ const GroupComponent: React.FC<GroupProps> = (props: GroupProps) => {
       sizeX === SizeType.COMPACT || isInsideModal ? "plain" : "card";
   }
 
+  let separatorElement = null;
+
+  if (separator !== "hide") {
+    const separatorClassName = classNames(
+      "Group__separator",
+      separator === "show" && "Group__separator--force"
+    );
+    separatorElement =
+      computedMode === "card" ? (
+        <Spacing vkuiClass={separatorClassName} size={16} />
+      ) : (
+        <Separator vkuiClass={separatorClassName} />
+      );
+  }
+
   return (
     <section
       {...restProps}
       ref={getRootRef}
       vkuiClass={classNames(
-        getClassName("Group", platform),
+        "Group",
+        platform === IOS && "Group--ios",
+        // TODO v5.0.0 Новая адаптивность
         `Group--sizeX-${sizeX}`,
         `Group--${computedMode}`
       )}
@@ -73,16 +91,7 @@ const GroupComponent: React.FC<GroupProps> = (props: GroupProps) => {
           <Caption vkuiClass="Group__description">{description}</Caption>
         )}
       </div>
-
-      {separator !== "hide" && (
-        <Separator
-          // eslint-disable-next-line vkui/no-object-expression-in-arguments
-          vkuiClass={classNames("Group__separator", {
-            "Group__separator--force": separator === "show",
-          })}
-          expanded={computedMode === "card"}
-        />
-      )}
+      {separatorElement}
     </section>
   );
 };

package/src/components/Header/Header.tsx

@@ -32,11 +32,11 @@ type HeaderContentProps = Pick<HeaderProps, "children" | "mode"> &
   HasPlatform &
   HasComponent;
 
-const HeaderContent: React.FC<HeaderContentProps> = ({
+const HeaderContent = ({
   platform,
   mode,
   ...restProps
-}) => {
+}: HeaderContentProps) => {
   if (platform === Platform.IOS) {
     switch (mode) {
       case "primary":
@@ -71,7 +71,7 @@ const HeaderContent: React.FC<HeaderContentProps> = ({
 /**
  * @see https://vkcom.github.io/VKUI/#/Header
  */
-export const Header: React.FC<HeaderProps> = ({
+export const Header = ({
   mode = "primary",
   children,
   subtitle,

package/src/components/HorizontalCell/HorizontalCell.css

@@ -31,7 +31,7 @@
 }
 
 .HorizontalCell--s .HorizontalCell__content {
-  padding: 2px 4px 8px 4px;
+  padding: 2px 4px 8px;
   text-align: center;
 }
 
@@ -50,7 +50,7 @@
 
 .HorizontalCell--m .HorizontalCell__content,
 .HorizontalCell--l .HorizontalCell__content {
-  padding: 2px 6px 8px 6px;
+  padding: 2px 6px 8px;
   text-align: left;
 }
 

package/src/components/HorizontalCell/HorizontalCell.tsx

@@ -14,7 +14,7 @@ interface CellTypographyProps extends React.HTMLAttributes<HTMLDivElement> {
   size: HorizontalCellProps["size"];
 }
 
-const CellTypography: React.FC<CellTypographyProps> = ({
+const CellTypography = ({
   size,
   children,
   ...restProps
@@ -42,7 +42,7 @@ export interface HorizontalCellProps
 /**
  * @see https://vkcom.github.io/VKUI/#/HorizontalCell
  */
-export const HorizontalCell: React.FC<HorizontalCellProps> = ({
+export const HorizontalCell = ({
   className,
   header,
   style,

package/src/components/HorizontalScroll/HorizontalScroll.css

@@ -1,13 +1,22 @@
 .HorizontalScroll {
   position: relative;
-  overflow: hidden;
+
+  /**
+   * ⚠️ WARNING ⚠️
+   * `overflow-y` мы не трогаем, т.к. из-за `hidden` могут обрезаться тени у потомков.
+   */
+  overflow-x: hidden;
 }
 
 .HorizontalScroll__in {
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
-  padding-bottom: 20px;
-  margin-bottom: -20px;
+
+  /**
+   * Для удаление скролла в Firefox.
+   * В версии ниже 64 будет виден скролл, но это не ломает функциональность.
+   */
+  scrollbar-width: none;
 }
 
 .HorizontalScroll__in::-webkit-scrollbar {
@@ -18,13 +27,13 @@
   transition: transform 0.2s;
 }
 
-.HorizontalScrollArrow--left:hover
+.HorizontalScroll__arrowLeft:hover
   ~ .HorizontalScroll__in
   .HorizontalScroll__in-wrapper {
   transform: translateX(8px);
 }
 
-.HorizontalScrollArrow--right:hover
+.HorizontalScroll__arrowRight:hover
   ~ .HorizontalScroll__in
   .HorizontalScroll__in-wrapper {
   transform: translateX(-8px);

package/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
-import HorizontalScrollArrow from "./HorizontalScrollArrow";
+import { HorizontalScrollArrow } from "./HorizontalScrollArrow";
 import { easeInOutSine } from "../../lib/fx";
 import { useEventListener } from "../../hooks/useEventListener";
 import { useExternRef } from "../../hooks/useExternRef";
@@ -37,6 +37,7 @@ export interface HorizontalScrollProps
    * Функция для расчета величины прокрутки при клике на правую стрелку.
    */
   getScrollToRight?: ScrollPositionHandler;
+  arrowSize?: "m" | "l";
   showArrows?: boolean | "always";
   scrollAnimationDuration?: number;
 }
@@ -122,16 +123,17 @@ function doScroll({
   })();
 }
 
-const HorizontalScrollComponent: React.FC<HorizontalScrollProps> = ({
+const HorizontalScrollComponent = ({
   children,
   getScrollToLeft,
   getScrollToRight,
   showArrows = true,
+  arrowSize = "l",
   scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,
   hasMouse,
   getRef,
   ...restProps
-}) => {
+}: HorizontalScrollProps) => {
   const [canScrollLeft, setCanScrollLeft] = React.useState(false);
   const [canScrollRight, setCanScrollRight] = React.useState(false);
 
@@ -205,16 +207,26 @@ const HorizontalScrollComponent: React.FC<HorizontalScrollProps> = ({
   return (
     <div
       {...restProps}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames("HorizontalScroll", {
-        ["HorizontalScroll--withConstArrows"]: showArrows === "always",
-      })}
+      vkuiClass={classNames(
+        "HorizontalScroll",
+        showArrows === "always" && "HorizontalScroll--withConstArrows"
+      )}
     >
       {showArrows && hasMouse && canScrollLeft && (
-        <HorizontalScrollArrow direction="left" onClick={scrollToLeft} />
+        <HorizontalScrollArrow
+          size={arrowSize}
+          direction="left"
+          vkuiClass="HorizontalScroll__arrowLeft"
+          onClick={scrollToLeft}
+        />
       )}
       {showArrows && hasMouse && canScrollRight && (
-        <HorizontalScrollArrow direction="right" onClick={scrollToRight} />
+        <HorizontalScrollArrow
+          size={arrowSize}
+          direction="right"
+          vkuiClass="HorizontalScroll__arrowRight"
+          onClick={scrollToRight}
+        />
       )}
       <div vkuiClass="HorizontalScroll__in" ref={scrollerRef}>
         <div vkuiClass="HorizontalScroll__in-wrapper">{children}</div>

package/src/components/HorizontalScroll/HorizontalScrollArrow.css

@@ -16,46 +16,35 @@
   justify-content: center;
 }
 
-.HorizontalScroll:hover .HorizontalScrollArrow,
-.Gallery:hover .HorizontalScrollArrow {
-  opacity: 0.72;
-}
-
-.HorizontalScroll:hover .HorizontalScrollArrow:hover,
-.Gallery:hover .HorizontalScrollArrow:hover,
-.HorizontalScroll--withConstArrows .HorizontalScrollArrow,
-.HorizontalScroll--withConstArrows:hover .HorizontalScrollArrow {
-  opacity: 1;
-}
-
 .HorizontalScrollArrow__icon {
   background-color: var(
     --modal_card_background,
     var(--vkui--color_background_modal)
   );
   color: var(--icon_secondary, var(--vkui--color_icon_secondary));
-  width: 40px;
-  height: 40px;
-  border-radius: 24px;
-  box-shadow: var(
-    --vkui--elevation3,
-    0 0 2px rgba(0, 0, 0, 0.08),
-    0 0 16px rgba(0, 0, 0, 0.12)
-  );
+  box-shadow: var(--vkui--elevation3);
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
+.HorizontalScrollArrow--m .HorizontalScrollArrow__icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 14px;
+}
+
+.HorizontalScrollArrow--l .HorizontalScrollArrow__icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 24px;
+}
+
 .HorizontalScrollArrow--left {
   padding-left: var(--vkui--size_base_padding_horizontal--regular, 16px);
   left: 0;
 }
 
-.HorizontalScrollArrow--left .HorizontalScrollArrow__icon {
-  transform: rotate(180deg);
-}
-
 .HorizontalScrollArrow--right {
   padding-right: var(--vkui--size_base_padding_horizontal--regular, 16px);
   right: 0;
@@ -67,3 +56,18 @@
 .HorizontalScrollArrow--ios .HorizontalScrollArrow {
   transition-timing-function: var(--ios-easing);
 }
+
+/**
+ * CMP: Gallery, HorizontalScroll
+ */
+.Gallery:hover .HorizontalScrollArrow,
+.HorizontalScroll:hover .HorizontalScrollArrow {
+  opacity: var(--vkui--opacity_disable_accessibility);
+}
+
+.Gallery:hover .HorizontalScrollArrow:hover,
+.HorizontalScroll:hover .HorizontalScrollArrow:hover,
+.HorizontalScroll--withConstArrows .HorizontalScrollArrow,
+.HorizontalScroll--withConstArrows:hover .HorizontalScrollArrow {
+  opacity: 1;
+}

package/src/components/HorizontalScroll/HorizontalScrollArrow.tsx

@@ -1,35 +1,54 @@
 import * as React from "react";
-import { Icon24Chevron } from "@vkontakte/icons";
+import {
+  Icon24Chevron,
+  Icon24ChevronLeft,
+  Icon16Chevron,
+  Icon16ChevronLeft,
+} from "@vkontakte/icons";
 import { classNames } from "../../lib/classNames";
+import { usePlatform } from "../../hooks/usePlatform";
+import { IOS } from "../../lib/platform";
 import { Tappable } from "../Tappable/Tappable";
 import "./HorizontalScrollArrow.css";
 
 export interface HorizontalScrollArrowProps {
-  onClick: () => void;
   direction: "left" | "right";
+  size?: "m" | "l";
+  onClick(): void;
 }
 
-const HorizontalScrollArrow: React.FC<HorizontalScrollArrowProps> = ({
-  onClick,
+export const HorizontalScrollArrow = ({
+  size = "l",
   direction,
+  onClick,
+  ...restProps
 }: HorizontalScrollArrowProps) => {
+  const platform = usePlatform();
+  let ArrowIcon: React.ComponentType<unknown>;
+
+  if (size === "m") {
+    ArrowIcon = direction === "left" ? Icon16ChevronLeft : Icon16Chevron;
+  } else {
+    ArrowIcon = direction === "left" ? Icon24ChevronLeft : Icon24Chevron;
+  }
+
   return (
     <Tappable
+      {...restProps}
       Component="button"
       hasHover={false}
       hasActive={false}
       vkuiClass={classNames(
         "HorizontalScrollArrow",
-        `HorizontalScrollArrow--${direction}`
+        `HorizontalScrollArrow--${size}`,
+        `HorizontalScrollArrow--${direction}`,
+        platform === IOS && "HorizontalScrollArrow--ios"
       )}
       onClick={onClick}
     >
       <span vkuiClass="HorizontalScrollArrow__icon">
-        <Icon24Chevron />
+        <ArrowIcon />
       </span>
     </Tappable>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default HorizontalScrollArrow;

package/src/components/HorizontalScroll/Readme.md

@@ -39,6 +39,7 @@ const HorizontalScrollExample = () => {
         <Group header={<Header mode="secondary">Общие друзья</Header>}>
           <HorizontalScroll
             showArrows
+            arrowSize="m"
             getScrollToLeft={(i) => i - 120}
             getScrollToRight={(i) => i + 120}
           >

package/src/components/HoverPopper/HoverPopper.tsx

@@ -32,7 +32,7 @@ export interface HoverPopperProps extends PopperCommonProps {
   children?: React.ReactElement;
 }
 
-export const HoverPopper: React.FC<HoverPopperProps> = ({
+export const HoverPopper = ({
   getRef,
   content,
   children,