[Button / FAB] Improve scale of internally rendered icons

[macandcheese]

Description

Noted as feedback on Button / FAB - but possibly relevant in other places where icons are rendered internally.

Button / FAB of scale S, M, L all render a <calcite-icon> of scale S internally. We should consider bumping the scale of that icon to M when the parent Button / FAB is scale L.

Unfortunately the icons don't scale with the component sizes, but in the case of L Button / FAB - the rendered icon is too small.

Acceptance Criteria

Button / FAB (and other components if needed) render an M size icon from provided Calcite UI Icon strings instead of S

Relevant Info

cc @ashetland

Which Component

Button / FAB

Example Use Case

Using a FAB or Button of scale L - the rendered S icon is comically small, and takes away from the intent of using a large button / fab to begin with.

[ashetland]

Is this something we want to look at for v1/ui-kit-v2?

[macandcheese]

If possible - from a code standpoint its a small change so we'd just need to look at design implications.

[ashetland]

If possible - from a code standpoint its a small change so we'd just need to look at design implications.

Yep, I think this should be doable. @SkyeSeitz we should sync up on this to discover ramifications and feasibility.

[ashetland]

On the Design and Figma side, we would be good to include this update to Button and FAB. Padding adjustments would be made to maintain height.

Should we look at applying this approach across Calcite? For example, Chip uses a S icon at the L scale.

[jcfranco]

Priority bumped and triaged to this sprint. cc @brittneyzwolfer @benelan @geospatialem

[adepottey]

@jcfranco Checking in on this - are we still on track to get a fix for this by mid-November? I see the milestones have shifted a few times.

[Elijbet]

Here is a list of relevant Items with a similar issue. What do we think about these? @ashetland @macandcheese @jcfranco Accordion-Item Chip Combobox and Combobox-item Dropdown Input and input-date-picker Link Notice Pick-list-item Radio-group Tab-title

[jcfranco]

@Elijbet Thanks for putting that list together. I'll defer to @ashetland @macandcheese on that.

@adepottey I meant to reply sooner, but yes, this should be available by mid-November.

[github-actions[bot]]

Installed and assigned for verification.

[ashetland]

We discovered an issue with this related merged PR (https://github.com/Esri/calcite-components/pull/5521) that needs a design adjustment. It looks like the height of the component changes when the new 24px icon is present. Our recommendation would be to maintain the 44px height with or without icon.

We're starting to look at the rest of the list and we should have the specs outlined by the end of next week. cc: @SkyeSeitz

[geospatialem]

Re-routed to design for review.

[adepottey]

@Elijbet @jcfranco - having a bit of trouble understand the status, would it be possible to get an update on the timeline for this issue?

[geospatialem]

@adepottey Thanks for following up!

We're still aiming for mid-November, within the next week to finalize the changes. More shortly!

[github-actions[bot]]

Installed and assigned for verification.

[geospatialem]

Verified in next.664 with the following Codepen sample.