Match scales between actions and their icons

[nwhittaker]

Description

The scale of the icon within an action can become mismatched from the action's scale. At m and l scales, this causes the icon to become disproportionately sized relative to the amount of padding the action places around it.

The extra white-space becomes more noticeable when the action is slotted in a list or panel action-bar. It is also noticeable when compared with a button which has a snugger padding scale.

One option is to not downscale icons within actions. However, this could cause action icons to appear larger than non-action icons within the component.

Another option is to match the same padding scale as buttons, but I can understand there being accessibility concerns with ensuring the s scale is a big enough target. Barring that, I'd suggest revisiting the action padding and maybe have it match the scale of its icon. In other words, the action s scale styles remains unchanged, its m scale has larger text but the same padding as its s scale, and its l scale takes on the same padding as the original m scale.

Proposed Advantages

When composing a layout with Calcite components, I routinely find myself scaling actions one step below the host component's scale to ensure their white-space is consistent with how other component's scale themselves. Refactoring actions' scaling to be more consistent with other components' would make them more plug-and-play and consistently sized across apps.

Which Component

Action

Relevant Info

No response

Calcite package

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