fix: layout item content margin (#1104)

* fix: add layout item content right margin
gravity-ui · Jan 29, 2025 · fc44210 · fc44210
1 parent dc04d43
commit fc44210
Show file tree

Hide file tree

Showing 14 changed files with 35 additions and 3 deletions.
diff --git a/...l.test.tsx-snapshots/CardLayout-render-stories-Default-light-chromium-linux.png b/...l.test.tsx-snapshots/CardLayout-render-stories-Default-light-chromium-linux.png
diff --git a/...ual.test.tsx-snapshots/CardLayout-render-stories-Default-light-webkit-linux.png b/...ual.test.tsx-snapshots/CardLayout-render-stories-Default-light-webkit-linux.png
diff --git a/...tsx-snapshots/CardLayout-render-stories-WithBackground-light-chromium-linux.png b/...tsx-snapshots/CardLayout-render-stories-WithBackground-light-chromium-linux.png
diff --git a/...t.tsx-snapshots/CardLayout-render-stories-WithBackground-light-webkit-linux.png b/...t.tsx-snapshots/CardLayout-render-stories-WithBackground-light-webkit-linux.png
diff --git a/src/models/constructor-items/common.ts b/src/models/constructor-items/common.ts
@@ -84,6 +84,7 @@ export type ContentTextSize = 's' | 'm' | 'l';
 export type ContentTheme = 'default' | 'dark' | 'light';
 export type FileLinkType = 'vertical' | 'horizontal';
 export type ImageCardMargins = 's' | 'm';
+export type LayoutItemContentMargin = 'm' | 'l';
 
 // modifiers
 export interface Themable {

diff --git a/src/models/constructor-items/sub-blocks.ts b/src/models/constructor-items/sub-blocks.ts
@@ -14,6 +14,7 @@ import {
     ImageCardMargins,
     ImageObjectProps,
     ImageProps,
+    LayoutItemContentMargin,
     LinkProps,
     MediaProps,
     MediaView,
@@ -182,6 +183,7 @@ export interface PriceCardProps extends CardBaseProps, Pick<ContentBlockProps, '
 
 export interface LayoutItemProps extends ClassNameProps, CardLayoutProps, AnalyticsEventsBase {
     content: Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size'>;
+    contentMargin?: LayoutItemContentMargin;
     media?: ThemeSupporting<MediaProps>;
     metaInfo?: string[];
     border?: boolean;

diff --git a/src/sub-blocks/LayoutItem/LayoutItem.scss b/src/sub-blocks/LayoutItem/LayoutItem.scss
@@ -3,6 +3,9 @@
 
 $block: '.#{$ns}layout-item';
 
+$contentMarginM: 40px;
+$contentMarginL: 80px;
+
 #{$block} {
     display: flex;
     flex-direction: column;
@@ -26,14 +29,31 @@ $block: '.#{$ns}layout-item';
         display: flex;
 
         flex: auto;
-        margin: $indentXS $indentXS 0 0;
+        margin-top: $indentXS;
+        margin-left: 0;
+        margin-bottom: 0;
 
         &_no-media {
-            margin: 0;
+            margin-top: 0;
+        }
+
+        &_margin {
+            &_m {
+                margin-right: $contentMarginM;
+            }
+            &_l {
+                margin-right: $contentMarginL;
+            }
         }
     }
 
     &__wrapper {
         flex: auto;
     }
+
+    @media (max-width: map-get($gridBreakpoints, 'sm') - 1) {
+        &__content {
+            margin-right: 0;
+        }
+    }
 }
diff --git a/src/sub-blocks/LayoutItem/LayoutItem.tsx b/src/sub-blocks/LayoutItem/LayoutItem.tsx
@@ -17,6 +17,7 @@ const b = block('layout-item');
 
 const LayoutItem = ({
     content: {links, ...content},
+    contentMargin = 'm',
     metaInfo,
     media,
     border,
@@ -77,7 +78,7 @@ const LayoutItem = ({
         <div className={b(null, className)}>
             {renderMedia()}
             {metaInfo && <MetaInfo items={metaInfo} className={b('meta-info')} />}
-            <div className={b('content', {'no-media': !media})}>
+            <div className={b('content', {'no-media': !media, margin: contentMargin})}>
                 <IconWrapper icon={themedIcon} className={b('wrapper')}>
                     <Content {...contentProps} titleId={titleId} />
                 </IconWrapper>

diff --git a/src/sub-blocks/LayoutItem/README.md b/src/sub-blocks/LayoutItem/README.md
@@ -4,6 +4,8 @@
 
 `content: Partial<Content>` - `Content` props (size and justify props like `colSizes`, `centered`, `size` are omitted) (see [Content](?path=/story/components-content--default))
 
+`contentMargin?: 'm' | 'l'` — Content right margin ('m' by default)
+
 `metaInfo?: string[]` - segmented info string above the content (with YFM support)
 
 `border?: boolean` — Image border

diff --git a/....tsx-snapshots/LayoutItem-render-stories-ControlPosition-light-webkit-linux.png b/....tsx-snapshots/LayoutItem-render-stories-ControlPosition-light-webkit-linux.png
diff --git a/....test.tsx-snapshots/LayoutItem-render-stories-WithIcon-light-chromium-linux.png b/....test.tsx-snapshots/LayoutItem-render-stories-WithIcon-light-chromium-linux.png
diff --git a/...al.test.tsx-snapshots/LayoutItem-render-stories-WithIcon-light-webkit-linux.png b/...al.test.tsx-snapshots/LayoutItem-render-stories-WithIcon-light-webkit-linux.png
diff --git a/src/sub-blocks/LayoutItem/__stories__/LayoutItem.stories.tsx b/src/sub-blocks/LayoutItem/__stories__/LayoutItem.stories.tsx
@@ -115,4 +115,5 @@ ControlPosition.argTypes = {
     className: {table: {disable: true}},
     controlPosition: {table: {disable: true}},
     analyticsEvents: {table: {disable: true}},
+    contentMargin: {table: {disable: true}},
 };
diff --git a/src/sub-blocks/LayoutItem/schema.ts b/src/sub-blocks/LayoutItem/schema.ts
@@ -14,6 +14,11 @@ export const LayoutItem = {
         ...CardLayoutProps,
         media: MediaProps,
         content: omit(ContentBase, ['colSize', 'size', 'centered']),
+        contentMargin: {
+            type: 'string',
+            enum: ['m', 'l'],
+            default: 'm',
+        },
         metaInfo: metaInfo,
         border: {
             type: 'boolean',