set max widths for labels where they were missing, see #246

(cherry picked from commit 95fa513)
phetsims · Jan 25, 2023 · 7e18283 · 7e18283
1 parent be16149
commit 7e18283
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 3 deletions.
diff --git a/js/common/view/AtmosphereLayerNode.ts b/js/common/view/AtmosphereLayerNode.ts
@@ -142,7 +142,8 @@ class AtmosphereLayerNode extends Node {
       cornerRadius: 3,
       noValueAlign: 'center',
       textOptions: {
-        font: new PhetFont( 14 )
+        font: new PhetFont( 14 ),
+        maxWidth: 120
       }
     } );
 

diff --git a/js/common/view/GreenhouseEffectCheckbox.ts b/js/common/view/GreenhouseEffectCheckbox.ts
@@ -11,7 +11,7 @@ import Property from '../../../../axon/js/Property.js';
 import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js';
 import optionize from '../../../../phet-core/js/optionize.js';
 import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
-import { HBox, Node, Text } from '../../../../scenery/js/imports.js';
+import { HBox, Node, Text, TextOptions } from '../../../../scenery/js/imports.js';
 import Checkbox, { CheckboxOptions } from '../../../../sun/js/Checkbox.js';
 import Tandem from '../../../../tandem/js/Tandem.js';
 import greenhouseEffect from '../../greenhouseEffect.js';
@@ -24,6 +24,8 @@ const LABEL_FONT = new PhetFont( {
 
 type SelfOptions = {
 
+  maxLabelTextWidth?: number;
+
   // if provided, will be included in the icon for the checkbox
   iconNode?: Node | null;
 };
@@ -36,6 +38,7 @@ class GreenhouseEffectCheckbox extends Checkbox {
 
     const options = optionize<GreenhouseEffectCheckboxOptions, SelfOptions, CheckboxOptions>()( {
       iconNode: null,
+      maxLabelTextWidth: 180, // empirically determined, works well for most cases in Greenhouse
 
       // i18n
       maxWidth: 250,
@@ -49,6 +52,7 @@ class GreenhouseEffectCheckbox extends Checkbox {
 
     const labelText = new Text( labelStringProperty, {
       font: LABEL_FONT,
+      maxWidth: options.maxLabelTextWidth,
       tandem: options.tandem.createTandem( 'labelText' )
     } );
 

diff --git a/js/layer-model/view/TemperatureUnitsSelector.ts b/js/layer-model/view/TemperatureUnitsSelector.ts
@@ -10,6 +10,7 @@ import greenhouseEffect from '../../greenhouseEffect.js';
 import GreenhouseEffectStrings from '../../GreenhouseEffectStrings.js';
 
 const LABEL_FONT = new PhetFont( 14 );
+const UNITS_LABEL_MAX_WIDTH = 50;
 
 /**
  * TemperatureUnitsSelector is a UI component that allows a user to select between Kelvin, degrees Celsius, or degrees
@@ -23,6 +24,7 @@ class TemperatureUnitsSelector extends VBox {
     // Create the label that sits above the radio button selectors.
     const label = new Text( GreenhouseEffectStrings.temperatureUnitsStringProperty, {
       font: LABEL_FONT,
+      maxWidth: 200,
       tandem: tandem.createTandem( 'labelText' )
     } );
 
@@ -33,6 +35,7 @@ class TemperatureUnitsSelector extends VBox {
         {
           createNode: tandem => new Text( GreenhouseEffectStrings.temperature.units.kelvinStringProperty, {
             font: LABEL_FONT,
+            maxWidth: UNITS_LABEL_MAX_WIDTH,
             tandem: tandem.createTandem( 'text' )
           } ),
           value: TemperatureUnits.KELVIN,
@@ -41,14 +44,16 @@ class TemperatureUnitsSelector extends VBox {
         {
           createNode: tandem => new Text( GreenhouseEffectStrings.temperature.units.celsiusStringProperty, {
             font: LABEL_FONT,
+            maxWidth: UNITS_LABEL_MAX_WIDTH,
             tandem: tandem.createTandem( 'text' )
           } ),
           value: TemperatureUnits.CELSIUS,
-          tandemName: 'celciusRadioButton'
+          tandemName: 'celsiusRadioButton'
         },
         {
           createNode: tandem => new Text( GreenhouseEffectStrings.temperature.units.fahrenheitStringProperty, {
             font: LABEL_FONT,
+            maxWidth: UNITS_LABEL_MAX_WIDTH,
             tandem: tandem.createTandem( 'text' )
           } ),
           value: TemperatureUnits.FAHRENHEIT,

diff --git a/js/waves/view/CloudCheckbox.ts b/js/waves/view/CloudCheckbox.ts
@@ -45,6 +45,7 @@ class CloudCheckbox extends GreenhouseEffectCheckbox {
     const options = optionize<CloudCheckboxOptions, SelfOptions, GreenhouseEffectCheckboxOptions>()( {
       iconNode: iconNode,
       helpText: GreenhouseEffectStrings.a11y.cloudCheckboxHelpTextStringProperty,
+      maxLabelTextWidth: 120,
 
       // phet-io
       tandem: Tandem.REQUIRED