From 0dfd40f2bb72dc9281ac925eb1d456da0b2c8d26 Mon Sep 17 00:00:00 2001 From: aeksandla Date: Thu, 17 Jul 2025 17:12:28 +0300 Subject: [PATCH 1/2] fix: add all text sizes to validator --- memory-bank/activeContext.md | 18 ++- memory-bank/progress.md | 9 ++ memory-bank/projectbrief.md | 1 + memory-bank/systemPatterns.md | 1 + memory-bank/techContext.md | 10 ++ memory-bank/textSizeUpdate.md | 195 ++++++++++++++++++++++++++++++++ src/schema/validators/common.ts | 2 +- 7 files changed, 230 insertions(+), 6 deletions(-) create mode 100644 memory-bank/textSizeUpdate.md diff --git a/memory-bank/activeContext.md b/memory-bank/activeContext.md index 374496dc7..a6e1aee5d 100644 --- a/memory-bank/activeContext.md +++ b/memory-bank/activeContext.md @@ -13,7 +13,15 @@ The Page Constructor library is currently focused on providing a comprehensive s Recent development has focused on: -1. **Card Component Standardization**: Updated BasicCard, LayoutItem, BackgroundCard, and ImageCard with consistent patterns: +1. **Text Size Enhancement**: Updated `textSize` constant in `src/schema/validators/common.ts`: + + - **Previous values**: `['s', 'm', 'l']` + - **Current values**: `['xs', 's', 'sm', 'm', 'l']` + - Added new smaller sizes: `'xs'` (extra small) and `'sm'` (small-medium) + - This affects all components that use text sizing: Links, FileLinkProps, TitleProps, and various blocks + - Updated TypeScript type `TextSize` to include new values + +2. **Card Component Standardization**: Updated BasicCard, LayoutItem, BackgroundCard, and ImageCard with consistent patterns: - Standardized `controlPosition` prop for flexible control placement ('content' vs 'footer') - Enhanced accessibility with `useUniqId()` for proper ARIA labeling @@ -21,10 +29,10 @@ Recent development has focused on: - Unified theme support using `getThemedValue` utility - Improved integration with the Content sub-block -2. **Accessibility Improvements**: Enhanced ARIA attributes and ID management across card components -3. **Control Positioning**: New flexible control positioning system allowing buttons/links in footer area -4. **Performance Optimization**: Reducing bundle size and improving rendering performance -5. **Documentation**: Expanding Storybook examples and documentation +3. **Accessibility Improvements**: Enhanced ARIA attributes and ID management across card components +4. **Control Positioning**: New flexible control positioning system allowing buttons/links in footer area +5. **Performance Optimization**: Reducing bundle size and improving rendering performance +6. **Documentation**: Expanding Storybook examples and documentation ## Active Decisions and Considerations diff --git a/memory-bank/progress.md b/memory-bank/progress.md index e76eb9602..86260fa37 100644 --- a/memory-bank/progress.md +++ b/memory-bank/progress.md @@ -35,6 +35,15 @@ Recently updated sub-block components with enhanced consistency: - **ImageCard**: Image-focused card with directional layout options - **Content**: Shared content component used across all card types for consistent rendering +### Text Sizing System + +Enhanced text sizing capabilities: + +- **TextSize Type**: Updated from `['s', 'm', 'l']` to `['xs', 's', 'sm', 'm', 'l']` +- **New Sizes**: Added `'xs'` (extra small) and `'sm'` (small-medium) for finer typography control +- **Affected Components**: Links, FileLink, Title, and various blocks now support extended size range +- **Schema Validation**: Updated JSON schemas to include new text size options + ### Editor - **Visual Editing**: WYSIWYG editor for creating and modifying pages diff --git a/memory-bank/projectbrief.md b/memory-bank/projectbrief.md index d71c2bb7c..f9cda3a5d 100644 --- a/memory-bank/projectbrief.md +++ b/memory-bank/projectbrief.md @@ -21,6 +21,7 @@ Page Constructor is a React-based library for rendering web pages or their parts - Component-based page construction - Theming support (light/dark) - Customizable blocks and sub-blocks +- Enhanced typography system with 5 text sizes (xs, s, sm, m, l) - Responsive grid system - Navigation components - Internationalization support diff --git a/memory-bank/systemPatterns.md b/memory-bank/systemPatterns.md index 058991574..8ad1eaa37 100644 --- a/memory-bank/systemPatterns.md +++ b/memory-bank/systemPatterns.md @@ -126,6 +126,7 @@ A comprehensive type system using TypeScript ensures: - **Sub-block Types**: Enum of available sub-block types - **Sub-block Models**: Interface for each sub-block's properties - **Common Types**: Shared types across components +- **Text Sizing**: Enhanced `TextSize` type with values `'xs' | 's' | 'sm' | 'm' | 'l'` for finer typography control ### Schema Validation diff --git a/memory-bank/techContext.md b/memory-bank/techContext.md index a10726460..596f84bdb 100644 --- a/memory-bank/techContext.md +++ b/memory-bank/techContext.md @@ -170,6 +170,16 @@ const MyCustomBlock = (props) => { - **Release Branches**: For maintaining multiple major versions - **Storybook Deployment**: For documentation and examples +## Recent Technical Updates + +### Text Sizing System Enhancement + +- **Updated TextSize Type**: Extended from `['s', 'm', 'l']` to `['xs', 's', 'sm', 'm', 'l']` +- **New Size Options**: Added `'xs'` (extra small) and `'sm'` (small-medium) for finer typography control +- **Affected Components**: Links, FileLink, Title, and various blocks now support extended size range +- **Schema Updates**: JSON schemas updated to validate new text size options +- **Type Safety**: TypeScript `TextSize` type updated to include new values + ## Technical Debt and Limitations 1. **Legacy Support**: diff --git a/memory-bank/textSizeUpdate.md b/memory-bank/textSizeUpdate.md new file mode 100644 index 000000000..f9525f2be --- /dev/null +++ b/memory-bank/textSizeUpdate.md @@ -0,0 +1,195 @@ +# Text Size System Update + +## Overview + +This document details the recent update to the text sizing system in the Page Constructor library, specifically the enhancement of the `textSize` constant and related TypeScript types. + +## Changes Made + +### Constants Update + +**File**: `src/schema/validators/common.ts` + +**Previous Value**: + +```typescript +export const textSize = ['s', 'm', 'l']; +``` + +**Updated Value**: + +```typescript +export const textSize = ['xs', 's', 'sm', 'm', 'l']; +``` + +### TypeScript Type Update + +**File**: `src/models/constructor-items/common.ts` + +**Previous Type**: + +```typescript +export type TextSize = 's' | 'm' | 'l'; +``` + +**Updated Type**: + +```typescript +export type TextSize = 'xs' | 's' | 'sm' | 'm' | 'l'; +``` + +## New Size Options + +### Added Sizes + +1. **`'xs'` (Extra Small)**: + + - Smallest text size option + - Provides finer control for very small text elements + - Useful for captions, footnotes, or secondary information + +2. **`'sm'` (Small-Medium)**: + - Intermediate size between 's' and 'm' + - Fills the gap in the sizing scale + - Provides more granular typography control + +### Existing Sizes (Unchanged) + +- **`'s'` (Small)**: Standard small text size +- **`'m'` (Medium)**: Standard medium text size +- **`'l'` (Large)**: Standard large text size + +## Impact Analysis + +### Affected Components + +The `textSize` property is used across multiple components: + +1. **Link Components** (`LinkProps`): + + - Links now support the extended size range + - Better typography control for navigation and inline links + +2. **FileLink Components** (`FileLinkProps`): + + - File download links can use finer size control + - Improved visual hierarchy for file listings + +3. **Title Components** (`TitleProps`): + + - Titles support more granular sizing + - Better heading hierarchy control + +4. **Block Components**: + - Various blocks that use text sizing inherit the new options + - Slider blocks (`src/blocks/Slider/schema.ts`, `src/blocks/SliderOld/schema.ts`) + - PriceDetailed block (`src/sub-blocks/PriceDetailed/schema.ts`) + +### Schema Validation + +All JSON schemas that reference `textSize` have been automatically updated to include the new values: + +- Form validation now accepts `'xs'` and `'sm'` values +- Editor interfaces will show the new size options +- Runtime validation ensures type safety + +## Benefits + +### Enhanced Typography Control + +1. **Finer Granularity**: More size options allow for better visual hierarchy +2. **Design Flexibility**: Designers have more tools for creating consistent typography scales +3. **Accessibility**: Better size options can improve readability for different user needs + +### Backward Compatibility + +- **No Breaking Changes**: Existing `'s'`, `'m'`, and `'l'` values continue to work +- **Gradual Adoption**: Teams can adopt new sizes incrementally +- **Default Behavior**: Components without explicit size settings remain unchanged + +### Developer Experience + +- **Type Safety**: TypeScript ensures only valid size values are used +- **IntelliSense**: IDEs will show all available size options +- **Validation**: JSON schema validation catches invalid size values + +## Usage Examples + +### Link with Extra Small Text + +```json +{ + "text": "Terms and Conditions", + "url": "/terms", + "textSize": "xs" +} +``` + +### Title with Small-Medium Size + +```json +{ + "text": "Section Subtitle", + "textSize": "sm" +} +``` + +### FileLink with Fine-Tuned Sizing + +```json +{ + "href": "/document.pdf", + "text": "Download PDF", + "textSize": "sm" +} +``` + +## Migration Guide + +### For Existing Projects + +No migration is required as this is a non-breaking change. Existing size values (`'s'`, `'m'`, `'l'`) continue to work as before. + +### For New Development + +Consider using the new size options where appropriate: + +- Use `'xs'` for secondary information, captions, or legal text +- Use `'sm'` when you need a size between small and medium +- Continue using existing sizes for established design patterns + +## Testing Considerations + +### Visual Regression Testing + +- Existing components should render identically +- New size options should be tested across different themes +- Responsive behavior should be verified for all sizes + +### Schema Validation Testing + +- Ensure new size values pass validation +- Verify that invalid size values are rejected +- Test editor interfaces with new options + +## Future Considerations + +### Potential Enhancements + +1. **CSS Custom Properties**: Consider mapping sizes to CSS custom properties for easier theming +2. **Responsive Sizing**: Explore size variations across different screen sizes +3. **Semantic Naming**: Consider more semantic size names in future versions + +### Deprecation Strategy + +If size names need to change in the future, follow the established deprecation pattern: + +1. Add new names while keeping old ones +2. Mark old names as deprecated in documentation +3. Remove deprecated names in next major version + +## Related Documentation + +- [System Patterns](systemPatterns.md) - Component architecture patterns +- [Tech Context](techContext.md) - Technical implementation details +- [Progress](progress.md) - Current project status and achievements diff --git a/src/schema/validators/common.ts b/src/schema/validators/common.ts index fcdbeeaa0..bac389866 100644 --- a/src/schema/validators/common.ts +++ b/src/schema/validators/common.ts @@ -10,7 +10,7 @@ import { import {AnalyticsEventSchema} from './event'; export const mediaDirection = ['media-content', 'content-media']; -export const textSize = ['s', 'm', 'l']; +export const textSize = ['xs', 's', 'sm', 'm', 'l']; export const containerSizesArray = ['sm', 'md', 'lg', 'xl', 'all']; export const sliderSizesArray = ['sm', 'md', 'lg', 'xl']; export const contentSizes = ['s', 'm', 'l']; From a322e1993c4cedd5264c7b98a91364904ed18d32 Mon Sep 17 00:00:00 2001 From: aeksandla Date: Wed, 20 Aug 2025 15:57:47 +0300 Subject: [PATCH 2/2] fix: icon width --- src/components/IconWrapper/IconWrapper.scss | 5 ++++- src/components/IconWrapper/IconWrapper.tsx | 6 +++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/IconWrapper/IconWrapper.scss b/src/components/IconWrapper/IconWrapper.scss index 28b7a2887..8f63d5a80 100644 --- a/src/components/IconWrapper/IconWrapper.scss +++ b/src/components/IconWrapper/IconWrapper.scss @@ -27,10 +27,13 @@ $block: '.#{$ns}icon-wrapper'; max-width: 100%; margin-bottom: $indentXXS; height: $iconSizePositionTop; - width: $iconSizePositionTop; object-fit: contain; display: block; + &_gravity-icon { + width: $iconSizePositionTop; + } + &_icon-position { &_left { height: $iconSizePositionLeftSizeS; diff --git a/src/components/IconWrapper/IconWrapper.tsx b/src/components/IconWrapper/IconWrapper.tsx index 62eebfff5..ec9766b49 100644 --- a/src/components/IconWrapper/IconWrapper.tsx +++ b/src/components/IconWrapper/IconWrapper.tsx @@ -25,7 +25,11 @@ const IconWrapper = (props: React.PropsWithChildren & ClassNam icon={icon?.value} gravityIcon={gravityIcon?.value} containerClassName={b('icon-container')} - className={b('icon', {['icon-position']: position, size})} + className={b('icon', { + ['icon-position']: position, + size, + ['gravity-icon']: Boolean(gravityIcon), + })} />
{children}