Add an option for AccordionBox to reduce its width when collapsed

[jessegreenberg]

For phetsims/trig-tour#113, to use AccordionBox it would need to reduce its size when collapsed to only surround the title.

[jessegreenberg]

useContentWidthWhenCollapsed is a new option after the above commit.

It behaves like the above images. I decided to keep the collapsing behavior (putting the title just to the right of the ExpandCollapseButton) even when titleAlignX is not 'left'. That was easiest to implement, but it also seems like the most expected behavior. That was added in this part.

Otherwise, this new option should work with the other layout options. I added it to the sun demo to test.

Over slack @marlitas offered to work on this issue and mentioned dynamic layout. @marlitas do you have time to review this? Would you recommend dynamic layout instead? Do you agree the behavior is OK with titleAlignX: 'center' and titleAlignX: 'right'?

EDIT: In 12ffbce I added support for minWidth with this option, which I found when I worked on phetsims/trig-tour#113.

[marlitas]

I fixed a typo that you did not introduce above, and also added a review comment for the following.

It seems like some code might be redundant.

    if ( reduceWidthCollapsed ) {
      // boxes will only surround the button and title

      minimumBoxWidth = Math.max( minimumBoxWidth, this.expandCollapseButton.width + options.titleXSpacing + minimumTitleWidth + options.titleXMargin );
    }

that Math.max calculation is happening during the initial minimumBoxWidth definition already. It doesn't seem possible to get a different result. The Math.max calculation you added also seems to be missing options.butttonXMargin if you do want to keep it.

    let minimumBoxWidth = Math.max(
      options.minWidth,
      options.buttonXMargin + this.expandCollapseButton.width + options.titleXSpacing + minimumTitleWidth + options.titleXMargin
    );

[marlitas]

Would you recommend dynamic layout instead?

Sorry when I mentioned that in Slack I mostly meant working at the common code level of maintaining dynamic layout code. Overall the approach you went with is what I would have also done :-)

Do you agree the behavior is OK with titleAlignX: 'center' and titleAlignX: 'right'?

I double checked the code on that and it seems to be the correct behavior for both