[6.x] wrapFieldsInCards mode for forms #11757
Merged
Conversation
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
jackmcdade
added a commit
that referenced
this pull request
May 12, 2025
* Initial dump
* Upgrade to Tailwind 4
* undo tw upgrader change to JS blurs
* bring back a few (temp) defaults from tw3
* Fix event names
* just a few more jangwangled blurs
* Strip out enough custom classes to get rid of tailwind.config.js
* Reconnect dark mode
* Wire up text, textarea, and a few cards
* Use imports
* Checkboxes fieldtype
* Radio fieldtype
* Start hooking up the global header
* Float fieldtype
* Accept string or number (needed for float fieldtype)
* Integer fieldtype
* apply prettier to ui components
* WIP user dropdown
* Fiddle with wip light/dark mode picker
* New Nav style and icons. Move icons around a bit.
* Tighten up theme switcher buttons
* Hook new Toggle component up to the Theme picker
* Initial file to be able to use multiple imports ...
eg import { This, That, TheOther } from '@statamic/ui';
* Calendar, DatePicker, and DateRangePicker ...
- Bring the calendar inline. They need the picker-specific sub-components. These might get extracted out again.
- Add DateRangePicker
- Use imports
- Get rid of computed, just accept modelValue prop as-is. At least for now.
* Allow the calendar component to accept subcomponents in a prop
* Inline modes, pass along min/max as-is.
* Hook up theme selector via new Statamic.$theme helper
* Require jsdom and fix test ...
Looks like jsdom got removed in a vitest update.
* Some cleanup
* unnecessary import
* Global layout progress + wangjangling
* [6.x] Date fieldtype (#11647)
* Remove v-calendar ...
Goes from
2,136.10 kB │ gzip: 561.62 k
to
1,952.96 kB │ gzip: 508.49 kB
* Time fieldtype, based on TimePicker component. Remove imask dependency.
* Use a blade component for docs callout
* half-measure style tweak for colleciton listing
* First pass rolling out headers, docs callouts, and cards/panes
* wip DataTable child components
* typecast updater badge count
* Adjust updates badge
* Fiddle with the getting started widget
* Update a few more page headings
* Get around a few layout shifts
* Style most of the entry publish sidebar
* tid
* render statamic icon w/ blade to avoid layout shift
* Style a clear button for datepicker
* increase date picker hover/active state bg color for contrast
* Center calendar cells
* Checkbox items can now be disabled
* Support HTML in <ui-descriptions>
* Add support for character limits on text inputs
* remove superflous bits and bobs
* wip semi-static command palette
* cmd palette footer constrast
* For Jesse
* Add max height and scrolling
* some cmdpal footer tids
* Decrease contrast on date field slash separators
* Fiddle with main nav
* Every good fiddle needs a little more fiddle
* Modernize the Markdown Fieldtype JS
* wip markdown ui
* Move Markdown Toolbar to its own component
* not using this
* tweak small badge border radius
* Wire Publish Actions dropdown up (looks like butt soup though)
* field spacing
* show/hide nav + animation
* Style Publish form Save Button + Dropdown
* not used anymore
* Pretty up Revisions
* Set proper conditional button variant
* use a new burger menu icon
* Tighten up markdown footer
* No delay by default for tooltips
* Add a bunch of stuff (and icons) to the Playground
* Use new Markdown icon
* Separate out UI-focused SVGs from Icons
* fix a few more mis-mapped icons
* Rework icon loader logic to lazy load from globs instead of single file paths
* Wire up Switch, improve style a bit, add sizes
* show all the switch sizes
* Sidebar -- make some suggestions to improve legibility/contrast
* Split the difference on the siderbar
The larger sizes and higher contrast was drawing too much focus to the nav. It should be an afterthought, a thing that's there but out of the way, and it was just too prominent. I also want to avoid tons of different font sizes all over — there's a subtle consistency at play the less sizes you can use.I
did increase the contrast overall a shade though, added a more visible hover and active state, and left the darker gray-100 bg color (although i feel its too dark but i can live with it).
Also, small caps titles make the UI feel super dated – I don't want to use them anywhere, sorry!
* Missed a few little things.
* nudge button icons
* push config section headings and descriptions into ui card panels
* update edit header
* fix shadow
* wip collection widget
* use 2 spaces
* use the latest reka
* contrast bump
* wip collection widget refactor with pagination in header
* [6.x] Command Palette (Part 1) (#11699)
Co-authored-by: Jack McDade <[email protected]>
Co-authored-by: Jason Varga <[email protected]>
* Polish up pagination prev/next and adjust filled button
* Extract a StatusIndicator component
* hack fix command palette stomping over the user dropdown for some reason 🤔
* Extract a nice reusable base ui Widget component
* placeholder Visit Website button+icon
* fix import
* [6.x] Form widget with relative dateformatter preset (#11708)
Co-authored-by: Jason Varga <[email protected]>
* Add action button to link to all form submissions
* half-wangjangled Updates widget wip slop
Couldn't figure out how to get all the data cleanly into the data-list so it kinda just is meh. This component would be a good use case for a much simpler new table component thing. 😅
* Go to a more abstract sm, md, lg widget size system
* Use real `<a>` so user can cmd+click, middle click, etc. to open in new tab.
* responsive tweaks for widgets
* Localize the widget @container
* big wip to data tables/entry listing
* Make labels always a string
* Hook up select, use in pagination
* Style pagination size
* index
* import from statamic/ui
* Import components throughout vue rather than using <ui- globals ...
Also includes a bunch of prettier changes for edited files.
* rename select
* no longer need to handle index.vue
* nudge the nav connectors over
* bump markdown button icon size back up
* Bring back per-page condition
* Improve search placeholder text ux
* Filters stay inline and scroll
* Dim non-selected rows when there are selected rows
* Filter button with a badge counter
* Stub out Filter modal
* tooltip not needed when label is showing
* dark mode for default badge color
* xs switch size
* tidy up
* First pass on Replicator Stylez
* Set collapse/expand animation
* Badge support for appended icons + icon hover style
* fix widget alignment
* Tighten up docs callout, add external link icon
* temp color fix
* Support size prop on CreateEntryButton
* New Collections Index layout. WIP.
* Better collection island card panel things
* badges should be inline-flex
* Column Picker uses new modal
Probably needs a redesign anyway tho
* Make the whole Replicator Add Set area clickable
* no tabby
* Tab to next result.
* tab moves down, shift+tab moves up
* Add icon prop to Header, roll it out on edit forms
* Add `@statamic/ui` alias to vite plugin
* Revert "Add `@statamic/ui` alias to vite plugin"
This reverts commit ed07a31.
* Reapply "Add `@statamic/ui` alias to vite plugin"
This reverts commit 30d9b1e.
* Export UI components
* Tidy up
* [6.x] wrapFieldsInCards mode for forms (#11757)
* wrapFieldsInCards mode for forms
* A Flexbox "Grid" for blueprint column sections
* A Flexbox "Grid" for blueprint column sections -- neater
* refactor flex basis grid, make new fieldtype-width-class helper
* ...and make it responsive
* fix tests
---------
Co-authored-by: Jay George <[email protected]>
* Fix sortable column text alignment
* Create container doesn't need to be primary
* Larger icon for base size icon-only buttons
* Users listing UI
* fix spacing
* rough update to Range fieldtype
* support text prop for group append/prepend
* Style Video Fieldtype
* Accept a wider range of Types for text props
* wip
* wip refactor
* wippidy wippidy wip
* wip
* wip
* wip
* slider controls thumbnail size
* Save the assetThumbnail size to preferences
* Fix slider's initial data state
* Selected state
* tids and bits
* Better use of Folder space
* use a transparent color so it shows when against gray-100
* truncate asset filenames from the middle so you can see the extension
* remove innacurate comment
* prevent filetype icons from getting too big
* Bring back Bulk Actions, add animate in
* Fix asset selection watcher
* Use count as deselect all button
* Mode watcher
* fix editor disappearing
* Nudge AssetBrowser table into new UI style
* put the breadcrumbs somewhere at least
* code style tweaks
* remove extraneous closing tag
---------
Co-authored-by: Jason Varga <[email protected]>
Co-authored-by: Jay George <[email protected]>
Co-authored-by: Jesse Leite <[email protected]>
Co-authored-by: Duncan McClean <[email protected]>
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.
Made this a PR so it's easier to undo/discard if we don't use it.
This sets a new wrapFieldsInCards prop that lets settings forms alter the publish form layout so each field is in a card inside a panel, instead of the card being a section only thing. It does present some additional challenges we'll need to solve for wrapping/growing settings.