feat(CardGrid): rename props spaced to padding

packages/codemods/src/transforms/v7/__testfixtures__/card-grid/basic.input.tsx

@@ -0,0 +1,45 @@
+import { Card, CardGrid } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      {/* spaced=false -> padding=false */}
+      <CardGrid
+        size="s"
+        spaced={false}
+      >
+        <Card>
+          <div style={{ paddingBottom: '66%' }} />
+        </Card>
+        <Card>
+          <div style={{ paddingBottom: '66%' }} />
+        </Card>
+      </CardGrid>
+      {/* spaced=true -> padding=true */}
+      <CardGrid
+        size="s"
+        spaced={true}
+      >
+        <Card>
+          <div style={{ paddingBottom: '66%' }} />
+        </Card>
+        <Card>
+          <div style={{ paddingBottom: '66%' }} />
+        </Card>
+      </CardGrid>
+      {/* spaced -> padding */}
+      <CardGrid
+        size="s"
+        spaced
+      >
+        <Card>
+          <div style={{ paddingBottom: '66%' }} />
+        </Card>
+        <Card>
+          <div style={{ paddingBottom: '66%' }} />
+        </Card>
+      </CardGrid>
+    </React.Fragment>
+  );
+};

packages/codemods/src/transforms/v7/__tests__/__snapshots__/card-grid.ts.snap

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`card-grid transforms correctly 1`] = `
+"import { Card, CardGrid } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    (<React.Fragment>
+      {/* spaced=false -> padding=false */}
+      <CardGrid
+        size="s"
+        padding={false}
+      >
+        <Card>
+          <div style={{ paddingBottom: '66%' }} />
+        </Card>
+        <Card>
+          <div style={{ paddingBottom: '66%' }} />
+        </Card>
+      </CardGrid>
+      {/* spaced=true -> padding=true */}
+      <CardGrid
+        size="s"
+        padding={true}
+      >
+        <Card>
+          <div style={{ paddingBottom: '66%' }} />
+        </Card>
+        <Card>
+          <div style={{ paddingBottom: '66%' }} />
+        </Card>
+      </CardGrid>
+      {/* spaced -> padding */}
+      <CardGrid
+        size="s"
+        padding
+      >
+        <Card>
+          <div style={{ paddingBottom: '66%' }} />
+        </Card>
+        <Card>
+          <div style={{ paddingBottom: '66%' }} />
+        </Card>
+      </CardGrid>
+    </React.Fragment>)
+  );
+};"
+`;

packages/codemods/src/transforms/v7/__tests__/card-grid.ts

@@ -0,0 +1,12 @@
+jest.autoMockOff();
+
+import { defineSnapshotTestFromFixture } from '../../../testHelpers/testHelper';
+
+const name = 'card-grid';
+const fixtures = ['basic'] as const;
+
+describe(name, () => {
+  fixtures.forEach((test) =>
+    defineSnapshotTestFromFixture(__dirname, name, global.TRANSFORM_OPTIONS, `${name}/${test}`),
+  );
+});

packages/codemods/src/transforms/v7/card-grid.ts

@@ -0,0 +1,18 @@
+import { API, FileInfo } from 'jscodeshift';
+import { getImportInfo, renameProp } from '../../codemod-helpers';
+import { JSCodeShiftOptions } from '../../types';
+
+export const parser = 'tsx';
+
+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, 'CardGrid', alias);
+
+  if (localName) {
+    renameProp(j, source, localName, { spaced: 'padding' });
+  }
+
+  return source.toSource();
+}

packages/vkui/src/components/CardGrid/CardGrid.e2e-playground.tsx

@@ -24,7 +24,7 @@ export const CardGridPlayground = (props: ComponentPlaygroundProps) => {
       propSets={[
         {
           size: ['s', 'm', 'l'],
-          spaced: [true, false],
+          padding: [true, false],
         },
       ]}
     >

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

@@ -8,7 +8,7 @@
   padding: 0;
 }
 
-.spaced {
+.padding {
   padding-block: var(--vkui--size_base_padding_vertical--regular);
   padding-inline: var(--vkui--size_base_padding_horizontal--regular);
 }

packages/vkui/src/components/CardGrid/CardGrid.tsx

@@ -22,15 +22,15 @@ export interface CardGridProps extends HTMLAttributesWithRootRef<HTMLDivElement>
   /**
    * Если true, то вокруг компонента присутствуют стандартные отсупы сверху/снизу и слева/справа
    */
-  spaced?: boolean;
+  padding?: boolean;
 }
 
 /**
  * @see https://vkcom.github.io/VKUI/#/CardGrid
  */
 export const CardGrid = ({
   size = 's',
-  spaced = false,
+  padding = false,
   Component = 'ul',
   ...restProps
 }: CardGridProps): React.ReactNode => {
@@ -43,7 +43,7 @@ export const CardGrid = ({
       baseClassName={classNames(
         styles.host,
         'vkuiInternalCardGrid',
-        spaced && styles.spaced,
+        padding && styles.padding,
         stylesSize[size],
         sizeX !== 'regular' && sizeXClassNames[sizeX],
       )}

packages/vkui/src/components/CardGrid/Readme.md

@@ -40,7 +40,7 @@
         <div style={{ paddingBottom: '30%' }} />
       </Card>
     </CardGrid>
-    <CardGrid size="l" spaced>
+    <CardGrid size="l" padding>
       <Card>
         <div style={{ paddingBottom: '30%' }} />
       </Card>