Show slot constraints in the Builder and the Scaffold

Changing the tag to have the full remaining scope in a single query: https://www.drupal.org/project/issues/search/display_builder?text=&assig...

I put "Novice" tag because the difficult part of this ticket is not the implementation, but the UI/UX proposal. It is also a way of welcoming proposal from occasional contributors.

Hi! I'd like to contribute to this issue, starting with the `maxItems` part.

My initial proposal is to show the current count in the slot label (for example, `Content 1/1`), visually distinguish full slots, and indicate during dragging when a dropzone cannot accept another item. I'd aim to keep the feedback consistent across the Canvas, Scaffold, and Navigator, while making sure the slot's accessible name communicates the same constraint.

I'll first inspect the existing `data-max-items` handling and the relevant UI components to see how best to implement this without duplicating state.

Does this direction fit what you had in mind? I'm happy to refine the UI proposal before starting the implementation.

Hi Krishna,

Thanks for you interest on this topic.

My initial proposal is to show the current count in the slot label (for example, `Content 1/1`), visually distinguish full slots, and indicate during dragging when a dropzone cannot accept another item.

That an interesting proposal.

However, the information we want to convey is broader than a slot having max items and being full or not. The main information is "can i add something to a slot?

We have isDropzoneLocked(element) in dropzone.js which is only wrapping isDropzoneFull(element) for now, but there will be other mechanisms "locking" the dropzone (#3551232: Add a lock system, #3617065: Expected components constraints for slots...).

If you can add such count (for example, `Content 1/1`), that's cool, but it must not be added against a more generic and reusable visual clue.

I'd aim to keep the feedback consistent across the Canvas, Scaffold, and Navigator, while making sure the slot's accessible name communicates the same constraint.

Sounds nice.

Be careful: this ticket is only about displaying information, not about mechanisms preventing adding something to a slot, which has been done in #3627023: Duplicate is offered where it can only fail: a full root or slot

You are welcomed to assign the ticket to you :)

Thanks for the clarification! I understand the distinction now: the primary visual clue should communicate whether a slot can accept content, regardless of why the dropzone is locked. The item count can be supplementary information, but it shouldn't be the mechanism users rely on to understand whether adding content is possible.

I'll keep this issue focused on displaying the existing dropzone state, without changing the logic that prevents additions. I'll inspect how `isDropzoneLocked(element)` and the existing dropzone attributes are exposed to the Canvas, Scaffold, and Navigator, then propose a consistent visual treatment before implementing it.

I'll assign the issue to myself as suggested.

exposed to the Canvas, Scaffold, and Navigator

"Canvas" is now called "Builder"

I am doing a UX review, will report results later today...

Hi @juc1, please assign to tou if you are doing review.

@wkr1shna is still assigned but has finished they work, so I believe it is OK to switch.

Thanks for the update! I'm happy for @juc1 to take over the issue for the UX review. The implementation is pushed to MR !524, and I'm available to address any feedback or follow-up changes that come out of the review.

UX review of MR !524 using \tests\modules\display_builder_test\components\test_slot_constraints with
slot title "Slot with 2 items max".

The MR gives very helpful visual information about slot capacity and locked status. A few suggestions:

1. Add brackets to delineate the count from the SDC name:
   Currently (without MR): Slot with 2 items max
   With this MR: Slot with 2 items max 2/2
   Suggestion: Slot with 2 items max (2/2) or Slot with 2 items max (2/2 items used)
   (Brackets help separate the component author's label from the system metadata, especially when the slot name ends in a number or word like "max").
2. Add a hover tooltip to the slot title on constrained slots:
   For slots with maxItems, a hover tooltip on the slot title would clarify the status for users, for example:
   "2 / 2 items used - this slot is full and cannot accept more items"
3. Padlock SVG:
   The current inline SVG padlock shape is not clear in my browser - suggestion: change the SVG to the official Bootstrap Icons lock-fill https://icons.getbootstrap.com/icons/lock-fill/ and perhaps make it slightly larger (such as 0.875rem instead of the current 0.75rem).
4. Builder badge width & truncation:
   @pdureau Even without this MR, slot titles get truncated in the Builder view due to:

   /* components/dropzone/dropzone.css:135-140 */
       .db-dropzone[data-slot-title]::before {
         position: absolute;
         top: 0;
         left: 0;
         max-width: var(--dropzone-label-max-width); /* 10rem (160px) */
         white-space: nowrap;
         text-overflow: ellipsis;
       }

   Because the count is appended to the end, the new constraint count gets swallowed by the ellipsis (e.g.
   🔒 Slot with 2 items m...). Notice that in Scaffold view it does not truncate (second screenshot below).

   Allowing a bit more width specifically for constrained slots fixes this without changing the global 10rem token:

   .db-dropzone[data-slot-title][data-slot-count]::before {
         max-width: 14rem; /* or min(15rem, 50%) so it never reaches the right corner */
       }

Item count works correctly:

Truncation in Builder view: