search

Asad-acc / Design-System

0 stars 0 forks source link

Create tag component #18

Open Asad-acc opened 1 year ago

Tosin-Balogun commented 1 year ago

The basic details of the components seem accurate on desktop and mobile (font size, padding et al)

Only issue is the size of the text box doesn't have a breakpoint.

When the user is typing long form content, it spills over the screen, see screenshot below. This happens on both desktop and mobile version of the component.

Image

Consider setting the text box width to the common sizes used on NHS website or design system

Asad-acc commented 1 year ago

The shortcomings you've mentioned above are known, but it would be great to get your input on potential alternatives. To wrap the text, the tag component container needs to be set at a fixed width and the inner container needs to be set to fill. However, this approach may cause some issues:

  1. Users would need to manually set the size of the tag, which could deviate from the service manual. The padding would be consistent, but the width of the tag would be customised by the user and inconsistent.
  2. If we insert a fill container, smaller tags would occupy the full width of the container even when the text doesn't require it.

I am open to any suggestions you may have on the implementation. I've assumed that most tags will be less than the total width of a container/page. If it's an edge case, the designer will have to manually adjust the design until Figma incorporates a min/max width setting for us to use.