From 53d011a45ab9f2c4bdfbf1ddad29bdbbe733a6f2 Mon Sep 17 00:00:00 2001 From: ngorin Date: Thu, 27 Nov 2025 15:43:38 +0300 Subject: [PATCH 1/3] feat: add ability to centered title in cardLayoutBlock --- memory-bank/activeContext.md | 12 ++++++++ memory-bank/progress.md | 11 ++++++++ src/blocks/CardLayout/CardLayout.tsx | 31 +++++++++++++++++++-- src/blocks/CardLayout/__stories__/data.json | 4 ++- src/components/Title/Title.tsx | 16 +++++++++-- src/models/constructor-items/blocks.ts | 3 ++ 6 files changed, 70 insertions(+), 7 deletions(-) diff --git a/memory-bank/activeContext.md b/memory-bank/activeContext.md index 95fa5144e..e89bf369c 100644 --- a/memory-bank/activeContext.md +++ b/memory-bank/activeContext.md @@ -73,6 +73,18 @@ Recent development has focused on: - **Flexible Styling**: Allows any valid CSS color value (hex, rgb, rgba, named colors, etc.) - **Backward Compatibility**: Optional property that doesn't affect existing implementations +11. **CardLayout Title Positioning Enhancement**: Added flexible title positioning for CardLayout block: + + - **New Prop**: Added `titlePosition?: CardLayoutTitlePosition` prop to `CardLayoutBlockProps` with values `'start' | 'center' | 'end'` + - **Default Behavior**: Default value is `'start'`, maintaining backward compatibility + - **Title Component Enhancement**: Extended `Title` component with `colJustifyContent?: GridJustifyContent` prop for controlling title and subtitle alignment + - **Responsive Behavior**: Dynamic `colSizes` based on position: + - For `'start'` position: `sm: 8` (allows left-aligned title with narrower column) + - For `'center'` and `'end'` positions: `sm: 12` (full width for centered/right-aligned titles) + - **Implementation Logic**: Uses conditional check `TITLE_POSITION_TO_JUSTIFY_CONTENT[titlePosition] === GridJustifyContent.Start ? 8 : 12` to determine column size + - **Type Safety**: New `CardLayoutTitlePosition` type exported from models + - **No Breaking Changes**: All changes are backward compatible with default `'start'` position + ## Active Decisions and Considerations ### Architecture diff --git a/memory-bank/progress.md b/memory-bank/progress.md index b5f74dbdd..757562c5c 100644 --- a/memory-bank/progress.md +++ b/memory-bank/progress.md @@ -49,6 +49,17 @@ Recently updated sub-block components with enhanced consistency: - **ContentList**: Enhanced with Gravity icons support for list items - **IconWrapper**: Updated to support both traditional image icons and Gravity UI icons +### Layout Blocks Enhancement + +- **CardLayout Block**: Enhanced with flexible title positioning: + - **Title Position Control**: New `titlePosition` prop allows positioning title at `'start'`, `'center'`, or `'end'` + - **Title Component**: Extended with `colJustifyContent` prop for alignment control + - **Responsive Layout**: Dynamic column sizes adapt based on title position: + - `'start'` position uses `sm: 8` for narrower left-aligned title column + - `'center'` and `'end'` positions use `sm: 12` for full-width centered/right-aligned titles + - **Implementation**: Conditional logic checks if position equals `GridJustifyContent.Start` to determine column size + - **Backward Compatible**: Default `'start'` position maintains existing behavior + ### Icon System Enhanced icon capabilities with Gravity UI integration: diff --git a/src/blocks/CardLayout/CardLayout.tsx b/src/blocks/CardLayout/CardLayout.tsx index 2e6fb102f..6a5469c5c 100644 --- a/src/blocks/CardLayout/CardLayout.tsx +++ b/src/blocks/CardLayout/CardLayout.tsx @@ -4,8 +4,12 @@ import isEmpty from 'lodash/isEmpty'; import {AnimateBlock, BackgroundImage, Title} from '../../components'; import {useTheme} from '../../context/theme'; -import {Col, GridColumnSizesType, Row} from '../../grid'; -import {CardLayoutBlockProps as CardLayoutBlockParams, ClassNameProps} from '../../models'; +import {Col, GridColumnSizesType, GridJustifyContent, Row} from '../../grid'; +import { + CardLayoutBlockProps as CardLayoutBlockParams, + CardLayoutTitlePosition, + ClassNameProps, +} from '../../models'; import {block, getThemedValue} from '../../utils'; import './CardLayout.scss'; @@ -15,6 +19,13 @@ const DEFAULT_SIZES: GridColumnSizesType = { sm: 6, md: 4, }; + +const TITLE_POSITION_TO_JUSTIFY_CONTENT: Record = { + start: GridJustifyContent.Start, + center: GridJustifyContent.Center, + end: GridJustifyContent.End, +}; + export type CardLayoutBlockProps = React.PropsWithChildren< Omit > & @@ -31,13 +42,27 @@ const CardLayout = ({ className, titleClassName, background, + titlePosition = 'start', }: CardLayoutBlockProps) => { const theme = useTheme(); const {border, ...backgroundImageProps} = getThemedValue(background || {}, theme); return ( {(title || description) && ( - + <Title + title={title} + subtitle={description} + className={titleClassName} + colJustifyContent={TITLE_POSITION_TO_JUSTIFY_CONTENT[titlePosition]} + colSizes={{ + all: 12, + sm: + TITLE_POSITION_TO_JUSTIFY_CONTENT[titlePosition] === + GridJustifyContent.Start + ? 8 + : 12, + }} + /> )} <div className={b('content', { diff --git a/src/blocks/CardLayout/__stories__/data.json b/src/blocks/CardLayout/__stories__/data.json index 57783d42f..e84c771c4 100644 --- a/src/blocks/CardLayout/__stories__/data.json +++ b/src/blocks/CardLayout/__stories__/data.json @@ -110,7 +110,8 @@ "content": { "type": "card-layout-block", "title": "Card layout with basic cards", - "description": "Three cards in a row on the desktop, two cards in a row on a tablet, one card in a row on a mobile phone." + "description": "Three cards in a row on the desktop, two cards in a row on a tablet, one card in a row on a mobile phone.", + "titlePosition": "start" } }, "colSizes": { @@ -172,6 +173,7 @@ "type": "card-layout-block", "title": "Card layout with background image (basic cards)", "description": "Four cards in a row on the desktop, three cards in a row on the mini-desktop, two cards in a row on a tablet, one card in a row on a mobile phone.", + "titlePosition": "start", "colSizes": { "all": 12, "sm": 6, diff --git a/src/components/Title/Title.tsx b/src/components/Title/Title.tsx index 67d912ff1..a2520a8a2 100644 --- a/src/components/Title/Title.tsx +++ b/src/components/Title/Title.tsx @@ -1,4 +1,4 @@ -import {Col, GridColumnSizesType} from '../../grid'; +import {Col, GridColumnSizesType, GridJustifyContent} from '../../grid'; import {ClassNameProps, TitleItemProps, TitleProps as TitleParams} from '../../models'; import {block} from '../../utils'; import YFMWrapper from '../YFMWrapper/YFMWrapper'; @@ -11,6 +11,7 @@ const b = block('title'); export interface TitleProps extends TitleParams { colSizes?: GridColumnSizesType; + colJustifyContent?: GridJustifyContent; id?: string; } @@ -19,6 +20,7 @@ const Title = ({ subtitle, className, colSizes = {all: 12, sm: 8}, + colJustifyContent, id, }: TitleProps & ClassNameProps) => { if (!title && !subtitle) { @@ -31,12 +33,20 @@ const Title = ({ return ( <div className={b(null, className)} id={id}> {text && ( - <Col reset sizes={colSizes}> + <Col + reset + sizes={colSizes} + {...(colJustifyContent && {justifyContent: colJustifyContent})} + > <TitleItem text={text} {...titleProps} /> </Col> )} {subtitle && ( - <Col reset sizes={colSizes}> + <Col + reset + sizes={colSizes} + {...(colJustifyContent && {justifyContent: colJustifyContent})} + > <div className={b('description', {titleSize: titleProps?.textSize})}> <YFMWrapper content={subtitle} modifiers={{constructor: true}} /> </div> diff --git a/src/models/constructor-items/blocks.ts b/src/models/constructor-items/blocks.ts index ca402df2f..10836696d 100644 --- a/src/models/constructor-items/blocks.ts +++ b/src/models/constructor-items/blocks.ts @@ -354,9 +354,12 @@ export interface TabsBlockProps extends Animatable { contentSize?: ContentSize; } +export type CardLayoutTitlePosition = 'start' | 'center' | 'end'; + export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChildren { title?: TitleItemProps | string; titleClassName?: string; + titlePosition?: CardLayoutTitlePosition; description?: string; colSizes?: GridColumnSizesType; background?: ThemeSupporting< From 9fe9a0094573569a56b4682c286bdffe9be710be Mon Sep 17 00:00:00 2001 From: ngorin <ngorin@yandex-team.ru> Date: Thu, 27 Nov 2025 17:21:39 +0300 Subject: [PATCH 2/3] feat: after review rename prop --- memory-bank/activeContext.md | 17 +++++++------- memory-bank/progress.md | 14 +++++------ src/blocks/CardLayout/CardLayout.scss | 6 +++++ src/blocks/CardLayout/CardLayout.tsx | 26 ++++++--------------- src/blocks/CardLayout/__stories__/data.json | 4 ++-- src/models/constructor-items/blocks.ts | 4 +--- 6 files changed, 31 insertions(+), 40 deletions(-) diff --git a/memory-bank/activeContext.md b/memory-bank/activeContext.md index e89bf369c..97ceee3c5 100644 --- a/memory-bank/activeContext.md +++ b/memory-bank/activeContext.md @@ -73,17 +73,16 @@ Recent development has focused on: - **Flexible Styling**: Allows any valid CSS color value (hex, rgb, rgba, named colors, etc.) - **Backward Compatibility**: Optional property that doesn't affect existing implementations -11. **CardLayout Title Positioning Enhancement**: Added flexible title positioning for CardLayout block: +11. **CardLayout Title Centering Enhancement**: Added title centering support for CardLayout block: - - **New Prop**: Added `titlePosition?: CardLayoutTitlePosition` prop to `CardLayoutBlockProps` with values `'start' | 'center' | 'end'` - - **Default Behavior**: Default value is `'start'`, maintaining backward compatibility + - **New Prop**: Added `centered?: boolean` prop to `CardLayoutBlockProps` for centering title and subtitle + - **Default Behavior**: Default value is `false`, maintaining backward compatibility (left-aligned by default) - **Title Component Enhancement**: Extended `Title` component with `colJustifyContent?: GridJustifyContent` prop for controlling title and subtitle alignment - - **Responsive Behavior**: Dynamic `colSizes` based on position: - - For `'start'` position: `sm: 8` (allows left-aligned title with narrower column) - - For `'center'` and `'end'` positions: `sm: 12` (full width for centered/right-aligned titles) - - **Implementation Logic**: Uses conditional check `TITLE_POSITION_TO_JUSTIFY_CONTENT[titlePosition] === GridJustifyContent.Start ? 8 : 12` to determine column size - - **Type Safety**: New `CardLayoutTitlePosition` type exported from models - - **No Breaking Changes**: All changes are backward compatible with default `'start'` position + - **Responsive Behavior**: Dynamic `colSizes` based on `centered` prop: + - When `centered === false`: `sm: 8` (allows left-aligned title with narrower column) + - When `centered === true`: `sm: 12` (full width for centered title) + - **Implementation Logic**: Uses conditional check `centered ? GridJustifyContent.Center : GridJustifyContent.Start` for alignment and `centered ? 12 : 8` for column size + - **No Breaking Changes**: All changes are backward compatible with default `centered: false` value ## Active Decisions and Considerations diff --git a/memory-bank/progress.md b/memory-bank/progress.md index 757562c5c..e14f4fa4b 100644 --- a/memory-bank/progress.md +++ b/memory-bank/progress.md @@ -51,14 +51,14 @@ Recently updated sub-block components with enhanced consistency: ### Layout Blocks Enhancement -- **CardLayout Block**: Enhanced with flexible title positioning: - - **Title Position Control**: New `titlePosition` prop allows positioning title at `'start'`, `'center'`, or `'end'` +- **CardLayout Block**: Enhanced with title centering support: + - **Title Centering Control**: New `centered?: boolean` prop allows centering title and subtitle - **Title Component**: Extended with `colJustifyContent` prop for alignment control - - **Responsive Layout**: Dynamic column sizes adapt based on title position: - - `'start'` position uses `sm: 8` for narrower left-aligned title column - - `'center'` and `'end'` positions use `sm: 12` for full-width centered/right-aligned titles - - **Implementation**: Conditional logic checks if position equals `GridJustifyContent.Start` to determine column size - - **Backward Compatible**: Default `'start'` position maintains existing behavior + - **Responsive Layout**: Dynamic column sizes adapt based on `centered` prop: + - When `centered === false`: uses `sm: 8` for narrower left-aligned title column + - When `centered === true`: uses `sm: 12` for full-width centered title + - **Implementation**: Conditional logic `centered ? GridJustifyContent.Center : GridJustifyContent.Start` for alignment and `centered ? 12 : 8` for column size + - **Backward Compatible**: Default `centered: false` maintains existing left-aligned behavior ### Icon System diff --git a/src/blocks/CardLayout/CardLayout.scss b/src/blocks/CardLayout/CardLayout.scss index c4a484533..362a11885 100644 --- a/src/blocks/CardLayout/CardLayout.scss +++ b/src/blocks/CardLayout/CardLayout.scss @@ -19,6 +19,12 @@ $largeBorderRadius: 32px; } } + &__title { + &_centered { + text-align: center; + } + } + &__image { position: absolute; top: 0; diff --git a/src/blocks/CardLayout/CardLayout.tsx b/src/blocks/CardLayout/CardLayout.tsx index 6a5469c5c..e91219a05 100644 --- a/src/blocks/CardLayout/CardLayout.tsx +++ b/src/blocks/CardLayout/CardLayout.tsx @@ -5,11 +5,7 @@ import isEmpty from 'lodash/isEmpty'; import {AnimateBlock, BackgroundImage, Title} from '../../components'; import {useTheme} from '../../context/theme'; import {Col, GridColumnSizesType, GridJustifyContent, Row} from '../../grid'; -import { - CardLayoutBlockProps as CardLayoutBlockParams, - CardLayoutTitlePosition, - ClassNameProps, -} from '../../models'; +import {CardLayoutBlockProps as CardLayoutBlockParams, ClassNameProps} from '../../models'; import {block, getThemedValue} from '../../utils'; import './CardLayout.scss'; @@ -20,12 +16,6 @@ const DEFAULT_SIZES: GridColumnSizesType = { md: 4, }; -const TITLE_POSITION_TO_JUSTIFY_CONTENT: Record<CardLayoutTitlePosition, GridJustifyContent> = { - start: GridJustifyContent.Start, - center: GridJustifyContent.Center, - end: GridJustifyContent.End, -}; - export type CardLayoutBlockProps = React.PropsWithChildren< Omit<CardLayoutBlockParams, 'children'> > & @@ -42,7 +32,7 @@ const CardLayout = ({ className, titleClassName, background, - titlePosition = 'start', + centered = false, }: CardLayoutBlockProps) => { const theme = useTheme(); const {border, ...backgroundImageProps} = getThemedValue(background || {}, theme); @@ -52,15 +42,13 @@ const CardLayout = ({ <Title title={title} subtitle={description} - className={titleClassName} - colJustifyContent={TITLE_POSITION_TO_JUSTIFY_CONTENT[titlePosition]} + className={b('title', {centered}, titleClassName)} + colJustifyContent={ + centered ? GridJustifyContent.Center : GridJustifyContent.Start + } colSizes={{ all: 12, - sm: - TITLE_POSITION_TO_JUSTIFY_CONTENT[titlePosition] === - GridJustifyContent.Start - ? 8 - : 12, + sm: centered ? 12 : 8, }} /> )} diff --git a/src/blocks/CardLayout/__stories__/data.json b/src/blocks/CardLayout/__stories__/data.json index e84c771c4..d9acf5e04 100644 --- a/src/blocks/CardLayout/__stories__/data.json +++ b/src/blocks/CardLayout/__stories__/data.json @@ -111,7 +111,7 @@ "type": "card-layout-block", "title": "Card layout with basic cards", "description": "Three cards in a row on the desktop, two cards in a row on a tablet, one card in a row on a mobile phone.", - "titlePosition": "start" + "centered": false } }, "colSizes": { @@ -173,7 +173,7 @@ "type": "card-layout-block", "title": "Card layout with background image (basic cards)", "description": "Four cards in a row on the desktop, three cards in a row on the mini-desktop, two cards in a row on a tablet, one card in a row on a mobile phone.", - "titlePosition": "start", + "centered": false, "colSizes": { "all": 12, "sm": 6, diff --git a/src/models/constructor-items/blocks.ts b/src/models/constructor-items/blocks.ts index 10836696d..add481863 100644 --- a/src/models/constructor-items/blocks.ts +++ b/src/models/constructor-items/blocks.ts @@ -354,12 +354,10 @@ export interface TabsBlockProps extends Animatable { contentSize?: ContentSize; } -export type CardLayoutTitlePosition = 'start' | 'center' | 'end'; - export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChildren { title?: TitleItemProps | string; titleClassName?: string; - titlePosition?: CardLayoutTitlePosition; + centered?: boolean; description?: string; colSizes?: GridColumnSizesType; background?: ThemeSupporting< From a8f078ccc5ac6007b483b8be0b2bb9f7cc246930 Mon Sep 17 00:00:00 2001 From: ngorin <ngorin@yandex-team.ru> Date: Tue, 2 Dec 2025 18:12:41 +0300 Subject: [PATCH 3/3] feat: fix styles for centered --- src/blocks/CardLayout/CardLayout.scss | 3 +++ src/blocks/CardLayout/CardLayout.tsx | 4 ---- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/blocks/CardLayout/CardLayout.scss b/src/blocks/CardLayout/CardLayout.scss index 362a11885..404d6d22b 100644 --- a/src/blocks/CardLayout/CardLayout.scss +++ b/src/blocks/CardLayout/CardLayout.scss @@ -21,6 +21,9 @@ $largeBorderRadius: 32px; &__title { &_centered { + display: flex; + flex-direction: column; + align-items: center; text-align: center; } } diff --git a/src/blocks/CardLayout/CardLayout.tsx b/src/blocks/CardLayout/CardLayout.tsx index e91219a05..ad6294dfc 100644 --- a/src/blocks/CardLayout/CardLayout.tsx +++ b/src/blocks/CardLayout/CardLayout.tsx @@ -46,10 +46,6 @@ const CardLayout = ({ colJustifyContent={ centered ? GridJustifyContent.Center : GridJustifyContent.Start } - colSizes={{ - all: 12, - sm: centered ? 12 : 8, - }} /> )} <div