From 3ac8d019222abaae6f0d427c7ca15e7ffa0a6e30 Mon Sep 17 00:00:00 2001
From: mbarlow12 <m.barlow12@gmail.com>
Date: Wed, 30 Jan 2019 19:48:37 -0700
Subject: [PATCH] nested options for NumberControl, see
 phetsims/scenery-phet#451

---
 js/lab/view/PegControls.js | 60 +++++++++++++++++++++++---------------
 1 file changed, 37 insertions(+), 23 deletions(-)

diff --git a/js/lab/view/PegControls.js b/js/lab/view/PegControls.js
index ad7f0dc0..fb42030a 100644
--- a/js/lab/view/PegControls.js
+++ b/js/lab/view/PegControls.js
@@ -58,21 +58,29 @@ define( function( require ) {
 
     // control for number of rows
     var rowsControl = new NumberControl( rowsString, rowsProperty, PlinkoProbabilityConstants.ROWS_RANGE, {
+      delta: 1,
       layoutFunction: NumberControl.createLayoutFunction3( {
         ySpacing: 3
       } ),
-      titleFont: PlinkoProbabilityConstants.PANEL_FONT,
-      titleMaxWidth: SLIDER_TRACK_SIZE.width,
-      valueFont: PlinkoProbabilityConstants.PANEL_READOUT_FONT,
-      decimalPlaces: 0,
-      delta: 1,
-      trackSize: SLIDER_TRACK_SIZE,
-      majorTicks: rowsMajorTicks,
-      majorTickLength: 18,
-      tickLabelSpacing: 1,
 
-      // a11y
-      keyboardStep: 2
+      // subcomponent options
+      titleNodeOptions: {
+        font: PlinkoProbabilityConstants.PANEL_FONT,
+        maxWidth: SLIDER_TRACK_SIZE.width
+      },
+      numberDisplayOptions: {
+        font: PlinkoProbabilityConstants.PANEL_READOUT_FONT,
+        decimalPlaces: 0
+      },
+      sliderOptions: {
+        trackSize: SLIDER_TRACK_SIZE,
+        majorTicks: rowsMajorTicks,
+        majorTickLength: 18,
+        tickLabelSpacing: 1,
+
+        // a11y
+        keyboardStep: 2
+      }
     } );
 
     // major tick labels for slider that controls binary probability
@@ -89,19 +97,25 @@ define( function( require ) {
     // control for the binary probability
     var probabilityControl = new NumberControl( binaryProbabilityString, probabilityProperty, PlinkoProbabilityConstants.BINARY_PROBABILITY_RANGE, {
       layoutFunction: NumberControl.createLayoutFunction3(),
-      titleFont: PlinkoProbabilityConstants.PANEL_FONT,
-      titleMaxWidth: SLIDER_TRACK_SIZE.width,
-      valueFont: PlinkoProbabilityConstants.PANEL_READOUT_FONT,
-      decimalPlaces: 2,
       delta: 0.01,
-      trackSize: SLIDER_TRACK_SIZE,
-      majorTicks: probabilityMajorTicks,
-      majorTickLength: 18,
-      tickLabelSpacing: 1
-
-      // a11y
-      // no need to delineate specific steps as the HSlider defaults evenly/cleanly divide
-      // the range
+      titleNodeOptions: {
+        font: PlinkoProbabilityConstants.PANEL_FONT,
+        maxWidth: SLIDER_TRACK_SIZE.width
+      },
+      numberDisplayOptions: {
+        font: PlinkoProbabilityConstants.PANEL_READOUT_FONT,
+        decimalPlaces: 2
+      },
+      sliderOptions: {
+        trackSize: SLIDER_TRACK_SIZE,
+        majorTicks: probabilityMajorTicks,
+        majorTickLength: 18,
+        tickLabelSpacing: 1
+
+        // a11y
+        // no need to delineate specific steps as the HSlider defaults evenly/cleanly divide
+        // the range
+      }
     } );
 
     var contentNode = new VBox( {