feat(TabbarItem): rename text to label (#7783)

* feat(TabbarItem): rename `text` to `label` * test(TabbarItem): update screenshots
VKCOM · Oct 21, 2024 · bfe4df7 · bfe4df7
1 parent 17fc206
commit bfe4df7
Show file tree

Hide file tree

Showing 20 changed files with 131 additions and 59 deletions.
diff --git a/packages/codemods/src/transforms/v7/__testfixtures__/tabbar-item/basic.input.tsx b/packages/codemods/src/transforms/v7/__testfixtures__/tabbar-item/basic.input.tsx
@@ -0,0 +1,17 @@
+import { Icon28NewsfeedOutline, Tabbar, TabbarItem } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <Tabbar style={{ position: 'static', margin: '10px 0' }}>
+        <TabbarItem selected={true} onClick={() => {}} text="Новости">
+          <Icon28NewsfeedOutline />
+        </TabbarItem>
+        <TabbarItem selected={false} onClick={() => {}} text={"Новости"}>
+          <Icon28NewsfeedOutline />
+        </TabbarItem>
+      </Tabbar>
+    </React.Fragment>
+  );
+};
diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/tabbar-item.ts.snap b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/tabbar-item.ts.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`tabbar-item transforms correctly 1`] = `
+"import { Icon28NewsfeedOutline, Tabbar, TabbarItem } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    (<React.Fragment>
+      <Tabbar style={{ position: 'static', margin: '10px 0' }}>
+        <TabbarItem selected={true} onClick={() => {}} label="Новости">
+          <Icon28NewsfeedOutline />
+        </TabbarItem>
+        <TabbarItem selected={false} onClick={() => {}} label={"Новости"}>
+          <Icon28NewsfeedOutline />
+        </TabbarItem>
+      </Tabbar>
+    </React.Fragment>)
+  );
+};"
+`;
diff --git a/packages/codemods/src/transforms/v7/__tests__/tabbar-item.ts b/packages/codemods/src/transforms/v7/__tests__/tabbar-item.ts
@@ -0,0 +1,12 @@
+jest.autoMockOff();
+
+import { defineSnapshotTestFromFixture } from '../../../testHelpers/testHelper';
+
+const name = 'tabbar-item';
+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/tabbar-item.ts b/packages/codemods/src/transforms/v7/tabbar-item.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, 'TabbarItem', alias);
+
+  if (localName) {
+    renameProp(j, source, localName, { text: 'label' });
+  }
+
+  return source.toSource();
+}
diff --git a/packages/vkui/src/components/Badge/Readme.md b/packages/vkui/src/components/Badge/Readme.md
@@ -53,11 +53,11 @@ const Example = () => {
                 12
               </Counter>
             }
-            text="Сообщения"
+            label="Сообщения"
           >
             <Icon28MessageOutline />
           </TabbarItem>
-          <TabbarItem indicator={<Badge mode="prominent">Новый раздел</Badge>} text="Клипы">
+          <TabbarItem indicator={<Badge mode="prominent">Новый раздел</Badge>} label="Клипы">
             <Icon28ClipOutline />
           </TabbarItem>
         </Tabbar>

diff --git a/packages/vkui/src/components/Epic/Epic.e2e-playground.tsx b/packages/vkui/src/components/Epic/Epic.e2e-playground.tsx
@@ -24,10 +24,10 @@ import { Epic } from './Epic';
 const EpicTabbar = () => {
   return (
     <Tabbar style={{ position: 'relative' }}>
-      <TabbarItem onClick={noop} selected={true} data-story="feed" text="Новости">
+      <TabbarItem onClick={noop} selected={true} data-story="feed" label="Новости">
         <Icon28NewsfeedOutline />
       </TabbarItem>
-      <TabbarItem onClick={noop} selected={false} data-story="services" text="Сервисы">
+      <TabbarItem onClick={noop} selected={false} data-story="services" label="Сервисы">
         <Icon28ServicesOutline />
       </TabbarItem>
       <TabbarItem
@@ -39,19 +39,19 @@ const EpicTabbar = () => {
             12
           </Counter>
         }
-        text="Сообщения"
+        label="Сообщения"
       >
         <Icon28MessageOutline />
       </TabbarItem>
-      <TabbarItem onClick={noop} selected={false} data-story="clips" text="Клипы">
+      <TabbarItem onClick={noop} selected={false} data-story="clips" label="Клипы">
         <Icon28ClipOutline />
       </TabbarItem>
       <TabbarItem
         onClick={noop}
         selected={false}
         data-story="profile"
         indicator={<Badge mode="prominent">Есть обновления</Badge>}
-        text="Профиль"
+        label="Профиль"
       >
         <Icon28UserCircleOutline />
       </TabbarItem>

diff --git a/packages/vkui/src/components/Epic/Epic.stories.tsx b/packages/vkui/src/components/Epic/Epic.stories.tsx
@@ -118,15 +118,15 @@ export const Example: Story = {
                     onClick={onStoryChange}
                     selected={activeStory === 'feed'}
                     data-story="feed"
-                    text="Новости"
+                    label="Новости"
                   >
                     <Icon28NewsfeedOutline />
                   </TabbarItem>
                   <TabbarItem
                     onClick={onStoryChange}
                     selected={activeStory === 'services'}
                     data-story="services"
-                    text="Сервисы"
+                    label="Сервисы"
                   >
                     <Icon28ServicesOutline />
                   </TabbarItem>
@@ -139,15 +139,15 @@ export const Example: Story = {
                         12
                       </Counter>
                     }
-                    text="Сообщения"
+                    label="Сообщения"
                   >
                     <Icon28MessageOutline />
                   </TabbarItem>
                   <TabbarItem
                     onClick={onStoryChange}
                     selected={activeStory === 'clips'}
                     data-story="clips"
-                    text="Клипы"
+                    label="Клипы"
                   >
                     <Icon28ClipOutline />
                   </TabbarItem>
@@ -156,7 +156,7 @@ export const Example: Story = {
                     selected={activeStory === 'profile'}
                     data-story="profile"
                     indicator={<Badge mode="prominent">Есть обновления</Badge>}
-                    text="Профиль"
+                    label="Профиль"
                   >
                     <Icon28UserCircleOutline />
                   </TabbarItem>

diff --git a/packages/vkui/src/components/Epic/Readme.md b/packages/vkui/src/components/Epic/Readme.md
@@ -94,15 +94,15 @@ const Example = () => {
                   onClick={onStoryChange}
                   selected={activeStory === 'feed'}
                   data-story="feed"
-                  text="Новости"
+                  label="Новости"
                 >
                   <Icon28NewsfeedOutline />
                 </TabbarItem>
                 <TabbarItem
                   onClick={onStoryChange}
                   selected={activeStory === 'services'}
                   data-story="services"
-                  text="Сервисы"
+                  label="Сервисы"
                 >
                   <Icon28ServicesOutline />
                 </TabbarItem>
@@ -115,15 +115,15 @@ const Example = () => {
                       12
                     </Counter>
                   }
-                  text="Сообщения"
+                  label="Сообщения"
                 >
                   <Icon28MessageOutline />
                 </TabbarItem>
                 <TabbarItem
                   onClick={onStoryChange}
                   selected={activeStory === 'clips'}
                   data-story="clips"
-                  text="Клипы"
+                  label="Клипы"
                 >
                   <Icon28ClipOutline />
                 </TabbarItem>
@@ -132,7 +132,7 @@ const Example = () => {
                   selected={activeStory === 'profile'}
                   data-story="profile"
                   indicator={<Badge mode="prominent">Есть обновления</Badge>}
-                  text="Профиль"
+                  label="Профиль"
                 >
                   <Icon28UserCircleOutline />
                 </TabbarItem>

diff --git a/packages/vkui/src/components/Tabbar/Tabbar.e2e-playground.tsx b/packages/vkui/src/components/Tabbar/Tabbar.e2e-playground.tsx
@@ -4,27 +4,27 @@ import { TabbarItem } from '../TabbarItem/TabbarItem';
 import { Tabbar, type TabbarProps } from './Tabbar';
 
 const tabs2 = [
-  <TabbarItem key="0" text="Новости">
+  <TabbarItem key="0" label="Новости">
     <Icon28UserCircleOutline />
   </TabbarItem>,
-  <TabbarItem key="1" text="Сервисы">
+  <TabbarItem key="1" label="Сервисы">
     <Icon28UserCircleOutline />
   </TabbarItem>,
 ];
 const tabs3 = [
   ...tabs2,
-  <TabbarItem key="2" text="Профиль">
+  <TabbarItem key="2" label="Профиль">
     <Icon28UserCircleOutline />
   </TabbarItem>,
 ];
 const longTabs = [
-  <TabbarItem key="2" text="Деконструктивизм">
+  <TabbarItem key="2" label="Деконструктивизм">
     <Icon28UserCircleOutline />
   </TabbarItem>,
-  <TabbarItem key="2" text="Постдеконструктивизм">
+  <TabbarItem key="2" label="Постдеконструктивизм">
     <Icon28UserCircleOutline />
   </TabbarItem>,
-  <TabbarItem key="2" text="Пирожки и прочие сладости">
+  <TabbarItem key="2" label="Пирожки и прочие сладости">
     <Icon28UserCircleOutline />
   </TabbarItem>,
 ];

diff --git a/packages/vkui/src/components/Tabbar/Tabbar.stories.tsx b/packages/vkui/src/components/Tabbar/Tabbar.stories.tsx
@@ -37,15 +37,15 @@ export const Playground: Story = {
           onClick={onStoryChange}
           selected={activeStory === 'feed'}
           data-story="feed"
-          text="Новости"
+          label="Новости"
         >
           <Icon28NewsfeedOutline />
         </TabbarItem>
         <TabbarItem
           onClick={onStoryChange}
           selected={activeStory === 'services'}
           data-story="services"
-          text="Сервисы"
+          label="Сервисы"
         >
           <Icon28ServicesOutline />
         </TabbarItem>
@@ -58,15 +58,15 @@ export const Playground: Story = {
               12
             </Counter>
           }
-          text="Сообщения"
+          label="Сообщения"
         >
           <Icon28MessageOutline />
         </TabbarItem>
         <TabbarItem
           onClick={onStoryChange}
           selected={activeStory === 'clips'}
           data-story="clips"
-          text="Клипы"
+          label="Клипы"
         >
           <Icon28ClipOutline />
         </TabbarItem>
@@ -75,7 +75,7 @@ export const Playground: Story = {
           selected={activeStory === 'profile'}
           data-story="profile"
           indicator={<Badge mode="prominent">Есть обновления</Badge>}
-          text="Профиль"
+          label="Профиль"
         >
           <Icon28UserCircleOutline />
         </TabbarItem>

diff --git a/packages/vkui/src/components/TabbarItem/Readme.md b/packages/vkui/src/components/TabbarItem/Readme.md
@@ -34,13 +34,13 @@ const [indicator, setIndicator] = useState('one');
     </Tabbar>
 
     <Tabbar style={{ position: 'static', margin: '10px 0' }}>
-      <TabbarItem selected={text === 'one'} onClick={() => setText('one')} text="Новости">
+      <TabbarItem selected={text === 'one'} onClick={() => setText('one')} label="Новости">
         <Icon28NewsfeedOutline />
       </TabbarItem>
-      <TabbarItem selected={text === 'two'} onClick={() => setText('two')} text="Профиль">
+      <TabbarItem selected={text === 'two'} onClick={() => setText('two')} label="Профиль">
         <Icon28UserCircleOutline />
       </TabbarItem>
-      <TabbarItem selected={text === 'three'} onClick={() => setText('three')} text="Мессенджер">
+      <TabbarItem selected={text === 'three'} onClick={() => setText('three')} label="Мессенджер">
         <Icon28MessageOutline />
       </TabbarItem>
     </Tabbar>
@@ -49,21 +49,21 @@ const [indicator, setIndicator] = useState('one');
       <TabbarItem
         selected={horizontalText === 'one'}
         onClick={() => setHorizontalText('one')}
-        text="Новости"
+        label="Новости"
       >
         <Icon28NewsfeedOutline />
       </TabbarItem>
       <TabbarItem
         selected={horizontalText === 'two'}
         onClick={() => setHorizontalText('two')}
-        text="Профиль"
+        label="Профиль"
       >
         <Icon28UserCircleOutline />
       </TabbarItem>
       <TabbarItem
         selected={horizontalText === 'three'}
         onClick={() => setHorizontalText('three')}
-        text="Мессенджер"
+        label="Мессенджер"
       >
         <Icon28MessageOutline />
       </TabbarItem>
@@ -74,17 +74,21 @@ const [indicator, setIndicator] = useState('one');
         selected={indicator === 'one'}
         onClick={() => setIndicator('one')}
         indicator={<Badge mode="prominent">Есть обновления</Badge>}
-        text="Новости"
+        label="Новости"
       >
         <Icon28NewsfeedOutline />
       </TabbarItem>
-      <TabbarItem selected={indicator === 'two'} onClick={() => setIndicator('two')} text="Профиль">
+      <TabbarItem
+        selected={indicator === 'two'}
+        onClick={() => setIndicator('two')}
+        label="Профиль"
+      >
         <Icon28UserCircleOutline />
       </TabbarItem>
       <TabbarItem
         selected={indicator === 'three'}
         onClick={() => setIndicator('three')}
-        text="Мессенджер"
+        label="Мессенджер"
         indicator={
           <Counter size="s" mode="prominent">
             3

diff --git a/packages/vkui/src/components/TabbarItem/TabbarItem.e2e-playground.tsx b/packages/vkui/src/components/TabbarItem/TabbarItem.e2e-playground.tsx
@@ -11,14 +11,14 @@ export const TabbarItemPlayground = (playgroundProps: ComponentPlaygroundProps)
       propSets={[
         {
           mode: ['vertical', 'horizontal'],
-          text: ['Message'],
+          label: ['Message'],
           children: [<Icon28MessageOutline key="icon" />],
           indicator: [undefined, <Badge key="badge" />],
           disabled: [false, true],
         },
         {
           mode: ['horizontal'],
-          text: ['Message'],
+          label: ['Message'],
           children: [<Icon28MessageOutline key="icon" />],
           selected: [true, false],
         },