Merge pull request #3139 from VKCOM/feat/2866/SimpleCell_to_figma_design

feat(SimpleCell): Reconcile with figma design
VKCOM · Sep 6, 2022 · 80f330b · 80f330b
2 parents 3440a92 + 780fe03
commit 80f330b
Show file tree

Hide file tree

Showing 12 changed files with 126 additions and 38 deletions.
diff --git a/src/components/Avatar/Readme.md b/src/components/Avatar/Readme.md
@@ -7,7 +7,7 @@
     <Group>
       <Header mode="secondary">Дефолтный размер</Header>
       <SimpleCell
-        description="VKontakte"
+        subtitle="VKontakte"
         before={<Avatar src={getAvatarUrl("user_arthurstam")} />}
       >
         Артур Стамбульцян
@@ -48,7 +48,7 @@
             <Icon28Users />
           </Avatar>
         }
-        description="Только от друзей друзей"
+        subtitle="Только от друзей друзей"
       >
         Заявки в друзья
       </SimpleCell>
@@ -526,20 +526,20 @@
       <Header mode="secondary">Приложения</Header>
       <SimpleCell
         before={<Avatar mode="app" src={getAvatarUrl("app_shorm_online")} />}
-        description="Ролевая"
+        subtitle="Ролевая"
       >
         Шторм онлайн
       </SimpleCell>
       <SimpleCell
         before={<Avatar mode="app" src={getAvatarUrl("app_shashki")} />}
-        description="Настольная"
+        subtitle="Настольная"
         multiline={false}
       >
         Шашки - 3 вида: шашки, уголки, поддавки
       </SimpleCell>
       <SimpleCell
         before={<Avatar mode="app" src={getAvatarUrl("app_vega_mix")} />}
-        description="Головоломка"
+        subtitle="Головоломка"
       >
         Вега Микс на даче
       </SimpleCell>
@@ -550,14 +550,14 @@
         before={
           <Avatar mode="image" src={getAvatarUrl("audio_arctic_monkeys")} />
         }
-        description="Arctic Monkeys"
+        subtitle="Arctic Monkeys"
         after={<Icon24MoreHorizontal fill="var(--vkui--color_icon_accent)" />}
       >
         I Wanna Be Yours
       </SimpleCell>
       <SimpleCell
         before={<Avatar mode="image" src={getAvatarUrl("audio_leto_zveri")} />}
-        description="Лето (звери)"
+        subtitle="Лето (звери)"
         after={<Icon24MoreHorizontal fill="var(--vkui--color_icon_accent)" />}
       >
         6 утра
@@ -566,7 +566,7 @@
         before={
           <Avatar mode="image" src={getAvatarUrl("audio_depeche_mode")} />
         }
-        description="Depeche Mode"
+        subtitle="Depeche Mode"
         after={<Icon24MoreHorizontal fill="var(--vkui--color_icon_accent)" />}
       >
         Enjoy the Silence

diff --git a/src/components/Gradient/Readme.md b/src/components/Gradient/Readme.md
@@ -49,7 +49,7 @@ const ExampleWithAdaptivity = () => {
             <Header>Учебные заведения и классы</Header>
             <SimpleCell
               before={<Icon28SchoolOutline />}
-              description="Екатеринбург"
+              subtitle="Екатеринбург"
             >
               Школа №180
             </SimpleCell>

diff --git a/src/components/Group/Readme.md b/src/components/Group/Readme.md
@@ -110,7 +110,7 @@ const SharedContent = () => {
               </IconButton>
             )
           }
-          description="Санкт-Петербург, Россия"
+          subtitle="Санкт-Петербург, Россия"
           before={<Avatar size={32} mode="app" />}
         >
           VK · Приложение для iPhone
@@ -127,7 +127,7 @@ const SharedContent = () => {
               </IconButton>
             )
           }
-          description="Санкт-Петербург, Россия"
+          subtitle="Санкт-Петербург, Россия"
           before={<Avatar size={32} mode="app" />}
         >
           VK · Браузер Chrome для macOS

diff --git a/src/components/PromoBanner/PromoBanner.tsx b/src/components/PromoBanner/PromoBanner.tsx
@@ -121,7 +121,7 @@ export const PromoBanner = ({
           />
         }
         after={<Button mode="outline">{bannerData.ctaText}</Button>}
-        description={bannerData.domain}
+        subtitle={bannerData.domain}
       >
         {bannerData.title}
       </SimpleCell>

diff --git a/src/components/SimpleCell/Readme.md b/src/components/SimpleCell/Readme.md
@@ -83,13 +83,13 @@ const Example = () => {
           <Header mode="secondary">Список друзей</Header>
           <SimpleCell
             before={<Avatar size={48} src={getAvatarUrl("user_xyz")} />}
-            badge={<Icon12Verified />}
+            badgeAfterTitle={<Icon12Verified />}
             after={
               <IconButton>
                 <Icon28MessageOutline />
               </IconButton>
             }
-            description="Команда ВКонтакте"
+            subtitle="Команда ВКонтакте"
           >
             Игорь Фёдоров
           </SimpleCell>
@@ -100,7 +100,7 @@ const Example = () => {
                 <Icon28MessageOutline />
               </IconButton>
             }
-            description="Бот"
+            subtitle="Бот"
           >
             Artur Stambultsian
           </SimpleCell>

diff --git a/src/components/SimpleCell/SimpleCell.css b/src/components/SimpleCell/SimpleCell.css
@@ -36,12 +36,17 @@
   padding-right: 16px;
 }
 
+.SimpleCell__subhead {
+  color: var(--text_subhead, var(--vkui--color_text_subhead));
+}
+
 .SimpleCell__text {
   text-overflow: ellipsis;
   overflow: hidden;
 }
 
-.SimpleCell__subtitle {
+.SimpleCell__subtitle,
+.SimpleCell__extraSubtitle {
   color: var(--text_secondary, var(--vkui--color_text_secondary));
 }
 

diff --git a/src/components/SimpleCell/SimpleCell.e2e.tsx b/src/components/SimpleCell/SimpleCell.e2e.tsx
@@ -4,6 +4,10 @@ import {
   Icon16MessageHeart,
   Icon24MessageOutline,
   Icon28MessageOutline,
+  Icon12Fire,
+  Icon12Tag,
+  Icon20AddCircleFillBlue,
+  Icon12Verified,
 } from "@vkontakte/icons";
 import { SimpleCell, SimpleCellProps } from "./SimpleCell";
 import { Avatar } from "../Avatar/Avatar";
@@ -42,7 +46,7 @@ describe("SimpleCell", () => {
         children: [
           "Very long children Very long children Very long children Very long children Very long children Very long children Very long children Very long children",
         ],
-        description: [
+        subtitle: [
           "Very long description Very long description Very long description Very long description Very long " +
             "description Very long description Very long description Very long description Very long description Very long description Very long description Very long description",
         ],
@@ -60,6 +64,22 @@ describe("SimpleCell", () => {
         after: [<Switch key="switch" />],
         children: ["Title"],
       },
+      {
+        before: [<Avatar key="avatar" size={40} />],
+        subhead: ["Subhead"],
+        children: ["Title"],
+        subtitle: ["Subtitle"],
+        extraSubtitle: ["Extra Subtitle"],
+        badgeAfterSubtitle: [
+          <Icon12Fire key="iconFire" fill="var(--vkui--color_icon_negative)" />,
+        ],
+        badgeBeforeSubtitle: [
+          <Icon12Tag key="iconTag" fill="var(--vkui--color_icon_tertiary)" />,
+        ],
+        badgeBeforeTitle: [<Icon20AddCircleFillBlue key="leftBadge" />],
+        badgeAfterTitle: [<Icon12Verified key="rightBadge" />],
+        multiline: [true, false],
+      },
     ]
   );
 });
diff --git a/src/components/SimpleCell/SimpleCell.tsx b/src/components/SimpleCell/SimpleCell.tsx
@@ -9,6 +9,7 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { withAdaptivity, SizeType } from "../../hoc/withAdaptivity";
+import { Subhead } from "../Typography/Subhead/Subhead";
 import { Headline } from "../Typography/Headline/Headline";
 import { Footnote } from "../Typography/Footnote/Footnote";
 import { Caption } from "../Typography/Caption/Caption";
@@ -20,18 +21,48 @@ export interface SimpleCellOwnProps extends HasComponent {
    */
   before?: React.ReactNode;
   /**
+   * @deprecated будет удалено в v5.0.0, используйте свойство rightBadge
    * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.
    */
   badge?: React.ReactNode;
+  /**
+   * Иконка 12 или `<Badge />`. Добавится слева от текста `children`.
+   */
+  badgeBeforeTitle?: React.ReactNode;
+  /**
+   * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.
+   */
+  badgeAfterTitle?: React.ReactNode;
+  /**
+   * Иконка 12. Добавится слева от текста `subtitle`.
+   */
+  badgeBeforeSubtitle?: React.ReactNode;
+  /**
+   * Иконка 12. Добавится справа от текста `subtitle`.
+   */
+  badgeAfterSubtitle?: React.ReactNode;
   /**
    * Контейнер для текста справа от `children`.
    */
   indicator?: React.ReactNode;
+  /**
+   * Дополнительная строка текста над `children`.
+   */
+  subhead?: React.ReactNode;
+  /**
+   * Дополнительная строка текста под `children`.
+   */
+  subtitle?: React.ReactNode;
+  /**
+   * Дополнительная строка текста под `children` и `subtitle`.
+   */
+  extraSubtitle?: React.ReactNode;
   /**
    * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.
    */
   after?: React.ReactNode;
   /**
+   * @deprecated будет удалено в v5.0.0, используйте свойство subtitle
    * Контейнер для текста под `children`.
    */
   description?: React.ReactNode;
@@ -43,15 +74,18 @@ export interface SimpleCellOwnProps extends HasComponent {
    * В iOS добавляет chevron справа. Передавать `true`, если предполагается переход при клике по ячейке.
    */
   expandable?: boolean;
+  /**
+   * Включает многострочный режим для отображения текста
+   */
   multiline?: boolean;
 }
 
 export interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}
 
-type SimpleCellTypographyProps = React.HTMLAttributes<HTMLDivElement> &
+type SubtitleTypographyProps = React.HTMLAttributes<HTMLDivElement> &
   HasComponent;
 
-const SimpleCellTypography = (props: SimpleCellTypographyProps) => {
+const SubtitleTypography = (props: SubtitleTypographyProps) => {
   const { sizeY } = useAdaptivity();
 
   if (sizeY === SizeType.COMPACT) {
@@ -63,6 +97,10 @@ const SimpleCellTypography = (props: SimpleCellTypographyProps) => {
 
 const SimpleCellComponent = ({
   badge,
+  badgeBeforeTitle,
+  badgeAfterTitle = badge,
+  badgeBeforeSubtitle,
+  badgeAfterSubtitle,
   before,
   indicator,
   children,
@@ -71,6 +109,9 @@ const SimpleCellComponent = ({
   expandable,
   multiline,
   sizeY,
+  subhead,
+  subtitle = description,
+  extraSubtitle,
   ...restProps
 }: SimpleCellProps) => {
   const platform = usePlatform();
@@ -88,25 +129,47 @@ const SimpleCellComponent = ({
     >
       {before}
       <div vkuiClass="SimpleCell__main">
+        {subhead && (
+          <Subhead
+            Component="span"
+            vkuiClass="SimpleCell__text SimpleCell__subhead"
+          >
+            {subhead}
+          </Subhead>
+        )}
         <div vkuiClass="SimpleCell__content">
+          {badgeBeforeTitle && (
+            <span vkuiClass="SimpleCell__badge">{badgeBeforeTitle}</span>
+          )}
           <Headline
             Component="span"
             vkuiClass="SimpleCell__children"
             weight="3"
           >
             {children}
           </Headline>
-          {hasReactNode(badge) && (
-            <span vkuiClass="SimpleCell__badge">{badge}</span>
+          {hasReactNode(badgeAfterTitle) && (
+            <span vkuiClass="SimpleCell__badge">{badgeAfterTitle}</span>
           )}
         </div>
-        {description && (
+        {subtitle && (
           <div vkuiClass="SimpleCell__content">
-            <SimpleCellTypography vkuiClass="SimpleCell__text SimpleCell__subtitle">
-              {description}
-            </SimpleCellTypography>
+            {badgeBeforeSubtitle && (
+              <span vkuiClass="SimpleCell__badge">{badgeBeforeSubtitle}</span>
+            )}
+            <SubtitleTypography vkuiClass="SimpleCell__text SimpleCell__subtitle">
+              {subtitle}
+            </SubtitleTypography>
+            {badgeAfterSubtitle && (
+              <span vkuiClass="SimpleCell__badge">{badgeAfterSubtitle}</span>
+            )}
           </div>
         )}
+        {extraSubtitle && (
+          <SubtitleTypography vkuiClass="SimpleCell__text SimpleCell__extraSubtitle">
+            {extraSubtitle}
+          </SubtitleTypography>
+        )}
       </div>
       {hasReactNode(indicator) && (
         <Headline Component="span" weight="3" vkuiClass="SimpleCell__indicator">

diff --git a/src/components/SimpleCell/__image_snapshots__/simplecell-android-light-1-snap.png b/src/components/SimpleCell/__image_snapshots__/simplecell-android-light-1-snap.png
diff --git a/src/components/SimpleCell/__image_snapshots__/simplecell-ios-light-1-snap.png b/src/components/SimpleCell/__image_snapshots__/simplecell-ios-light-1-snap.png
diff --git a/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-light-1-snap.png b/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-light-1-snap.png
diff --git a/src/components/Tooltip/Readme.md b/src/components/Tooltip/Readme.md
@@ -97,26 +97,26 @@ const Example = () => {
                   <Avatar />
                 </Tooltip>
               }
-              description="Веб-сайт"
+              subtitle="Веб-сайт"
             >
               Команда ВКонтакте
             </SimpleCell>
-            <SimpleCell before={<Avatar />} description="Музыкант">
+            <SimpleCell before={<Avatar />} subtitle="Музыкант">
               Robbie Williams
             </SimpleCell>
-            <SimpleCell before={<Avatar />} description="Издательский дом">
+            <SimpleCell before={<Avatar />} subtitle="Издательский дом">
               ПостНаука
             </SimpleCell>
-            <SimpleCell before={<Avatar />} description="Издательский дом">
+            <SimpleCell before={<Avatar />} subtitle="Издательский дом">
               ПостНаука
             </SimpleCell>
-            <SimpleCell before={<Avatar />} description="Издательский дом">
+            <SimpleCell before={<Avatar />} subtitle="Издательский дом">
               ПостНаука
             </SimpleCell>
-            <SimpleCell before={<Avatar />} description="Издательский дом">
+            <SimpleCell before={<Avatar />} subtitle="Издательский дом">
               ПостНаука
             </SimpleCell>
-            <SimpleCell before={<Avatar />} description="Издательский дом">
+            <SimpleCell before={<Avatar />} subtitle="Издательский дом">
               ПостНаука
             </SimpleCell>
           </List>