One of the main ideas for this project was to only implement the stateful aspects of the APG patterns, and leave the styling for developers who wish to build on top of these components.
The issue here is that styling is tightly coupled with the state since the most appropriate way of representing a collapsed panel is with display: none; rather than hidden or aria-hidden. So there's a bit of a conflict of interest - if I maximize for being unopinionated, it means developers will need to add their own styling to handle hiding/showing the panel. Even if it's trivial to implement, the goal of this project was to make implementing the state for the APG patterns as easy as possible. And because it's trivial to implement, I feel like I should just provide it for others!
But, what would be a good way to provide display: none; in an agnostic manner? What if they want to use an HTML attribute like hidden?
Maybe have <AccordionPanel> accept a function as a prop that modifies className, style, and rest, and it defaults to setting style = { display: 'none' }? Might have to think through minor conflicts if this function sets attributes that are also passed to the component, e.g. the function sets hidden but hidden is also passed to <AccordionPanel> as a prop with a different value. At that point, it almost feels like a render-like function that modifies rest in general.... might potentially need 2 props (one for "generic rest modifier" and another for "handle expand/collapse"), but that feels cumbersome and unwieldy.
One of the main ideas for this project was to only implement the stateful aspects of the APG patterns, and leave the styling for developers who wish to build on top of these components.
The issue here is that styling is tightly coupled with the state since the most appropriate way of representing a collapsed panel is with
display: none;rather thanhiddenoraria-hidden. So there's a bit of a conflict of interest - if I maximize for being unopinionated, it means developers will need to add their own styling to handle hiding/showing the panel. Even if it's trivial to implement, the goal of this project was to make implementing the state for the APG patterns as easy as possible. And because it's trivial to implement, I feel like I should just provide it for others!But, what would be a good way to provide
display: none;in an agnostic manner? What if they want to use an HTML attribute likehidden?Maybe have
<AccordionPanel>accept a function as a prop that modifiesclassName,style, andrest, and it defaults to settingstyle = { display: 'none' }? Might have to think through minor conflicts if this function sets attributes that are also passed to the component, e.g. the function setshiddenbuthiddenis also passed to<AccordionPanel>as a prop with a different value. At that point, it almost feels like a render-like function that modifiesrestin general.... might potentially need 2 props (one for "genericrestmodifier" and another for "handle expand/collapse"), but that feels cumbersome and unwieldy.