Components with "content" should refrain from Decorator Pattern

[marlitas]

Components that handle the layout of their children such as: ButtonNode, AccordionBox, Panel, Carousel, etc should not use the decorator pattern. Adding children to these components outside of the "content" or "contentNode" seems like an anti-pattern. We would like to discourage these Node subclasses from adding children through options or mutation.

Affected ButtonNode Subclasses:

• [ ] RectangularRadioButton (sun)
• [ ] LevelSelectionButton (vegas)
• [ ] SmallStepsLockToggleButton (quadrilateral)

Affected AccordionBox Subclasses:

• [ ] EnergyBarGraphAccordionBox (energy-skate-park)
• [ ] EnergyGraphAccordionBox (energy-skate-park)
• [x] ShoppingQuestionsAccordionBox (unit-rates)
• [x] PHAccordionBox (ph-scale)

Affected Panel Subclasses/Usages:

• [ ] BAAScreenView (build-an-atom, labelVisibilityControlPanel)
• [ ] PieChartLegend (energy-skate-park)

[marlitas]

Dev Meeting 12/7/23

JO: Any objections to refactoring to remove these usages?

• No Objections, it will be loud to prevent future usages.

[pixelzoom]

I'll be happy to address refactoring any in the sims that I'm responsible for. I see 2 so far in the list above, which I'll take care of now.

[pixelzoom]

Some other common-code UI components that have "content" (not a complete list) ...

• Checkbox
• Dialog
• Carousel
• KeyboardHelpSection

[marlitas]

Thanks @pixelzoom! I'll keep going through components to make a comprehensive list. I will plan on refactoring the common code components that need this work done.

[pixelzoom]

In case it's useful, I added this at the end of relevant constructors to identify culprits:

    this.childrenChangedEmitter.addListener( () => console.log( new Error( 'children changed' ).stack ) );

[marlitas]

So far none of these components have raised any errors:

• Checkbox
• Dialog
• Carousel
• KeyboardHelpSection

I'll continue checking components that use the "content" pattern, especially those that extend sizable.

[marlitas]

Tested components:

• [x] AccordionBox
• [x] AlignBox
• [x] AquaRadioButton
• [x] AquaRadioButtonGroup
• [x] ButtonNode
• [x] Carousel
• [x] Checkbox
• [x] Dialog
• [x] KeyboardHelpSection
• [x] NumberControl
• [x] Panel
• [x] RichText
• [x] Slider

[marlitas]

This would be good to put on the radar again. I would love some help as I don't think I have the bandwidth to complete myself. I'll add it to the dev board to discuss in the next meeting and see if I can wrangle a co-conspirator.