fix: resetPaddings for base-block (#756)

Author: niktverd

src/components/BlockBase/BlockBase.scss

@@ -10,6 +10,8 @@ $block: '.#{$ns}block-base';
 
     @include block();
 
+    @include indents(&);
+
     @include add-specificity(&) {
         @media only screen and (max-width: map-get($gridBreakpoints, 'sm')) {
             margin-top: $indentM;

src/components/BlockBase/BlockBase.tsx

@@ -12,11 +12,17 @@ const b = block('block-base');
 export type BlockBaseFullProps = BlockBaseProps & ClassNameProps & PropsWithChildren & QAProps;
 
 const BlockBase = (props: BlockBaseFullProps) => {
-    const {anchor, visible, children, className, resetPaddings, qa} = props;
+    const {anchor, indent, visible, children, className, resetPaddings, qa} = props;
+
+    const {top, bottom} =
+        indent || (resetPaddings ? {top: '0', bottom: '0'} : {top: 'l', bottom: 'l'});
 
     return (
         <Col
-            className={b({['reset-paddings']: resetPaddings}, className)}
+            className={b(
+                {['reset-paddings']: resetPaddings, indentTop: top, indentBottom: bottom},
+                className,
+            )}
             visible={visible}
             reset={true}
             qa={qa}

src/components/BlockBase/__tests__/BlockBase.test.tsx

@@ -4,12 +4,14 @@ import {render, screen} from '@testing-library/react';
 
 import {testCustomClassName} from '../../../../test-utils/shared/common';
 import {qaIdByDefault} from '../../../components/Anchor/Anchor';
-import {GridColumnSize} from '../../../grid';
+import {GridColumnSize, IndentValue} from '../../../grid';
 import {ClassNameProps, WithChildren} from '../../../models';
 import BlockBase, {BlockBaseFullProps} from '../BlockBase';
 
 const qa = 'block-base-component';
 
+const indentValues: IndentValue[] = ['0', 'xs', 's', 'm', 'l', 'xl'];
+
 type ComponentProps = WithChildren<BlockBaseFullProps & ClassNameProps>;
 
 describe('BlockBase', () => {
@@ -57,4 +59,24 @@ describe('BlockBase', () => {
         expect(component).toBeInTheDocument();
         expect(component).toHaveAttribute('id', anchor.url);
     });
+
+    test.each(new Array<IndentValue>(...indentValues))(
+        'render with given "%s" top indent',
+        (indentValue) => {
+            render(<BlockBase qa={qa} indent={{top: indentValue}} />);
+            const component = screen.getByTestId(qa);
+
+            expect(component).toHaveClass(`pc-block-base_indentTop_${indentValue}`);
+        },
+    );
+
+    test.each(new Array<IndentValue>(...indentValues))(
+        'render with given "%s" bottom indent',
+        (indentValue) => {
+            render(<BlockBase qa={qa} indent={{bottom: indentValue}} />);
+            const component = screen.getByTestId(qa);
+
+            expect(component).toHaveClass(`pc-block-base_indentBottom_${indentValue}`);
+        },
+    );
 });

src/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.tsx

@@ -24,20 +24,15 @@ export const ConstructorBlock: React.FC<WithChildren<ConstructorBlockProps>> = (
     data,
     children,
 }) => {
-    const {type, indent} = data;
+    const {type} = data;
     const blockBaseProps = useMemo(
-        () => pick(data, ['anchor', 'visible', 'resetPaddings']),
+        () => pick(data, ['anchor', 'visible', 'resetPaddings', 'indent']),
         [data],
     );
 
-    const {top, bottom} = indent || {top: 'l', bottom: 'l'};
-
     return (
         <BlockDecoration type={type} index={index} {...blockBaseProps}>
-            <BlockBase
-                className={b({type, indentTop: top, indentBottom: bottom})}
-                {...blockBaseProps}
-            >
+            <BlockBase className={b({type})} {...blockBaseProps}>
                 {children}
             </BlockBase>
         </BlockDecoration>

src/grid/types.ts

@@ -58,3 +58,5 @@ export interface GridColumnClassParams {
     justifyContent?: GridJustifyContent;
     reset?: boolean;
 }
+
+export type IndentValue = '0' | 'xs' | 's' | 'm' | 'l' | 'xl';

src/models/constructor-items/blocks.ts

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {ButtonSize} from '@gravity-ui/uikit';
 
-import {GridColumnSize, GridColumnSizesType} from '../../grid/types';
+import {GridColumnSize, GridColumnSizesType, IndentValue} from '../../grid/types';
 import {ThemeSupporting} from '../../utils';
 import {AnalyticsEventsBase} from '../common';
 
@@ -73,6 +73,10 @@ export interface BlockBaseProps {
     visible?: GridColumnSize;
     /** @deprecated */
     resetPaddings?: boolean;
+    indent?: {
+        top?: IndentValue;
+        bottom?: IndentValue;
+    };
     qa?: string;
 }
 

src/models/constructor.ts

@@ -16,12 +16,7 @@ export interface Menu {
     title: string;
 }
 
-export type ConstructorBlock = (ConstructorItem | CustomBlock) & {
-    indent?: {
-        top?: string;
-        bottom?: string;
-    };
-};
+export type ConstructorBlock = ConstructorItem | CustomBlock;
 
 export interface PageContent extends Animatable {
     blocks: ConstructorBlock[];