fix(Header, SimpleCell): fix icons position with multiline (#8144)

* fix(Header, SimpleCell): fix icons position with multiline * test(SimpleCell, Header): add screenshots with long text
VKCOM · Jan 15, 2025 · ae930a3 · ae930a3
1 parent 0c33d7d
commit ae930a3
Show file tree

Hide file tree

Showing 24 changed files with 65 additions and 50 deletions.
diff --git a/packages/vkui/src/components/Header/Header.e2e-playground.tsx b/packages/vkui/src/components/Header/Header.e2e-playground.tsx
@@ -66,7 +66,6 @@ export const HeaderPlayground = (props: ComponentPlaygroundProps) => {
           size: ['m'],
           children: ['Кто может оставлять записи на моей странице'],
           afterTitle: [<Icon16UnlockOutline key="afterTitle" />],
-          multiline: [undefined, true],
         },
         {
           size: ['m'],
@@ -79,7 +78,6 @@ export const HeaderPlayground = (props: ComponentPlaygroundProps) => {
           children: ['Кто может оставлять записи на моей странице'],
           subtitle: ['SOHN — Conrad'],
           afterSubtitle: [<Icon12Fire key="afterSubtitle" />],
-          multiline: [undefined, true],
         },
         {
           size: ['s', 'm', 'l', 'xl'],
@@ -90,7 +88,17 @@ export const HeaderPlayground = (props: ComponentPlaygroundProps) => {
           beforeSubtitle: [<Icon12Tag key="beforeSubtitle" />],
           afterSubtitle: [<Icon12Fire key="afterSubtitle" />],
           subtitle: ['SOHN — Conrad'],
-          multiline: [undefined, true],
+        },
+        {
+          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 Very long children Very long children Very long children',
+          ],
+          subtitle: [
+            'Very long subtitle Very long subtitle Very long subtitle Very long subtitle Very long subtitle Very long subtitle Very long subtitle Very long subtitle Very long subtitle Very long subtitle Very long subtitle  Very long subtitle  Very long subtitle  Very long subtitle  Very long subtitle  Very long subtitle',
+          ],
+          afterSubtitle: [<Icon12Fire key="afterSubtitle" />],
+          afterTitle: [<Icon16UnlockOutline key="afterTitle" />],
+          multiline: [false, true],
         },
       ]}
     >

diff --git a/packages/vkui/src/components/Header/Header.module.css b/packages/vkui/src/components/Header/Header.module.css
@@ -67,7 +67,6 @@
 .contentMultiline {
   white-space: initial;
   word-break: break-word;
-  flex-grow: 1;
 }
 
 .subtitle {

diff --git a/...c/components/Header/__image_snapshots__/header-android-chromium-dark-1-snap.png b/...c/components/Header/__image_snapshots__/header-android-chromium-dark-1-snap.png
diff --git a/.../components/Header/__image_snapshots__/header-android-chromium-light-1-snap.png b/.../components/Header/__image_snapshots__/header-android-chromium-light-1-snap.png
diff --git a/...kui/src/components/Header/__image_snapshots__/header-ios-webkit-dark-1-snap.png b/...kui/src/components/Header/__image_snapshots__/header-ios-webkit-dark-1-snap.png
diff --git a/...ui/src/components/Header/__image_snapshots__/header-ios-webkit-light-1-snap.png b/...ui/src/components/Header/__image_snapshots__/header-ios-webkit-light-1-snap.png
diff --git a/...src/components/Header/__image_snapshots__/header-vkcom-chromium-dark-1-snap.png b/...src/components/Header/__image_snapshots__/header-vkcom-chromium-dark-1-snap.png
diff --git a/...rc/components/Header/__image_snapshots__/header-vkcom-chromium-light-1-snap.png b/...rc/components/Header/__image_snapshots__/header-vkcom-chromium-light-1-snap.png
diff --git a/.../src/components/Header/__image_snapshots__/header-vkcom-firefox-dark-1-snap.png b/.../src/components/Header/__image_snapshots__/header-vkcom-firefox-dark-1-snap.png
diff --git a/...src/components/Header/__image_snapshots__/header-vkcom-firefox-light-1-snap.png b/...src/components/Header/__image_snapshots__/header-vkcom-firefox-light-1-snap.png
diff --git a/...i/src/components/Header/__image_snapshots__/header-vkcom-webkit-dark-1-snap.png b/...i/src/components/Header/__image_snapshots__/header-vkcom-webkit-dark-1-snap.png
diff --git a/.../src/components/Header/__image_snapshots__/header-vkcom-webkit-light-1-snap.png b/.../src/components/Header/__image_snapshots__/header-vkcom-webkit-light-1-snap.png
diff --git a/packages/vkui/src/components/SimpleCell/SimpleCell.e2e-playground.tsx b/packages/vkui/src/components/SimpleCell/SimpleCell.e2e-playground.tsx
@@ -79,7 +79,19 @@ export const SimpleCellPlayground = (props: ComponentPlaygroundProps) => {
           ],
           badgeBeforeTitle: [<Icon20AddCircleFillBlue key="leftBadge" />],
           badgeAfterTitle: [<Icon12Verified key="rightBadge" />],
-          multiline: [true, false],
+        },
+        {
+          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 Very long children Very long children Very long children Very long children',
+          ],
+          subtitle: [
+            'Very long subtitle Very long subtitle Very long subtitle Very long subtitle Very long subtitle Very long subtitle Very long subtitle Very long children Very long subtitle Very long subtitle Very long subtitle Very long subtitle Very long subtitle Very long subtitle',
+          ],
+          badgeAfterTitle: [<Icon12Verified key="rightBadge" />],
+          badgeAfterSubtitle: [
+            <Icon12Fire key="iconFire" fill="var(--vkui--color_icon_negative)" />,
+          ],
+          multiline: [false, true],
         },
         {
           children: ['Title'],

diff --git a/packages/vkui/src/components/SimpleCell/SimpleCell.module.css b/packages/vkui/src/components/SimpleCell/SimpleCell.module.css
@@ -78,11 +78,7 @@
   display: flex;
   align-content: flex-start;
   align-items: center;
-  justify-content: space-between;
   max-inline-size: 100%;
-}
-
-.host:not(.mult) .content {
   justify-content: flex-start;
 }
 
@@ -95,7 +91,7 @@
 
 .mult .children,
 .mult .subtitle {
-  flex: 1 1 auto;
+  flex: 0 1 auto;
 }
 
 .badge {

diff --git a/...ents/SimpleCell/__image_snapshots__/simplecell-android-chromium-dark-1-snap.png b/...ents/SimpleCell/__image_snapshots__/simplecell-android-chromium-dark-1-snap.png
diff --git a/...nts/SimpleCell/__image_snapshots__/simplecell-android-chromium-light-1-snap.png b/...nts/SimpleCell/__image_snapshots__/simplecell-android-chromium-light-1-snap.png
diff --git a/...components/SimpleCell/__image_snapshots__/simplecell-ios-webkit-dark-1-snap.png b/...components/SimpleCell/__image_snapshots__/simplecell-ios-webkit-dark-1-snap.png
diff --git a/...omponents/SimpleCell/__image_snapshots__/simplecell-ios-webkit-light-1-snap.png b/...omponents/SimpleCell/__image_snapshots__/simplecell-ios-webkit-light-1-snap.png
diff --git a/...onents/SimpleCell/__image_snapshots__/simplecell-vkcom-chromium-dark-1-snap.png b/...onents/SimpleCell/__image_snapshots__/simplecell-vkcom-chromium-dark-1-snap.png
diff --git a/...nents/SimpleCell/__image_snapshots__/simplecell-vkcom-chromium-light-1-snap.png b/...nents/SimpleCell/__image_snapshots__/simplecell-vkcom-chromium-light-1-snap.png
diff --git a/...ponents/SimpleCell/__image_snapshots__/simplecell-vkcom-firefox-dark-1-snap.png b/...ponents/SimpleCell/__image_snapshots__/simplecell-vkcom-firefox-dark-1-snap.png
diff --git a/...onents/SimpleCell/__image_snapshots__/simplecell-vkcom-firefox-light-1-snap.png b/...onents/SimpleCell/__image_snapshots__/simplecell-vkcom-firefox-light-1-snap.png
diff --git a/...mponents/SimpleCell/__image_snapshots__/simplecell-vkcom-webkit-dark-1-snap.png b/...mponents/SimpleCell/__image_snapshots__/simplecell-vkcom-webkit-dark-1-snap.png
diff --git a/...ponents/SimpleCell/__image_snapshots__/simplecell-vkcom-webkit-light-1-snap.png b/...ponents/SimpleCell/__image_snapshots__/simplecell-vkcom-webkit-light-1-snap.png