Page MenuHomePhabricator

Update Card component: supporting icon size
Closed, ResolvedPublic

Description

Background

At the moment, in T321470 we proposed to update the supporting text in the Card component from 16px to 14px to match the Figma spec sheet where supporting text is 14px in both desktop and mobile platforms.

The 20px supporting icon looks now a bit big when supporting text using 14px on mobile (check this patch).

Captura de Pantalla 2023-02-28 a las 19.03.17.png (888×1 px, 456 KB)

Proposal

What if we decrease the supporting icon from 20px to 16px on both desktop and mobile?

Captura de Pantalla 2023-02-28 a las 19.06.57.png (514×1 px, 251 KB)

Design spec

Open questions

Add here the questions to be answered in order to design and implement the component

Acceptance criteria (or Done)

Design

  • Design the Figma spec sheet and add it in this task
  • Update the component in the Figma library. This step will be done by a DST member.

Code

  • Implement the component in Codex

Event Timeline

bmartinezcalvo moved this task from Inbox to Needs Refinement on the Design-System-Team board.

FWIW, there is no prop for supporting icon, it is just included in the slot for supporting text. If we do decide that 16px icons work better in this text, we could recommend that people use the size prop of the Icon component to set the size to small. Another option would be to add a new prop to the Card component called supportingIcon, but I don't know that there are other use cases for an icon at the beginning of the supporting text other than the NearbyPages example. I would recommend against adding this new prop, unless we think this is a pattern that will be used elsewhere.

Another option would be to add a new prop to the Card component called supportingIcon, but I don't know that there are other use cases for an icon at the beginning of the supporting text other than the NearbyPages example. I would recommend against adding this new prop, unless we think this is a pattern that will be used elsewhere.

I agree that this is not necessary – users of the Card component already provide supporting text via a slot. In that same slot they can also include custom icon sizes or anything else that they need.

I think that it is sufficient to update our documentation to show what we consider to be the best way to use this: if a user wants to include an Icon along with Card supporting text, they should consider setting its size to small.

Based on the above feedback, I would recommend we close this task and, if desired, open a new task specific to updating the documentation.

If we learn that we need to update the component to enforce more control over the icon placement because of real-world usage, then we can re-open this.

egardner claimed this task.

Based on the above feedback, I would recommend we close this task and, if desired, open a new task specific to updating the documentation.

If we learn that we need to update the component to enforce more control over the icon placement because of real-world usage, then we can re-open this.

I agree. Based on the implementation of supporting text (which uses Vue's <slot> feature), any Icons that are placed in the supporting text area of the Card component are completely under the control of the end-user. They can (and should, in most cases) use the small icon size for any icons which go inside of this region. To put this another way, Icons in the "supporting text" area of the Card component are not built-in; they are the responsibility of the user.

The Codex docs on the Card page have been updated to mention this.

One use case of a card with a supporting custom icon is the portrait card from Homepage where this supporting icon size is also 16px. So I think it's worth creating a supportingIcon prop once we implement the portrait in T310632. cc: @RHo

Captura de Pantalla 2023-03-07 a las 10.34.47.png (1×1 px, 119 KB)

Since the supporting icon is now small size 16px, I've created this new version in the Figma exploration file to reflect the changes and also I've updated the main component in the Codex library.