feat(array): hide insert above/below when max validation is reached#12061
feat(array): hide insert above/below when max validation is reached#12061wotan-allfather wants to merge 5 commits intosanity-io:mainfrom
Conversation
wotan-allfather
requested review from
jordanl17
and removed request for
a team
|
@wotan-allfather is attempting to deploy a commit to the Sanity Sandbox Team on Vercel. A member of the Team first needs to authorize it. |
|
Hi @wotan-allfather thanks a lot for this contribution! I'm taking a look over it and wondered if you felt hiding these field actions was more appropriate over disabling them (but still showing the options). Our typical design pattern is that we would likely in this instance wish to continue to present these field actions their their disabling is temporary and can be easily resolved (by reducing the number of elements in the array). Would be interested to hear your thoughts. |
|
Thanks @jordanl17! Great point. I implemented hiding because the original issue title explicitly says "Remove" the actions, but I agree that disabling (with visual indication) would be a better UX pattern here. It follows the principle of progressive disclosure and helps users understand the constraint without the options disappearing unexpectedly. I'm happy to update the implementation to disable the items instead of hiding them. Would you prefer:
Let me know your preference and I'll update the PR accordingly! |
I think the first option sounds the best - with tooltip as this most closely follows other UX patterns we employ. Thanks a lot @wotan-allfather - once these changes are in I'll get this reviewed and ensure we move things forward 😄 |
|
Thanks @jordanl17! I've pushed the update with disabled items + "Maximum items reached" tooltip. Ready for your review when CI completes. 🙌 |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
Hide "Add above" and "Add below" context menu items in array items when the array has reached its max validation constraint. This builds on the existing disableActions feature by dynamically checking if the array length has reached the max constraint defined in the schema validation rules. Implementation: - Add ArrayValidationContext to provide max-reached state to item components - ListArrayInput and GridArrayInput wrap content with ArrayValidationProvider - PreviewItem and GridItem consume the context to hide insert menu items Closes sanity-io#4317
Per maintainer feedback from @jordanl17, changed the behavior from hiding the 'Add above' and 'Add below' menu items when max is reached to instead showing them as disabled with a tooltip explaining 'Maximum items reached'. This follows Sanity's UX pattern of keeping actions visible but disabled when the constraint is temporary and can be resolved by the user.
jordanl17
force-pushed
the
feat/hide-array-insert-when-max-reached-4317
branch
from
2360609 to
7d811e6
Compare
packages/sanity/src/core/form/inputs/arrays/common/ArrayValidationContext.tsx
Outdated
Show resolved
Hide resolved
Extracts the getValidationRule lookup into a separate useMemo that only depends on schemaType (which is stable), preventing unnecessary recalculations when itemCount changes. Co-authored-by: jordanl17 <jordanl17@users.noreply.github.com>
|
@wotan-allfather have given this a test. I think we need to extend this usage to cover our other array types that are supported. Currently I think it would be great to bring some consistency across the experience for all of these in supporting the disabling of the 'insert above/below' Below is confirmation that I don't see the actions disabled of a field that is a string array |
|
Thanks @jordanl17! Great catch - I missed those array types. I'll extend the implementation to also cover:
I'll push the update shortly so we have consistent behavior across all array types! 🔧 |
Per maintainer feedback from @jordanl17, extend the disabled insert actions to also cover ItemRow (primitive arrays like strings/numbers) and ReferenceItem (reference arrays). This ensures consistent UX across all array types when the max validation constraint is reached. - ItemRow now uses useArrayValidation hook to disable insert menu items - ReferenceItem passes disabled/disabledReason to useInsertMenuMenuItems - InsertMenuGroup updated to accept disabled/disabledReason props
|
Hi @wotan-allfather - thanks again for being so proactive with these changes. We are just internally discussing this issue/improvement and I'll get back to you shortly, likely start of next week. Have a lovely weekend! |
|
Hi @wotan-allfather . There are a few extra scope ideas that the team have had off the back of the work you've done on this improvement. Primarily we think that the 'Add Item' CTA should now also disable when the limit of a array is reached too - so that we keep the entire validation experience consistent. Hopefully you are ok with me creating this branch here where I'm going to contribute a few additional commits to extend this feature just a little further, and then will move it through the PR process to get this merged and released. Alternatively if you would prefer to make these changes yourself, please let me know shortly 😄 |
2 participants
Hide "Add above" and "Add below" context menu items in array items when the array has reached its max validation constraint.
This builds on the existing disableActions feature by dynamically checking if the array length has reached the max constraint defined in the schema validation rules.
Implementation:
Closes #4317
Description
What to review
Testing
Notes for release