apply phetioFeatured customizations to ComboBox, #587

js/ComboBox.js

@@ -26,6 +26,7 @@ import PDOMPeer from '../../scenery/js/accessibility/pdom/PDOMPeer.js';
 import Display from '../../scenery/js/display/Display.js';
 import Node from '../../scenery/js/nodes/Node.js';
 import EventType from '../../tandem/js/EventType.js';
+import PhetioObject from '../../tandem/js/PhetioObject.js';
 import Tandem from '../../tandem/js/Tandem.js';
 import ComboBoxButton from './ComboBoxButton.js';
 import ComboBoxIO from './ComboBoxIO.js';
@@ -92,6 +93,9 @@ class ComboBox extends Node {
       phetioEventType: EventType.USER
     }, options );
 
+    // Use this pattern so that passed in phetioComponentOptions are not blown away.
+    PhetioObject.mergePhetioComponentOptions( { visibleProperty: { phetioFeatured: true } }, options );
+
     // validate option values
     assert && assert( options.xMargin > 0 && options.yMargin > 0,
       'margins must be > 0, xMargin=' + options.xMargin + ', yMargin=' + options.yMargin );
@@ -216,7 +220,8 @@ class ComboBox extends Node {
 
     // @public Provide a default if not specified
     this.enabledProperty = options.enabledProperty || new BooleanProperty( true, {
-      tandem: options.tandem.createTandem( 'enabledProperty' )
+      tandem: options.tandem.createTandem( 'enabledProperty' ),
+      phetioFeatured: true
     } );
 
     // enable/disable the combo box
@@ -232,6 +237,7 @@ class ComboBox extends Node {
     // This is not generally controlled by the user, so it is not reset when the Reset All button is pressed.
     this.displayOnlyProperty = new BooleanProperty( false, {
       tandem: options.tandem.createTandem( 'displayOnlyProperty' ),
+      phetioFeatured: true,
       phetioDocumentation: 'disables interaction with the ComboBox and ' +
                            'makes it appear like a display that shows the current selection'
     } );

js/ComboBoxButton.js

@@ -13,6 +13,7 @@ import PDOMPeer from '../../scenery/js/accessibility/pdom/PDOMPeer.js';
 import HStrut from '../../scenery/js/nodes/HStrut.js';
 import Node from '../../scenery/js/nodes/Node.js';
 import Path from '../../scenery/js/nodes/Path.js';
+import PhetioObject from '../../tandem/js/PhetioObject.js';
 import Tandem from '../../tandem/js/Tandem.js';
 import RectangularButtonView from './buttons/RectangularButtonView.js';
 import RectangularPushButton from './buttons/RectangularPushButton.js';
@@ -47,6 +48,11 @@ class ComboBoxButton extends RectangularPushButton {
       stroke: 'black',
       lineWidth: 1,
 
+      // PushButtonModel options
+      enabledPropertyOptions: {
+        phetioFeatured: false
+      },
+
       // phet-io
       tandem: Tandem.OPTIONAL,
 
@@ -62,6 +68,9 @@ class ComboBoxButton extends RectangularPushButton {
     assert && assert( _.includes( ARROW_DIRECTION_VALUES, options.arrowDirection ),
       'invalid arrowDirection: ' + options.arrowDirection );
 
+    // Use this pattern so that passed in phetioComponentOptions are not blown away.
+    PhetioObject.mergePhetioComponentOptions( { visibleProperty: { phetioFeatured: true } }, options );
+
     // To improve readability
     const itemXMargin = options.xMargin;
 

js/ComboBoxListBox.js

@@ -12,6 +12,7 @@ import KeyboardUtils from '../../scenery/js/accessibility/KeyboardUtils.js';
 import SceneryEvent from '../../scenery/js/input/SceneryEvent.js';
 import VBox from '../../scenery/js/nodes/VBox.js';
 import EventType from '../../tandem/js/EventType.js';
+import PhetioObject from '../../tandem/js/PhetioObject.js';
 import Tandem from '../../tandem/js/Tandem.js';
 import ComboBoxListItemNode from './ComboBoxListItemNode.js';
 import Panel from './Panel.js';
@@ -51,6 +52,10 @@ class ComboBoxListBox extends Panel {
       tandem: tandem
     }, options );
 
+    // Use this pattern so that passed in phetioComponentOptions are not blown away.
+    // list box visibility is controlled by the combo box, and should not be controlled through the PhET-iO API.
+    PhetioObject.mergePhetioComponentOptions( { visibleProperty: { phetioReadOnly: true } }, options );
+
     assert && assert( options.xMargin > 0 && options.yMargin > 0,
       'margins must be > 0, xMargin=' + options.xMargin + ', yMargin=' + options.yMargin );
 

js/ComboBoxListItemNode.js

@@ -12,6 +12,7 @@ import Shape from '../../kite/js/Shape.js';
 import merge from '../../phet-core/js/merge.js';
 import Node from '../../scenery/js/nodes/Node.js';
 import Rectangle from '../../scenery/js/nodes/Rectangle.js';
+import PhetioObject from '../../tandem/js/PhetioObject.js';
 import Tandem from '../../tandem/js/Tandem.js';
 import ComboBoxItem from './ComboBoxItem.js';
 import sun from './sun.js';
@@ -43,9 +44,11 @@ class ComboBoxListItemNode extends Node {
       tagName: 'li',
       focusable: true,
       ariaRole: 'option'
-
     }, options );
 
+    // Use this pattern so that passed in phetioComponentOptions are not blown away.
+    PhetioObject.mergePhetioComponentOptions( { visibleProperty: { phetioFeatured: true } }, options );
+
     // pdom: get innerContent from the item
     assert && assert( options.innerContent === undefined, 'ComboBoxListItemNode sets innerContent' );
     options.innerContent = item.a11yLabel;

js/buttons/RectangularButtonView.js

@@ -112,9 +112,8 @@ function RectangularButtonView( buttonModel, interactionStateProperty, options )
     accessibleClick: options.accessibleClick
   }, options.listenerOptions );
 
-  PhetioObject.mergePhetioComponentOptions( {
-    visibleProperty: { phetioFeatured: true }
-  }, options );
+  // Use this pattern so that passed in phetioComponentOptions are not blown away.
+  PhetioObject.mergePhetioComponentOptions( { visibleProperty: { phetioFeatured: true } }, options );
 
   this.buttonModel = buttonModel; // @protected