refactor(Separator): rename wide to noPadding (#7718)

VKCOM · Oct 7, 2024 · 28ba7a7 · 28ba7a7
1 parent 6d9899e
commit 28ba7a7
Show file tree

Hide file tree

Showing 11 changed files with 17 additions and 14 deletions.
diff --git a/packages/codemods/src/transforms/v7/__testfixtures__/separator/basic.input.tsx b/packages/codemods/src/transforms/v7/__testfixtures__/separator/basic.input.tsx
@@ -7,6 +7,7 @@ const App = () => {
       <Separator mode="primary" />
       <Separator mode="primary-alpha" wide />
       <Separator mode={"secondary"} />
+      <Separator wide={false} />
     </React.Fragment>
   );
 };
diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/separator.ts.snap b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/separator.ts.snap
@@ -8,8 +8,9 @@ const App = () => {
   return (
     (<React.Fragment>
       <Separator appearance="primary" />
-      <Separator appearance="primary-alpha" wide />
+      <Separator appearance="primary-alpha" noPadding />
       <Separator appearance={"secondary"} />
+      <Separator noPadding={false} />
     </React.Fragment>)
   );
 };"

diff --git a/packages/codemods/src/transforms/v7/separator.ts b/packages/codemods/src/transforms/v7/separator.ts
@@ -13,6 +13,7 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi
 
   if (localName) {
     renameProp(j, source, localName, { mode: 'appearance' });
+    renameProp(j, source, localName, { wide: 'noPadding' });
   }
 
   return source.toSource();

diff --git a/packages/vkui/src/components/FixedLayout/FixedLayout.e2e-playground.tsx b/packages/vkui/src/components/FixedLayout/FixedLayout.e2e-playground.tsx
@@ -81,7 +81,7 @@ export const FixedLayoutPlayground = (
           <Panel id="fixedLayout">
             <PanelHeader>Fixed layout</PanelHeader>
             <FixedLayout filled={filled} vertical={vertical}>
-              <Separator wide />
+              <Separator noPadding />
               <Tabs>
                 <TabsItem selected>176 сообществ</TabsItem>
                 <TabsItem>9 событий</TabsItem>

diff --git a/packages/vkui/src/components/FixedLayout/FixedLayout.stories.tsx b/packages/vkui/src/components/FixedLayout/FixedLayout.stories.tsx
@@ -32,7 +32,7 @@ export const Playground: Story = {
       <Panel id="fixedLayout">
         <PanelHeader>Fixed layout</PanelHeader>
         <FixedLayout {...args}>
-          <Separator wide />
+          <Separator noPadding />
           <Tabs>
             <TabsItem selected>176 сообществ</TabsItem>
             <TabsItem>9 событий</TabsItem>
@@ -55,7 +55,7 @@ export const WithSearchAndContent: Story = {
         <PanelHeader>Fixed layout</PanelHeader>
         <FixedLayout {...args}>
           <Search />
-          <Separator wide />
+          <Separator noPadding />
         </FixedLayout>
         <StubContent />
       </Panel>

diff --git a/packages/vkui/src/components/FixedLayout/Readme.md b/packages/vkui/src/components/FixedLayout/Readme.md
@@ -20,7 +20,7 @@ const Example = () => {
         <PanelHeader fixed>Fixed layout</PanelHeader>
         <FixedLayout vertical="top" filled>
           <Search />
-          <Separator wide />
+          <Separator noPadding />
         </FixedLayout>
         <Group>
           <Div style={contentStyles}>
@@ -75,7 +75,7 @@ const Example = () => {
           </Div>
         </Group>
         <FixedLayout filled vertical="bottom">
-          <Separator wide />
+          <Separator noPadding />
           <Tabs>
             <TabsItem selected={activeTab === 'groups'} onClick={() => setActiveTab('groups')}>
               176 сообществ

diff --git a/packages/vkui/src/components/ModalPageHeader/ModalPageHeader.tsx b/packages/vkui/src/components/ModalPageHeader/ModalPageHeader.tsx
@@ -58,7 +58,7 @@ export const ModalPageHeader = ({
           {children}
         </PanelHeader>
       </div>
-      {!noSeparator && <Separator wide={sizeX === 'regular'} />}
+      {!noSeparator && <Separator noPadding={sizeX === 'regular'} />}
     </>
   );
 };
diff --git a/packages/vkui/src/components/PanelHeader/PanelHeader.tsx b/packages/vkui/src/components/PanelHeader/PanelHeader.tsx
@@ -190,7 +190,7 @@ export const PanelHeader = ({
           )}
         </>
       )}
-      {separatorVisible && isVKCOM && <Separator className={styles.separator} wide />}
+      {separatorVisible && isVKCOM && <Separator className={styles.separator} noPadding />}
     </RootComponent>
   );
 };
diff --git a/packages/vkui/src/components/Separator/Readme.md b/packages/vkui/src/components/Separator/Readme.md
@@ -1,4 +1,4 @@
-Используется для разделения какого-либо контента. Отступы справа и слева контролируются свойством `wide`.
+Используется для разделения какого-либо контента. Отступы справа и слева контролируются свойством `noPadding`.
 
 ```jsx
 <View activePanel="separator">

diff --git a/packages/vkui/src/components/Separator/Separator.tsx b/packages/vkui/src/components/Separator/Separator.tsx
@@ -11,7 +11,7 @@ export interface SeparatorProps extends HTMLAttributesWithRootRef<HTMLDivElement
   /**
    * С этим свойством компонент не будет иметь отступы слева и справа
    */
-  wide?: boolean;
+  noPadding?: boolean;
 }
 
 const appearanceClassNames = {
@@ -24,13 +24,13 @@ const appearanceClassNames = {
  * @see https://vkcom.github.io/VKUI/#/Separator
  */
 export const Separator = ({
-  wide,
+  noPadding,
   appearance = 'primary',
   ...restProps
 }: SeparatorProps): React.ReactNode => (
   <RootComponent
     {...restProps}
-    baseClassName={classNames(!wide && styles.padded, appearanceClassNames[appearance])}
+    baseClassName={classNames(!noPadding && styles.padded, appearanceClassNames[appearance])}
   >
     <hr className={styles.in} />
   </RootComponent>

diff --git a/packages/vkui/src/components/WriteBar/Readme.md b/packages/vkui/src/components/WriteBar/Readme.md
@@ -183,12 +183,12 @@ const WriteBarExample = (props) => {
 
         <FixedLayout vertical="bottom" filled>
           <div ref={fixedLayoutInnerElRef}>
-            <Separator wide />
+            <Separator noPadding />
 
             {isAttachmentsShown && (
               <div>
                 <Div>Интерфейс прикрепления</Div>
-                <Separator wide />
+                <Separator noPadding />
               </div>
             )}