search

themesberg / flowbite

Open-source UI component library and front-end development framework based on Tailwind CSS
https://flowbite.com
MIT License
7.35k stars 711 forks source link

accordion: item arrow icons point in wrong directions #703

Closed albertomosconi closed 5 months ago

albertomosconi commented 8 months ago

Describe the bug The arrows next to each item are opposite to where they should intuitively be pointing, and also with respect to the reference design mentioned in the original issue #23.

On top of this, when using data-accordion="collapse" and by setting aria-expanded=false for all items causes all the arrows to point down, which would be correct. However, by clicking any one item the other arrows get flipped while the clicked one remains the same.

To Reproduce Steps to reproduce the behavior:

  1. Load the default accordion component shown in the docs
  2. Notice that the first item, which is open, has the arrow pointing downwards. The other closed items have their arrow pointing up
  3. Now set aria-expanded=false also for the first item and reload
  4. Notice that now all items are collapsed and their arrows point down
  5. By clicking any one item its arrow remains in the same orientation while all other arrows are flipped.
  6. Clicking the item again flips its arrow which however is opposite to where it should point, similar to the default situation

Expected behavior When an item is collapsed its arrow should point down. When it is clicked its arrow should flip and point up, and other arrows shouldn't be affected.

Screenshots image

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context I created a CodeSandbox to better illustrate the issue: link to sandbox

AlexMNet commented 8 months ago

Looks like the adding and removing of the "rotate-180" class logic was backwards in the accordion index.ts. Fixed in a PR.