PhET-iO Design for AccordionBox/ExpandCollapseButton

[arouinfar]

Related to phetsims/graphing-quadratics#139

We've reviewed a few PhET-iO sims with AccordionBoxes and/or ExpandCollapseButtons. There have been a few patterns we have seen (and sometimes requested), which we would like to standardize with these components.

The name of the AccordionBox in the tree should be {{title}}AccordionBox, and the underlying property of the ExpandCollapseButton should be {{title}}ExpandedProperty, where {{title}} is the label used in the sim. Here's an example from GasProps, gasProperties.idealScreen.view.particlesAccordionBox. The underlying property for the ExpandCollapseButton is called particlesExpandedProperty.

Occasionally, the title of an AccordionBox may be a mathematical expression rather than a typical string. We would still follow the same pattern, though {{title}} would be the name we give to the component. For example, see graphingQuadratics.exploreScreen.view.equationAccordionBox

There may be situations where clients may request the ability to change the title of an AccordionBox, so it may be good to include something like accordionBox.titleNode.textProperty that we can opt-in to on a sim-by-sim basis.

As an aside, I've seen cases where the title's visibleProperty is instrumented, such as graphingQuadratics.exploreScreen.view.equationAccordionBox.titleNode.visibleProperty. The model overrides the visibleProperty when the AccordionBox is expanded/collapsed, so if this property needs to be instrumented, it should be phetioReadOnly: true.

We are also curious about the potential for an option to make an AccordionBox look more like a panel if a client decides to remove the ExpandCollapseButton. Perhaps the dynamic layout work could support moving the title string over (if text is left-aligned) to fill in the missing space? This would be a lower priority request.

Here's an example when graphingQuadratics.exploreScreen.view.quadraticTermsAccordionBox.expandCollapseButton.visibleProperty is set to false:

Assigning to the PhET-iO team and tagging for discussion at PhET-iO meeting.

[pixelzoom]

When looking at the default instrumentation of ExpandCollapseButton, keep in mind that it is not used exclusively by AccordionBox. It is used in other contexts.

[samreid]

Self-unassigning until after meeting discussion.

[zepumph]

Self-unassigning until after meeting discussion.

That seems reasonable to me.

[arouinfar]

This is relevant to phetsims/circuit-construction-kit-common#917