@vkontakte/vkui 4.23.0 → 4.25.2

package/src/components/ContentCard/ContentCard.tsx

@@ -1,16 +1,24 @@
-import * as React from 'react';
-import Card, { CardProps } from '../Card/Card';
-import Caption from '../Typography/Caption/Caption';
-import Title from '../Typography/Title/Title';
-import Text from '../Typography/Text/Text';
-import Tappable from '../Tappable/Tappable';
-import { getClassName } from '../../helpers/getClassName';
-import { usePlatform } from '../../hooks/usePlatform';
-import { hasReactNode } from '../../lib/utils';
-import { HasRef, HasRootRef } from '../../types';
-import './ContentCard.css';
+import * as React from "react";
+import Card, { CardProps } from "../Card/Card";
+import Caption from "../Typography/Caption/Caption";
+import Title from "../Typography/Title/Title";
+import Text from "../Typography/Text/Text";
+import Tappable, { TappableProps } from "../Tappable/Tappable";
+import { getClassName } from "../../helpers/getClassName";
+import { usePlatform } from "../../hooks/usePlatform";
+import { hasReactNode } from "../../lib/utils";
+import { HasRef, HasRootRef } from "../../types";
+import { classNames } from "../../lib/classNames";
+import "./ContentCard.css";
 
-export interface ContentCardProps extends HasRootRef<HTMLDivElement>, React.ImgHTMLAttributes<HTMLImageElement>, HasRef<HTMLImageElement> {
+export interface ContentCardProps
+  extends HasRootRef<HTMLDivElement>,
+    Omit<TappableProps, "getRootRef" | "crossOrigin">,
+    Omit<
+      React.ImgHTMLAttributes<HTMLImageElement>,
+      keyof React.HTMLAttributes<HTMLImageElement>
+    >,
+    HasRef<HTMLImageElement> {
   /**
    Текст над заголовком
    */
@@ -27,10 +35,6 @@ export interface ContentCardProps extends HasRootRef<HTMLDivElement>, React.ImgH
    Нижний текст
    */
   caption?: React.ReactNode;
-  /**
-    URL или путь к изображению
-   */
-  src?: string;
   /**
     @deprecated будет удалено в 5.0.0. Используйте src
    */
@@ -39,18 +43,7 @@ export interface ContentCardProps extends HasRootRef<HTMLDivElement>, React.ImgH
     Максимальная высота изображения
    */
   maxHeight?: number;
-  /**
-    Аналогично alt для img
-   */
-  alt?: string;
-  /**
-    Отключает Tappable у карточки
-   */
-  disabled?: boolean;
-  /**
-   В точности как у `<Card/>`
-   */
-  mode?: CardProps['mode'];
+  mode?: CardProps["mode"];
 }
 
 const ContentCard: React.FC<ContentCardProps> = (props: ContentCardProps) => {
@@ -83,13 +76,25 @@ const ContentCard: React.FC<ContentCardProps> = (props: ContentCardProps) => {
   } = props;
   const platform = usePlatform();
 
-  const disabled = restProps.disabled || typeof restProps.onClick !== 'function';
-
   const source = image || src;
 
   return (
-    <Card mode={mode} getRootRef={getRootRef} vkuiClass={getClassName('ContentCard', platform)} style={style} className={className}>
-      <Tappable {...restProps} disabled={disabled} vkuiClass="ContentCard__tappable">
+    <Card
+      mode={mode}
+      getRootRef={getRootRef}
+      vkuiClass={classNames(getClassName("ContentCard", platform), {
+        "ContentCard--disabled": restProps.disabled,
+      })}
+      style={style}
+      className={className}
+    >
+      <Tappable
+        {...restProps}
+        disabled={restProps.disabled || (!restProps.onClick && !restProps.href)}
+        hasHover={false}
+        hasActive={false}
+        vkuiClass="ContentCard__tappable"
+      >
         {(source || srcSet) && (
           <img
             ref={getRef}
@@ -109,10 +114,31 @@ const ContentCard: React.FC<ContentCardProps> = (props: ContentCardProps) => {
           />
         )}
         <div vkuiClass="ContentCard__body">
-          {hasReactNode(subtitle) && <Caption caps vkuiClass="ContentCard__text" weight="semibold" level="3">{subtitle}</Caption>}
-          {hasReactNode(header) && <Title vkuiClass="ContentCard__text" weight="semibold" level="3">{header}</Title>}
-          {hasReactNode(text) && <Text vkuiClass="ContentCard__text" weight="regular">{text}</Text>}
-          {hasReactNode(caption) && <Caption vkuiClass="ContentCard__text" weight="regular" level="1">{caption}</Caption>}
+          {hasReactNode(subtitle) && (
+            <Caption
+              caps
+              vkuiClass="ContentCard__text"
+              weight="semibold"
+              level="3"
+            >
+              {subtitle}
+            </Caption>
+          )}
+          {hasReactNode(header) && (
+            <Title vkuiClass="ContentCard__text" weight="semibold" level="3">
+              {header}
+            </Title>
+          )}
+          {hasReactNode(text) && (
+            <Text vkuiClass="ContentCard__text" weight="regular">
+              {text}
+            </Text>
+          )}
+          {hasReactNode(caption) && (
+            <Caption vkuiClass="ContentCard__text" weight="regular" level="1">
+              {caption}
+            </Caption>
+          )}
         </div>
       </Tappable>
     </Card>
@@ -120,7 +146,8 @@ const ContentCard: React.FC<ContentCardProps> = (props: ContentCardProps) => {
 };
 
 ContentCard.defaultProps = {
-  mode: 'shadow',
+  mode: "shadow",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default ContentCard;

package/src/components/ContentCard/Readme.md

@@ -1,26 +1,26 @@
-Компонент на базе [Card](/#/Card). Принимает все валидные свойства для `img` и `Tappable`. 
+Компонент на базе [Card](/#/Card). Принимает все валидные свойства для `img` и `Tappable`.
 
 Внутри распределяет переданные свойства между своими компонентами следующим образом:
 
 - корневой компонент `Card`
-  * `mode`,
-  * `getRootRef`,
-  * `style`,
-  * `className`;
+  - `mode`,
+  - `getRootRef`,
+  - `style`,
+  - `className`;
 - `img`
-  * `getRef`,
-  * `src`,
-  * `srcSet`,
-  * `alt`,
-  * `width`,
-  * `height`,
-  * `maxHeight`,
-  * `crossOrigin`,
-  * `decoding`,
-  * `loading`,
-  * `referrerPolicy`,
-  * `sizes`,
-  * `useMap`,
+  - `getRef`,
+  - `src`,
+  - `srcSet`,
+  - `alt`,
+  - `width`,
+  - `height`,
+  - `maxHeight`,
+  - `crossOrigin`,
+  - `decoding`,
+  - `loading`,
+  - `referrerPolicy`,
+  - `sizes`,
+  - `useMap`,
 - внутренний `Tappable` получает все остальные свойства (кроме `subtitle`, `header`, `text` и `caption`).
 
 ```jsx
@@ -28,9 +28,7 @@ const Example = () => {
   return (
     <View activePanel="profile" id="profile">
       <Panel id="profile">
-        <PanelHeader>
-          ContentCardExample
-        </PanelHeader>
+        <PanelHeader>ContentCardExample</PanelHeader>
         <Group>
           <CardGrid size="l">
             <ContentCard
@@ -39,6 +37,7 @@ const Example = () => {
               caption="VKUI Styleguide > Blocks > ContentCard"
             />
             <ContentCard
+              onClick={() => {}}
               src="https://images.unsplash.com/photo-1603988492906-4fb0fb251cf8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80"
               subtitle="unsplash"
               header="brown and gray mountains under blue sky during daytime photo"
@@ -47,6 +46,7 @@ const Example = () => {
               maxHeight={150}
             />
             <ContentCard
+              disabled
               src="https://images.unsplash.com/photo-1603928726698-a015a1015d0e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80"
               subtitle="unsplash"
               header="persons left hand with pink paint"
@@ -59,8 +59,7 @@ const Example = () => {
       </Panel>
     </View>
   );
-}
+};
 
-<Example/>
+<Example />;
 ```
-

package/src/components/Counter/Counter.css

@@ -49,35 +49,106 @@
  * CMP:
  * Button
  */
-.Button--lvl-primary .Counter {
-  background-color: var(--button_primary_foreground);
-  color: var(--button_primary_background);
+.Button--lvl-primary.Button--clr-accent .Counter,
+.Button--lvl-secondary.Button--clr-neutral .Counter,
+.Button--lvl-tertiary.Button--clr-neutral .Counter {
+  background-color: var(
+    --button_primary_foreground,
+    var(--vkui--color_background_contrast)
+  );
+  color: var(--button_primary_background, var(--vkui--color_text_contrast));
 }
 
-.Button--lvl-secondary .Counter {
-  background-color: var(--button_secondary_foreground);
-  color: var(--background_content);
+.Button--lvl-secondary.Button--clr-accent .Counter {
+  background-color: var(
+    --button_secondary_foreground,
+    var(--vkui--color_background_accent)
+  );
+  color: var(--background_content, var(--vkui--color_text_contrast_themed));
 }
 
-.Button--lvl-tertiary .Counter {
-  background-color: var(--button_tertiary_foreground);
-  color: var(--background_content);
+.Button--lvl-tertiary.Button--clr-accent .Counter {
+  background-color: var(
+    --button_tertiary_foreground,
+    var(--vkui--color_background_accent)
+  );
+  color: var(--background_content, var(--vkui--color_text_contrast_themed));
 }
 
-.Button--lvl-outline .Counter {
-  background-color: var(--button_outline_foreground);
-  color: var(--background_content);
+.Button--lvl-outline.Button--clr-accent .Counter {
+  background-color: var(
+    --button_outline_foreground,
+    var(--vkui--color_background_accent)
+  );
+  color: var(--background_content, var(--vkui--color_text_contrast_themed));
 }
 
-.Button--lvl-commerce .Counter {
-  background-color: var(--button_commerce_foreground);
-  color: var(--button_commerce_background);
+.Button--lvl-primary.Button--clr-positive .Counter {
+  background-color: var(
+    --button_commerce_foreground,
+    var(--vkui--color_background_contrast)
+  );
+  color: var(--button_commerce_background, var(--vkui--color_text_positive));
 }
 
-.Button--lvl-secondary .Counter--vkcom,
-.Button--lvl-tertiary .Counter--vkcom,
-.Button--lvl-outline .Counter--vkcom {
-  opacity: .72;
+.Button--lvl-secondary.Button--clr-positive .Counter,
+.Button--lvl-tertiary.Button--clr-positive .Counter,
+.Button--lvl-outline.Button--clr-positive .Counter {
+  background-color: var(
+    --button_commerce_background,
+    var(--vkui--color_background_positive)
+  );
+  color: var(--button_commerce_foreground, var(--vkui--color_text_contrast));
+}
+
+.Button--lvl-primary.Button--clr-negative .Counter {
+  background-color: var(--white, var(--vkui--color_background_contrast));
+  color: var(--destructive, var(--vkui--color_text_negative));
+}
+
+.Button--lvl-secondary.Button--clr-negative .Counter,
+.Button--lvl-tertiary.Button--clr-negative .Counter,
+.Button--lvl-outline.Button--clr-negative .Counter {
+  background-color: var(--destructive, var(--vkui--color_background_negative));
+  color: var(--white, var(--vkui--color_text_contrast));
+}
+
+.Button--lvl-primary.Button--clr-neutral .Counter {
+  background-color: var(
+    --media_overlay_button_background,
+    var(--vkui--color_background_contrast)
+  );
+  color: var(--text_primary, var(--vkui--color_text_primary));
+}
+
+.Button--lvl-primary.Button--clr-overlay .Counter {
+  background-color: var(
+    --media_overlay_button_foreground,
+    var(--vkui--color_icon_primary_invariably)
+  );
+  color: var(
+    --media_overlay_button_background,
+    var(--vkui--color_text_contrast)
+  );
+}
+
+.Button--lvl-secondary.Button--clr-overlay .Counter,
+.Button--lvl-tertiary.Button--clr-overlay .Counter,
+.Button--lvl-outline.Button--clr-overlay .Counter {
+  background-color: var(
+    --media_overlay_button_background,
+    var(--vkui--color_background_contrast)
+  );
+  color: var(
+    --media_overlay_button_foreground,
+    var(--vkui--color_text_primary_invariably)
+  );
+}
+
+.Button--lvl-secondary.Button--clr-accent .Counter--vkcom,
+.Button--lvl-tertiary.Button--clr-accent .Counter--vkcom,
+.Button--lvl-outline.Button--clr-accent .Counter--vkcom {
+  opacity: 0.72;
 }
 
 /**

package/src/components/Counter/Counter.tsx

@@ -1,28 +1,40 @@
-import * as React from 'react';
-import { classNames } from '../../lib/classNames';
-import { getClassName } from '../../helpers/getClassName';
-import { usePlatform } from '../../hooks/usePlatform';
-import Caption from '../Typography/Caption/Caption';
-import Text from '../Typography/Text/Text';
-import { VKCOM } from '../../lib/platform';
-import { hasReactNode } from '../../lib/utils';
-import { HasComponent, HasPlatform } from '../../types';
-import './Counter.css';
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { getClassName } from "../../helpers/getClassName";
+import { usePlatform } from "../../hooks/usePlatform";
+import Caption from "../Typography/Caption/Caption";
+import Text from "../Typography/Text/Text";
+import { VKCOM } from "../../lib/platform";
+import { hasReactNode } from "../../lib/utils";
+import { HasComponent, HasPlatform } from "../../types";
+import "./Counter.css";
 
 export interface CounterProps extends React.HTMLAttributes<HTMLSpanElement> {
   /**
    * Тип счетчика. При использовании компонента в качестве значения свойства `after` у `Button` эти значения игнорируются
    */
-  mode?: 'secondary' | 'primary' | 'prominent';
-  size?: 's' | 'm';
+  mode?: "secondary" | "primary" | "prominent";
+  size?: "s" | "m";
 }
 
-type CounterTypographyProps = Pick<CounterProps, 'size'> & HasPlatform & HasComponent;
+type CounterTypographyProps = Pick<CounterProps, "size"> &
+  HasPlatform &
+  HasComponent;
 
-const CounterTypography: React.FC<CounterTypographyProps> = ({ size, platform, ...restProps }) => {
-  return size === 's'
-    ? <Caption level="2" weight={platform === VKCOM ? 'medium' : 'regular'} {...restProps} />
-    : <Text weight="medium" {...restProps} />;
+const CounterTypography: React.FC<CounterTypographyProps> = ({
+  size,
+  platform,
+  ...restProps
+}) => {
+  return size === "s" ? (
+    <Caption
+      level="2"
+      weight={platform === VKCOM ? "medium" : "regular"}
+      {...restProps}
+    />
+  ) : (
+    <Text weight="medium" {...restProps} />
+  );
 };
 
 const Counter: React.FC<CounterProps> = (props: CounterProps) => {
@@ -37,19 +49,28 @@ const Counter: React.FC<CounterProps> = (props: CounterProps) => {
     <span
       {...restProps}
       vkuiClass={classNames(
-        getClassName('Counter', platform),
+        getClassName("Counter", platform),
         `Counter--${mode}`,
-        `Counter--s-${size}`,
+        `Counter--s-${size}`
       )}
     >
-      {hasReactNode(children) && <CounterTypography platform={platform} size={size} vkuiClass="Counter__in">{children}</CounterTypography>}
+      {hasReactNode(children) && (
+        <CounterTypography
+          platform={platform}
+          size={size}
+          vkuiClass="Counter__in"
+        >
+          {children}
+        </CounterTypography>
+      )}
     </span>
   );
 };
 
 Counter.defaultProps = {
-  mode: 'secondary',
-  size: 'm',
+  mode: "secondary",
+  size: "m",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default React.memo(Counter);

package/src/components/Counter/Readme.md

@@ -1,42 +1,75 @@
 Компонент для отрисовки счетчика в ячейках и кнопках.
 Принимает в качестве `children` число или строку с отформатированным числом по разрядам.
 
- ```jsx
+```jsx
 <View activePanel="counter-demo">
   <Panel id="counter-demo">
     <PanelHeader>Counter</PanelHeader>
     <Group header={<Header mode="secondary">Счётчики в ячейках</Header>}>
       <List>
-        <Cell before={<Icon28UserOutline />} indicator={<Counter>4</Counter>}>Друзья</Cell>
-        <Cell before={<Icon28UsersOutline />} indicator={<Counter mode="primary">2</Counter>}>Группы</Cell>
-        <Cell before={<Icon28MessageOutline />} indicator={<Counter>224</Counter>}>Сообщения</Cell>
-        <Cell before={<Icon28FavoriteOutline />} indicator={<Counter mode="primary">1</Counter>}>Закладки</Cell>
+        <Cell before={<Icon28UserOutline />} indicator={<Counter>4</Counter>}>
+          Друзья
+        </Cell>
+        <Cell
+          before={<Icon28UsersOutline />}
+          indicator={<Counter mode="primary">2</Counter>}
+        >
+          Группы
+        </Cell>
+        <Cell
+          before={<Icon28MessageOutline />}
+          indicator={<Counter>224</Counter>}
+        >
+          Сообщения
+        </Cell>
+        <Cell
+          before={<Icon28FavoriteOutline />}
+          indicator={<Counter mode="primary">1</Counter>}
+        >
+          Закладки
+        </Cell>
       </List>
     </Group>
     <Group header={<Header mode="secondary">Счётчики в кнопках</Header>}>
       <FormItem>
-        <Button mode="secondary" size="m" after={<Counter>16</Counter>}>Secondary medium</Button>
+        <Button mode="secondary" size="m" after={<Counter>16</Counter>}>
+          Secondary medium
+        </Button>
       </FormItem>
       <FormItem>
-        <Button mode="tertiary" after={<Counter size="s">6</Counter>}>Tertiary small</Button>
+        <Button mode="tertiary" after={<Counter size="s">6</Counter>}>
+          Tertiary small
+        </Button>
       </FormItem>
       <FormItem>
-        <Button mode="outline" size="m" after={<Counter>20</Counter>}>Outline medium</Button>
+        <Button mode="outline" size="m" after={<Counter>20</Counter>}>
+          Outline medium
+        </Button>
       </FormItem>
       <FormItem>
-        <Button mode="commerce" size="m" after={<Counter>4</Counter>}>Commerce medium</Button>
+        <Button mode="commerce" size="m" after={<Counter>4</Counter>}>
+          Commerce medium
+        </Button>
       </FormItem>
       <FormItem>
-        <Button size="l" after={<Counter>8</Counter>}>Primary large</Button>
+        <Button size="l" after={<Counter>8</Counter>}>
+          Primary large
+        </Button>
       </FormItem>
     </Group>
-    <Group header={
-      <Header
-        indicator={<Counter size="s" mode="prominent">5</Counter>}
-        aside={<Link>Посмотреть все</Link>}
-      >
-        Заявки в друзья
-      </Header>}
+    <Group
+      header={
+        <Header
+          indicator={
+            <Counter size="s" mode="prominent">
+              5
+            </Counter>
+          }
+          aside={<Link>Посмотреть все</Link>}
+        >
+          Заявки в друзья
+        </Header>
+      }
     >
       <Cell before={<Avatar />}>Александр Сорокин</Cell>
       <Cell before={<Avatar />}>Виктор Пелевин</Cell>
@@ -45,22 +78,30 @@
     <Group header={<Header mode="secondary">В переключателях</Header>}>
       <Tabs mode="buttons">
         <HorizontalScroll>
-          <TabsItem after={<Counter size="s">8</Counter>}>
-            Все
-          </TabsItem>
+          <TabsItem after={<Counter size="s">8</Counter>}>Все</TabsItem>
           <TabsItem selected after={<Counter size="s">24</Counter>}>
             Люди
           </TabsItem>
-          <TabsItem after={<Counter size="s" mode="primary">2</Counter>}>
+          <TabsItem
+            after={
+              <Counter size="s" mode="primary">
+                2
+              </Counter>
+            }
+          >
             Сообщества
           </TabsItem>
-          <TabsItem>
-            Музыка
-          </TabsItem>
+          <TabsItem>Музыка</TabsItem>
         </HorizontalScroll>
       </Tabs>
       <Tabs>
-        <TabsItem after={<Counter size="s" mode="prominent">6</Counter>}>
+        <TabsItem
+          after={
+            <Counter size="s" mode="prominent">
+              6
+            </Counter>
+          }
+        >
           Диалоги
         </TabsItem>
         <TabsItem selected after={<Counter size="s">24</Counter>}>

package/src/components/CustomScrollView/CustomScrollView.css

@@ -45,8 +45,8 @@
 }
 
 .CustomScrollView__trackerY::before {
-  content: '';
-  opacity: .28;
+  content: "";
+  opacity: 0.28;
   display: block;
   width: 100%;
   height: 100%;
@@ -57,14 +57,6 @@
 
 .CustomScrollView__trackerY:hover::before,
 .CustomScrollView__trackerY:active::before {
-  opacity: .56;
+  opacity: 0.56;
   transform: scaleX(1.34);
 }
-
-/**
- * CustomSelect
- */
-
-.CustomSelect .CustomScrollView {
-  max-height: 160px;
-}