Upgrade design system

[dcousens]

(this is a draft)

[gautamsi]

@dcousens I believe this is a blocker for #9186 ? Do you have any figma/design link we can provide feedback on ? is this going to refresh only the design elements or the design of the page overall? like the hints provided 2 years ago in a developer talk?

[kennedybaird]

@jossmac - How do you test for a wide range of fields, do you run the sandbox with "all the things"?

We used a Status select which made everything read only once past "draft". This showed a bunch of UX that could be improved - they may seem as less common use-cases, but I have noticed a lot of projects that use in this way (and have done myself a few times).

• null values on End Date, Reviewer
• disabled drop down on User, Reviewer, Tags
• Poorly used space with "View User details"

--

We could add a simple checkbox to make them all read only in the sandbox project - wdyt @dcousens?

[dcousens]

@kennedybaird I think adding a checkbox (or cookie, or) that can easily switch between different field modes will be incredibly helpful in debugging UX

[kennedybaird]

@kennedybaird I think adding a checkbox (or cookie, or) that can easily switch between different field modes will be incredibly helpful in debugging UX

@dcousens - to clarify, you'd like this to expand the current tests/sandbox, or a new project in tests/test-projects?

[dcousens]

tests/sandbox, but I think we can defer to @jossmac to know if that is useful in this pull request, or separately

[dcousens]

@gautamsi

I believe this is a blocker for https://github.com/keystonejs/keystone/pull/9186?

Yes, I think this is blocking

Do you have any figma/design link we can provide feedback on?

Unfortunately, the design work completed in 2022 and 2023 (that we intended to make public) was superseded by work in Keystatic

[gautamsi]

@jossmac I am sure you have noticed my work in #9186 We should move in the direction of SSR friendly design so that any SSR only rendering with NextJs 15 and react 19 should not require major rework in this regards. They are around the corner and my idea is to move towards App router with maximizing SSR use in admin ui.

[kennedybaird]

tests/sandbox, but I think we can defer to @jossmac to know if that is useful in this pull request, or separately

@jossmac, I'm going to start on this in another branch.

Also, wanted to point you towards #8402 if you haven't seen it - maybe you can factor that into this PR?

[jossmac]

Known issues:

• keystone-ui component instances still litter more than a few corners of the repo
• ui within packages outside "core" haven't been reviewed
• relationship field was a mess, best efforts to update ui but i'm certain there's issues
• multi-select doesn't have filters
• list item selection dissonance between ALL and all in page
• list initialSort isn't respected
• some docs will be incorrect after this lands

Potential improvements:

• the cell contents of numeric fields (decimal, float, integer), and maybe temporal fields (timestamp,calendarDay) should be right aligned
• filter label should own complete render, allowing things like "not published" instead of "published is false"
• support user controlled cell density—needs UI and storage implementation
• support consumer controlled initial column widths—needs implementation
• support user controlled column widths—needs storage implementation
• support user controlled color-scheme—this might need to be prioritised, since old UI portions could be visually inaccessible depending on user preferences
• filter tags offer poor UX on mobile devices; consider something like AirTable's approach with a dedicated dialog. could also be an opportunity to introduce AND/OR functionality
• introduce item "actions" concept, which may solve consumer hacks

[gautamsi]

@jossmac @dcousens Is there any timeline on completion on this?

[dcousens]

@gautamsi I think a significant amount of time is needed for QA and documenting or resolving any regressions, maybe the next step is an alpha RC

[gautamsi]

lets plan to do alpha release soon along with #9186 and kill two birds with one stone. I can prepare my branch with changes from design update.

[jossmac]

For context @gautamsi, I had a few weeks between client projects which I was able to dedicate to this refactor but that's come to an end. I should hopefully find time here and there for bug fixes etc. however it will be far less focused.

[gautamsi]

@jossmac It is going to be difficult to keep waiting for the community. It seems there is no intention to add major changes to the project, it would be good to open this up for community for governance.

I know as a company Thinkmill may have other priority and even new Keystatic but there are so much to work on here.

I have already started using my own release on npm, it would be good to have direction on this repo to make informed decision.

[dcousens]

@gautamsi #9186 and this going out together, and soon, an an alpha sounds good to me; let's try for next week

[gautamsi]

Blocker for alpha - Relationship create is not there, it is only a placeholder alert. This needs in some form to be able to get to alpha

[jossmac]

@gautamsi Relationship create in 3bf76ef

@dcousens Prohibit nested item creation via new "environment" prop on fields, which omits the "add" menu item of relationship field's contextual actions when rendered within a create dialog

[gautamsi]

you plan to add that features separately? nested add? or deprecate this?

[jossmac]

you plan to add that features separately? nested add? or deprecate this?

Definitely deprecate, nested modal dialogs are:

• a huge accessibility violation
• awful for UX; it's too easy for the user to lose context
• prone to malformed data (orphaned items) when the user bails during the operation

It's unlikely that we'll revisit this feature anytime soon, maybe in the future a sensible pattern will emerge.

[gautamsi]

things looking good, we should prepare for the beta/preview release

[gautamsi]

@dcousens I have tried this branch today, found only one issue, When you create a relationship item in dialog and hit create, it actually triggers create on main list instead of relationship list

[dcousens]

@gautamsi I can't reproduce that, did you have a config you could share?

[gautamsi]

found this in usecase-relationship-union example start this example and see video for behavior

https://github.com/user-attachments/assets/e8876bef-68e4-47a6-b8a6-72527d3ebcda

[gautamsi]

I see this is being fixed to an extent, I see that the newly created item is not visible in the dropdown, it has blank label if you try to dropdown, but there is "go to item" option in "..." menu next to relationship drop down

[jossmac]

@dcousens @gautamsi The nested form submission issues should be fixed by 9cada64, please confirm.

[gautamsi]

@jossmac not yet, it did fix the problem of parent creation but the newly created Link is not displayed in the relationship dropdown, see the screen recording of same. It seems the label is not set properly also if you click on dropdown, it removes newly create item from the list.

Other thing I noticed that in released version the Link would not be created and be sent as nested create to Media. That is definitely I prefer as if the Link gets created right away and user cancels Media creation, the link stays. Also if there are hooks on Link creation which checks Media and does something, will be lost.

https://github.com/user-attachments/assets/81e5c9e9-a91d-4422-9a64-c71e459c8a2d

[socket-security[bot]]

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/[email protected]	None	+1	52 kB	sindresorhus

🚮 Removed packages: npm/@dnd-kit/[email protected], npm/@dnd-kit/[email protected], npm/@dnd-kit/[email protected], npm/@popperjs/[email protected], npm/@svgr/[email protected], npm/@svgr/[email protected], npm/@svgr/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/[email protected]

View full report↗︎

[dcousens]

This pull request is pretty big, and we could probably keep working on it for quite a while, but it's time to move to the next phase and put out an RC for wider testing.