Enh: container/section vertical alignment + box-model/anim/vis #19

2026-07-14T13:56:10Z

jknapp commented

2026-07-14 13:56:10 +00:00

Vertical alignment for Container/Section (justify-content + min-height) and align-items for Columns, plus box-model + animation/visibility across the three layout components. Flex conversion is gated on vertical-align actually being set so plain containers stay block-flow (no regression to inline-block children). All style values flow through cssPropsToString. 675 tests.

🤖 Generated with Claude Code

Vertical alignment for Container/Section (justify-content + min-height) and align-items for Columns, plus box-model + animation/visibility across the three layout components. Flex conversion is gated on vertical-align actually being set so plain containers stay block-flow (no regression to inline-block children). All style values flow through cssPropsToString. 675 tests. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

jknapp added 2 commits 2026-07-14 13:56:11 +00:00

feat(builder): containers package -- vertical alignment + box-model/anim/vis rollout 9750a6c2bf

- 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>

fix(containers): only flex-convert Container/Section when vertical-align set (avoid blockifying inline-block children) 4a426e3513

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

jknapp merged commit d6666f6f79 into main

2026-07-14 13:56:11 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: cloud-hosting-platform/site-builder#19