From 7460804e7c55ee21c51d51eb4a158cae37934c07 Mon Sep 17 00:00:00 2001
From: Victoria Zhizhonkova <indarklight@gmail.com>
Date: Thu, 19 Sep 2024 20:07:00 +0700
Subject: [PATCH] feat(HorizontalScroll): remove inline prop (#7582)

* feat(HorizontalScroll): remove inline prop

* fix: readme clean up + screenshots update

* feat: add codemod tests

* feat(HorizontalCellShowMore): remove compensateLastCellIndent prop

* fix: update wrongly generate snapshot

* fix: update codemod test
---
 .../horizontal-cell-show-more/basic.input.tsx | 22 ++++++++
 .../horizontal-scroll/basic.input.tsx         | 20 ++++++++
 .../horizontal-cell-show-more.ts.snap         | 26 ++++++++++
 .../__snapshots__/horizontal-scroll.ts.snap   | 24 +++++++++
 .../v7/__tests__/horizontal-cell-show-more.ts | 12 +++++
 .../v7/__tests__/horizontal-scroll.ts         | 12 +++++
 .../v7/horizontal-cell-show-more.ts           | 47 +++++++++++++++++
 .../src/transforms/v7/horizontal-scroll.ts    | 44 ++++++++++++++++
 .../CardScroll/CardScroll.module.css          |  1 +
 packages/vkui/src/components/Group/Readme.md  |  4 +-
 .../src/components/HorizontalCell/Readme.md   | 20 ++------
 .../HorizontalCellShowMore.e2e-playground.tsx |  8 +--
 .../HorizontalCellShowMore.module.css         |  5 --
 .../HorizontalCellShowMore.stories.tsx        |  2 +-
 .../HorizontalCellShowMore.tsx                | 10 +---
 ...mall-size-android-chromium-dark-1-snap.png |  4 +-
 ...all-size-android-chromium-light-1-snap.png |  4 +-
 ...more-small-size-ios-webkit-dark-1-snap.png |  4 +-
 ...ore-small-size-ios-webkit-light-1-snap.png |  4 +-
 ...-small-size-vkcom-chromium-dark-1-snap.png |  4 +-
 ...small-size-vkcom-chromium-light-1-snap.png |  4 +-
 ...e-small-size-vkcom-firefox-dark-1-snap.png |  4 +-
 ...-small-size-vkcom-firefox-light-1-snap.png |  4 +-
 ...re-small-size-vkcom-webkit-dark-1-snap.png |  2 +-
 ...e-small-size-vkcom-webkit-light-1-snap.png |  4 +-
 .../HorizontalScroll.e2e-playground.tsx       |  4 --
 .../HorizontalScroll.module.css               | 10 +---
 .../HorizontalScroll.stories.tsx              |  2 +-
 .../HorizontalScroll/HorizontalScroll.tsx     |  8 ---
 .../src/components/HorizontalScroll/Readme.md | 51 ++++---------------
 ...ter-false-android-chromium-dark-1-snap.png |  4 +-
 ...er-false-android-chromium-light-1-snap.png |  4 +-
 ...nter-true-android-chromium-dark-1-snap.png |  4 +-
 ...ter-true-android-chromium-light-1-snap.png |  4 +-
 packages/vkui/src/components/View/Readme.md   |  2 +-
 .../vkui/src/components/View/View.stories.tsx |  2 +-
 36 files changed, 263 insertions(+), 127 deletions(-)
 create mode 100644 packages/codemods/src/transforms/v7/__testfixtures__/horizontal-cell-show-more/basic.input.tsx
 create mode 100644 packages/codemods/src/transforms/v7/__testfixtures__/horizontal-scroll/basic.input.tsx
 create mode 100644 packages/codemods/src/transforms/v7/__tests__/__snapshots__/horizontal-cell-show-more.ts.snap
 create mode 100644 packages/codemods/src/transforms/v7/__tests__/__snapshots__/horizontal-scroll.ts.snap
 create mode 100644 packages/codemods/src/transforms/v7/__tests__/horizontal-cell-show-more.ts
 create mode 100644 packages/codemods/src/transforms/v7/__tests__/horizontal-scroll.ts
 create mode 100644 packages/codemods/src/transforms/v7/horizontal-cell-show-more.ts
 create mode 100644 packages/codemods/src/transforms/v7/horizontal-scroll.ts

diff --git a/packages/codemods/src/transforms/v7/__testfixtures__/horizontal-cell-show-more/basic.input.tsx b/packages/codemods/src/transforms/v7/__testfixtures__/horizontal-cell-show-more/basic.input.tsx
new file mode 100644
index 0000000000..550b60a7ae
--- /dev/null
+++ b/packages/codemods/src/transforms/v7/__testfixtures__/horizontal-cell-show-more/basic.input.tsx
@@ -0,0 +1,22 @@
+import { HorizontalCellShowMore, HorizontalScroll } from '@vkontakte/vkui';
+import React from 'react';
+import '@vkontakte/vkui/dist/vkui.css';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <HorizontalScroll>
+        <div />
+        <div />
+        <div />
+        <HorizontalCellShowMore onClick={() => {}} compensateLastCellIndent size="m" height={88} />
+      </HorizontalScroll>
+      <HorizontalScroll>
+        <div />
+        <div />
+        <div />
+        <HorizontalCellShowMore onClick={() => {}} compensateLastCellIndent={true} size="m" height={88} />
+      </HorizontalScroll>
+    </React.Fragment>
+  );
+};
diff --git a/packages/codemods/src/transforms/v7/__testfixtures__/horizontal-scroll/basic.input.tsx b/packages/codemods/src/transforms/v7/__testfixtures__/horizontal-scroll/basic.input.tsx
new file mode 100644
index 0000000000..f88f364320
--- /dev/null
+++ b/packages/codemods/src/transforms/v7/__testfixtures__/horizontal-scroll/basic.input.tsx
@@ -0,0 +1,20 @@
+import { HorizontalScroll } from '@vkontakte/vkui';
+import React from 'react';
+import '@vkontakte/vkui/dist/vkui.css';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <HorizontalScroll inline>
+        <div />
+        <div />
+        <div />
+      </HorizontalScroll>
+      <HorizontalScroll arrowSize="m" inline={true}>
+        <div />
+        <div />
+        <div />
+      </HorizontalScroll>
+    </React.Fragment>
+  );
+};
diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/horizontal-cell-show-more.ts.snap b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/horizontal-cell-show-more.ts.snap
new file mode 100644
index 0000000000..c57d900eb5
--- /dev/null
+++ b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/horizontal-cell-show-more.ts.snap
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`horizontal-cell-show-more transforms correctly 1`] = `
+"import { HorizontalCellShowMore, HorizontalScroll } from '@vkontakte/vkui';
+import React from 'react';
+import '@vkontakte/vkui/dist/vkui.css';
+
+const App = () => {
+  return (
+    (<React.Fragment>
+      <HorizontalScroll>
+        <div />
+        <div />
+        <div />
+        <HorizontalCellShowMore onClick={() => {}} size="m" height={88} />
+      </HorizontalScroll>
+      <HorizontalScroll>
+        <div />
+        <div />
+        <div />
+        <HorizontalCellShowMore onClick={() => {}} size="m" height={88} />
+      </HorizontalScroll>
+    </React.Fragment>)
+  );
+};"
+`;
diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/horizontal-scroll.ts.snap b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/horizontal-scroll.ts.snap
new file mode 100644
index 0000000000..6509fac04a
--- /dev/null
+++ b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/horizontal-scroll.ts.snap
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`horizontal-scroll transforms correctly 1`] = `
+"import { HorizontalScroll } from '@vkontakte/vkui';
+import React from 'react';
+import '@vkontakte/vkui/dist/vkui.css';
+
+const App = () => {
+  return (
+    (<React.Fragment>
+      <HorizontalScroll>
+        <div />
+        <div />
+        <div />
+      </HorizontalScroll>
+      <HorizontalScroll arrowSize="m">
+        <div />
+        <div />
+        <div />
+      </HorizontalScroll>
+    </React.Fragment>)
+  );
+};"
+`;
diff --git a/packages/codemods/src/transforms/v7/__tests__/horizontal-cell-show-more.ts b/packages/codemods/src/transforms/v7/__tests__/horizontal-cell-show-more.ts
new file mode 100644
index 0000000000..c073991811
--- /dev/null
+++ b/packages/codemods/src/transforms/v7/__tests__/horizontal-cell-show-more.ts
@@ -0,0 +1,12 @@
+jest.autoMockOff();
+
+import { defineSnapshotTestFromFixture } from '../../../testHelpers/testHelper';
+
+const name = 'horizontal-cell-show-more';
+const fixtures = ['basic'] as const;
+
+describe(name, () => {
+  fixtures.forEach((test) =>
+    defineSnapshotTestFromFixture(__dirname, name, global.TRANSFORM_OPTIONS, `${name}/${test}`),
+  );
+});
diff --git a/packages/codemods/src/transforms/v7/__tests__/horizontal-scroll.ts b/packages/codemods/src/transforms/v7/__tests__/horizontal-scroll.ts
new file mode 100644
index 0000000000..2891a6e1c1
--- /dev/null
+++ b/packages/codemods/src/transforms/v7/__tests__/horizontal-scroll.ts
@@ -0,0 +1,12 @@
+jest.autoMockOff();
+
+import { defineSnapshotTestFromFixture } from '../../../testHelpers/testHelper';
+
+const name = 'horizontal-scroll';
+const fixtures = ['basic'] as const;
+
+describe(name, () => {
+  fixtures.forEach((test) =>
+    defineSnapshotTestFromFixture(__dirname, name, global.TRANSFORM_OPTIONS, `${name}/${test}`),
+  );
+});
diff --git a/packages/codemods/src/transforms/v7/horizontal-cell-show-more.ts b/packages/codemods/src/transforms/v7/horizontal-cell-show-more.ts
new file mode 100644
index 0000000000..d060813432
--- /dev/null
+++ b/packages/codemods/src/transforms/v7/horizontal-cell-show-more.ts
@@ -0,0 +1,47 @@
+import { API, FileInfo } from 'jscodeshift';
+import { getImportInfo } from '../../codemod-helpers';
+import { report } from '../../report';
+import { JSCodeShiftOptions } from '../../types';
+
+export const parser = 'tsx';
+
+const componentName = 'HorizontalCellShowMore';
+export default function transformer(file: FileInfo, api: API, options: JSCodeShiftOptions) {
+  const { alias } = options;
+  const j = api.jscodeshift;
+  const source = j(file.source);
+  const { localName } = getImportInfo(j, file, componentName, alias);
+
+  if (!localName) {
+    return source.toSource();
+  }
+
+  source
+    .find(j.JSXOpeningElement)
+    .filter(
+      (path) => path.value.name.type === 'JSXIdentifier' && path.value.name.name === localName,
+    )
+    .find(j.JSXAttribute)
+    .filter((attribute) => attribute.node.name.name === 'compensateLastCellIndent')
+    .forEach((attribute) => {
+      const node = attribute.node;
+
+      if (!node.value) {
+        j(attribute).remove();
+      } else if (
+        node.value.type === 'JSXExpressionContainer' &&
+        node.value.expression.type === 'BooleanLiteral'
+      ) {
+        if (node.value.expression.value) {
+          j(attribute).remove();
+        } else {
+          report(
+            api,
+            `Manual changes required for ${componentName}'s "compensateLastCellIndent" prop. You might not need it anymore.`,
+          );
+        }
+      }
+    });
+
+  return source.toSource();
+}
diff --git a/packages/codemods/src/transforms/v7/horizontal-scroll.ts b/packages/codemods/src/transforms/v7/horizontal-scroll.ts
new file mode 100644
index 0000000000..79805e64f0
--- /dev/null
+++ b/packages/codemods/src/transforms/v7/horizontal-scroll.ts
@@ -0,0 +1,44 @@
+import { API, FileInfo } from 'jscodeshift';
+import { getImportInfo } from '../../codemod-helpers';
+import { report } from '../../report';
+import { JSCodeShiftOptions } from '../../types';
+
+export const parser = 'tsx';
+
+const componentName = 'HorizontalScroll';
+export default function transformer(file: FileInfo, api: API, options: JSCodeShiftOptions) {
+  const { alias } = options;
+  const j = api.jscodeshift;
+  const source = j(file.source);
+  const { localName } = getImportInfo(j, file, componentName, alias);
+
+  if (!localName) {
+    return source.toSource();
+  }
+
+  source
+    .find(j.JSXOpeningElement)
+    .filter(
+      (path) => path.value.name.type === 'JSXIdentifier' && path.value.name.name === localName,
+    )
+    .find(j.JSXAttribute)
+    .filter((attribute) => attribute.node.name.name === 'inline')
+    .forEach((attribute) => {
+      const node = attribute.node;
+
+      if (!node.value) {
+        j(attribute).remove();
+      } else if (
+        node.value.type === 'JSXExpressionContainer' &&
+        node.value.expression.type === 'BooleanLiteral'
+      ) {
+        if (node.value.expression.value) {
+          j(attribute).remove();
+        } else {
+          report(api, `Manual changes required for ${componentName}'s "inline" prop.`);
+        }
+      }
+    });
+
+  return source.toSource();
+}
diff --git a/packages/vkui/src/components/CardScroll/CardScroll.module.css b/packages/vkui/src/components/CardScroll/CardScroll.module.css
index 1680bcb626..6db2144165 100644
--- a/packages/vkui/src/components/CardScroll/CardScroll.module.css
+++ b/packages/vkui/src/components/CardScroll/CardScroll.module.css
@@ -7,6 +7,7 @@
 .CardScroll__in {
   display: flex;
   align-items: stretch;
+  inline-size: 100%;
 }
 
 .CardScroll__gap {
diff --git a/packages/vkui/src/components/Group/Readme.md b/packages/vkui/src/components/Group/Readme.md
index 3e87cf4388..400a2e2ace 100644
--- a/packages/vkui/src/components/Group/Readme.md
+++ b/packages/vkui/src/components/Group/Readme.md
@@ -184,7 +184,7 @@ const recentFriends = getRandomUsers(20);
   <Header mode="primary">HorizontalScroll не учитывает отступы Group по горизонтали</Header>
 
   <Group.ExpandedContent direction="inline">
-    <HorizontalScroll showArrows inline>
+    <HorizontalScroll showArrows>
       {recentFriends.map((item) => {
         return (
           <HorizontalCell onClick={() => {}} key={item.id} header={item.first_name}>
@@ -196,7 +196,7 @@ const recentFriends = getRandomUsers(20);
   </Group.ExpandedContent>
 
   <Header mode="primary">Здесь контент учитывает отступы Group по горизонтали</Header>
-  <HorizontalScroll showArrows inline>
+  <HorizontalScroll showArrows>
     {recentFriends.map((item) => {
       return (
         <HorizontalCell onClick={() => {}} key={item.id} header={item.first_name}>
diff --git a/packages/vkui/src/components/HorizontalCell/Readme.md b/packages/vkui/src/components/HorizontalCell/Readme.md
index b6fb8f073a..480e00c4be 100644
--- a/packages/vkui/src/components/HorizontalCell/Readme.md
+++ b/packages/vkui/src/components/HorizontalCell/Readme.md
@@ -150,37 +150,27 @@ const Example = () => {
         <PanelHeader>HorizontalCell</PanelHeader>
         <Group header={<Header>Возможные друзья</Header>}>
           <HorizontalScroll>
-            <Flex noWrap>
-              <UserItems />
-            </Flex>
+            <UserItems />
           </HorizontalScroll>
         </Group>
         <Group header={<Header aside={<Link>Показать все</Link>}>Мини-приложения</Header>}>
           <HorizontalScroll>
-            <Flex noWrap>
-              <MiniAppItems />
-            </Flex>
+            <MiniAppItems />
           </HorizontalScroll>
         </Group>
         <Group header={<Header aside={<Link>Показать все</Link>}>Игры</Header>}>
           <HorizontalScroll>
-            <Flex noWrap>
-              <GamesItems />
-            </Flex>
+            <GamesItems />
           </HorizontalScroll>
         </Group>
         <Group header={<Header aside={<Link>Показать все</Link>}>Плейлисты</Header>}>
           <HorizontalScroll>
-            <Flex noWrap>
-              <PlaylistItems />
-            </Flex>
+            <PlaylistItems />
           </HorizontalScroll>
         </Group>
         <Group header={<Header aside={<Link>Показать все</Link>}>Альбомы</Header>}>
           <HorizontalScroll>
-            <Flex noWrap>
-              <AlbumItems />
-            </Flex>
+            <AlbumItems />
           </HorizontalScroll>
         </Group>
       </Panel>
diff --git a/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.e2e-playground.tsx b/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.e2e-playground.tsx
index 2b3e36db4c..f8ddda1a80 100644
--- a/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.e2e-playground.tsx
+++ b/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.e2e-playground.tsx
@@ -22,7 +22,7 @@ export const HorizontalCellShowMorePlayground = (props: ComponentPlaygroundProps
       ]}
     >
       {(props: HorizontalCellShowMoreProps) => (
-        <HorizontalScroll inline>
+        <HorizontalScroll>
           <AlbumItems height={props.height} />
           <HorizontalCellShowMore {...props} />
         </HorizontalScroll>
@@ -72,9 +72,9 @@ export const HorizontalCellShowMoreMobilePlayground = (props: ComponentPlaygroun
       ]}
     >
       {(props: HorizontalCellShowMoreProps) => (
-        <HorizontalScroll inline>
-          <div style={{ display: 'flex' }}>{smallCells}</div>
-          <HorizontalCellShowMore {...props} compensateLastCellIndent />
+        <HorizontalScroll>
+          {smallCells}
+          <HorizontalCellShowMore {...props} />
         </HorizontalScroll>
       )}
     </ComponentPlayground>
diff --git a/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.module.css b/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.module.css
index a741ec9f9b..c0b35ce20b 100644
--- a/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.module.css
+++ b/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.module.css
@@ -2,11 +2,6 @@
   display: flex;
 }
 
-.HorizontalCellShowMore--compensate-last-cell-indent {
-  /* Компенсация бокового отступа, заданного в последнем HorizontalCell:last-child::after */
-  margin-inline-start: calc(-1 * var(--vkui_internal--side_cell_gap));
-}
-
 .HorizontalCellShowMore--centered {
   margin-block: auto;
 }
diff --git a/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.stories.tsx b/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.stories.tsx
index 27e4806aa9..42f5a4daab 100644
--- a/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.stories.tsx
+++ b/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.stories.tsx
@@ -78,7 +78,7 @@ export const Playground: Story = {
       const cellImageSize = getNotTooBigHeightBySize(args);
       return (
         <Group>
-          <HorizontalScroll inline>
+          <HorizontalScroll>
             {CELL_ITEMS.map((element) => (
               <HorizontalCell key={element.id} size={args.size} header={element.title}>
                 <Avatar size={cellImageSize} src={element.icon} alt={`avatar: ${element.title}`} />
diff --git a/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.tsx b/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.tsx
index 08a99dfb7b..ef455a0d98 100644
--- a/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.tsx
+++ b/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.tsx
@@ -34,15 +34,9 @@ export interface HorizontalCellShowMoreProps
   size?: 's' | 'm' | 'l';
   /**
    * Предназначен для отрисовки текста.
-   * По умолчанию для `size='s'` содержит текст `Все` для других размеров `Показать все`.
+   * По умолчанию для `size='s'` содержит текст `Все`, для других размеров `Показать все`.
    * */
   children?: SubheadProps['children'];
-  /**
-   * Позволяет компенсировать особый правый отступ у предшевствующего элементa `HorizontalCell`,
-   * в том случае, если тот элемент последний в родителе.
-   * Если `HorizontalCellShowMore` находится на одном уровне с остальными `HorizontalCell`, то этот проп использовать не нужно.
-   */
-  compensateLastCellIndent?: boolean;
   /**
    * Выравнивание по центру относительно родителя
    */
@@ -54,7 +48,6 @@ export const HorizontalCellShowMore = ({
   style,
   getRef,
   getRootRef,
-  compensateLastCellIndent,
   height,
   size = 's',
   children = size === 's' ? 'Все' : 'Показать все',
@@ -66,7 +59,6 @@ export const HorizontalCellShowMore = ({
       style={style}
       className={classNames(
         styles['HorizontalCellShowMore'],
-        compensateLastCellIndent && styles['HorizontalCellShowMore--compensate-last-cell-indent'],
         centered && styles['HorizontalCellShowMore--centered'],
         sizeClassNames[size],
         className,
diff --git a/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-android-chromium-dark-1-snap.png b/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-android-chromium-dark-1-snap.png
index e5dcb302ef..e13fa15857 100644
--- a/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-android-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-android-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e3dbdc3b9b8a988533f53f76cd8e7a2a2665949c119c0da373201a2e16102303
-size 5351
+oid sha256:f9a4943979b892855363fec77e84de90080d7f42da12b5dd02d70a639d8eaeac
+size 5362
diff --git a/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-android-chromium-light-1-snap.png b/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-android-chromium-light-1-snap.png
index fa2c8f1021..aecbdb4d7d 100644
--- a/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-android-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-android-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a17d48342b74904701751cbb235fb3baec17a6459c4ba4ea65ff7d92c8512805
-size 5192
+oid sha256:672f57dce0cb5e84560d866cff75ca0c06952eff6a9c431d2f6d0e1f528380d7
+size 5179
diff --git a/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-ios-webkit-dark-1-snap.png
index 881de66879..dfbd363ce7 100644
--- a/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-ios-webkit-dark-1-snap.png
+++ b/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-ios-webkit-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5eacea96178fa3a993e1848d4df671654238597139c645321e74135034528ede
-size 5495
+oid sha256:a764966d3a9f821b2e650b81bbd07461d7bdd91b336c5f63c0892e751b10b353
+size 5501
diff --git a/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-ios-webkit-light-1-snap.png b/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-ios-webkit-light-1-snap.png
index 2ca51584a4..eb58d50852 100644
--- a/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-ios-webkit-light-1-snap.png
+++ b/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-ios-webkit-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c2ad967e9ad464ee26abd52bd0f3193b40d9347b377f1a15c95119de5ae6b642
-size 5344
+oid sha256:72ca6404248ed5e08a06892528a396f9412c3d7f4f17dc45bb051842db596858
+size 5346
diff --git a/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-vkcom-chromium-dark-1-snap.png
index a3b243ba97..f66add1841 100644
--- a/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-vkcom-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-vkcom-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:91931a8a454ed7ebf8bdd703de3802483fd89795cb89afe39ded0a924d83f638
-size 5301
+oid sha256:ebe634395f61ee18a684649cc9c07730f1765d26696ee7aeead15fd2c225da55
+size 5309
diff --git a/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-vkcom-chromium-light-1-snap.png
index f23aa56ab9..0b39d444f6 100644
--- a/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-vkcom-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-vkcom-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0f0bc7e516794d20a261d3a8a6f1c0ef5d03c45052eba4e47a388e62fea621aa
-size 5318
+oid sha256:245ef42ca9da75122821f4467cfb11e68646d7fc9aec8014c0a061681266c36c
+size 5299
diff --git a/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-vkcom-firefox-dark-1-snap.png
index 7fbcb1a468..fb54163eed 100644
--- a/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-vkcom-firefox-dark-1-snap.png
+++ b/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-vkcom-firefox-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:304006e893925f794d9f38d908433c449ebe9e4ad8a12ae1a40e9fdd1abb36c5
-size 7316
+oid sha256:1af991dc4ede89633a049d3a539957d824d08ced17dbe0792a0488ca892890de
+size 7463
diff --git a/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-vkcom-firefox-light-1-snap.png
index ff6460ac4f..7a22200cff 100644
--- a/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-vkcom-firefox-light-1-snap.png
+++ b/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-vkcom-firefox-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:300dada13a6e1cb9a00a79bceaf70d68d257c2a15cf09fd6846693378f17f3a5
-size 7481
+oid sha256:5c54da18a0cdc2e56f8eef387b189afc1814374dba461fa3426168f402a7093b
+size 7633
diff --git a/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-vkcom-webkit-dark-1-snap.png
index ee448b78ed..c4fa139349 100644
--- a/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-vkcom-webkit-dark-1-snap.png
+++ b/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-vkcom-webkit-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6fe4dcb81b094536c28b77330eed2768ad5d11811f9aa1fa7eee08e8fef5018c
+oid sha256:eed43711c807fd0482a00ab77a82e1c6a00ecb3fd47848d6f3a3ca86aab25704
 size 5433
diff --git a/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-vkcom-webkit-light-1-snap.png
index 1d49e7d3f3..c8dee4c611 100644
--- a/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-vkcom-webkit-light-1-snap.png
+++ b/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/__image_snapshots__/horizontalcellshowmore-small-size-vkcom-webkit-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:27614c022891617bfd524928ec89f69d1bd4bc6076c7f904fef54ac018ac2d45
-size 5441
+oid sha256:44c82d57534185f24887e7286a6fcfb6aab276d997d810b156d2fcc3a767a826
+size 5443
diff --git a/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.e2e-playground.tsx b/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.e2e-playground.tsx
index 08ae6946c8..aeb9c5446f 100644
--- a/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.e2e-playground.tsx
+++ b/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.e2e-playground.tsx
@@ -25,7 +25,6 @@ export const HorizontalScrollMobilePlayground = (props: ComponentPlaygroundProps
           showArrows: ['always'],
           arrowSize: ['m', 'l'],
           children: [items],
-          inline: [true],
         },
       ]}
     >
@@ -44,7 +43,6 @@ export const HorizontalScrollSmallTabletPlayground = (props: ComponentPlayground
           arrowSize: ['m', 'l'],
           arrowOffsetY: [-10],
           children: [items],
-          inline: [true],
         },
       ]}
     >
@@ -69,7 +67,6 @@ export const HorizontalScrollWithHasMousePlayground = ({
               }
               element.scrollLeft = 32;
             }}
-            inline
           >
             {items}
           </HorizontalScroll>
@@ -95,7 +92,6 @@ export const HorizontalScrollWithoutHasMousePlayground = ({
               }
               element.scrollLeft = 32;
             }}
-            inline
           >
             {items}
           </HorizontalScroll>
diff --git a/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.module.css b/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.module.css
index 469f8af9a2..ac85f118e9 100644
--- a/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.module.css
+++ b/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.module.css
@@ -25,6 +25,8 @@
 }
 
 .HorizontalScroll__in-wrapper {
+  display: flex;
+  align-items: stretch;
   transition: transform 0.2s;
 }
 
@@ -62,14 +64,6 @@
   min-inline-size: 100%;
 }
 
-/* TODO [>=7]: убрать, использовать inline-mode */
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalTabs) .HorizontalScroll__in-wrapper,
-.HorizontalScroll--inline .HorizontalScroll__in-wrapper {
-  display: flex;
-  align-items: stretch;
-}
-
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalTabs--withGaps) .HorizontalScroll__in-wrapper::after,
 :global(.vkuiInternalTabs--withGaps) .HorizontalScroll__in-wrapper::before {
diff --git a/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.stories.tsx b/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.stories.tsx
index aba562d1e0..89bb118514 100644
--- a/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.stories.tsx
+++ b/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.stories.tsx
@@ -51,7 +51,7 @@ export const Playground: Story = {
     }, []);
 
     return (
-      <HorizontalScroll {...args} inline>
+      <HorizontalScroll {...args}>
         {commonFriends.length === 0 && <Spinner size="m" style={{ height: 88 }} />}
         {commonFriends.length > 0 && (
           <React.Fragment>
diff --git a/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.tsx b/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.tsx
index 6f514821c6..0087781af4 100644
--- a/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.tsx
+++ b/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.tsx
@@ -51,12 +51,6 @@ export interface HorizontalScrollProps
    * По умолчанию прокручивается как любой горизонтальный контент через shift.
    */
   scrollOnAnyWheel?: boolean;
-  /**
-   * Задает потомкам инлайновое положение (горизонально)
-   *
-   * TODO [>=7]: Сделать по умолчанию `true` (или удалить, применяя стили всегда)
-   */
-  inline?: boolean;
 }
 
 /**
@@ -172,7 +166,6 @@ export const HorizontalScroll = ({
   scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,
   getRef,
   scrollOnAnyWheel = false,
-  inline = false,
   ...restProps
 }: HorizontalScrollProps): React.ReactNode => {
   const [canScrollLeft, setCanScrollLeft] = React.useState(false);
@@ -285,7 +278,6 @@ export const HorizontalScroll = ({
         styles['HorizontalScroll'],
         'vkuiInternalHorizontalScroll',
         showArrows === 'always' && styles['HorizontalScroll--withConstArrows'],
-        inline && styles['HorizontalScroll--inline'],
       )}
       onMouseEnter={calculateArrowsVisibility}
     >
diff --git a/packages/vkui/src/components/HorizontalScroll/Readme.md b/packages/vkui/src/components/HorizontalScroll/Readme.md
index 070206535c..58fab6a1a9 100644
--- a/packages/vkui/src/components/HorizontalScroll/Readme.md
+++ b/packages/vkui/src/components/HorizontalScroll/Readme.md
@@ -24,7 +24,6 @@ const HorizontalScrollExample = () => {
             showArrows
             getScrollToLeft={(i) => i - 120}
             getScrollToRight={(i) => i + 120}
-            inline
           >
             {recentFriends.map((item) => {
               return (
@@ -42,7 +41,6 @@ const HorizontalScrollExample = () => {
             arrowSize="m"
             getScrollToLeft={(i) => i - 120}
             getScrollToRight={(i) => i + 120}
-            inline
           >
             {commonFriends.length === 0 && <Spinner size="m" style={{ height: 88 }} />}
             {commonFriends.length > 0 && (
@@ -75,25 +73,19 @@ const HorizontalScrollExample = () => {
           HorizontalCellShowMore
         </PanelHeader>
         <Group header={<Header>Альбомы</Header>}>
-          <HorizontalScroll inline>
+          <HorizontalScroll>
             <AlbumItems />
             <HorizontalCellShowMore onClick={() => {}} size="l" height={124} />
           </HorizontalScroll>
         </Group>
         <Group header={<Header>Возможные друзья</Header>}>
-          <HorizontalScroll inline>
+          <HorizontalScroll>
             <RandomUsers />
-
-            <HorizontalCellShowMore
-              onClick={() => {}}
-              compensateLastCellIndent
-              size="s"
-              height={56}
-            />
+            <HorizontalCellShowMore onClick={() => {}} size="s" height={56} />
           </HorizontalScroll>
         </Group>
         <Group header={<Header>Игры</Header>}>
-          <HorizontalScroll inline>
+          <HorizontalScroll>
             <HorizontalCell onClick={() => {}} size="m" header="Warma-geddon">
               <Image
                 size={88}
@@ -108,13 +100,7 @@ const HorizontalScrollExample = () => {
                 src={'https://sun9-71.userapi.com/c849220/v849220453/147ade/0MtQXKEVsiQ.jpg'}
               />
             </HorizontalCell>
-
-            <HorizontalCellShowMore
-              onClick={() => {}}
-              compensateLastCellIndent
-              size="m"
-              height={88}
-            />
+            <HorizontalCellShowMore onClick={() => {}} size="m" height={88} />
           </HorizontalScroll>
         </Group>
       </Panel>
@@ -181,30 +167,13 @@ const RandomUsers = () => {
 
 Специально для этого под `HorizontalScroll` создан компонент [`HorizontalCellShowMore`](#/HorizontalCellShowMore) (создан на основе [`HorizontalCell`](#/HorizontalCell)).
 
-Его можно вкладывать напрямую в того же родителя в котором лежат остальные `HorizontalCell` внутри
-`HorizontalScroll`.
-
-```tsx static
-<HorizontalScroll>
-  <ListWrapper>
-    <HorizontalCell>1</HorizontalCell>
-    <HorizontalCell>2</HorizontalCell>
-    <HorizontalCell>3</HorizontalCell>
-    <HorizontalCellShowMore />
-  </ListWrapper>
-</HorizontalScroll>
-```
-
-Или как последний элемент `HorizontalScroll`, но тогда надо компенсировать отступы высталяемые
-`HorizontalCell` с помощью свойства `compensateLastCellIndent`.
+Его можно вкладывать напрямую в того же родителя, в котором лежат остальные `HorizontalCell` внутри `HorizontalScroll`.
 
 ```tsx static
 <HorizontalScroll>
-  <ListWrapper>
-    <HorizontalCell>1</HorizontalCell>
-    <HorizontalCell>2</HorizontalCell>
-    <HorizontalCell>3</HorizontalCell>
-  </ListWrapper>
-  <HorizontalCellShowMore compensateLastCellIndent />
+  <HorizontalCell>1</HorizontalCell>
+  <HorizontalCell>2</HorizontalCell>
+  <HorizontalCell>3</HorizontalCell>
+  <HorizontalCellShowMore />
 </HorizontalScroll>
 ```
diff --git a/packages/vkui/src/components/HorizontalScroll/__image_snapshots__/horizontalscroll-viewwidth-mobile-haspointer-false-android-chromium-dark-1-snap.png b/packages/vkui/src/components/HorizontalScroll/__image_snapshots__/horizontalscroll-viewwidth-mobile-haspointer-false-android-chromium-dark-1-snap.png
index 2b08402278..52903a91e0 100644
--- a/packages/vkui/src/components/HorizontalScroll/__image_snapshots__/horizontalscroll-viewwidth-mobile-haspointer-false-android-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/HorizontalScroll/__image_snapshots__/horizontalscroll-viewwidth-mobile-haspointer-false-android-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ad3b1065b85819510179a5422fd5591c530a50c2e66d7dd4b8f6e7d124d859c9
-size 15803
+oid sha256:77134a7ff9f665334b1c4a50e4beae1427b3dea2196dd488fcb0a2908e202a26
+size 13912
diff --git a/packages/vkui/src/components/HorizontalScroll/__image_snapshots__/horizontalscroll-viewwidth-mobile-haspointer-false-android-chromium-light-1-snap.png b/packages/vkui/src/components/HorizontalScroll/__image_snapshots__/horizontalscroll-viewwidth-mobile-haspointer-false-android-chromium-light-1-snap.png
index 9c54020b22..ebf6366ebf 100644
--- a/packages/vkui/src/components/HorizontalScroll/__image_snapshots__/horizontalscroll-viewwidth-mobile-haspointer-false-android-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/HorizontalScroll/__image_snapshots__/horizontalscroll-viewwidth-mobile-haspointer-false-android-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4cc712e6911b9f0ff70f1afbf1b35a71a9c8163f8e4f9d0fc8af7f6c08bba638
-size 15646
+oid sha256:98324f7bfd420d993a0f2303e08e632acb9024546ded86eb2ab1389446cf974f
+size 13621
diff --git a/packages/vkui/src/components/HorizontalScroll/__image_snapshots__/horizontalscroll-viewwidth-small-tablet-haspointer-true-android-chromium-dark-1-snap.png b/packages/vkui/src/components/HorizontalScroll/__image_snapshots__/horizontalscroll-viewwidth-small-tablet-haspointer-true-android-chromium-dark-1-snap.png
index 9d659d6b6f..9978659422 100644
--- a/packages/vkui/src/components/HorizontalScroll/__image_snapshots__/horizontalscroll-viewwidth-small-tablet-haspointer-true-android-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/HorizontalScroll/__image_snapshots__/horizontalscroll-viewwidth-small-tablet-haspointer-true-android-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e80dda205aa7027b208306e07acd6404ac7d1a117d7c1b894fce7d7c7c0b1842
-size 48885
+oid sha256:d571fe57cb876fbbeb16f346e5fccddfa4d8a88c40354d00f443797d86e95c33
+size 41849
diff --git a/packages/vkui/src/components/HorizontalScroll/__image_snapshots__/horizontalscroll-viewwidth-small-tablet-haspointer-true-android-chromium-light-1-snap.png b/packages/vkui/src/components/HorizontalScroll/__image_snapshots__/horizontalscroll-viewwidth-small-tablet-haspointer-true-android-chromium-light-1-snap.png
index 47d0306f5b..c303a04bd1 100644
--- a/packages/vkui/src/components/HorizontalScroll/__image_snapshots__/horizontalscroll-viewwidth-small-tablet-haspointer-true-android-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/HorizontalScroll/__image_snapshots__/horizontalscroll-viewwidth-small-tablet-haspointer-true-android-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bd2ad5493b952f2863935ac09e77fc4a91701534ba24270b6789d18fbda15553
-size 48134
+oid sha256:01599a2b6a94b8bef5a10f83b8e5d6d057e3c6be5d358267d25e24de057c11eb
+size 41690
diff --git a/packages/vkui/src/components/View/Readme.md b/packages/vkui/src/components/View/Readme.md
index c586b7a1dd..cca3375561 100644
--- a/packages/vkui/src/components/View/Readme.md
+++ b/packages/vkui/src/components/View/Readme.md
@@ -210,7 +210,7 @@ const ProfilePanelContent = ({ onSettingsClick, onBack }) => {
         header={<Header>HorizontalScroll</Header>}
         description="Свайпбэк срабатывает либо если мы тянем за левый край экрана, либо если позиция горизонтального скролла равна нулю"
       >
-        <HorizontalScroll inline>
+        <HorizontalScroll>
           {getRandomUsers(15).map((user) => (
             <HorizontalCell key={user.id} size="s" header={user.first_name}>
               <Avatar size={56} src={user.photo_100} />
diff --git a/packages/vkui/src/components/View/View.stories.tsx b/packages/vkui/src/components/View/View.stories.tsx
index 2d72c1c84c..2c001eaa10 100644
--- a/packages/vkui/src/components/View/View.stories.tsx
+++ b/packages/vkui/src/components/View/View.stories.tsx
@@ -76,7 +76,7 @@ const ProfilePanelContent = ({
         header={<Header>HorizontalScroll</Header>}
         description="Свайпбэк срабатывает либо если мы тянем за левый край экрана, либо если позиция горизонтального скролла равна нулю"
       >
-        <HorizontalScroll inline>
+        <HorizontalScroll>
           {getRandomUsers(15).map((user) => (
             <HorizontalCell key={user.id} size="s" header={user.first_name}>
               <Avatar size={56} src={user.photo_100} />