search

Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
269 stars 75 forks source link

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

Open gavinr-maps opened 3 months ago

gavinr-maps commented 3 months ago

Check existing issues

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 image

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 team

Professional Services - Midwest Delivery Center

macandcheese commented 3 months ago

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: https://github.com/Esri/calcite-design-system/issues/6661

SkyeSeitz commented 3 months ago

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

ashetland commented 1 month ago

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.