Bug: calcite-input no longer has the same height as calcite-action

[AdelheidF]

With next.261. It was fine with beta.60.

calcite-input and calcite-action have both scale=s.

Actual Behavior

Expected Behavior

Reproduction Steps or Sample

Relevant Info

Version: @esri/calcite-components@<version>

• CDN
• NPM package

[bstifle]

@asangma currently the actions are at 32px, 48px, 64px.

Would you be down with getting actions down to 24, 32, 44 like buttons, inputs, selects, etc?

[julio8a]

I see this one is still in the refactor to-do. We can prioritize it to match the height scale of all other components.

Would there be any reason this component should NOT match the scale as all other components?

[julio8a]

If there are no objections with updating the heights of calcite-action: S (24px) , M (32px), and L (44px) we can have this one updated this sprint by prioritizing calcite-action Figma/tailwind refactor. Will wait until 8/9 for feedback/comments on this.

[asangma]

@bstifle will need to see how that affects..kinda everything.

It would have broad effects in existing implementations.

As a note, when Action is not showing text and is just the icon, medium would be 32x32 which I believe is smaller than suggested mobile touch size.

It's also pretty small hit areas for widely separated interfaces like left and right action-bars.

[bstifle]

@asangma agreed. pretty much all the layout components utilize action.

another way around this would be to not use actions in tandem with inputs, per the OG issue. use a native button and style accordingly

[AdelheidF]

another way around this would be to not use actions in tandem with inputs, per the OG issue. use a native button and style accordingly

This is a breaking change for a bunch of our components. Also, I'd have to figure out how to make the focus states look the same.

[AdelheidF]

What about adding a size XS for calcite-action that would then match calcite-input? Still a breaking change, but at least it's easy to fix.

[macandcheese]

Couldn't actions that are slotted in those locations just use scale="l", just a 4px change from current?

[asangma]

I see two things going on here.

1. We could add styles in Input to target a slotted Action in the same way we're doing it for Button. (we do this is other places effectively)
2. Input currently sets heights based on scale. We should consider letting the height be defined by the font sizes and padding.
3. We can also update Input styling to be more responsive to its slotted content. (we do this is other places effectively)

[asangma]

Note that 1. is probably the simplest approach though I think 2. should be considered at some point as a separate discussion. And 3. is probably a broader philosophical suggestion toward more flexible componentry.

[AdelheidF]

Solving this issue now by applying a height of 24px to the action to make it match the input.