rename RectangularRadioButtonGroup, phetsims/sun#650

Author: pixelzoom

js/moleculesandlight/view/MoleculeSelectionPanel.js

@@ -15,7 +15,7 @@ import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
 import FocusHighlightPath from '../../../../scenery/js/accessibility/FocusHighlightPath.js';
 import Rectangle from '../../../../scenery/js/nodes/Rectangle.js';
 import RichText from '../../../../scenery/js/nodes/RichText.js';
-import RadioButtonGroup from '../../../../sun/js/buttons/RadioButtonGroup.js';
+import RectangularRadioButtonGroup from '../../../../sun/js/buttons/RectangularRadioButtonGroup.js';
 import Panel from '../../../../sun/js/Panel.js';
 import moleculesAndLight from '../../moleculesAndLight.js';
 import moleculesAndLightStrings from '../../moleculesAndLightStrings.js';
@@ -134,7 +134,7 @@ class MoleculeSelectionPanel extends  Panel {
       _.each( textList, function( text ) { text.scale( scaleFactor ); } );
     }
 
-    const radioButtons = new RadioButtonGroup( model.photonTargetProperty, radioButtonContent, {
+    const radioButtonGroup = new RectangularRadioButtonGroup( model.photonTargetProperty, radioButtonContent, {
       spacing: 1.75,
       baseColor: 'black',
       buttonContentXMargin: 0,
@@ -153,14 +153,14 @@ class MoleculeSelectionPanel extends  Panel {
     } );
 
     // custom group focus highlight so there is enough spacing between button highlight and group highlight
-    const groupCoefficient = FocusHighlightPath.getGroupDilationCoefficient( radioButtons ) + HIGHLIGHT_DILATION;
-    radioButtons.groupFocusHighlight = new FocusHighlightPath( Shape.bounds( radioButtons.bounds.dilated( groupCoefficient ) ), {
+    const groupCoefficient = FocusHighlightPath.getGroupDilationCoefficient( radioButtonGroup ) + HIGHLIGHT_DILATION;
+    radioButtonGroup.groupFocusHighlight = new FocusHighlightPath( Shape.bounds( radioButtonGroup.bounds.dilated( groupCoefficient ) ), {
       outerLineWidth: FocusHighlightPath.GROUP_OUTER_LINE_WIDTH,
       innerLineWidth: FocusHighlightPath.GROUP_INNER_LINE_WIDTH,
       innerStroke: FocusHighlightPath.FOCUS_COLOR
     } );
 
-    super( radioButtons, {
+    super( radioButtonGroup, {
       fill: 'black',
       tandem: tandem,
       tagName: 'div',

js/moleculesandlight/view/QuadEmissionFrequencyControlPanel.js

@@ -18,7 +18,7 @@ import Image from '../../../../scenery/js/nodes/Image.js';
 import LayoutBox from '../../../../scenery/js/nodes/LayoutBox.js';
 import Node from '../../../../scenery/js/nodes/Node.js';
 import Text from '../../../../scenery/js/nodes/Text.js';
-import RadioButtonGroup from '../../../../sun/js/buttons/RadioButtonGroup.js';
+import RectangularRadioButtonGroup from '../../../../sun/js/buttons/RectangularRadioButtonGroup.js';
 import multiSelectionSoundPlayerFactory from '../../../../tambo/js/multiSelectionSoundPlayerFactory.js';
 import Tandem from '../../../../tandem/js/Tandem.js';
 import flashlight2Image from '../../../mipmaps/flashlight_png.js';
@@ -165,7 +165,7 @@ function QuadEmissionFrequencyControlPanel( photonAbsorptionModel, tandem ) {
     );
   } );
 
-  const radioButtons = new RadioButtonGroup( photonAbsorptionModel.photonWavelengthProperty, radioButtonContent, {
+  const radioButtonGroup = new RectangularRadioButtonGroup( photonAbsorptionModel.photonWavelengthProperty, radioButtonContent, {
     orientation: 'horizontal',
     spacing: 15,
     baseColor: 'black',
@@ -196,12 +196,12 @@ function QuadEmissionFrequencyControlPanel( photonAbsorptionModel, tandem ) {
   }
 
   // Set the positions of all components of the control panel.
-  energyArrow.centerX = energyText.centerX = radioButtons.centerX; // All have the same center x component.
-  energyArrow.top = radioButtons.bottom + 15; // Arrow is below the buttons by an offset which is chosen empirically.
+  energyArrow.centerX = energyText.centerX = radioButtonGroup.centerX; // All have the same center x component.
+  energyArrow.top = radioButtonGroup.bottom + 15; // Arrow is below the buttons by an offset which is chosen empirically.
   energyText.top = energyArrow.bottom;
 
   // Add all components to the control panel.
-  this.addChild( radioButtons );
+  this.addChild( radioButtonGroup );
   this.addChild( energyArrow );
   this.addChild( energyText );