[Chip, Chip Group] "xs" scale variant

[dmartini-zrh]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

The Chip (and Chip Group) component currently exists in 3 scale variants.
The smallest is scale="s" and uses --calcite-font-size--2 text (12px).

When chips are used to label low level items in the UI, such as List Item at scale="s", this variant still looks big.
In such use case, it would be nice to have a smaller scale variant e.g. using --calcite-font-size--3 text (10 px) to keep the Chip hierarchically below the item it refers to.

Acceptance Criteria

• Allow Chips to use the smallest font size in Calcite

Relevant Info

Such small Chips could be limited to text-only use cases (no selection or closing controls, no avatars, no icons).

Which Component

Chip (also affecting Chip Group)

Example Use Case

Example:

(Basemap gallery in Scene Viewer)

Priority impact

impact - p3 - not time sensitive

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Scene Viewer

[macandcheese]

As a workaround you can override the font-size with tokens: https://codepen.io/mac_and_cheese/pen/ByBrpbx?editors=100

This might even be the preferred way to achieve this, vs. adding a "special" scale here cc @SkyeSeitz @ashetland @matgalla for design thoughts.

[dmartini-zrh]

Thanks @macandcheese this looks neat 👍
We did something similar, but IMO it's still good to wrap up our thoughts

[ashetland]

I think the primary concern with adding an xs scale to Chip is that the Calcite UI Icons would be too large. @macandcheese @SkyeSeitz, do we have concerns about scaling icons down to 12px for this? I think the only place we force a scale on icons is in Tile, right? Another option is adding a 12px size to all the icons, but that's not a small ask 😅.

[macandcheese]

Yeah, I don't think we'd want to really handle icons that way - should be more systemic in nature and maybe in tandem with some other types of scaling changes. In this case, just seems like a font-size adjustment to the "closest workable scale" might be the best approach?

[SkyeSeitz]

Agreed overriding the font-size with tokens would be the best approach since it would problematic to provide an xs scale that cannot fit our icons.