fix(@clayui/picker): LPD-28522 Fix language selector not displaying correctly on web content

liferay / clay

A web implementation of the Lexicon Experience Language

http://clayui.com

Other

207 stars 470 forks source link

fix(@clayui/picker): LPD-28522 Fix language selector not displaying correctly on web content #5835

Closed ilzamcmed closed 3 months ago

ilzamcmed commented 3 months ago

Ticket: https://liferay.atlassian.net/browse/LPD-28522

Motivation

The language selector is not displaying correctly: the labels of the status are overlapping the language key and the number of fields is not appearing.

Proposed Solution

Be able to set an auto width so that the menu can grow with the content.

Screenshots

Commits

fix(@clayui/picker): LPD-28522 Add option to add auto width
fix(@clayui/picker): LPD-28522 Update picker stories

ilzamcmed commented 3 months ago

Heu @matuzalemsteles @pat270 @ethib137 This PR is ready for review! Thanks

matuzalemsteles commented 3 months ago

I sent a commit to simplify the implementation a little bit.

ethib137 commented 3 months ago

Nice work on this @ilzamcmed and @matuzalemsteles . LGTM.

I think we really need some tests for this to ensure the menu continues behaving as expected in all the examples we listed on this PR. I don't mind if we merge this first and create a separate task to add the tests. What do you guys think? Do tests seem helpful for this?

matuzalemsteles commented 3 months ago

I think we can leave the examples in the stories with menu open by default to do this as a chromatic test, the unit test is a little bad for reproducing this because normally the sizes are fake and it is not very reliable because this is normally a mock.