@vkontakte/vkui 4.29.1 → 4.32.0

package/src/components/Radio/Radio.css

@@ -1,15 +1,12 @@
 .Radio {
   display: block;
+  padding: 0 var(--vkui--size_base_padding_horizontal--regular);
 }
 
 .FormItem .Radio {
   width: 100%;
   box-sizing: content-box;
-  margin: 0 calc(-1 * var(--formitem_padding));
-}
-
-.Radio__input {
-  display: none;
+  margin: 0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
 }
 
 .Radio__container {
@@ -19,55 +16,42 @@
 }
 
 .Radio__input:disabled ~ .Radio__container {
-  opacity: 0.6;
+  opacity: var(--vkui--opacity_disable_accessibility);
 }
 
 .Radio__icon {
-  display: block;
   flex-shrink: 0;
-  box-sizing: border-box;
-  border-radius: 50%;
-  position: relative;
   width: 22px;
   height: 22px;
-  border: 2px solid var(--icon_tertiary);
   margin-right: 14px;
-  transition: border-color 0.15s var(--ios-easing);
+  color: var(--icon_tertiary, var(--vkui--color_icon_tertiary));
+  transition: color 0.15s var(--ios-easing);
 }
 
 .Radio__input:checked ~ .Radio__container .Radio__icon {
-  border-color: var(--accent);
+  color: var(--accent, var(--vkui--color_icon_accent));
 }
 
-.Radio__icon::after {
-  position: absolute;
-  content: "";
-  display: block;
-  border-radius: 50%;
-  box-sizing: border-box;
-  width: 14px;
-  height: 14px;
-  left: 2px;
-  top: 2px;
-  transform: scale(0.3);
+.Radio__icon .Radio__pin {
+  transform-origin: 12px 12px;
+  transform: scale(0);
   transition: transform 0.15s var(--ios-easing);
 }
 
-.Radio__input:checked ~ .Radio__container .Radio__icon::after {
-  background-color: var(--accent);
-  transform: scale(1);
+.Radio__input:checked ~ .Radio__container .Radio__icon .Radio__pin {
+  transform: none;
 }
 
 .Radio__content {
   display: block;
   flex-grow: 1;
   max-width: 100%;
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
 }
 
 .Radio__description {
   display: block;
-  color: var(--text_secondary);
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
   margin-bottom: 12px;
   margin-top: 2px;
 }
@@ -80,22 +64,6 @@
   margin-bottom: 12px;
 }
 
-/**
- * iOS
- */
-
-.Radio--ios {
-  padding: 0 12px;
-}
-
-/**
- * Android
- */
-
-.Radio--android {
-  padding: 0 16px;
-}
-
 /**
  * sizeY COMPACT
  */
@@ -118,64 +86,10 @@
 }
 
 .Radio--sizeY-compact .Radio__icon::after {
-  top: 1px;
-  left: 1px;
   width: 12px;
   height: 12px;
 }
 
-/**
- * VKCOM
- */
-
-.Radio--vkcom {
-  padding: 0 16px;
-}
-
-.Radio--vkcom .Radio__icon {
-  width: 16px;
-  height: 16px;
-  margin: 2px 14px 2px 2px;
-  border: 1px solid var(--icon_secondary);
-  border-radius: 50%;
-  transition: border-color 0.5s var(--ios-easing);
-}
-
-.Radio--vkcom .Radio__icon::after {
-  width: 8px;
-  height: 8px;
-  left: 3px;
-  top: 3px;
-  transform: scale(0.3);
-  transition: transform 0.5s var(--ios-easing);
-}
-
-.Radio--vkcom .Radio__input:disabled ~ .Radio__container {
-  opacity: 0.4;
-}
-
-.Radio--vkcom .Radio__input:checked ~ .Radio__container .Radio__icon {
-  border-color: var(--accent);
-}
-
-.Radio--vkcom .Radio__input:checked ~ .Radio__container .Radio__icon::after {
-  background-color: var(--accent);
-  transform: scale(1);
-}
-
-.Radio--vkcom .Radio__children {
-  margin-top: 8px;
-}
-
-.Radio--vkcom .Radio__children:last-child {
-  margin-bottom: 8px;
-}
-
-.Radio--vkcom .Radio__description {
-  margin-top: 1px;
-  margin-bottom: 8px;
-}
-
 /**
  * CMP:
  * RadioGroup

package/src/components/Radio/Radio.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import Tappable, { ACTIVE_EFFECT_DELAY } from "../Tappable/Tappable";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { IOS, VKCOM } from "../../lib/platform";
 import { HasRef, HasRootRef } from "../../types";
@@ -11,11 +10,39 @@ import {
   SizeType,
 } from "../../hoc/withAdaptivity";
 import { hasReactNode } from "../../lib/utils";
+import { VisuallyHiddenInput } from "../VisuallyHiddenInput/VisuallyHiddenInput";
 import { Caption } from "../Typography/Caption/Caption";
-import Headline from "../Typography/Headline/Headline";
-import Text from "../Typography/Text/Text";
+import { Headline } from "../Typography/Headline/Headline";
+import { Text } from "../Typography/Text/Text";
 import "./Radio.css";
 
+const RadioIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      aria-hidden
+      {...props}
+    >
+      <circle
+        cx="12"
+        cy="12"
+        r="11"
+        stroke="currentColor"
+        strokeWidth="2"
+        fill="none"
+      />
+      <circle
+        cx="12"
+        cy="12"
+        r="7.5"
+        vkuiClass="Radio__pin"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
 export interface RadioProps
   extends React.InputHTMLAttributes<HTMLInputElement>,
     HasRef<HTMLInputElement>,
@@ -24,20 +51,19 @@ export interface RadioProps
   description?: React.ReactNode;
 }
 
-const Radio: React.FC<RadioProps> = (props: RadioProps) => {
+const RadioComponent: React.FC<RadioProps> = (props: RadioProps) => {
   const {
     children,
     description,
     style,
     className,
-    getRef,
     getRootRef,
     sizeY,
     ...restProps
   } = props;
   const platform = usePlatform();
 
-  const ContentComponent =
+  const RadioTypography =
     platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;
 
   return (
@@ -45,38 +71,32 @@ const Radio: React.FC<RadioProps> = (props: RadioProps) => {
       Component="label"
       style={style}
       className={className}
-      vkuiClass={classNames(
-        getClassName("Radio", platform),
-        `Radio--sizeY-${sizeY}`
-      )}
+      vkuiClass={classNames("Radio", `Radio--sizeY-${sizeY}`)}
       activeEffectDelay={platform === IOS ? 100 : ACTIVE_EFFECT_DELAY}
       disabled={restProps.disabled}
       getRootRef={getRootRef}
     >
-      <input
+      <VisuallyHiddenInput
         {...restProps}
-        type="radio"
         vkuiClass="Radio__input"
-        ref={getRef}
+        type="radio"
       />
       <div vkuiClass="Radio__container">
-        <i vkuiClass="Radio__icon" role="presentation" />
-        <ContentComponent
-          weight="regular"
-          vkuiClass="Radio__content"
-          Component="div"
-        >
+        <RadioIcon vkuiClass="Radio__icon" />
+        <RadioTypography vkuiClass="Radio__content" Component="div">
           <div vkuiClass="Radio__children">{children}</div>
           {hasReactNode(description) && (
             <Caption vkuiClass="Radio__description">{description}</Caption>
           )}
-        </ContentComponent>
+        </RadioTypography>
       </div>
     </Tappable>
   );
 };
 
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(Radio, {
+/**
+ * @see https://vkcom.github.io/VKUI/#/Radio
+ */
+export const Radio = withAdaptivity(RadioComponent, {
   sizeY: true,
 });

package/src/components/RadioGroup/RadioGroup.css

@@ -7,6 +7,6 @@
  * FormItem
  */
 .FormItem .RadioGroup {
-  margin: 0 calc(-1 * var(--formitem_padding));
+  margin: 0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
   box-sizing: content-box;
 }

package/src/components/RadioGroup/RadioGroup.tsx

@@ -1,6 +1,4 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
 import { classNames } from "../../lib/classNames";
 import "./RadioGroup.css";
 
@@ -8,22 +6,18 @@ export interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
   mode?: "vertical" | "horizontal";
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/RadioGroup
+ */
 export const RadioGroup: React.FC<RadioGroupProps> = ({
   mode = "vertical",
   children,
   ...restProps
-}) => {
-  const platform = usePlatform();
-
-  return (
-    <div
-      vkuiClass={classNames(
-        getClassName("RadioGroup", platform),
-        `RadioGroup--${mode}`
-      )}
-      {...restProps}
-    >
-      {children}
-    </div>
-  );
-};
+}) => (
+  <div
+    vkuiClass={classNames("RadioGroup", `RadioGroup--${mode}`)}
+    {...restProps}
+  >
+    {children}
+  </div>
+);

package/src/components/RangeSlider/RangeSlider.tsx

@@ -5,6 +5,9 @@ import { UniversalSlider, UniversalSliderProps } from "./UniversalSlider";
 export type Value = [number, number];
 export type RangeSliderProps = UniversalSliderProps<Value>;
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/RangeSlider
+ */
 const RangeSlider: React.FC<RangeSliderProps> = ({
   onChange,
   defaultValue,

package/src/components/Removable/Removable.css

@@ -2,7 +2,7 @@
   position: relative;
   display: flex;
   align-items: center;
-  padding-left: var(--formitem_padding);
+  padding-left: var(--vkui--size_base_padding_horizontal--regular);
 }
 
 .Removable__action {
@@ -102,7 +102,7 @@
 
 .Removable--ios .Removable__content {
   padding-left: 0;
-  padding-right: var(--formitem_padding);
+  padding-right: var(--vkui--size_base_padding_horizontal--regular);
 }
 
 .FormLayoutGroup--removable .Removable__content {

package/src/components/Removable/Removable.tsx

@@ -22,13 +22,16 @@ export interface RemovableProps {
   /**
    * Коллбэк срабатывает при клике на контрол удаления.
    */
-  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;
+  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement | null) => void;
 }
 
 interface RemovableIosOwnProps extends RemovableProps {
   removePlaceholderString?: string;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/RemovableIos
+ */
 const RemovableIos: React.FC<RemovableIosOwnProps> = ({
   onRemove,
   removePlaceholder,
@@ -115,6 +118,9 @@ interface RemovableOwnProps
   align?: "start" | "center";
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Removable
+ */
 export const Removable: React.FC<RemovableOwnProps> = ({
   getRootRef,
   children,

package/src/components/RichCell/Readme.md

@@ -11,9 +11,13 @@
         caption="Вчера в 20:30"
         after="+ 1 500 ₽"
         actions={
-          <ButtonGroup mode="horizontal" gap="s">
-            <Button>Принять</Button>
-            <Button mode="secondary">Отклонить</Button>
+          <ButtonGroup mode="horizontal" gap="s" stretched>
+            <Button mode="primary" size="s">
+              Принять
+            </Button>
+            <Button mode="secondary" size="s">
+              Отклонить
+            </Button>
           </ButtonGroup>
         }
       >
@@ -36,9 +40,13 @@
           </UsersStack>
         }
         actions={
-          <ButtonGroup mode="horizontal" gap="s">
-            <Button>Добавить</Button>
-            <Button mode="secondary">Скрыть</Button>
+          <ButtonGroup mode="horizontal" gap="s" stretched>
+            <Button mode="primary" size="s">
+              Добавить
+            </Button>
+            <Button mode="secondary" size="s">
+              Скрыть
+            </Button>
           </ButtonGroup>
         }
       >

package/src/components/RichCell/RichCell.css

@@ -12,7 +12,7 @@
 .FormItem .RichCell {
   width: 100%;
   box-sizing: content-box;
-  margin: 0 calc(-1 * var(--formitem_padding));
+  margin: 0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
 }
 
 .RichCell--mult {
@@ -39,7 +39,7 @@
   pointer-events: none;
 }
 
-.RichCell__in > .Icon--28:first-child ~ * {
+.RichCell__in > .Icon--28:first-child ~ *:not(.RichCell__actions) {
   margin-right: 32px;
 }
 
@@ -105,11 +105,3 @@
 .RichCell--sizeY-compact {
   min-height: 60px;
 }
-
-.RichCell--sizeY-compact .RichCell__actions {
-  margin-top: 11px;
-}
-
-.RichCell--sizeY-compact .UsersStack + .RichCell__actions {
-  margin-top: 12px;
-}

package/src/components/RichCell/RichCell.tsx

@@ -4,7 +4,7 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { getClassName } from "../../helpers/getClassName";
 import Tappable, { TappableProps } from "../Tappable/Tappable";
 import { hasReactNode } from "../../lib/utils";
-import Text from "../Typography/Text/Text";
+import { Paragraph } from "../Typography/Paragraph/Paragraph";
 import { Subhead } from "../Typography/Subhead/Subhead";
 import { withAdaptivity } from "../../hoc/withAdaptivity";
 import "./RichCell.css";
@@ -23,8 +23,16 @@ export interface RichCellProps extends TappableProps {
    */
   bottom?: React.ReactNode;
   /**
-   * Кнопка `<Button size="s" />`. Располагается под `bottom`.
-   * Для набора кнопок следует использовать обёртку `<ButtonGroup mode="horizontal" gap="s">...</ButtonGroup>`.
+   * Кнопки-действия.
+   *
+   * Рекомендуется использовать [Button](#/Button) с параметрами:
+   *
+   * - `mode="primary" size="s"`
+   * - `mode="secondary" size="s"`
+   *
+   * Для набора кнопок следует использовать [ButtonGroup](#/ButtonGroup) с параметрами:
+   *
+   * - `mode="horizontal" gap="s" stretched`
    */
   actions?: React.ReactNode;
   /**
@@ -42,6 +50,9 @@ export interface RichCellProps extends TappableProps {
   multiline?: boolean;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/RichCell
+ */
 const RichCell: React.FC<RichCellProps> = ({
   children,
   text,
@@ -72,29 +83,25 @@ const RichCell: React.FC<RichCellProps> = ({
       <div vkuiClass="RichCell__in">
         {/* Этот after будет скрыт из верстки. Он нужен для CSS */}
         {after}
-        <Text weight="medium" vkuiClass="RichCell__content">
+        <Paragraph weight="2" vkuiClass="RichCell__content">
           <div vkuiClass="RichCell__children">{children}</div>
           {hasReactNode(after) && (
             <div vkuiClass="RichCell__after">{after}</div>
           )}
-        </Text>
+        </Paragraph>
         {hasReactNode(text) && (
-          <Text weight="regular" vkuiClass="RichCell__text">
-            {text}
-          </Text>
+          <Paragraph vkuiClass="RichCell__text">{text}</Paragraph>
         )}
         {hasReactNode(caption) && (
           <Subhead Component="span" vkuiClass="RichCell__caption">
             {caption}
           </Subhead>
         )}
-        {(hasReactNode(bottom) || hasReactNode(actions)) && (
-          <div vkuiClass="RichCell__bottom">
-            {bottom}
-            {hasReactNode(actions) && (
-              <div vkuiClass="RichCell__actions">{actions}</div>
-            )}
-          </div>
+        {hasReactNode(bottom) && (
+          <div vkuiClass="RichCell__bottom">{bottom}</div>
+        )}
+        {hasReactNode(actions) && (
+          <div vkuiClass="RichCell__actions">{actions}</div>
         )}
       </div>
     </Tappable>

package/src/components/RichTooltip/Readme.md

@@ -9,7 +9,7 @@
 <Checkbox style={{userSelect: 'none'}}>
   Специальные возможности
   <RichTooltip style={{maxWidth: 320}} content={
-    <Subhead weight="regular" style={{padding: '8px 12px', color: 'var(--text_primary)'}}>
+    <Subhead style={{padding: '8px 12px', color: 'var(--text_primary)'}}>
       Если включить эту настройку, элементы управления на сайте будут определены и озвучены синтезатором речи.
       <br/><br/>
       Настройка повышает доступность сайта и подходит для пользователей с ограниченными возможностями.

package/src/components/RichTooltip/RichTooltip.tsx

@@ -9,6 +9,9 @@ import "./RichTooltip.css";
 
 export type RichTooltipProps = Omit<HoverPopperProps, "arrowClassName">;
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/RichTooltip
+ */
 export const RichTooltip: React.FC<RichTooltipProps> = ({
   children,
   arrow = true,

package/src/components/Root/Root.tsx

@@ -42,6 +42,10 @@ export interface RootState {
 }
 
 const warn = warnOnce("Root");
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Root
+ */
 const Root: React.FC<RootProps> = ({
   popout = null,
   modal,

package/src/components/ScreenSpinner/ScreenSpinner.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import Spinner, { SpinnerProps } from "../Spinner/Spinner";
+import { Spinner, SpinnerProps } from "../Spinner/Spinner";
 import { PopoutWrapper } from "../PopoutWrapper/PopoutWrapper";
 import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
@@ -9,6 +9,9 @@ import "./ScreenSpinner.css";
 export type ScreenSpinnerProps = React.HTMLAttributes<HTMLDivElement> &
   SpinnerProps;
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/ScreenSpinner
+ */
 const ScreenSpinner: React.FC<ScreenSpinnerProps> = (
   props: ScreenSpinnerProps
 ) => {

package/src/components/Search/Readme.md

@@ -53,7 +53,7 @@ class SimpleSearch extends React.Component {
     return (
       <React.Fragment>
         <PanelHeader
-          right={
+          after={
             <PanelHeaderButton onClick={this.props.goHeaderSearch}>
               <Icon28AddOutline />
             </PanelHeaderButton>
@@ -103,7 +103,7 @@ class HeaderSearch extends React.Component {
     return (
       <React.Fragment>
         <PanelHeader
-          left={platform !== VKCOM && <PanelHeaderBack onClick={goSearch} />}
+          before={platform !== VKCOM && <PanelHeaderBack onClick={goSearch} />}
           separator={sizeX === SizeType.REGULAR}
         >
           <Search
@@ -167,14 +167,14 @@ class SearchExample extends React.Component {
               onClose={this.hideModal}
               header={
                 <ModalPageHeader
-                  left={
+                  before={
                     platform === ANDROID && (
                       <PanelHeaderButton onClick={this.hideModal}>
                         <Icon24Cancel />
                       </PanelHeaderButton>
                     )
                   }
-                  right={
+                  after={
                     <PanelHeaderButton onClick={this.hideModal}>
                       {platform === IOS ? "Готово" : <Icon24Done />}
                     </PanelHeaderButton>

package/src/components/Search/Search.tsx

@@ -12,10 +12,10 @@ import { HasPlatform, HasRef } from "../../types";
 import { Touch, TouchEvent } from "../Touch/Touch";
 import { VKUITouchEvent } from "../../lib/touch";
 import { noop } from "../../lib/utils";
-import Text from "../Typography/Text/Text";
+import { Text } from "../Typography/Text/Text";
 import { Title } from "../Typography/Title/Title";
-import Headline from "../Typography/Headline/Headline";
-import Separator from "../Separator/Separator";
+import { Headline } from "../Typography/Headline/Headline";
+import { Separator } from "../Separator/Separator";
 import { useExternRef } from "../../hooks/useExternRef";
 import { useEnsuredControl } from "../../hooks/useEnsuredControl";
 import "./Search.css";
@@ -37,15 +37,11 @@ const SearchPlaceholderTypography: React.FC<
         </Title>
       );
     case VKCOM:
-      return (
-        <Text {...restProps} weight="regular">
-          {children}
-        </Text>
-      );
+      return <Text {...restProps}>{children}</Text>;
     case ANDROID:
     default:
       return (
-        <Headline {...restProps} weight="regular">
+        <Headline {...restProps} weight="3">
           {children}
         </Headline>
       );
@@ -66,6 +62,9 @@ export interface SearchProps
   defaultValue?: string;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Search
+ */
 const Search: React.FC<SearchProps> = ({
   before,
   className,