@vkontakte/vkui 4.30.0 → 4.33.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 { ACTIVE_EFFECT_DELAY, Tappable } from "../Tappable/Tappable";
 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,7 +5,10 @@ import { UniversalSlider, UniversalSliderProps } from "./UniversalSlider";
 export type Value = [number, number];
 export type RangeSliderProps = UniversalSliderProps<Value>;
 
-const RangeSlider: React.FC<RangeSliderProps> = ({
+/**
+ * @see https://vkcom.github.io/VKUI/#/RangeSlider
+ */
+export const RangeSlider: React.FC<RangeSliderProps> = ({
   onChange,
   defaultValue,
   min = 0,
@@ -49,6 +52,3 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
     />
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default RangeSlider;

package/src/components/RangeSlider/Readme.md

@@ -2,31 +2,23 @@
 Они должны переданы в виде массива `[startValue, endValue]`. `onChange` так же возвращает подобный массив.
 
 ```jsx
-class Example extends React.Component {
-  render() {
-    return (
-      <View activePanel="slider">
-        <Panel id="slider">
-          <PanelHeader>RangerSlider</PanelHeader>
-          <Group>
-            <FormItem top="Uncontrolled">
-              <RangeSlider min={10} max={20} step={1} defaultValue={[12, 16]} />
-            </FormItem>
-            <FormItem top="Disabled">
-              <RangeSlider
-                min={10}
-                max={20}
-                step={1}
-                defaultValue={[12, 16]}
-                disabled
-              />
-            </FormItem>
-          </Group>
-        </Panel>
-      </View>
-    );
-  }
-}
-
-<Example />;
+<View activePanel="slider">
+  <Panel id="slider">
+    <PanelHeader>RangerSlider</PanelHeader>
+    <Group>
+      <FormItem top="Uncontrolled">
+        <RangeSlider min={10} max={20} step={1} defaultValue={[12, 16]} />
+      </FormItem>
+      <FormItem top="Disabled">
+        <RangeSlider
+          min={10}
+          max={20}
+          step={1}
+          defaultValue={[12, 16]}
+          disabled
+        />
+      </FormItem>
+    </Group>
+  </Panel>
+</View>
 ```

package/src/components/RangeSlider/UniversalSlider.tsx

@@ -1,12 +1,10 @@
 import * as React from "react";
 import { Touch, TouchEvent, TouchEventHandler } from "../Touch/Touch";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { HasRootRef } from "../../types";
 import { rescale } from "../../helpers/math";
 import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
 import { useExternRef } from "../../hooks/useExternRef";
-import { usePlatform } from "../../hooks/usePlatform";
 import "../Slider/Slider.css";
 
 export type UniversalValue = [number | null, number];
@@ -39,7 +37,6 @@ const UniversalSliderDumb: React.FC<UniversalSliderProps<UniversalValue>> = ({
   disabled,
   ...restProps
 }) => {
-  const platform = usePlatform();
   const [start, end] = value;
   const isRange = start != null;
   const gesture = React.useRef({
@@ -134,7 +131,7 @@ const UniversalSliderDumb: React.FC<UniversalSliderProps<UniversalValue>> = ({
       {...restProps}
       {...(disabled ? {} : { onStart, onMove, onEnd })}
       vkuiClass={classNames(
-        getClassName("Slider", platform),
+        "Slider",
         `Slider--sizeY-${sizeY}`,
         disabled && "Slider--disabled"
       )}

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 {
@@ -12,21 +12,13 @@
   border: none;
 }
 
-.Removable--start .Removable__action {
-  align-self: flex-start;
+/* Увеличиваем вес селектора */
+.Removable__action.Removable__action {
+  color: var(--icon_secondary, var(--vkui--color_icon_secondary));
 }
 
-.FormItem--removable.FormItem--withTop .Removable__action,
-.FormLayoutGroup--removable .FormItem--withTop ~ .Removable__action {
-  top: 28px;
-}
-
-.FormItem--sizeY-compact.FormItem--removable.FormItem--withTop
-  .Removable__action,
-.FormLayoutGroup--sizeY-compact.FormLayoutGroup--removable
-  .FormItem--withTop
-  ~ .Removable__action {
-  top: 26px;
+.Removable--start .Removable__action {
+  align-self: flex-start;
 }
 
 /**
@@ -102,24 +94,28 @@
 
 .Removable--ios .Removable__content {
   padding-left: 0;
-  padding-right: var(--formitem_padding);
+  padding-right: var(--vkui--size_base_padding_horizontal--regular);
 }
 
+.FormItem--removable .Removable__content,
 .FormLayoutGroup--removable .Removable__content {
   flex-wrap: wrap;
+  align-items: flex-start;
 }
 
-.FormLayoutGroup--removable
-  .FormItem--ios.FormItem--withTop
-  ~ .Removable__offset {
+.FormItem--withTop .FormItem__removable ~ .Removable__offset,
+.FormLayoutGroup--removable .FormItem--withTop ~ .Removable__offset {
   order: -1;
   display: block;
   width: 100%;
-  height: 28px;
+  height: calc(2px + var(--vkui--font_subhead--line_height--regular) + 8px);
 }
 
+.FormItem--withTop.FormItem--sizeY-compact
+  .FormItem__removable
+  ~ .Removable__offset,
 .FormLayoutGroup--removable.FormLayoutGroup--sizeY-compact
-  .FormItem--ios.FormItem--withTop
+  .FormItem--withTop
   ~ .Removable__offset {
-  height: 26px;
+  height: calc(2px + var(--vkui--font_subhead--line_height--compact) + 6px);
 }

package/src/components/Removable/Removable.tsx

@@ -9,9 +9,9 @@ import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { useDOM } from "../../lib/dom";
 import { ANDROID, IOS, VKCOM } from "../../lib/platform";
 import { Icon24Cancel } from "@vkontakte/icons";
-import IconButton from "../IconButton/IconButton";
+import { IconButton } from "../IconButton/IconButton";
 import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
-import Tappable from "../Tappable/Tappable";
+import { Tappable } from "../Tappable/Tappable";
 import "./Removable.css";
 
 export interface RemovableProps {
@@ -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,
@@ -88,7 +91,7 @@ const RemovableIos: React.FC<RemovableIosOwnProps> = ({
       </IconButton>
       {children}
 
-      <span vkuiClass="Removable__offset" aria-hidden="true"></span>
+      <span vkuiClass="Removable__offset" aria-hidden />
 
       <Tappable
         Component="button"
@@ -115,6 +118,9 @@ interface RemovableOwnProps
   align?: "start" | "center";
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Removable
+ */
 export const Removable: React.FC<RemovableOwnProps> = ({
   getRootRef,
   children,
@@ -159,6 +165,8 @@ export const Removable: React.FC<RemovableOwnProps> = ({
           >
             <Icon24Cancel role="presentation" />
           </IconButton>
+
+          <span vkuiClass="Removable__offset" aria-hidden />
         </div>
       )}
 

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;
-}