fix(SimpleCell): fix before icon offset (iOS) (#6829)

* fix(SimpleCell): fix before icon offset (iOS) * CHORE: Update screenshots --------- Co-authored-by: GitHub Action <actions@github.com>
VKCOM · Apr 22, 2024 · 957c65e · 957c65e
1 parent 51de7ba
commit 957c65e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git a/packages/vkui/src/components/SimpleCell/SimpleCell.e2e-playground.tsx b/packages/vkui/src/components/SimpleCell/SimpleCell.e2e-playground.tsx
@@ -99,6 +99,10 @@ export const SimpleCellPlayground = (props: ComponentPlaygroundProps) => {
           ],
           indicator: ['1:20:22'],
         },
+        {
+          before: [<Icon28MessageOutline key="icon" />],
+          children: ['Title'],
+        },
       ]}
     >
       {(props: SimpleCellProps) => <SimpleCell {...props} />}

diff --git a/packages/vkui/src/components/SimpleCell/SimpleCell.module.css b/packages/vkui/src/components/SimpleCell/SimpleCell.module.css
@@ -29,6 +29,11 @@
   padding-inline-end: 4px;
 }
 
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+.SimpleCell__before--ios > :global(.vkuiIcon) {
+  padding-inline-end: 0;
+}
+
 .SimpleCell__before:empty {
   display: none;
 }

diff --git a/packages/vkui/src/components/SimpleCell/SimpleCell.tsx b/packages/vkui/src/components/SimpleCell/SimpleCell.tsx
@@ -115,7 +115,14 @@ export const SimpleCell = ({
         className,
       )}
     >
-      <div className={styles['SimpleCell__before']}>{before}</div>
+      <div
+        className={classNames(
+          styles['SimpleCell__before'],
+          platform === 'ios' && styles['SimpleCell__before--ios'],
+        )}
+      >
+        {before}
+      </div>
       <div className={styles['SimpleCell__middle']}>
         {subhead && (
           <Subhead