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

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>
+  );
+};

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>
+  );
+};

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>)
+  );
+};"
+`;

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>)
+  );
+};"
+`;

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}`),
+  );
+});

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}`),
+  );
+});

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();
+}

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();
+}

packages/vkui/src/components/CardScroll/CardScroll.module.css

@@ -7,6 +7,7 @@
 .CardScroll__in {
   display: flex;
   align-items: stretch;
+  inline-size: 100%;
 }
 
 .CardScroll__gap {

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}>

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>

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>

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;
 }

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}`} />

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,