Make clear ActionList.Item's `trailingIcon` can be a component

[six7]

The component props of ActionList.Item suggest that trailingIcon can be either an icon or similar.

  /**
   * Icon (or similar) positioned after `Item` text.
   */
  trailingIcon?: React.FunctionComponent<IconProps>

Would a Label be considered appropriate usage for this? If so, should we update props to allow more generic usage?

In addition to this, leadingVisual has the same definition but it's name ("Visual") suggest a more generic usage, I'm wondering if this differentiation in name is still appropriate.

  /**
   * Icon (or similar) positioned before `Item` text.
   */
  leadingVisual?: React.FunctionComponent<IconProps>

In effect, this is what I'm envisioning:

[colebemis]

Thank you! I added this to our project board.

[broccolini]

This may just be a renaming issue, it sounds like the team were able to implement with existing functinoality. @jfuchs will confirm, and @vdepizzol will review api naming.

[dusave]

@jfuchs and I worked and found that it actually is supported, but the naming and the prop restrictions (IconProps) were confusing. This is no longer a blocker, but it would be nice to make it clear (if Primer wishes to support it) that it supports React Components as either Leading or Trailing elements

[vdepizzol]

@six7 @dusave @colebemis I took the permission to rename this issue to address the API naming specifically, since custom components are already supported. ✨

Some background on current props and behaviors:

1. Currently we have leadingVisual to represent the left-aligned section. So far we only support 16px visuals, being icons or avatars or other custom visuals. Originally this was also scoped to support 20px, with planned support for more custom sizes in the future. In terms of naming, I think "visual" works here since it's always referring to a compact, icon-like square area.

2. For the right-aligned section, as documented in the design specs, we can have icons, counters, custom-styled text, and keyboard shortcuts being applied here. In the API right now we have both trailingIcon and trailingText, the first supporting any component, and the latter only accepting strings.

3. In theory both trailingIcon and trailingText can be used together (I could picture a case of an actionList item with a right arrow on the right-most corner, with a trailing text on its side describing a selected value). Testing that quickly shows that there's no spacing between the two elements, though.

Options

We could adopt trailingVisual for the right-aligned component, making it obvious that side area can be used for more components than just icons. That's also how we refer to it in the design docs, even though they are not exactly the same as leadingVisual in terms of behavior (one being always in a square container, the other supporting flexible widths).

If we think there's a need to make it more accurate, we could name it to something more generic, like trailingArea or simply trailing, but I think that could be even more confusing as having visual to the prop may help identifying what it ultimately does ✌️.

@jfuchs @colebemis @six7 thoughts?

A draft of tasks discussed above

• Rename trailingIcon to trailingVisual
• Fix horizontal spacing when using trailingVisual and trailingText are used in tandem (8px as usual)
• How to support multiple different leadingVisual sizes? (at least add support for 20px avatars to start besides our current 16px icons)

[dusave]

Just my two cents as a consumer, trailingComponent would make it clear as well as use predefined nomenclature. WRT the leading, is there a reason to restrict the widths? Ideally, it would be square, but that could be handled by the consumer (if it's an icon, that sizing is handled by the icon component itself).

Honestly, an even more approachable.... approach, would be to allow the contents of the cell to be defined, but without requiring all iterations to be redefined (e.g. hover interactions, colors, dividers, etc.) When we didn't know we could use the trailingIcon prop, I started to go down this route and quickly got overwhelmed with the amount of logic and styling that I would need to handle myself.

[six7]

We could adopt trailingVisual for the right-aligned component, making it obvious that side area can be used for more components than just icons. That's also how we refer to it in the design docs, even though they are not exactly the same as leadingVisual in terms of behavior (one being always in a square container, the other supporting flexible widths).

👍 to trailingVisual for consistency with existing docs and other props. Also, we're currently treating that prop with IconProps - I think we should update that as well to reflect a more generic usage?

[vdepizzol]

FYI we're adopting trailingVisualto be used in the ActionList component in Primer CSS — @langermank and I have been working on it here, with a PR to primer/css here.

[siddharthkp]

Implemented in #1521 / v31.0.1 :)