EuiAccordion - allow user to control open state from the outside

[mbondyra]

I am implementing some changes for lens and using EuiAccordion.

I need to control the accordion from the outside because it has to change state to open when we search through the fields (see the screenshot, point 3). However, we still want to preserve the functionality of toggling it from the according header (eg.’ > available fields’) and that’s impossible once we control it from the outside (with a param forceState). I tried:

• Adding onClick as a prop of Accordion, but it toggles the accordion even if we click on the internal content (eg. products.discount from the screenshot)
• Adding onClick on buttonContent, but it doesn’t toggle when clicking on the accordion arrow ‘>’ and paddings areas.
• Implementing provided onToggle handler that would modify external state, but it only fires as a callback on open and close so it will never be fired

I need a handler onAccordionClick etc that would allow me to add a function that would modify the external state when clicking on the top.

[thompsongl]

I've not fully weighed both options, but I think there are two possibilities when forceState is in use:

1. Overload onToggle. Right now, forceState prevents onToggle from doing anything useful. We could allow onToggle to fire with a single parameter of open/closed state, but prevent any internally directed state updates.

2. Add a new callback prop specifically for external control. Same as above, but perhaps more clear that user has full control of state.

[chandlerprall]

At first glance, I like option 1 better. The user is still requesting a toggle, and that should be reported back to the application to respond however it sees fit.