Names for block width conventions in the UI

[jameskoster]

In #45364 width controls are being added to various container/child blocks.

We have:

1. Fixed - The block will have a user-defined static width.
2. Fill - The block width will expand to fill empty space in its container.
3. Hug - The block width will be based on the cumulative width of its children.

"Fixed" and "Fill" feel okay, but "Hug" may not translate so well, so we should explore alternatives. A couple of ideas:

• "Wrap contents" – the 'contents' suffix may not be necessary, but I include it because "wrap" can have different meanings in other contexts.
• "Constrain".
• "Inherit".
• "Fit".

What do you think?

[tellthemachines]

"Hug" may not translate so well

We needn't worry about the translatability of whatever word we use in English; translations aren't usually a literal word-for-word process. What we should do is add a translator's note to clarify exactly what that word means in that context, so translators can find the best equivalent in the other language.

I do think it's hard to convey exactly what this control does in one word, whatever the language used, so perhaps we should look at adding some helper text somewhere that explains the difference between the options. Fit/fill might be familiar to folks who know CSS, but not everyone using these tools does.

[jameskoster]

The original designs had helper text so we should definitely add that 👍

Fit/fill might be familiar to folks who know CSS

That's a good point. It's probably a solid heuristic to at least start with the recognised terms, so those who are familiar are able to interpret them. Fill/Fit makes sense to me.

[tellthemachines]

Thanks, I've updated the PR to use "fit" instead of "hug". There's a slight issue with the help text placing as I wasn't able to add it to the UnitControl component, so it's still sitting under the toggle when "fixed" is selected:

Ideally we should be able to add help text to any component, but this situation also raises an issue for accessibility: shouldn't the help text always be associated with the toggle, as opposed to the unit control? (Currently it's not associated with anything, it's just output inside a p tag, but that should change because screen readers just ignore it as it is.)

[jameskoster]

Yeah I guess this design doesn't really respect the control/helper text convention, IE the text should describe the purpose of the toggle rather than the individual values within it.

An alternative option would be to do something like: