factor out spacing constant for Preferences, see phetsims/quadrilater…

…al#282
phetsims · Mar 22, 2023 · 8a09397 · 8a09397
1 parent d1ff1a5
commit 8a09397
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/js/preferences/PreferencesDialog.ts b/js/preferences/PreferencesDialog.ts
@@ -198,9 +198,12 @@ class PreferencesDialog extends Dialog {
   public static readonly PANEL_SECTION_LABEL_MAX_WIDTH = PANEL_SECTION_LABEL_MAX_WIDTH;
   public static readonly PANEL_SECTION_LABEL_OPTIONS = PANEL_SECTION_LABEL_OPTIONS;
 
-  // Default spacing between items in a preferences dialog
+  // Default spacing between unique items in a preferences dialog
   public static readonly CONTENT_SPACING = 20;
 
+  // Default vertical spacing between grouped items (radio buttons, vertical checkboxes, ...)
+  public static readonly VERTICAL_CONTENT_SPACING = 5;
+
   // Content or UI component intendentation under a PreferencesPanelSection title.
   public static readonly CONTENT_INDENTATION_SPACING = 15;
 

diff --git a/js/preferences/VoicingPanelSection.ts b/js/preferences/VoicingPanelSection.ts
@@ -146,7 +146,7 @@ class VoicingPanelSection extends PreferencesPanelSection {
     } );
 
     // Speech output levels
-    const speechOutputLabel = new Text( simVoicingOptionsStringProperty, merge( {}, PreferencesDialog.PANEL_SECTION_LABEL_OPTIONS, {
+    const speechOutputLabel = new VoicingText( simVoicingOptionsStringProperty, merge( {}, PreferencesDialog.PANEL_SECTION_LABEL_OPTIONS, {
 
       // pdom
       tagName: 'h3',
@@ -194,7 +194,7 @@ class VoicingPanelSection extends PreferencesPanelSection {
 
     const speechOutputCheckboxes = new VBox( {
       align: 'left',
-      spacing: 5,
+      spacing: PreferencesDialog.VERTICAL_CONTENT_SPACING,
       children: [
         createCheckbox( objectDetailsLabelStringProperty, audioModel.voicingObjectResponsesEnabledProperty,
           voicingObjectChangesStringProperty, objectChangesMutedStringProperty, speechOutputLabel
@@ -209,13 +209,13 @@ class VoicingPanelSection extends PreferencesPanelSection {
     } );
 
     speechOutputContent.children = [ speechOutputLabel, speechOutputDescription, speechOutputCheckboxes ];
-    speechOutputDescription.leftTop = speechOutputLabel.leftBottom.plusXY( 0, 5 );
-    speechOutputCheckboxes.leftTop = speechOutputDescription.leftBottom.plusXY( PreferencesDialog.CONTENT_INDENTATION_SPACING, 5 );
+    speechOutputDescription.leftTop = speechOutputLabel.leftBottom.plusXY( 0, PreferencesDialog.VERTICAL_CONTENT_SPACING );
+    speechOutputCheckboxes.leftTop = speechOutputDescription.leftBottom.plusXY( PreferencesDialog.CONTENT_INDENTATION_SPACING, PreferencesDialog.VERTICAL_CONTENT_SPACING );
 
     const rateSlider = new VoiceRateNumberControl( rateStringProperty, rateLabelStringProperty, audioModel.voiceRateProperty );
     const pitchSlider = new VoicingPitchSlider( pitchStringProperty, audioModel.voicePitchProperty );
     const voiceOptionsContent = new VBox( {
-      spacing: 5,
+      spacing: PreferencesDialog.VERTICAL_CONTENT_SPACING,
       align: 'left',
       children: [
         rateSlider,