@vkontakte/vkui 4.34.2 → 4.35.0

package/src/components/SimpleCell/Readme.md

@@ -1,136 +1,122 @@
 ```jsx
-class Example extends React.Component {
-  constructor() {
-    this.state = {
-      activePanel: "list",
-    };
-  }
+const Example = () => {
+  const [activePanel, setActivePanel] = React.useState("list");
 
-  render() {
-    return (
-      <View activePanel={this.state.activePanel}>
-        <Panel id="list">
-          <PanelHeader>SimpleCell</PanelHeader>
-          <Group>
-            <Header mode="secondary">Меню</Header>
-            <SimpleCell
-              onClick={() => this.setState({ activePanel: "nothing" })}
-              expandable
-              before={<Icon28UserOutline />}
-            >
-              Аккаунт
-            </SimpleCell>
-            <SimpleCell
-              onClick={() => this.setState({ activePanel: "nothing" })}
-              expandable
-              before={<Icon28PaletteOutline />}
-            >
-              Внешний вид
-            </SimpleCell>
-            <SimpleCell
-              onClick={() => this.setState({ activePanel: "nothing" })}
-              expandable
-              before={<Icon28SettingsOutline />}
-            >
-              Основные
-            </SimpleCell>
-          </Group>
-          <Group>
-            <Header mode="secondary">Настройки</Header>
-            <SimpleCell disabled after={<Switch defaultChecked />}>
-              Сжимать фотографии
-            </SimpleCell>
-            <SimpleCell disabled after={<Switch />}>
-              Сжимать видео
-            </SimpleCell>
-          </Group>
-          <Group>
-            <Header mode="secondary">Настройки системы</Header>
-            <SimpleCell
-              onClick={() => this.setState({ activePanel: "nothing" })}
-              expandable
-              indicator="Русский"
-            >
-              Язык
-            </SimpleCell>
-            <SimpleCell
-              onClick={() => this.setState({ activePanel: "nothing" })}
-              expandable
-              indicator="При использовании"
-            >
-              Геолокация
-            </SimpleCell>
-          </Group>
-          <Group>
-            <Header mode="secondary">Список диалогов</Header>
-            <SimpleCell
-              before={<Avatar size={40} src={getAvatarUrl("user_xyz")} />}
-              after={
-                <IconButton>
-                  <Icon28MessageOutline />
-                </IconButton>
-              }
-            >
-              Игорь Фёдоров
-            </SimpleCell>
-            <SimpleCell
-              before={
-                <Avatar size={40} src={getAvatarUrl("user_arthurstam")} />
-              }
-              after={
-                <IconButton>
-                  <Icon28MessageOutline />
-                </IconButton>
-              }
-            >
-              Artur Stambultsian
-            </SimpleCell>
-          </Group>
-          <Group>
-            <Header mode="secondary">Список друзей</Header>
-            <SimpleCell
-              before={<Avatar size={48} src={getAvatarUrl("user_xyz")} />}
-              badge={<Icon12Verified />}
-              after={
-                <IconButton>
-                  <Icon28MessageOutline />
-                </IconButton>
-              }
-              description="Команда ВКонтакте"
-            >
-              Игорь Фёдоров
-            </SimpleCell>
-            <SimpleCell
-              before={
-                <Avatar size={48} src={getAvatarUrl("user_arthurstam")} />
-              }
-              after={
-                <IconButton>
-                  <Icon28MessageOutline />
-                </IconButton>
-              }
-              description="Бот"
-            >
-              Artur Stambultsian
-            </SimpleCell>
-          </Group>
-        </Panel>
-        <Panel id="nothing">
-          <PanelHeader
-            before={
-              <PanelHeaderBack
-                onClick={() => this.setState({ activePanel: "list" })}
-              />
+  return (
+    <View activePanel={activePanel}>
+      <Panel id="list">
+        <PanelHeader>SimpleCell</PanelHeader>
+        <Group>
+          <Header mode="secondary">Меню</Header>
+          <SimpleCell
+            onClick={() => setActivePanel("nothing")}
+            expandable
+            before={<Icon28UserOutline />}
+          >
+            Аккаунт
+          </SimpleCell>
+          <SimpleCell
+            onClick={() => setActivePanel("nothing")}
+            expandable
+            before={<Icon28PaletteOutline />}
+          >
+            Внешний вид
+          </SimpleCell>
+          <SimpleCell
+            onClick={() => setActivePanel("nothing")}
+            expandable
+            before={<Icon28SettingsOutline />}
+          >
+            Основные
+          </SimpleCell>
+        </Group>
+        <Group>
+          <Header mode="secondary">Настройки</Header>
+          <SimpleCell disabled after={<Switch defaultChecked />}>
+            Сжимать фотографии
+          </SimpleCell>
+          <SimpleCell disabled after={<Switch />}>
+            Сжимать видео
+          </SimpleCell>
+        </Group>
+        <Group>
+          <Header mode="secondary">Настройки системы</Header>
+          <SimpleCell
+            onClick={() => setActivePanel("nothing")}
+            expandable
+            indicator="Русский"
+          >
+            Язык
+          </SimpleCell>
+          <SimpleCell
+            onClick={() => setActivePanel("nothing")}
+            expandable
+            indicator="При использовании"
+          >
+            Геолокация
+          </SimpleCell>
+        </Group>
+        <Group>
+          <Header mode="secondary">Список диалогов</Header>
+          <SimpleCell
+            before={<Avatar size={40} src={getAvatarUrl("user_xyz")} />}
+            after={
+              <IconButton>
+                <Icon28MessageOutline />
+              </IconButton>
+            }
+          >
+            Игорь Фёдоров
+          </SimpleCell>
+          <SimpleCell
+            before={<Avatar size={40} src={getAvatarUrl("user_arthurstam")} />}
+            after={
+              <IconButton>
+                <Icon28MessageOutline />
+              </IconButton>
+            }
+          >
+            Artur Stambultsian
+          </SimpleCell>
+        </Group>
+        <Group>
+          <Header mode="secondary">Список друзей</Header>
+          <SimpleCell
+            before={<Avatar size={48} src={getAvatarUrl("user_xyz")} />}
+            badge={<Icon12Verified />}
+            after={
+              <IconButton>
+                <Icon28MessageOutline />
+              </IconButton>
+            }
+            description="Команда ВКонтакте"
+          >
+            Игорь Фёдоров
+          </SimpleCell>
+          <SimpleCell
+            before={<Avatar size={48} src={getAvatarUrl("user_arthurstam")} />}
+            after={
+              <IconButton>
+                <Icon28MessageOutline />
+              </IconButton>
             }
+            description="Бот"
           >
-            Ничего
-          </PanelHeader>
-          <Placeholder>Тут ничего нет</Placeholder>
-        </Panel>
-      </View>
-    );
-  }
-}
+            Artur Stambultsian
+          </SimpleCell>
+        </Group>
+      </Panel>
+      <Panel id="nothing">
+        <PanelHeader
+          before={<PanelHeaderBack onClick={() => setActivePanel("list")} />}
+        >
+          Ничего
+        </PanelHeader>
+        <Placeholder>Тут ничего нет</Placeholder>
+      </Panel>
+    </View>
+  );
+};
 
 <Example />;
 ```

package/src/components/SimpleCell/SimpleCell.css

@@ -4,16 +4,15 @@
   min-height: 48px;
   white-space: nowrap;
   text-decoration: none;
-  color: var(--text_primary);
-  padding-left: 16px;
-  padding-right: 16px;
+  color: var(--text_primary, var(--vkui--color_text_primary));
+  padding-left: var(--vkui--size_base_padding_horizontal--regular);
+  padding-right: var(--vkui--size_base_padding_horizontal--regular);
 }
 
 .SimpleCell--mult {
   white-space: normal;
 }
 
-.SimpleCell--mult .SimpleCell__description,
 .SimpleCell--mult .SimpleCell__children {
   text-overflow: initial;
 }
@@ -30,34 +29,34 @@
   padding-bottom: 10px;
   padding-right: 12px;
   flex-shrink: 0;
-  color: var(--accent);
+  color: var(--accent, var(--vkui--color_icon_accent));
 }
 
 .SimpleCell > .Icon--28 {
   padding-right: 16px;
 }
 
-.SimpleCell__description {
-  color: var(--text_secondary);
+.SimpleCell__text {
   text-overflow: ellipsis;
   overflow: hidden;
-  margin-top: 3px;
-  display: block;
 }
 
-.SimpleCell > .Avatar--sz-32 ~ .SimpleCell__main .SimpleCell__description,
-.SimpleCell > .Avatar--sz-28 ~ .SimpleCell__main .SimpleCell__description {
-  margin-top: 2px;
+.SimpleCell__subtitle {
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
 }
 
-.SimpleCell:not(.SimpleCell--mult) .SimpleCell__content {
+.SimpleCell .SimpleCell__content {
   display: flex;
   align-content: flex-start;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: space-between;
   max-width: 100%;
 }
 
+.SimpleCell:not(.SimpleCell--mult) .SimpleCell__content {
+  justify-content: flex-start;
+}
+
 .SimpleCell__children {
   color: inherit;
   text-overflow: ellipsis;
@@ -65,33 +64,24 @@
   display: block;
 }
 
+.SimpleCell--mult .SimpleCell__children,
+.SimpleCell--mult .SimpleCell__subtitle {
+  flex: 1 1 auto;
+}
+
 .SimpleCell__badge {
   display: inline-block;
   flex-grow: 0;
   flex-shrink: 0;
-  margin-left: 4px;
-  color: var(--blue_200);
-}
-
-.SimpleCell__badge .Badge {
-  margin-top: 2px;
-  margin-left: 3px;
-}
-
-.SimpleCell--mult .SimpleCell__badge {
-  vertical-align: top;
+  color: var(--blue_200, var(--vkui--color_icon_accent));
 }
 
-.SimpleCell--mult .SimpleCell__badge .Icon {
-  transform: translateY(2px);
-}
-
-.SimpleCell--mult .SimpleCell__badge .Badge {
-  margin-top: 8px;
+.SimpleCell__content > *:not(:last-child) {
+  margin-right: 4px;
 }
 
 .SimpleCell__indicator {
-  color: var(--text_secondary);
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
   min-width: 0;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -103,7 +93,7 @@
   flex-shrink: 0;
   display: flex;
   align-items: center;
-  color: var(--accent);
+  color: var(--accent, var(--vkui--color_icon_accent));
 }
 
 .SimpleCell__after > .Icon {
@@ -114,7 +104,7 @@
   padding-right: 2px;
 }
 
-.SimpleCell__after .IconButton {
+.SimpleCell__after .IconButton:last-child {
   margin-right: -12px;
 }
 
@@ -122,11 +112,6 @@
  * iOS
  */
 
-.SimpleCell--ios {
-  padding-left: 12px;
-  padding-right: 12px;
-}
-
 .SimpleCell--ios .SimpleCell__main,
 .SimpleCell--ios .SimpleCell__indicator {
   padding-top: 9px;
@@ -138,26 +123,15 @@
 }
 
 .SimpleCell--ios .SimpleCell__after .Icon--chevron_24 {
-  color: var(--icon_tertiary);
+  color: var(--icon_tertiary, var(--vkui--color_icon_tertiary));
   padding-right: 4px;
   padding-left: 12px;
 }
 
-.SimpleCell--ios .SimpleCell__after .IconButton {
+.SimpleCell--ios .SimpleCell__after .IconButton:last-child {
   margin-right: -9px;
 }
 
-.SimpleCell--ios.SimpleCell--sizeY-regular
-  > .Avatar:not(.Avatar--sz-32)
-  ~ .SimpleCell__main
-  .SimpleCell__children,
-.SimpleCell--ios.SimpleCell--sizeY-regular
-  > .Avatar:not(.Avatar--sz-32)
-  ~ .SimpleCell__indicator {
-  font-size: 16px;
-  line-height: 20px;
-}
-
 /**
  * Android & VKCOM
  */
@@ -184,22 +158,6 @@
   padding-bottom: 10px;
 }
 
-.SimpleCell--sizeY-compact .SimpleCell__description,
-.SimpleCell--sizeY-compact
-  > .Avatar--sz-32
-  ~ .SimpleCell__main
-  .SimpleCell__description,
-.SimpleCell--sizeY-compact
-  > .Avatar--sz-28
-  ~ .SimpleCell__main
-  .SimpleCell__description {
-  margin-top: 1px;
-}
-
-.SimpleCell--sizeY-compact .SimpleCell__badge .Badge {
-  transform: translateY(0.5px);
-}
-
 /**
  * CMP:
  * FormItem
@@ -207,3 +165,7 @@
 .FormItem > .SimpleCell {
   margin: 0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
 }
+
+.SimpleCell__main > *:not(:first-child) {
+  margin-top: 2px;
+}

package/src/components/SimpleCell/SimpleCell.tsx

@@ -4,15 +4,14 @@ import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
 import { TappableProps, Tappable } from "../Tappable/Tappable";
 import { Icon24Chevron } from "@vkontakte/icons";
-import { ANDROID, IOS } from "../../lib/platform";
+import { IOS } from "../../lib/platform";
 import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { withAdaptivity, SizeType } from "../../hoc/withAdaptivity";
-import { Title } from "../Typography/Title/Title";
-import { Text } from "../Typography/Text/Text";
-import { Subhead } from "../Typography/Subhead/Subhead";
 import { Headline } from "../Typography/Headline/Headline";
+import { Footnote } from "../Typography/Footnote/Footnote";
+import { Caption } from "../Typography/Caption/Caption";
 import "./SimpleCell.css";
 
 export interface SimpleCellOwnProps extends HasComponent {
@@ -54,15 +53,12 @@ type SimpleCellTypographyProps = React.HTMLAttributes<HTMLDivElement> &
 
 const SimpleCellTypography = (props: SimpleCellTypographyProps) => {
   const { sizeY } = useAdaptivity();
-  const platform = usePlatform();
 
   if (sizeY === SizeType.COMPACT) {
-    return <Text {...props} />;
-  } else if (platform === ANDROID) {
-    return <Headline Component="span" weight="3" {...props} />;
-  } else {
-    return <Title Component="span" level="3" weight="3" {...props} />;
+    return <Caption level="2" {...props} />;
   }
+
+  return <Footnote {...props} />;
 };
 
 const SimpleCellComponent = ({
@@ -83,39 +79,39 @@ const SimpleCellComponent = ({
   return (
     <Tappable
       {...restProps}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("SimpleCell", platform),
-        {
-          "SimpleCell--exp": expandable,
-          "SimpleCell--mult": multiline,
-        },
+        expandable && "SimpleCell--exp",
+        multiline && "SimpleCell--mult",
         `SimpleCell--sizeY-${sizeY}`
       )}
     >
       {before}
       <div vkuiClass="SimpleCell__main">
         <div vkuiClass="SimpleCell__content">
-          <SimpleCellTypography vkuiClass="SimpleCell__children">
+          <Headline
+            Component="span"
+            vkuiClass="SimpleCell__children"
+            weight="3"
+          >
             {children}
-          </SimpleCellTypography>
+          </Headline>
           {hasReactNode(badge) && (
             <span vkuiClass="SimpleCell__badge">{badge}</span>
           )}
         </div>
         {description && (
-          <Subhead Component="span" vkuiClass="SimpleCell__description">
-            {description}
-          </Subhead>
+          <div vkuiClass="SimpleCell__content">
+            <SimpleCellTypography vkuiClass="SimpleCell__text SimpleCell__subtitle">
+              {description}
+            </SimpleCellTypography>
+          </div>
         )}
       </div>
       {hasReactNode(indicator) && (
-        <SimpleCellTypography
-          Component="span"
-          vkuiClass="SimpleCell__indicator"
-        >
+        <Headline Component="span" weight="3" vkuiClass="SimpleCell__indicator">
           {indicator}
-        </SimpleCellTypography>
+        </Headline>
       )}
       {hasAfter && (
         <div vkuiClass="SimpleCell__after">