search

Decathlon / vitamin-web

Decathlon Design System UI components for web applications
https://decathlon.github.io/vitamin-web
Apache License 2.0
279 stars 77 forks source link

bug(@vtmn/css): `VtmnDropdown` arrow icon overflowing when summary is undefined #1402

Closed 0x2A-git closed 1 year ago

0x2A-git commented 1 year ago

Describe the bug

When I leave the VtmnDropdown's summary property empty the arrow is overflowing. I've tried it on both Vue & React to make sure it was related to the component's CSS.

image

Steps to reproduce

  1. Setup vtmn vue or react project
  2. Render VtmnDropdown component
  3. Set VtmnDropdown's summary prop to undefined or ''

Expected behavior

The arrow shouldn't overflow, maybe we could add default padding ?

Browsers affected

- Chrome -> Yes
- Firefox -> Yes
- Edge ( Maybe ? )
- Safari ( Maybe ? )

Version affected

@vtmn/react: 1.1.0 @vtmn/vue: 1.1.0

jdeca-decat commented 1 year ago

Hi @0x2A-git, now it's my turn to help you ;) You can create a css rule to temporarily resolve this issue:

.vtmn-dropdown summary {
  display: flex;
  align-items: center;
}

Hope this help you !

lauthieb commented 1 year ago

Thanks @0x2A-git, I close it in favor to follow this subject here: https://github.com/Decathlon/vitamin-web/issues/1020 And I will mention your issue there. Thank you!