diff --git a/src/components/Avatar/Readme.md b/src/components/Avatar/Readme.md index 41ef0cfcd8..f1375201f4 100644 --- a/src/components/Avatar/Readme.md +++ b/src/components/Avatar/Readme.md @@ -7,7 +7,7 @@
Дефолтный размер
} > Артур Стамбульцян @@ -48,7 +48,7 @@ } - description="Только от друзей друзей" + subtitle="Только от друзей друзей" > Заявки в друзья @@ -526,20 +526,20 @@
Приложения
} - description="Ролевая" + subtitle="Ролевая" > Шторм онлайн } - description="Настольная" + subtitle="Настольная" multiline={false} > Шашки - 3 вида: шашки, уголки, поддавки } - description="Головоломка" + subtitle="Головоломка" > Вега Микс на даче @@ -550,14 +550,14 @@ before={ } - description="Arctic Monkeys" + subtitle="Arctic Monkeys" after={} > I Wanna Be Yours } - description="Лето (звери)" + subtitle="Лето (звери)" after={} > 6 утра @@ -566,7 +566,7 @@ before={ } - description="Depeche Mode" + subtitle="Depeche Mode" after={} > Enjoy the Silence diff --git a/src/components/Gradient/Readme.md b/src/components/Gradient/Readme.md index 13f4a273a8..3e944f6af8 100644 --- a/src/components/Gradient/Readme.md +++ b/src/components/Gradient/Readme.md @@ -49,7 +49,7 @@ const ExampleWithAdaptivity = () => {
Учебные заведения и классы
} - description="Екатеринбург" + subtitle="Екатеринбург" > Школа №180 diff --git a/src/components/Group/Readme.md b/src/components/Group/Readme.md index 2bd60a14fa..9fcbaf1ba1 100644 --- a/src/components/Group/Readme.md +++ b/src/components/Group/Readme.md @@ -110,7 +110,7 @@ const SharedContent = () => { ) } - description="Санкт-Петербург, Россия" + subtitle="Санкт-Петербург, Россия" before={} > VK · Приложение для iPhone @@ -127,7 +127,7 @@ const SharedContent = () => { ) } - description="Санкт-Петербург, Россия" + subtitle="Санкт-Петербург, Россия" before={} > VK · Браузер Chrome для macOS diff --git a/src/components/PromoBanner/PromoBanner.tsx b/src/components/PromoBanner/PromoBanner.tsx index 031986563b..80f76ace87 100644 --- a/src/components/PromoBanner/PromoBanner.tsx +++ b/src/components/PromoBanner/PromoBanner.tsx @@ -121,7 +121,7 @@ export const PromoBanner = ({ /> } after={} - description={bannerData.domain} + subtitle={bannerData.domain} > {bannerData.title}
diff --git a/src/components/SimpleCell/Readme.md b/src/components/SimpleCell/Readme.md index fa86274740..8a3826c9f1 100644 --- a/src/components/SimpleCell/Readme.md +++ b/src/components/SimpleCell/Readme.md @@ -83,13 +83,13 @@ const Example = () => {
Список друзей
} - badge={} + badgeAfterTitle={} after={ } - description="Команда ВКонтакте" + subtitle="Команда ВКонтакте" > Игорь Фёдоров @@ -100,7 +100,7 @@ const Example = () => { } - description="Бот" + subtitle="Бот" > Artur Stambultsian diff --git a/src/components/SimpleCell/SimpleCell.css b/src/components/SimpleCell/SimpleCell.css index 698888760d..d10e9b75f8 100644 --- 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 index aee23d6d23..6e61b822b9 100644 --- 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: [], children: ["Title"], }, + { + before: [], + subhead: ["Subhead"], + children: ["Title"], + subtitle: ["Subtitle"], + extraSubtitle: ["Extra Subtitle"], + badgeAfterSubtitle: [ + , + ], + badgeBeforeSubtitle: [ + , + ], + badgeBeforeTitle: [], + badgeAfterTitle: [], + multiline: [true, false], + }, ] ); }); diff --git a/src/components/SimpleCell/SimpleCell.tsx b/src/components/SimpleCell/SimpleCell.tsx index 3985d610a0..8cc59546a8 100644 --- 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 или ``. Добавится справа от текста `children`. */ badge?: React.ReactNode; + /** + * Иконка 12 или ``. Добавится слева от текста `children`. + */ + badgeBeforeTitle?: React.ReactNode; + /** + * Иконка 12 или ``. Добавится справа от текста `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 или ``. Располагается справа от `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 & +type SubtitleTypographyProps = React.HTMLAttributes & 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,7 +129,18 @@ const SimpleCellComponent = ({ > {before}
+ {subhead && ( + + {subhead} + + )}
+ {badgeBeforeTitle && ( + {badgeBeforeTitle} + )} {children} - {hasReactNode(badge) && ( - {badge} + {hasReactNode(badgeAfterTitle) && ( + {badgeAfterTitle} )}
- {description && ( + {subtitle && (
- - {description} - + {badgeBeforeSubtitle && ( + {badgeBeforeSubtitle} + )} + + {subtitle} + + {badgeAfterSubtitle && ( + {badgeAfterSubtitle} + )}
)} + {extraSubtitle && ( + + {extraSubtitle} + + )}
{hasReactNode(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 index 2830b9ecf6..18a1ac27e3 100644 --- a/src/components/SimpleCell/__image_snapshots__/simplecell-android-light-1-snap.png +++ b/src/components/SimpleCell/__image_snapshots__/simplecell-android-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5a24f850b25faff224a74a723c0c666a0401a5cb8b21c1fa3e31021dd3c31bd5 -size 77916 +oid sha256:6bdbc7dc98743fb9910b8b8e737db53d6389349073943b22ec2c2759079bf3b7 +size 110522 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 index f59746fff6..9c892975ef 100644 --- a/src/components/SimpleCell/__image_snapshots__/simplecell-ios-light-1-snap.png +++ b/src/components/SimpleCell/__image_snapshots__/simplecell-ios-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a1d51d3eda8f9ffe92bbea08d988b234857d123cea9963446ce8d4a2371c6f28 -size 79296 +oid sha256:a198c6a11b2cd9d02bdbf4d920525abae3c625dcf0d83d2b915190eb40dbb177 +size 111892 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 index 2f753b4fc1..f0ff53ff18 100644 --- a/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-light-1-snap.png +++ b/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:54180949d53b03350e00d0c61e66f79edcf4be6e280a5736ad1a63530acbdb07 -size 66994 +oid sha256:5f6fac6c6c937bde20d13c5764b7aaeb7e2654b04857999a159e8c8bb124489a +size 98737 diff --git a/src/components/Tooltip/Readme.md b/src/components/Tooltip/Readme.md index 4fc0864c90..914de903a5 100644 --- a/src/components/Tooltip/Readme.md +++ b/src/components/Tooltip/Readme.md @@ -97,26 +97,26 @@ const Example = () => { } - description="Веб-сайт" + subtitle="Веб-сайт" > Команда ВКонтакте - } description="Музыкант"> + } subtitle="Музыкант"> Robbie Williams - } description="Издательский дом"> + } subtitle="Издательский дом"> ПостНаука - } description="Издательский дом"> + } subtitle="Издательский дом"> ПостНаука - } description="Издательский дом"> + } subtitle="Издательский дом"> ПостНаука - } description="Издательский дом"> + } subtitle="Издательский дом"> ПостНаука - } description="Издательский дом"> + } subtitle="Издательский дом"> ПостНаука