StreamField min and max block counts UI

[nicklee]

(orginally reported by @Scotchester in https://github.com/wagtail/wagtail/discussions/9553 - https://github.com/wagtail/wagtail/discussions/9553#discussioncomment-4197392)

The StreamField help text is displayed below the list of blocks, which makes it easy to miss.

There have been designs of how we could represent StreamField’s minimum and maximum block count rules. They would be worth revisiting a bit, before we get implementing.

Note important considerations:

• Minimum and maximum block counts can be set at any level of a hierarchy of blocks.
• For ListBlock, minimum and maximum counts are simple to keep track of since there is only a single type of block within the list.
• For StructBlock, child blocks can be of different types, and the min/max counts can also be defined per child block type.

[nicklee]

Perhaps we could look at moving the help text under the label, so it sits above the interactive element (textarea, input etc). They seem to get especially lost on longer textareas, which it could be argued that when the field has content already the help text is less useful, but not in the instance where a different editor has entered the original text.

GDS forms use this order and I can't see that changing the order would cause any issues, but would be good to check with @benenright if he's aware of any fragile areas (refered to as hint text: https://govuk-elements.herokuapp.com/form-elements/#form-fields)

[nicklee]

Example of hint/help text being display above the field/under the field label here:

https://www.figma.com/file/h67EsVXdWsfu38WGGxWfpi/Wagtail-Design-System?node-id=9761%3A87615&t=Z4FNWS6ZSX048gOW-1

We should chat about the min/max block counts.

[Scotchester]

Real-world example of lost StreamField help text

JPL’s “navigation” settings comprise 7 distinct StreamFields (all collapsed by default), and it’s not always easy to remember the exact purpose of each. When expanding one, you may not realize that there is help text for it at the bottom.

And then even when you scroll it into view, it's not easy to understand that the help text applies to the StreamField above. It’s not very visually associated with the StreamField as a whole.

[thibaudcolas]

FYI – help text will be moved above the fields in the next release. min/max block counts still in progress (reviewing different design approaches).

[benenright]

Update on design thinking on this:

Appending the min/max block count to the help text creates an inconsistent placement of this information, since help text is optional and varies in length. See below:

Perhaps a more consistent solution is to use a dotted horizontal top-border for the top of the Streamfield area, where we can then append the min/max block counts to the end of it, associating it visually with the Streamfield title.

We have also explored the idea of making the Streamfield dotted borders red when you have an invalid block count, so that you are signified of this even when you do not have the top of the Streamfield in view (ie. scrolled down to lower blocks).

We could go one step further by also adding an alert icon in the Minimap.

The other place where it feels relevant to see the min/max block counts is within the Block chooser. But in here we also want to show where there are limits on specific block types. We are still considering what format to show this info for a specific block type. Ie. the format Blocks used:3 (Min:3, Max:10) is pretty verbose to show within the chooser UI within/alongside each block type button.

Welcome any thoughts on this.