remove SunConstants.componentEnabledAppearance and its usages in enab…

…ledAppearanceStrategy options, phetsims/scenery#1173

js/ABSwitch.js

@@ -62,8 +62,8 @@ class ABSwitch extends Node {
       // {function( Node, boolean )} method of making the labels look disabled
       setEnabled: DEFAULT_SET_ENABLED,
 
-      // {function(boolean, Node, Object:options):void} - function for controlling the appearance when toggling enabled.
-      enabledAppearanceStrategy: SunConstants.componentEnabledListener,
+      // {number} - opt into Node's disabled opacity when enabled:false
+      disabledOpacity: SunConstants.DISABLED_OPACITY,
 
       // phet-io
       tandem: Tandem.REQUIRED,
@@ -135,9 +135,6 @@ class ABSwitch extends Node {
 
     this.mutate( options );
 
-    // No need to dispose because enabledProperty is disposed in Node
-    this.enabledProperty.link( enabled => options.enabledAppearanceStrategy( enabled, this ) );
-
     // support for binder documentation, stripped out in builds and only runs when ?binder is specified
     assert && phet.chipper.queryParameters.binder && InstanceRegistry.registerDataURL( 'sun', 'ABSwitch', this );
   }

js/AquaRadioButton.js

@@ -39,8 +39,8 @@ class AquaRadioButton extends Node {
       xSpacing: 8, // horizontal space between the button and the labelNode
       stroke: 'black', // color used to stroke the outer edge of the button
 
-      // {function(boolean, Node, Object:options):void} - function for controlling the appearance when toggling enabled.
-      enabledAppearanceStrategy: SunConstants.componentEnabledListener,
+      // {number} - opt into Node's disabled opacity when enabled:false
+      disabledOpacity: SunConstants.DISABLED_OPACITY,
 
       // phet-io
       tandem: Tandem.REQUIRED,
@@ -150,9 +150,6 @@ class AquaRadioButton extends Node {
 
     this.mutate( options );
 
-    // No need to dispose because enabledProperty is disposed in Node
-    this.enabledProperty.link( enabled => options.enabledAppearanceStrategy( enabled, this ) );
-
     // @private
     this.disposeAquaRadioButton = () => {
       this.removeInputListener( fireListener );

js/AquaRadioButtonGroup.js

@@ -57,9 +57,8 @@ class AquaRadioButtonGroup extends LayoutBox {
       mouseAreaXDilation: 0,
       mouseAreaYDilation: 0,
 
-      // {function(boolean, Node, Object:options):void} - function for controlling the appearance when toggling enabled.
-      enabledAppearanceStrategy: SunConstants.componentEnabledListener,
-
+      // {number} - opt into Node's disabled opacity when enabled:false
+      disabledOpacity: SunConstants.DISABLED_OPACITY,
       // supertype options
       orientation: 'vertical', // Aqua radio buttons are typically vertical, rarely horizontal
       spacing: 3, // space between each button, perpendicular to options.orientation
@@ -135,9 +134,6 @@ class AquaRadioButtonGroup extends LayoutBox {
       tandem: options.tandem.createTandem( 'property' )
     } );
 
-    // No need to dispose because enabledProperty is disposed in Node
-    this.enabledProperty.link( enabled => options.enabledAppearanceStrategy( enabled, this ) );
-
     // @private
     this.disposeAquaRadioButtonGroup = () => {
       this.removeInputListener( intentListener );

js/Checkbox.js

@@ -48,9 +48,6 @@ class Checkbox extends Node {
       checkboxColorBackground: 'white',
       disabledOpacity: SunConstants.DISABLED_OPACITY,
 
-      // {function(boolean, Node, Object:options):void} - function for controlling the appearance when toggling enabled.
-      enabledAppearanceStrategy: SunConstants.componentEnabledListener,
-
       // phet-io
       tandem: Tandem.REQUIRED,
       phetioEventType: EventType.USER,
@@ -153,9 +150,6 @@ class Checkbox extends Node {
       tandem: options.tandem.createTandem( 'property' )
     } );
 
-    // No need to dispose because enabledProperty is disposed in Node
-    this.enabledProperty.link( enabled => options.enabledAppearanceStrategy( enabled, this, { disabledOpacity: options.disabledOpacity } ) );
-
     // support for binder documentation, stripped out in builds and only runs when ?binder is specified
     assert && phet.chipper.queryParameters.binder && InstanceRegistry.registerDataURL( 'sun', 'Checkbox', this );
 

js/ComboBox.js

@@ -19,8 +19,8 @@
  */
 
 import BooleanProperty from '../../axon/js/BooleanProperty.js';
-import Vector2 from '../../dot/js/Vector2.js';
 import dotRandom from '../../dot/js/dotRandom.js';
+import Vector2 from '../../dot/js/Vector2.js';
 import InstanceRegistry from '../../phet-core/js/documentation/InstanceRegistry.js';
 import merge from '../../phet-core/js/merge.js';
 import PDOMPeer from '../../scenery/js/accessibility/pdom/PDOMPeer.js';
@@ -33,7 +33,6 @@ import Tandem from '../../tandem/js/Tandem.js';
 import IOType from '../../tandem/js/types/IOType.js';
 import ComboBoxButton from './ComboBoxButton.js';
 import ComboBoxListBox from './ComboBoxListBox.js';
-import SunConstants from './SunConstants.js';
 import sun from './sun.js';
 
 // const
@@ -82,9 +81,6 @@ class ComboBox extends Node {
       cornerRadius: 4, // applied to button, listBox, and item highlights
       highlightFill: 'rgb( 245, 245, 245 )', // {Color|string} highlight behind items in the list
 
-      // {function(boolean, Node, Object:options):void} - function for controlling the appearance when toggling enabled.
-      enabledAppearanceStrategy: SunConstants.componentEnabledListener,
-
       // Margins around the edges of the button and listbox when highlight is invisible.
       // Highlight margins around the items in the list are set to 1/2 of these values.
       // These values must be > 0.
@@ -126,8 +122,6 @@ class ComboBox extends Node {
     // validate option values
     assert && assert( options.xMargin > 0 && options.yMargin > 0,
       `margins must be > 0, xMargin=${options.xMargin}, yMargin=${options.yMargin}` );
-    assert && assert( options.disabledOpacity > 0 && options.disabledOpacity < 1,
-      `invalid disabledOpacity: ${options.disabledOpacity}` );
     assert && assert( _.includes( LIST_POSITION_VALUES, options.listPosition ),
       `invalid listPosition: ${options.listPosition}` );
     assert && assert( _.includes( ALIGN_VALUES, options.align ),
@@ -207,9 +201,6 @@ class ComboBox extends Node {
 
     this.mutate( options );
 
-    // No need to dispose because enabledProperty is disposed in Node
-    this.enabledProperty.link( enabled => options.enabledAppearanceStrategy( enabled, this, { disabledOpacity: options.disabledOpacity } ) );
-
     // Clicking on the button toggles visibility of the list box
     this.button.addListener( () => {
       this.listBox.visibleProperty.value = !this.listBox.visibleProperty.value;

js/NumberSpinner.js

@@ -59,9 +59,8 @@ class NumberSpinner extends Node {
       // may be ignored if incrementFunction and decrementFunction are provided
       deltaValue: 1,
 
-      // {function(boolean, Node, Object:options):void} - function for controlling the appearance when toggling enabled.
-      enabledAppearanceStrategy: SunConstants.componentEnabledListener,
-
+      // {number} - opt into Node's disabled opacity when enabled:false
+      disabledOpacity: SunConstants.DISABLED_OPACITY,
       xSpacing: 5,
       ySpacing: 3,
 
@@ -212,9 +211,6 @@ class NumberSpinner extends Node {
 
     super( options );
 
-    // No need to dispose because enabledProperty is disposed in Node
-    this.enabledProperty.link( enabled => options.enabledAppearanceStrategy( enabled, this ) );
-
     // enable/disable arrow buttons
     const updateEnabled = () => {
       incrementButton.enabled = ( options.incrementFunction( numberProperty.value ) <= rangeProperty.value.max );

js/Slider.js

@@ -111,9 +111,6 @@ class Slider extends Node {
       enabledRangeProperty: null, // {Property.<Range>|null} determine the portion of range that is enabled
       disabledOpacity: SunConstants.DISABLED_OPACITY, // opacity applied to the entire Slider when disabled
 
-      // {function(boolean, Node, Object:options):void} - function for controlling the appearance when toggling enabled.
-      enabledAppearanceStrategy: SunConstants.componentEnabledListener,
-
       // phet-io
       tandem: Tandem.REQUIRED,
       phetioType: Slider.SliderIO,
@@ -291,9 +288,6 @@ class Slider extends Node {
 
     this.mutate( options );
 
-    // No need to dispose because enabledProperty is disposed in Node
-    this.enabledProperty.link( enabled => options.enabledAppearanceStrategy( enabled, this, { disabledOpacity: options.disabledOpacity } ) );
-
     // @private {function} - Called by dispose
     this.disposeSlider = () => {
       thumb.dispose && thumb.dispose(); // in case a custom thumb is provided via options.thumbNode that doesn't implement dispose

js/SunConstants.js

@@ -6,7 +6,6 @@
  * @author Chris Malley (PixelZoom, Inc.)
  */
 
-import merge from '../../phet-core/js/merge.js';
 import sun from './sun.js';
 
 const SunConstants = {
@@ -25,23 +24,7 @@ const SunConstants = {
   VALUE_NUMBERED_PLACEHOLDER: '{0}',
 
   // Opacity that is typically applied to a UI component in its disabled state, to make it look grayed out.
-  DISABLED_OPACITY: 0.45,
-
-  /**
-   * The basic PhET enabled/disabled look and feel for interactive components.
-   * @public
-   * @param {boolean} enabled
-   * @param {Node} node
-   * @param {Object} [options]
-   * @returns {function(boolean):void}
-   */
-  componentEnabledListener( enabled, node, options ) {
-    options = merge( {
-      disabledOpacity: SunConstants.DISABLED_OPACITY
-    }, options );
-
-    node.opacity = enabled ? 1.0 : options.disabledOpacity;
-  }
+  DISABLED_OPACITY: 0.45
 };
 
 sun.register( 'SunConstants', SunConstants );

js/ToggleSwitch.js

@@ -60,8 +60,8 @@ class ToggleSwitch extends Node {
       // number of thumb-widths outside the normal range past where the model value will change
       toggleThreshold: 1,
 
-      // {function(boolean, Node, Object:options):void} - function for controlling the appearance when toggling enabled.
-      enabledAppearanceStrategy: SunConstants.componentEnabledListener,
+      // {number} - opt into Node's disabled opacity when enabled:false
+      disabledOpacity: SunConstants.DISABLED_OPACITY,
 
       // thumb
       thumbFill: null, // {Color|string} thumb fill, default computed below
@@ -238,9 +238,6 @@ class ToggleSwitch extends Node {
 
     this.mutate( options );
 
-    // No need to dispose because enabledProperty is disposed in Node
-    this.enabledProperty.link( enabled => options.enabledAppearanceStrategy( enabled, this ) );
-
     // Add a link to the Property that this switch controls
     this.addLinkedElement( property, {
       tandem: options.tandem.createTandem( 'property' )

js/buttons/RectangularRadioButtonGroup.js

@@ -49,8 +49,8 @@ class RectangularRadioButtonGroup extends LayoutBox {
   constructor( property, items, options ) {
     options = merge( {
 
-      // {function(boolean, Node, Object:options):void} - function for controlling the appearance when toggling enabled.
-      enabledAppearanceStrategy: SunConstants.componentEnabledListener,
+      // {number} - opt into Node's disabled opacity when enabled:false
+      disabledOpacity: SunConstants.DISABLED_OPACITY,
 
       // phet-io
       tandem: Tandem.REQUIRED,
@@ -301,9 +301,6 @@ class RectangularRadioButtonGroup extends LayoutBox {
 
     super( options );
 
-    // No need to dispose because enabledProperty is disposed in Node
-    this.enabledProperty.link( enabled => options.enabledAppearanceStrategy( enabled, this ) );
-
     // pdom - this node's primary sibling is aria-labelledby its own label so the label content is read whenever
     // a member of the group receives focus
     this.addAriaLabelledbyAssociation( {

js/sun-tests.js

@@ -17,16 +17,17 @@ import './EnabledComponentTests.js';
 import './SliderTests.js';
 import SunConstants from './SunConstants.js';
 
-QUnit.test( 'Node.enabledProperty', assert => {
+
+QUnit.module( 'sun' );
+
+QUnit.test( 'enabled/disabled appearance', assert => {
 
   class SunComponentNode extends Node {
     constructor( options ) {
       options = merge( {
         disabledOpacity: SunConstants.DISABLED_OPACITY
       }, options );
       super( options );
-
-      this.enabledProperty.link( enabled => SunConstants.componentEnabledListener( enabled, this, { disabledOpacity: options.disabledOpacity } ) );
     }
   }
 
@@ -37,9 +38,9 @@ QUnit.test( 'Node.enabledProperty', assert => {
     disabledOpacity: disabledOpacity
   } );
 
-  assert.ok( node.opacity === new SunComponentNode().opacity, 'opacity should default to Node default' );
+  assert.ok( node.effectiveOpacity === new SunComponentNode().opacity, 'opacity should default to Node default' );
   node.enabled = false;
-  assert.ok( node.opacity === disabledOpacity, 'test disabled opacity' );
+  assert.ok( node.effectiveOpacity === disabledOpacity, 'test disabled opacity' );
 
   node.dispose();