@dan I’m wondering about some of the design choices in the accordion component. I like to be able to use a hover effect on the header so that users can tell when they are over the header to expand it. But to get the hover effect you have to set the background color for the ENTIRE component. This then has the downside that when the user has expanded the component if you hover over the CONTENT area it will highlight even though you can’t click in the content to toggle it..
Setting this background color also means you then have to set a different color in the content area if you don’t want the whole content area highlighted on hover.
Initially, I had tried to handle the hover effect with the text placed in the header, but that didn’t work either because the text cannot extend the full width of the header due to the icon, which is separate. Plus, text cannot set hover colors so that would only work if you carefully chose the background and text colors.
It would be so much nicer if there was a better way to do all this. The component already has “title” and “content” magic sections.
At the very least if a container could be placed in the header that could extend under the icon, then the hover effect could be handled with that container. But as it is now it could not handle the area under the icon.
There is a partial solution I have figured out where I place a flex in the header with text inside it along with an SVG for the icon. So the icon from the accordion is not being used. This partially works except the state of the icon cannot be managed the same way as it can in the component.
Any chances of enhancing the component or providing additional settings to address some of these concerns?
