@vkontakte/vkui 4.23.0 → 4.24.0

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,27 @@ 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",
 };
 
 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;
-}

package/src/components/CustomScrollView/CustomScrollView.tsx

@@ -1,11 +1,12 @@
-import * as React from 'react';
-import { DOMProps, withDOM } from '../../lib/dom';
-import { multiRef, setRef } from '../../lib/utils';
-import './CustomScrollView.css';
+import * as React from "react";
+import { DOMProps, withDOM } from "../../lib/dom";
+import { multiRef, setRef } from "../../lib/utils";
+import "./CustomScrollView.css";
 
 interface Props extends DOMProps {
   windowResize?: boolean;
   boxRef: React.Ref<HTMLDivElement>;
+  className?: HTMLDivElement["className"];
 }
 
 class CustomScrollView extends React.Component<Props> {
@@ -14,12 +15,14 @@ class CustomScrollView extends React.Component<Props> {
   private clientHeight = 0;
   private trackerHeight = 0;
   private scrollHeight = 0;
-  private transformProp = '';
+  private transformProp = "";
 
   private startY = 0;
   private trackerTop = 0;
 
-  private readonly box = multiRef<HTMLDivElement>((e) => setRef(e, this.props.boxRef));
+  private readonly box = multiRef<HTMLDivElement>((e) =>
+    setRef(e, this.props.boxRef)
+  );
   private readonly barY = React.createRef<HTMLDivElement>();
   private readonly trackerY = React.createRef<HTMLDivElement>();
 
@@ -29,7 +32,7 @@ class CustomScrollView extends React.Component<Props> {
     this.resize();
 
     if (this.props.windowResize) {
-      this.props.window.addEventListener('resize', this.resize);
+      this.props.window.addEventListener("resize", this.resize);
     }
   }
 
@@ -38,17 +41,17 @@ class CustomScrollView extends React.Component<Props> {
   }
 
   componentWillUnmount() {
-    this.props.window.removeEventListener('resize', this.resize);
+    this.props.window.removeEventListener("resize", this.resize);
   }
 
   chooseTransformProp() {
     let style = this.trackerY.current.style;
-    let prop = '';
+    let prop = "";
 
-    if ('transform' in style) {
-      prop = 'transform';
-    } else if ('webkitTransform' in style) {
-      prop = 'webkitTransform';
+    if ("transform" in style) {
+      prop = "transform";
+    } else if ("webkitTransform" in style) {
+      prop = "webkitTransform";
     }
 
     this.transformProp = prop;
@@ -66,9 +69,9 @@ class CustomScrollView extends React.Component<Props> {
     this.trackerHeight = trackerHeight;
 
     if (ratio >= 1) {
-      this.barY.current.style.display = 'none';
+      this.barY.current.style.display = "none";
     } else {
-      this.barY.current.style.display = '';
+      this.barY.current.style.display = "";
       this.trackerY.current.style.height = `${trackerHeight}px`;
 
       this.setTrackerPositionFromScroll(this.box.current.scrollTop);
@@ -85,17 +88,22 @@ class CustomScrollView extends React.Component<Props> {
 
   setTrackerPosition(scrollTop: number) {
     this.lastTrackerTop = scrollTop;
-    (this.trackerY.current.style as any)[this.transformProp] = `translate(0, ${scrollTop}px)`;
+    (this.trackerY.current.style as any)[
+      this.transformProp
+    ] = `translate(0, ${scrollTop}px)`;
   }
 
   setTrackerPositionFromScroll(scrollTop: number) {
     const progress = scrollTop / (this.scrollHeight - this.clientHeight);
-    this.setTrackerPosition((this.clientHeight - this.trackerHeight) * progress);
+    this.setTrackerPosition(
+      (this.clientHeight - this.trackerHeight) * progress
+    );
   }
 
   setScrollPositionFromTracker(trackerTop: number) {
     const progress = trackerTop / (this.clientHeight - this.trackerHeight);
-    this.box.current.scrollTop = (this.scrollHeight - this.clientHeight) * progress;
+    this.box.current.scrollTop =
+      (this.scrollHeight - this.clientHeight) * progress;
   }
 
   onDragStart = (e: React.MouseEvent) => {
@@ -103,34 +111,50 @@ class CustomScrollView extends React.Component<Props> {
     this.startY = e.clientY;
     this.trackerTop = this.lastTrackerTop;
 
-    this.props.document.addEventListener('mousemove', this.onMove);
-    this.props.document.addEventListener('mouseup', this.onUp);
+    this.props.document.addEventListener("mousemove", this.onMove);
+    this.props.document.addEventListener("mouseup", this.onUp);
   };
 
   onMove = (e: MouseEvent) => {
     e.preventDefault();
     const diff = e.clientY - this.startY;
-    const position = Math.min(Math.max(this.trackerTop + diff, 0), this.clientHeight - this.trackerHeight);
+    const position = Math.min(
+      Math.max(this.trackerTop + diff, 0),
+      this.clientHeight - this.trackerHeight
+    );
 
     this.setScrollPositionFromTracker(position);
   };
 
   onUp = (e: MouseEvent) => {
     e.preventDefault();
-    this.props.document.removeEventListener('mousemove', this.onMove);
-    this.props.document.removeEventListener('mouseup', this.onUp);
+    this.props.document.removeEventListener("mousemove", this.onMove);
+    this.props.document.removeEventListener("mouseup", this.onUp);
   };
 
   render() {
-    return <div vkuiClass="CustomScrollView">
-      <div vkuiClass="CustomScrollView__barY" ref={this.barY}>
-        <div vkuiClass="CustomScrollView__trackerY" ref={this.trackerY} onMouseDown={this.onDragStart} />
+    const { children, className } = this.props;
+
+    return (
+      <div vkuiClass="CustomScrollView" className={className}>
+        <div vkuiClass="CustomScrollView__barY" ref={this.barY}>
+          <div
+            vkuiClass="CustomScrollView__trackerY"
+            ref={this.trackerY}
+            onMouseDown={this.onDragStart}
+          />
+        </div>
+
+        <div
+          vkuiClass="CustomScrollView__box"
+          tabIndex={-1}
+          ref={this.box}
+          onScroll={this.scroll}
+        >
+          {children}
+        </div>
       </div>
-
-      <div vkuiClass="CustomScrollView__box" tabIndex={-1} ref={this.box} onScroll={this.scroll}>
-        {this.props.children}
-      </div>
-    </div>;
+    );
   }
 }
 

package/src/components/CustomSelect/CustomSelect.css

@@ -8,21 +8,7 @@
   display: none;
 }
 
-.CustomSelect__options {
-  width: 100%;
-  overflow: hidden;
-  position: absolute;
-  background-color: var(--modal_card_background);
-  box-sizing: border-box;
-  border: solid 1px var(--field_border);
-  border-top: 0;
-  box-shadow: 0 2px 2px rgba(0, 0, 0, .06), 0 0 2px rgba(0, 0, 0, .03);
-  border-radius: 0 0 8px 8px;
-  z-index: 4;
-}
-
-.CustomSelect__empty,
-.CustomSelect__fetching {
+.CustomSelect__empty {
   padding: 12px 0;
 }
 
@@ -37,19 +23,12 @@
   color: var(--text_secondary);
 }
 
-.CustomSelect__options--popupDirectionTop {
-  bottom: 100%;
-  border-radius: 8px 8px 0 0;
-  border-top: unset;
-  border-bottom: 0;
-  box-shadow: 0 -2px 2px rgba(0, 0, 0, .06), 0 0 2px rgba(0, 0, 0, .03);
-}
-
 .CustomSelect__open.Select--mimicry:focus .FormField__border {
   border-color: var(--field_border);
 }
 
-.CustomSelect__open:not(.CustomSelect__open--popupDirectionTop) .FormField__border {
+.CustomSelect__open:not(.CustomSelect__open--popupDirectionTop)
+  .FormField__border {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }