fix(CellButton): decrease space between icon and text (#7658)

исправлен слишком большой отступ между иконкой в before и текстом в режиме centered.
VKCOM · Sep 25, 2024 · c96f0b6 · c96f0b6
1 parent 9ac63e2
commit c96f0b6
Show file tree

Hide file tree

Showing 13 changed files with 29 additions and 22 deletions.
diff --git a/packages/vkui/src/components/CellButton/CellButton.e2e-playground.tsx b/packages/vkui/src/components/CellButton/CellButton.e2e-playground.tsx
@@ -12,6 +12,7 @@ export const CellButtonPlayground = (props: ComponentPlaygroundProps) => {
         {
           centered: [true],
           children: ['Создать что-нибудь'],
+          before: [undefined, <Icon24Add key="add" />],
         },
         {
           mode: [undefined, 'danger'],

diff --git a/packages/vkui/src/components/CellButton/CellButton.module.css b/packages/vkui/src/components/CellButton/CellButton.module.css
@@ -38,7 +38,11 @@
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .CellButton--centered :global(.vkuiIcon) {
-  padding-inline-end: 8px;
+  /* компенсируем отступ заданные в SimpleCell__before */
+  margin-inline-end: calc(
+    -1 * var(--vkui_internal--SimpleCell-before-inline-padding-end, var(--vkui--spacing_size_xl))
+  );
+  padding-inline-end: var(--vkui--spacing_size_m);
 }
 
 .CellButton {

diff --git a/...ents/CellButton/__image_snapshots__/cellbutton-android-chromium-dark-1-snap.png b/...ents/CellButton/__image_snapshots__/cellbutton-android-chromium-dark-1-snap.png
diff --git a/...nts/CellButton/__image_snapshots__/cellbutton-android-chromium-light-1-snap.png b/...nts/CellButton/__image_snapshots__/cellbutton-android-chromium-light-1-snap.png
diff --git a/...components/CellButton/__image_snapshots__/cellbutton-ios-webkit-dark-1-snap.png b/...components/CellButton/__image_snapshots__/cellbutton-ios-webkit-dark-1-snap.png
diff --git a/...omponents/CellButton/__image_snapshots__/cellbutton-ios-webkit-light-1-snap.png b/...omponents/CellButton/__image_snapshots__/cellbutton-ios-webkit-light-1-snap.png
diff --git a/...onents/CellButton/__image_snapshots__/cellbutton-vkcom-chromium-dark-1-snap.png b/...onents/CellButton/__image_snapshots__/cellbutton-vkcom-chromium-dark-1-snap.png
diff --git a/...nents/CellButton/__image_snapshots__/cellbutton-vkcom-chromium-light-1-snap.png b/...nents/CellButton/__image_snapshots__/cellbutton-vkcom-chromium-light-1-snap.png
diff --git a/...ponents/CellButton/__image_snapshots__/cellbutton-vkcom-firefox-dark-1-snap.png b/...ponents/CellButton/__image_snapshots__/cellbutton-vkcom-firefox-dark-1-snap.png
diff --git a/...onents/CellButton/__image_snapshots__/cellbutton-vkcom-firefox-light-1-snap.png b/...onents/CellButton/__image_snapshots__/cellbutton-vkcom-firefox-light-1-snap.png
diff --git a/...mponents/CellButton/__image_snapshots__/cellbutton-vkcom-webkit-dark-1-snap.png b/...mponents/CellButton/__image_snapshots__/cellbutton-vkcom-webkit-dark-1-snap.png
diff --git a/...ponents/CellButton/__image_snapshots__/cellbutton-vkcom-webkit-light-1-snap.png b/...ponents/CellButton/__image_snapshots__/cellbutton-vkcom-webkit-light-1-snap.png
diff --git a/packages/vkui/src/components/SimpleCell/SimpleCell.module.css b/packages/vkui/src/components/SimpleCell/SimpleCell.module.css
@@ -1,4 +1,6 @@
 .SimpleCell {
+  --vkui_internal--SimpleCell-before-inline-padding-end: var(--vkui--spacing_size_xl);
+
   display: flex;
   align-items: center;
   min-block-size: 48px;
@@ -24,7 +26,7 @@
   display: flex;
   align-items: center;
   padding-block: var(--vkui--spacing_size_s);
-  padding-inline-end: var(--vkui--spacing_size_xl);
+  padding-inline-end: var(--vkui_internal--SimpleCell-before-inline-padding-end);
   color: var(--vkui_internal--icon_color, var(--vkui--color_icon_accent));
 }