feat(builder): containers package -- vertical alignment + box-model/anim/vis rollout
- ColumnLayout: exposes style.alignItems on its flex ROW (aligns uneven columns) -- render/toHtml already spread `style` onto the row div, so this is a craft.props default + panel control addition, no structural change. - Container/Section: root element is now unconditionally display:flex; flex-direction:column (both editor render and toHtml), so the new Vertical Alignment control maps to style.justifyContent, paired with a Min Height (NumericUnitInput) control on style.minHeight. Default justify-content/align-items reproduce ordinary block-flow stacking, so this is a visual no-op for existing published content. Works in both normal and "boxed" (contentWidth) modes -- the boxed inner wrapper's own margin:0-auto horizontal centering is preserved via flex auto-margin override semantics. - ContainerStylePanel (serves Container/Section/Columns) distinguishes the Columns case from Container/Section via nodeProps.columns/split presence (no typeName plumbing needed) to pick align-items vs justify-content for the shared Vertical Alignment control. - All 3 owned components: added margin/padding (per-side)/border/box-shadow/ opacity style defaults + AnimationControl/VisibilityControl-backed animation/animationDelay/hideOnDesktop/hideOnTablet/hideOnMobile props. New containerBoxModel.tsx (package-local, not shared.tsx) DRYs the box-model + border/effects + animation/visibility panel sections across the single shared ContainerStylePanel, mirroring the sibling media package's mediaBoxModel.tsx. - Tests: extended all 3 *.toHtml.test.ts files (align-items/justify-content/ min-height emission, box-model style emission, craft.props presence). 673 tests green, tsc + vite build clean. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -63,3 +63,71 @@ describe('Container.toHtml tag allowlist (adversarial re-review, same class as C
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe('Container.toHtml vertical alignment (justify-content + min-height)', () => {
|
||||
test('is always a column flex container (display:flex;flex-direction:column)', () => {
|
||||
const { html } = toHtml({}, 'child');
|
||||
expect(html).toContain('display:flex');
|
||||
expect(html).toContain('flex-direction:column');
|
||||
});
|
||||
|
||||
test('style.justifyContent flows into the emitted style attribute', () => {
|
||||
const { html } = toHtml({ style: { justifyContent: 'center' } }, 'child');
|
||||
expect(html).toContain('justify-content:center');
|
||||
});
|
||||
|
||||
test('style.minHeight flows into the emitted style attribute', () => {
|
||||
const { html } = toHtml({ style: { minHeight: '400px' } }, 'child');
|
||||
expect(html).toContain('min-height:400px');
|
||||
});
|
||||
|
||||
test('justify-content and min-height still flow through in boxed (contentWidth) mode', () => {
|
||||
const { html } = toHtml({ contentWidth: 'boxed', style: { justifyContent: 'flex-end', minHeight: '500px' } }, 'child');
|
||||
expect(html).toContain('justify-content:flex-end');
|
||||
expect(html).toContain('min-height:500px');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Container.toHtml box-model styles (margin/padding/border/shadow/opacity)', () => {
|
||||
test('margin/padding/border/box-shadow/opacity all flow into the emitted style attribute', () => {
|
||||
const { html } = toHtml(
|
||||
{
|
||||
style: {
|
||||
marginTop: '10px', marginRight: '10px', marginBottom: '10px', marginLeft: '10px',
|
||||
paddingTop: '5px',
|
||||
border: '2px solid #ff0000',
|
||||
boxShadow: '0 4px 8px rgba(0,0,0,0.12)',
|
||||
opacity: '0.8',
|
||||
},
|
||||
},
|
||||
'child',
|
||||
);
|
||||
expect(html).toContain('margin-top:10px');
|
||||
expect(html).toContain('padding-top:5px');
|
||||
expect(html).toContain('border:2px solid #ff0000');
|
||||
expect(html).toContain('box-shadow:0 4px 8px rgba(0,0,0,0.12)');
|
||||
expect(html).toContain('opacity:0.8');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Container.craft.props exposes the vertical-alignment/box-model/animation/visibility rollout', () => {
|
||||
test('animation, animationDelay, hideOnDesktop/Tablet/Mobile are present with blank/false defaults', () => {
|
||||
const props = (Container as any).craft.props;
|
||||
expect(props.animation).toBe('');
|
||||
expect(props.animationDelay).toBe('0');
|
||||
expect(props.hideOnDesktop).toBe(false);
|
||||
expect(props.hideOnTablet).toBe(false);
|
||||
expect(props.hideOnMobile).toBe(false);
|
||||
});
|
||||
|
||||
test('style carries blank/default vertical-alignment and box-model keys', () => {
|
||||
const style = (Container as any).craft.props.style;
|
||||
expect(style).toHaveProperty('justifyContent');
|
||||
expect(style).toHaveProperty('minHeight');
|
||||
expect(style).toHaveProperty('marginTop');
|
||||
expect(style).toHaveProperty('paddingTop');
|
||||
expect(style.border).toBe('none');
|
||||
expect(style.boxShadow).toBe('none');
|
||||
expect(style.opacity).toBe('1');
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user