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:
@@ -27,6 +27,11 @@ interface SectionProps {
|
||||
bottomDividerColor?: string;
|
||||
bottomDividerHeight?: string;
|
||||
anchorId?: string;
|
||||
hideOnDesktop?: boolean;
|
||||
hideOnTablet?: boolean;
|
||||
hideOnMobile?: boolean;
|
||||
animation?: string;
|
||||
animationDelay?: string;
|
||||
}
|
||||
|
||||
/* ---------- Divider renderer ---------- */
|
||||
@@ -105,6 +110,14 @@ export const Section: UserComponent<SectionProps> = ({
|
||||
id={anchorId || undefined}
|
||||
style={{
|
||||
width: '100%',
|
||||
// Section's root is always a column flex container so
|
||||
// `style.justifyContent` (Vertical Alignment control, paired with
|
||||
// `style.minHeight`) has an axis to act on -- see the matching note
|
||||
// in Container.tsx for why this is a no-op for existing content
|
||||
// (default justify-content/align-items reproduce ordinary block
|
||||
// stacking).
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
position: (hasTopDivider || hasBottomDivider) ? 'relative' : undefined,
|
||||
...style,
|
||||
}}
|
||||
@@ -143,7 +156,17 @@ export const Section: UserComponent<SectionProps> = ({
|
||||
Section.craft = {
|
||||
displayName: 'Section',
|
||||
props: {
|
||||
style: { padding: '40px 0', backgroundColor: '#ffffff' },
|
||||
style: {
|
||||
padding: '40px 0',
|
||||
backgroundColor: '#ffffff',
|
||||
minHeight: '',
|
||||
justifyContent: '',
|
||||
marginTop: '', marginRight: '', marginBottom: '', marginLeft: '',
|
||||
paddingTop: '', paddingRight: '', paddingBottom: '', paddingLeft: '',
|
||||
border: 'none',
|
||||
boxShadow: 'none',
|
||||
opacity: '1',
|
||||
},
|
||||
innerMaxWidth: '1200px',
|
||||
topDivider: 'none',
|
||||
topDividerColor: '#ffffff',
|
||||
@@ -152,6 +175,11 @@ Section.craft = {
|
||||
bottomDividerColor: '#ffffff',
|
||||
bottomDividerHeight: '50px',
|
||||
anchorId: '',
|
||||
animation: '',
|
||||
animationDelay: '0',
|
||||
hideOnDesktop: false,
|
||||
hideOnTablet: false,
|
||||
hideOnMobile: false,
|
||||
},
|
||||
rules: {
|
||||
canDrag: () => true,
|
||||
@@ -202,6 +230,8 @@ function buildDividerHtml(
|
||||
|
||||
const outerStyle = cssPropsToString({
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
position: (hasTopDivider || hasBottomDivider) ? 'relative' : undefined,
|
||||
...props.style,
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user