input with slotted content (e.g. calcite-button) has a mismatch of component heights when root-font size has changed

[JonnyDawe]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

calcite-input allows you to use a slotted action next to the text input box.

We have found that if the root font size has been changed e.g. by a user altering their default font-size in chrome for accessibility purposes, then the button inside of the input becomes misaligned. Please see the codepen below for the observed behaviour.

Expected Behavior

Ideally the button would stretch to match the height of the input.

Reproduction Sample

https://codepen.io/JDawe/pen/jOQXdRp

Reproduction Steps

See the repro sample. The behaviour can be observed by changing the root font size to a non-standard value (e.g. 24px).

Changing the default font-size typically occurs when a user over-rides the default value inside of their browser.

Reproduction Version

1.4.3

Relevant Info

No response

Regression?

No response

Priority impact

p4 - not time sensitive

Impact

A UI bug. It doesn't effect functionality, but definitely does not look correct.

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react

Esri team

N/A

[geospatialem]

e.g. by a user altering their default font-size in chrome for accessibility purposes

@JonnyDawe Can you speak more to the use case for accessibility purposes?

Familiar with users altering their text size via their OS, and via browser zoom in/out - so want to learn more about altering the :root.

[JonnyDawe]

Hi @geospatialem - altering the :root value in this case was to demonstrate the impact of changing the font size within the browser settings e.g. within chrome (see picture below). This has a similar effect to the css altering the :root value I believe.

As we build a cross-platform app (e.g. using cordova/electron) we have chosen to provide a settings menu which can change the :root font size of the document which is similar to how the browser allows the default value to be altered via a settings menu.

[geospatialem]

Appreciate the context and use case, thanks much @JonnyDawe! While not a workaround for a custom settings action altering the root, users should still be able to interact via OS settings and browser zoom in/out while Calcite works on prioritizing the issue.

[brittneytewks]

We're going to wait until Design Tokens and reevaluate to see if this is addressed

[geospatialem]

Blocked by #7180 per comment ☝🏻 .

Will explore the feasibility of the request in the effort of #7180.