Skip to content

Commit a11eff1

Browse files
aeksandlaaeksandla
authored
fix: add all text sizes to validator (#1239)
1 parent 329956a commit a11eff1

File tree

7 files changed

+230
-6
lines changed

7 files changed

+230
-6
lines changed

‎memory-bank/activeContext.md‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,26 @@ The Page Constructor library is currently focused on providing a comprehensive s
1313

1414
Recent development has focused on:
1515

16-
1. **Card Component Standardization**: Updated BasicCard, LayoutItem, BackgroundCard, and ImageCard with consistent patterns:
16+
1. **Text Size Enhancement**: Updated `textSize` constant in `src/schema/validators/common.ts`:
17+
18+
- **Previous values**: `['s', 'm', 'l']`
19+
- **Current values**: `['xs', 's', 'sm', 'm', 'l']`
20+
- Added new smaller sizes: `'xs'` (extra small) and `'sm'` (small-medium)
21+
- This affects all components that use text sizing: Links, FileLinkProps, TitleProps, and various blocks
22+
- Updated TypeScript type `TextSize` to include new values
23+
24+
2. **Card Component Standardization**: Updated BasicCard, LayoutItem, BackgroundCard, and ImageCard with consistent patterns:
1725

1826
- Standardized `controlPosition` prop for flexible control placement ('content' vs 'footer')
1927
- Enhanced accessibility with `useUniqId()` for proper ARIA labeling
2028
- Consistent size defaults (size='s') across all card components
2129
- Unified theme support using `getThemedValue` utility
2230
- Improved integration with the Content sub-block
2331

24-
2. **Accessibility Improvements**: Enhanced ARIA attributes and ID management across card components
25-
3. **Control Positioning**: New flexible control positioning system allowing buttons/links in footer area
26-
4. **Performance Optimization**: Reducing bundle size and improving rendering performance
27-
5. **Documentation**: Expanding Storybook examples and documentation
32+
3. **Accessibility Improvements**: Enhanced ARIA attributes and ID management across card components
33+
4. **Control Positioning**: New flexible control positioning system allowing buttons/links in footer area
34+
5. **Performance Optimization**: Reducing bundle size and improving rendering performance
35+
6. **Documentation**: Expanding Storybook examples and documentation
2836

2937
## Active Decisions and Considerations
3038

‎memory-bank/progress.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,15 @@ Recently updated sub-block components with enhanced consistency:
3535
- **ImageCard**: Image-focused card with directional layout options
3636
- **Content**: Shared content component used across all card types for consistent rendering
3737

38+
### Text Sizing System
39+
40+
Enhanced text sizing capabilities:
41+
42+
- **TextSize Type**: Updated from `['s', 'm', 'l']` to `['xs', 's', 'sm', 'm', 'l']`
43+
- **New Sizes**: Added `'xs'` (extra small) and `'sm'` (small-medium) for finer typography control
44+
- **Affected Components**: Links, FileLink, Title, and various blocks now support extended size range
45+
- **Schema Validation**: Updated JSON schemas to include new text size options
46+
3847
### Editor
3948

4049
- **Visual Editing**: WYSIWYG editor for creating and modifying pages

‎memory-bank/projectbrief.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ Page Constructor is a React-based library for rendering web pages or their parts
2121
- Component-based page construction
2222
- Theming support (light/dark)
2323
- Customizable blocks and sub-blocks
24+
- Enhanced typography system with 5 text sizes (xs, s, sm, m, l)
2425
- Responsive grid system
2526
- Navigation components
2627
- Internationalization support

‎memory-bank/systemPatterns.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@ A comprehensive type system using TypeScript ensures:
126126
- **Sub-block Types**: Enum of available sub-block types
127127
- **Sub-block Models**: Interface for each sub-block's properties
128128
- **Common Types**: Shared types across components
129+
- **Text Sizing**: Enhanced `TextSize` type with values `'xs' | 's' | 'sm' | 'm' | 'l'` for finer typography control
129130

130131
### Schema Validation
131132

‎memory-bank/techContext.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,16 @@ const MyCustomBlock = (props) => {
170170
- **Release Branches**: For maintaining multiple major versions
171171
- **Storybook Deployment**: For documentation and examples
172172

173+
## Recent Technical Updates
174+
175+
### Text Sizing System Enhancement
176+
177+
- **Updated TextSize Type**: Extended from `['s', 'm', 'l']` to `['xs', 's', 'sm', 'm', 'l']`
178+
- **New Size Options**: Added `'xs'` (extra small) and `'sm'` (small-medium) for finer typography control
179+
- **Affected Components**: Links, FileLink, Title, and various blocks now support extended size range
180+
- **Schema Updates**: JSON schemas updated to validate new text size options
181+
- **Type Safety**: TypeScript `TextSize` type updated to include new values
182+
173183
## Technical Debt and Limitations
174184

175185
1. **Legacy Support**:

‎memory-bank/textSizeUpdate.md‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
# Text Size System Update
2+
3+
## Overview
4+
5+
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.
6+
7+
## Changes Made
8+
9+
### Constants Update
10+
11+
**File**: `src/schema/validators/common.ts`
12+
13+
**Previous Value**:
14+
15+
```typescript
16+
export const textSize = ['s', 'm', 'l'];
17+
```
18+
19+
**Updated Value**:
20+
21+
```typescript
22+
export const textSize = ['xs', 's', 'sm', 'm', 'l'];
23+
```
24+
25+
### TypeScript Type Update
26+
27+
**File**: `src/models/constructor-items/common.ts`
28+
29+
**Previous Type**:
30+
31+
```typescript
32+
export type TextSize = 's' | 'm' | 'l';
33+
```
34+
35+
**Updated Type**:
36+
37+
```typescript
38+
export type TextSize = 'xs' | 's' | 'sm' | 'm' | 'l';
39+
```
40+
41+
## New Size Options
42+
43+
### Added Sizes
44+
45+
1. **`'xs'` (Extra Small)**:
46+
47+
- Smallest text size option
48+
- Provides finer control for very small text elements
49+
- Useful for captions, footnotes, or secondary information
50+
51+
2. **`'sm'` (Small-Medium)**:
52+
- Intermediate size between 's' and 'm'
53+
- Fills the gap in the sizing scale
54+
- Provides more granular typography control
55+
56+
### Existing Sizes (Unchanged)
57+
58+
- **`'s'` (Small)**: Standard small text size
59+
- **`'m'` (Medium)**: Standard medium text size
60+
- **`'l'` (Large)**: Standard large text size
61+
62+
## Impact Analysis
63+
64+
### Affected Components
65+
66+
The `textSize` property is used across multiple components:
67+
68+
1. **Link Components** (`LinkProps`):
69+
70+
- Links now support the extended size range
71+
- Better typography control for navigation and inline links
72+
73+
2. **FileLink Components** (`FileLinkProps`):
74+
75+
- File download links can use finer size control
76+
- Improved visual hierarchy for file listings
77+
78+
3. **Title Components** (`TitleProps`):
79+
80+
- Titles support more granular sizing
81+
- Better heading hierarchy control
82+
83+
4. **Block Components**:
84+
- Various blocks that use text sizing inherit the new options
85+
- Slider blocks (`src/blocks/Slider/schema.ts`, `src/blocks/SliderOld/schema.ts`)
86+
- PriceDetailed block (`src/sub-blocks/PriceDetailed/schema.ts`)
87+
88+
### Schema Validation
89+
90+
All JSON schemas that reference `textSize` have been automatically updated to include the new values:
91+
92+
- Form validation now accepts `'xs'` and `'sm'` values
93+
- Editor interfaces will show the new size options
94+
- Runtime validation ensures type safety
95+
96+
## Benefits
97+
98+
### Enhanced Typography Control
99+
100+
1. **Finer Granularity**: More size options allow for better visual hierarchy
101+
2. **Design Flexibility**: Designers have more tools for creating consistent typography scales
102+
3. **Accessibility**: Better size options can improve readability for different user needs
103+
104+
### Backward Compatibility
105+
106+
- **No Breaking Changes**: Existing `'s'`, `'m'`, and `'l'` values continue to work
107+
- **Gradual Adoption**: Teams can adopt new sizes incrementally
108+
- **Default Behavior**: Components without explicit size settings remain unchanged
109+
110+
### Developer Experience
111+
112+
- **Type Safety**: TypeScript ensures only valid size values are used
113+
- **IntelliSense**: IDEs will show all available size options
114+
- **Validation**: JSON schema validation catches invalid size values
115+
116+
## Usage Examples
117+
118+
### Link with Extra Small Text
119+
120+
```json
121+
{
122+
"text": "Terms and Conditions",
123+
"url": "/terms",
124+
"textSize": "xs"
125+
}
126+
```
127+
128+
### Title with Small-Medium Size
129+
130+
```json
131+
{
132+
"text": "Section Subtitle",
133+
"textSize": "sm"
134+
}
135+
```
136+
137+
### FileLink with Fine-Tuned Sizing
138+
139+
```json
140+
{
141+
"href": "/document.pdf",
142+
"text": "Download PDF",
143+
"textSize": "sm"
144+
}
145+
```
146+
147+
## Migration Guide
148+
149+
### For Existing Projects
150+
151+
No migration is required as this is a non-breaking change. Existing size values (`'s'`, `'m'`, `'l'`) continue to work as before.
152+
153+
### For New Development
154+
155+
Consider using the new size options where appropriate:
156+
157+
- Use `'xs'` for secondary information, captions, or legal text
158+
- Use `'sm'` when you need a size between small and medium
159+
- Continue using existing sizes for established design patterns
160+
161+
## Testing Considerations
162+
163+
### Visual Regression Testing
164+
165+
- Existing components should render identically
166+
- New size options should be tested across different themes
167+
- Responsive behavior should be verified for all sizes
168+
169+
### Schema Validation Testing
170+
171+
- Ensure new size values pass validation
172+
- Verify that invalid size values are rejected
173+
- Test editor interfaces with new options
174+
175+
## Future Considerations
176+
177+
### Potential Enhancements
178+
179+
1. **CSS Custom Properties**: Consider mapping sizes to CSS custom properties for easier theming
180+
2. **Responsive Sizing**: Explore size variations across different screen sizes
181+
3. **Semantic Naming**: Consider more semantic size names in future versions
182+
183+
### Deprecation Strategy
184+
185+
If size names need to change in the future, follow the established deprecation pattern:
186+
187+
1. Add new names while keeping old ones
188+
2. Mark old names as deprecated in documentation
189+
3. Remove deprecated names in next major version
190+
191+
## Related Documentation
192+
193+
- [System Patterns](systemPatterns.md) - Component architecture patterns
194+
- [Tech Context](techContext.md) - Technical implementation details
195+
- [Progress](progress.md) - Current project status and achievements

‎src/schema/validators/common.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
import {AnalyticsEventSchema} from './event';
1111

1212
export const mediaDirection = ['media-content', 'content-media'];
13-
export const textSize = ['s', 'm', 'l'];
13+
export const textSize = ['xs', 's', 'sm', 'm', 'l'];
1414
export const containerSizesArray = ['sm', 'md', 'lg', 'xl', 'all'];
1515
export const sliderSizesArray = ['sm', 'md', 'lg', 'xl'];
1616
export const contentSizes = ['s', 'm', 'l'];

0 commit comments

Comments
 (0)