From 21013a8574c27c997027bd795011eb92f5e0b126 Mon Sep 17 00:00:00 2001
From: Michael Kauzmann <michael.kauzmann@colorado.edu>
Date: Wed, 15 May 2024 16:15:10 -0600
Subject: [PATCH] move accordionBox into FluidDisplaced class,
 https://github.com/phetsims/buoyancy/issues/150

Signed-off-by: Michael Kauzmann <michael.kauzmann@colorado.edu>
---
 js/buoyancy/view/BuoyancyLabScreenView.ts | 30 +++-------------
 js/buoyancy/view/FluidDisplacedPanel.ts   | 42 +++++++++++++++++------
 2 files changed, 37 insertions(+), 35 deletions(-)

diff --git a/js/buoyancy/view/BuoyancyLabScreenView.ts b/js/buoyancy/view/BuoyancyLabScreenView.ts
index 309b9ea6..118fb5ac 100644
--- a/js/buoyancy/view/BuoyancyLabScreenView.ts
+++ b/js/buoyancy/view/BuoyancyLabScreenView.ts
@@ -10,7 +10,7 @@
 import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
 import Vector2 from '../../../../dot/js/Vector2.js';
 import { combineOptions } from '../../../../phet-core/js/optionize.js';
-import { AlignBox, HBox, LayoutProxy, ManualConstraint, Node, RichText, VBox } from '../../../../scenery/js/imports.js';
+import { AlignBox, HBox, LayoutProxy, ManualConstraint, Node, VBox } from '../../../../scenery/js/imports.js';
 import Panel from '../../../../sun/js/Panel.js';
 import DensityBuoyancyCommonConstants from '../../common/DensityBuoyancyCommonConstants.js';
 import Material from '../../common/model/Material.js';
@@ -33,7 +33,6 @@ import ScaleView from '../../common/view/ScaleView.js';
 import Bounds2 from '../../../../dot/js/Bounds2.js';
 import ScaleHeightControl from '../../common/view/ScaleHeightControl.js';
 import fluid_displaced_scale_icon_png from '../../../images/fluid_displaced_scale_icon_png.js';
-import AccordionBox from '../../../../sun/js/AccordionBox.js';
 import CuboidView from '../../common/view/CuboidView.js';
 
 // constants
@@ -56,31 +55,12 @@ export default class BuoyancyLabScreenView extends DensityBuoyancyScreenView<Buo
     // In liters
     const maxBlockVolume = 10;
 
-    const fluidDisplacedAccordionBoxTandem = tandem.createTandem( 'fluidDisplacedAccordionBox' );
-
-    const fluidDisplacedAccordionBox = new AccordionBox( new FluidDisplacedPanel( this.waterLevelVolumeProperty,
+    const fluidDisplacedAccordionBox = new FluidDisplacedPanel( this.waterLevelVolumeProperty,
       maxBlockVolume,
       model.liquidMaterialProperty,
-      model.gravityProperty ), {
-      titleNode: new RichText( DensityBuoyancyCommonStrings.fluidDisplacedStringProperty, {
-        font: DensityBuoyancyCommonConstants.TITLE_FONT,
-        maxWidth: 100,
-        lineWrap: 90,
-        maxHeight: 40
-      } ),
-      expandedDefaultValue: false,
-
-      titleAlignX: 'left',
-      titleAlignY: 'center',
-      titleXMargin: 5,
-      titleXSpacing: 10,
-
-      contentXMargin: 2,
-      contentYMargin: 2,
-      contentXSpacing: 2,
-      contentYSpacing: 2,
-      tandem: fluidDisplacedAccordionBoxTandem
-    } );
+      model.gravityProperty , {
+        tandem: tandem.createTandem( 'fluidDisplacedAccordionBox' )
+      } );
 
     this.resetEmitter.addListener( () => fluidDisplacedAccordionBox.expandedProperty.reset() );
 
diff --git a/js/buoyancy/view/FluidDisplacedPanel.ts b/js/buoyancy/view/FluidDisplacedPanel.ts
index 7998e97f..28790d8d 100644
--- a/js/buoyancy/view/FluidDisplacedPanel.ts
+++ b/js/buoyancy/view/FluidDisplacedPanel.ts
@@ -8,7 +8,6 @@
 
 import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js';
 import densityBuoyancyCommon from '../../densityBuoyancyCommon.js';
-import MultiSectionPanelsNode, { MultiSectionPanelsNodeOptions } from '../../common/view/MultiSectionPanelsNode.js';
 import BeakerNode, { BeakerNodeOptions } from '../../../../scenery-phet/js/BeakerNode.js';
 import NumberProperty from '../../../../axon/js/NumberProperty.js';
 import Range from '../../../../dot/js/Range.js';
@@ -26,10 +25,12 @@ import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
 import Material from '../../common/model/Material.js';
 import DynamicProperty from '../../../../axon/js/DynamicProperty.js';
 import BuoyancyLabScreenView from './BuoyancyLabScreenView.js';
+import AccordionBox, { AccordionBoxOptions } from '../../../../sun/js/AccordionBox.js';
+import Panel, { PanelOptions } from '../../../../sun/js/Panel.js';
 
 type SelfOptions = EmptySelfOptions;
 
-type FluidDisplacedPanelOptions = SelfOptions & MultiSectionPanelsNodeOptions;
+type FluidDisplacedPanelOptions = SelfOptions & AccordionBoxOptions;
 
 const STARTING_VOLUME = DensityBuoyancyCommonConstants.DESIRED_STARTING_POOL_VOLUME * DensityBuoyancyCommonConstants.LITERS_IN_CUBIC_METER;
 const CONTENT_WIDTH = 105;
@@ -37,7 +38,7 @@ const CONTENT_WIDTH = 105;
 // Beaker expects a range between 0 (empty) and 1 (full)
 const BEAKER_RANGE = new Range( 0, 1 );
 
-export default class FluidDisplacedPanel extends MultiSectionPanelsNode {
+export default class FluidDisplacedPanel extends AccordionBox {
 
   public constructor( poolVolumeProperty: TReadOnlyProperty<number>,
                       maxBeakerVolume: number,
@@ -47,9 +48,24 @@ export default class FluidDisplacedPanel extends MultiSectionPanelsNode {
     assert && assert( Utils.toFixedNumber( poolVolumeProperty.value, 7 ) === STARTING_VOLUME,
       `This class greatly expects the starting volume of the pool to be ${STARTING_VOLUME}L.` );
 
-    const options = optionize<FluidDisplacedPanelOptions, SelfOptions, MultiSectionPanelsNodeOptions>()( {
-      yMargin: DensityBuoyancyCommonConstants.MARGIN / 2,
-      stroke: null
+    const options = optionize<FluidDisplacedPanelOptions, SelfOptions, AccordionBoxOptions>()( {
+      titleNode: new RichText( DensityBuoyancyCommonStrings.fluidDisplacedStringProperty, {
+        font: DensityBuoyancyCommonConstants.TITLE_FONT,
+        maxWidth: 100,
+        lineWrap: 90,
+        maxHeight: 40
+      } ),
+      expandedDefaultValue: false,
+
+      titleAlignX: 'left',
+      titleAlignY: 'center',
+      titleXMargin: 5,
+      titleXSpacing: 10,
+
+      contentXMargin: 2,
+      contentYMargin: 2,
+      contentXSpacing: 2,
+      contentYSpacing: 2
     }, providedOptions );
 
     const displayRange = new Range( 0, maxBeakerVolume );
@@ -128,10 +144,16 @@ export default class FluidDisplacedPanel extends MultiSectionPanelsNode {
       numberDisplay.right = beakerNode.right;
     } );
 
-    super( [ new Node( {
-      children: [ scaleIcon, beakerNode, numberDisplay, forceReadout ]
-    } )
-    ], options );
+    const panel = new Panel(
+      new Node( {
+        children: [ scaleIcon, beakerNode, numberDisplay, forceReadout ]
+      } ),
+      combineOptions<PanelOptions>( {
+        yMargin: DensityBuoyancyCommonConstants.MARGIN / 2,
+        stroke: null
+      }, DensityBuoyancyCommonConstants.PANEL_OPTIONS )
+    );
+    super( panel, options );
   }
 
   private static getBeakerOptions(): BeakerNodeOptions {