search

axa-ch-webhub-cloud / pattern-library

AXA CH UI component library. Please share, comment, create issues and work with us!
https://axa-ch-webhub-cloud.github.io/plib-feature/develop
125 stars 18 forks source link

Radio minWidth should be computed on window resize events #2399

Open GianlucaGuarini opened 1 year ago

GianlucaGuarini commented 1 year ago

Please only report technical bugs. Clarify design issues in the slack channel #ux-ui-support.

A radio input of type button <axa-radio button> computes the min-width of it's content only once breaking its responsive behavior.

Expected Behavior

The width of the .a-radio__content.js-radio__content should be responsive and not fixed via min-width inline styling.

Current Behavior

The content of the radio button breaks if the window gets resized.

Steps to Reproduce

  1. Open this storybook link
  2. Resize you browser window (make it smaller than your initial viewport)
  3. See the horizontal scroll appearing

Context (Environment)

Possible Solution

Let the noAutoWidth attribute prevent this issue. At the moment it's bypassed if the radio is of type button. Eventually recompute the minWidth on window resize.

GianlucaGuarini commented 1 year ago

I have played a bit with the code of the radio buttons and I think that this issue can be solved removing the noAutoWidth and minWidth javascript options. Using the css display:grid; combined with gap properties I have been able to solve all the display issues I have identified.

MKaHead commented 1 year ago

Thank you @GianlucaGuarini I would also prefer something like this display:grid; combined with gap. @markus-walther