feat(builder): preview layout controls — per-field column width, stack/wrap options, responsive stacking#89
Open
garrity-miepub wants to merge 9 commits into
Open
feat(builder): preview layout controls — per-field column width, stack/wrap options, responsive stacking#89garrity-miepub wants to merge 9 commits into
garrity-miepub wants to merge 9 commits into
Conversation
…ng, restyled section header - Replace two-column label grid with label-on-top across all field previews - Remove redundant pb-4 from field preview roots; reduce card padding p-6 -> p-4 - Restyle section header: subtle bg-msprimary/10 tint, standard text, no radius
- Add FieldWidth (full|half|third) and width prop to field definitions - Render width-driven 6-col preview grid in Canvas - Add Row width control to edit panel for non-section fields - Add OptionLayout (stack|wrap) for radio/check fields - Add Options layout control to edit panel for radio/check - Preview: no card chrome, wider max width for regular-form look
garrity-miepub
changed the title
garrity-miepub
changed the title
- Extend optionLayout (stack | wrap) support to the multitext field, matching radio/check; wrap flows inputs horizontally with a min-width and an inline column/row gap matching the boolean buttons (ms:gap-* doesn't generate under prefix(ms), so gap is applied via style) - Surface the Options layout control for multitext in CommonEditor - Add matching px-4/py-2 padding inside the section preview body so content aligns with the section header
There was a problem hiding this comment.
Pull request overview
This PR updates the builder “preview” experience to support a denser, more configurable layout (per-field row width, responsive stacking, and option stack/wrap behaviors) while also standardizing preview field label layout (label-on-top) and tightening spacing/padding across preview cards and sections.
Changes:
- Introduces per-field
width(full/half/third) and preview-mode grid packing in the builder Canvas with responsive stacking below a breakpoint. - Adds
optionLayout(stack/wrap) support for multitext, and surfaces an “Options layout” control in the edit panel. - Restyles preview field headers and section preview chrome; removes redundant preview root paddings and reduces card padding.
Reviewed changes
Copilot reviewed 24 out of 24 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/renderer/src/lib/components/FieldNode.tsx | Reduces renderer preview card padding (p-6 → p-4). |
| packages/fields/src/fields/text/TextField.tsx | Moves preview label to Input-provided label-on-top; adjusts unit adornment positioning. |
| packages/fields/src/fields/text/MultiTextField.tsx | Adds wrap layout support for multitext preview options. |
| packages/fields/src/fields/text/LongTextField.tsx | Switches preview layout to label-on-top spacing. |
| packages/fields/src/fields/selection/RadioField.tsx | Switches preview layout to label-on-top; adds wrap layout branch for options. |
| packages/fields/src/fields/selection/MultiSelectDropdownField.tsx | Switches preview layout to label-on-top spacing. |
| packages/fields/src/fields/selection/DropdownField.tsx | Switches preview layout to label-on-top spacing. |
| packages/fields/src/fields/selection/CheckField.tsx | Switches preview layout to label-on-top; adds wrap layout branch for options. |
| packages/fields/src/fields/selection/BooleanField.tsx | Switches preview layout to label-on-top spacing. |
| packages/fields/src/fields/section/SectionField.tsx | Restyles section header/body and adds inner padding for alignment. |
| packages/fields/src/fields/rich/SignatureField.tsx | Removes redundant preview bottom padding. |
| packages/fields/src/fields/rich/ImageField.tsx | Removes redundant preview bottom padding. |
| packages/fields/src/fields/rich/DiagramField.tsx | Removes redundant preview bottom padding. |
| packages/fields/src/fields/rating/SliderField.tsx | Switches preview layout to label-on-top spacing (removes responsive grid). |
| packages/fields/src/fields/rating/RatingField.tsx | Switches preview layout to label-on-top spacing (removes responsive grid). |
| packages/fields/src/fields/rating/RankingField.tsx | Switches preview layout to label-on-top spacing. |
| packages/fields/src/fields/matrix/SingleMatrixField.tsx | Removes redundant preview bottom padding. |
| packages/fields/src/fields/matrix/MultiMatrixField.tsx | Removes redundant preview bottom padding. |
| packages/core/src/lib/types.ts | Adds FieldWidth/OptionLayout types and field definition properties. |
| packages/core/src/index.ts | Re-exports new core types (FieldWidth, OptionLayout). |
| packages/builder/src/lib/EsheetBuilder.tsx | Widens preview panel max width. |
| packages/builder/src/lib/components/FieldWrapper.tsx | Simplifies preview wrapper chrome/styling behavior. |
| packages/builder/src/lib/components/edit-panel/CommonEditor.tsx | Adds “Row width” and “Options layout” controls. |
| packages/builder/src/lib/components/Canvas.tsx | Implements preview grid packing + responsive stacking logic. |
- Add width to baseFieldProps Zod schema and BASE_PROPERTIES allowlist, and optionLayout to multitext/radio/check schemas and FIELD_TYPE_PROPERTIES so normalizeFieldDefinition no longer strips them and strict validation accepts saved forms that use half/third width or wrap layout (round-trip safe) - Replace non-generating ms:gap-x-4/ms:gap-y-1 on radio/check wrap containers with inline columnGap/rowGap (prefix(ms) doesn't emit axis-specific gap utilities), matching the MultiTextField fix
… comment - TextField preview: restore the soft (warning) vs hard (danger) required asterisk instead of the single @mieweb/ui Input required flag, matching the other 13 field previews - RadioField: set RadioGroup orientation based on optionLayout (horizontal when wrap, vertical when stacked) to keep aria-orientation and keyboard nav correct - CommonEditor: update stale 'radio / check only' comment to include multitext
Display fields use a separate displayBaseFieldProps (not the shared baseFieldProps), so DisplayFieldDefinition.width was still rejected by the strict schema. Add the same optional width enum so display fields with a non-full row width round-trip through validation.
- TextField preview: ms:pr-16 (was unprefixed pr-16, not generated under prefix(ms)) so the unit suffix no longer overlaps the input value - Canvas: fix explanatory comment to reference ms:sm:grid, not sm:grid
…view Revert the manual required-asterisk label back to the @mieweb/ui <Input label required> component. Standardizing on the shared Input is the intended direction; the soft/hard required color distinction is intentionally dropped in favor of the component's built-in label/required handling. Keeps ms:pr-16.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
esheet-ui-updates.mov
the existing radio/check behavior; wrap flows inputs horizontally with a
min-width and inline column/row gap (ms:gap-x-* doesn't generate under
prefix(ms), so gap is applied via style)
aligns with the section header