vanilla-js-dropdown icon indicating copy to clipboard operation
vanilla-js-dropdown copied to clipboard

Add is-open class to the button when dropdown is open

Open doubleedesign opened this issue 1 year ago • 3 comments

Enables styling for the button specific to the open state, such as rotating the arrow.

doubleedesign avatar Jul 22 '22 09:07 doubleedesign

@doubleedesign Hey Leesa, just wanted to ask what do you think about having the same openClass for both the list and button? What's better in your opinion:

  1. Let them define ul.openClass and button.openClass in the CSS and call it a day, or
  2. Create a new class for buttons, i.e. openClassButton and rename the existing to openClassList, so we have two distinct classes each for its own element?

zoltantothcom avatar Jul 22 '22 13:07 zoltantothcom

Thanks for the quick response @zoltantothcom!

I think both have their merits: I did #1 for simplicity, to not make more changes to the existing code than is necessary to achieve this feature, but your second suggestion is potentially more robust - there would be no confusion about what .is-open is referring to in the CSS if it isn't targeted more specifically. I'm not sure what the best thing to call the button class would be though - maybe something like list-is-open or dropdown-is-open.

doubleedesign avatar Jul 22 '22 13:07 doubleedesign

My first thought was about renaming .is-open --> .is-open-list and having the new .is-open-button, but that can potentially break it for people who already have styles for .is-open, so it's probably better to leave it as is. And the new one - for consistency with .is-selected and .is-open that's already there, I'd name it .is-open-btn or something like that 🤷‍♂️

zoltantothcom avatar Jul 22 '22 13:07 zoltantothcom