Components: refining `ItemGroup`

[ciampo]

This is an overview issue to track all of the tasks necessary to refine the ItemGroup component in the context of integrating with the new design and primitives.

ItemGroup and Item

• [x] #35152
• [ ] Consider the best way to associate a Heading to ItemGrop (and to link it in a semantic way as the title of the group)
• [ ] Consider using the @wordpress/components Button element instead of vanilla HTML button
• [ ] Consider reworking how separators and borders are applied (at the CSS rule level too), as it currently assumes a rigid DOM structure (see https://github.com/WordPress/gutenberg/pull/37067#discussion_r761807702)
• [ ] Add tooltip support for Item (how would that work with screen readers? e.g. consider making sure that the Item's computed "aria-label` is the same text used in the tooltip)
• [ ] #36653
• [ ] Improving the component's flexibility, especially around how it currently expects Item to be a direct child of ItemGroup (examples of where that fell short: https://github.com/WordPress/gutenberg/pull/37067#discussion_r761807702 , https://github.com/WordPress/gutenberg/pull/37546#discussion_r784263364)
• [ ] Clean up semantics (use ul / li) (comment)

Integration with other components

• [ ] Explore all text-related components, and see how they behave when inside an Item
  • [ ] For example, text inside Truncate changes color when hovered/focused, while text inside Text doesn't
• [ ] Find potential patterns and "sinergies" that may benefit from the Context System, so that the UI looks great "auto-magically" when using ItemGroup in combination with other components
• [ ] #35210

[mtias]

What would be the purpose of the organizational unit for grouping ItemGroups? Trying to understand what it'd represent.

Should the tooltip be on each ColorSwatch component?

As a general rule, tooltips should be applied to actionable items. So if the entire Item is the action, the tooltip should be general: "Link color red; hover color blue" or something.

[ciampo]

What would be the purpose of the organizational unit for grouping ItemGroups? Trying to understand what it'd represent.

This is a screenshot from an early version of the Global Styles Sidebar prototype — here there are 2 different ItemGroups components, grouped under the "Palette" and "Elements" headers.

In that older prototype version, those ItemGroups were groups using a component called ListGroup, which currently doesn't exist in Gutenberg. When trying to move that earlier prototype to Gutenberg (#32923), tyxla used instead the Panel component (for lack of a better alternative)

These are the reasons behind the current state of the Grouping ItemGroups section in the description. Do you have any suggestions/insights on the best direction to take here?

As a general rule, tooltips should be applied to actionable items. So if the entire Item is the action, the tooltip should be general: "Link color red; hover color blue" or something.

That makes sense. In this case, then, we should definitely think about the best way for ItemGroup to support tooltips for each Item.

We should probably also add tooltip support for the future ColorSwatch component — although this tooltip won't be used when the ColorSwatch is used inside of an ItemGroup (we're going to use the Item's tooltip instead)

[mtias]

It seems to me ItemGroup with a title prop, a heading sibling, or a heading child should be sufficient? Not sure I see why it'd need an extra layer of componetry since the group is already defined.

[ciampo]

It seems to me ItemGroup with a title prop, a heading sibling, or a heading child should be sufficient? Not sure I see why it'd need an extra layer of componetry since the group is already defined.

This makes sense — we don't have to necessarily group ItemGroup components the same way they were grouped in the early prototype. I've updated this issue's description with what's been discussed and agreed upon in the last exchange.