Calcite Buttons do not behave consistently with HTML Buttons within a CSS Flex container

[gavinr-maps]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

When a calcite button is within a container that has display: flex set, it :

1. does not get its width set correctly
2. does not have the text wrap correctly

Here is the demo: https://codepen.io/gavinr/pen/YzMrEpX?editors=1000

Expected Behavior

Calcite buttons should behave similar to plain HTML buttons when within a container that has display: flex set.

Reproduction Sample

https://codepen.io/gavinr/pen/YzMrEpX?editors=1000

Reproduction Steps

1. open https://codepen.io/gavinr/pen/YzMrEpX?editors=1000
2. See the top part, shows how HTML buttons work
3. See the bottom part - same CSS class applied to Calcite buttons but they are not behaving the same way as the top section
   

Reproduction Version

2.7.0

Relevant Info

Latest Chrome

Regression?

No response

Priority impact

p2 - want for current milestone

Impact

I have created a workaround using JavaScript but it is using .shadowRoot which is not very preferable: https://codepen.io/gavinr/pen/zYXPEPd?editors=0010

Calcite package

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

Esri team

Professional Services - Midwest Delivery Center

[macandcheese]

Because the default / intended behavior here is to truncate and not wrap (added in this issue), this might need to be re-purposed as a request to opt-out of truncation via prop vs. have it by default. Maybe something like truncation-strategy=“truncate(default)/wrap”

It also seems like the truncation behavior doesn’t work in the above scenario OOTB, so adjustments to that behavior can be looked at.

cc @ashetland @SkyeSeitz for design eyes.

Related truncation issues: #6661

[SkyeSeitz]

Agreed. Support for wrapping on calcite-button should be opt-in only to avoid oversized buttons when possible or mismatched button heights.

[ashetland]

It also seems like the truncation behavior doesn’t work in the above scenario OOTB, so adjustments to that behavior can be looked at.

Using the width prop on the buttons also doesn't seem to work in the above example.