Issue #3343454: Organize the Global Settings with field groups for colors,...

Issue #3343454: Organize the Global Settings with field groups for colors, breakpoints and width values

src/Form/EbtCoreSettingsForm.php

@@ -39,7 +39,14 @@ class EbtCoreSettingsForm extends ConfigFormBase {
    */
   public function buildForm(array $form, FormStateInterface $form_state) {
     $config = $this->config(static::SETTINGS);
-    $form['ebt_core_primary_color'] = [
+
+    $form['ebt_core_colors'] = [
+      '#type' => 'details',
+      '#title' => $this->t('Colors'),
+      '#open' => TRUE,
+    ];
+
+    $form['ebt_core_colors']['ebt_core_primary_color'] = [
       '#type' => 'textfield',
       '#title' => $this->t('Primary Color'),
       '#default_value' => $config->get('ebt_core_primary_color'),
@@ -51,7 +58,7 @@ class EbtCoreSettingsForm extends ConfigFormBase {
       ],
     ];
 
-    $form['ebt_core_primary_button_text_color'] = [
+    $form['ebt_core_colors']['ebt_core_primary_button_text_color'] = [
       '#type' => 'textfield',
       '#title' => $this->t('Primary Button Text color'),
       '#default_value' => $config->get('ebt_core_primary_button_text_color'),
@@ -63,7 +70,7 @@ class EbtCoreSettingsForm extends ConfigFormBase {
       ],
     ];
 
-    $form['ebt_core_secondary_color'] = [
+    $form['ebt_core_colors']['ebt_core_secondary_color'] = [
       '#type' => 'textfield',
       '#title' => $this->t('Secondary Color'),
       '#default_value' => $config->get('ebt_core_secondary_color'),
@@ -75,7 +82,7 @@ class EbtCoreSettingsForm extends ConfigFormBase {
       ],
     ];
 
-    $form['ebt_core_secondary_button_text_color'] = [
+    $form['ebt_core_colors']['ebt_core_secondary_button_text_color'] = [
       '#type' => 'textfield',
       '#title' => $this->t('Secondary Button Text color'),
       '#default_value' => $config->get('ebt_core_secondary_button_text_color'),
@@ -87,7 +94,7 @@ class EbtCoreSettingsForm extends ConfigFormBase {
       ],
     ];
 
-    $form['ebt_core_background_color'] = [
+    $form['ebt_core_colors']['ebt_core_background_color'] = [
       '#type' => 'textfield',
       '#title' => $this->t('Background Color'),
       '#default_value' => $config->get('ebt_core_background_color'),
@@ -97,61 +104,73 @@ class EbtCoreSettingsForm extends ConfigFormBase {
       '#element_validate' => [['\Drupal\ebt_core\Plugin\Field\FieldWidget\EbtSettingsDefaultWidget', 'validateColorElement']],
     ];
 
-    $form['ebt_core_mobile_breakpoint'] = [
+    $form['ebt_core_breakpoint'] = [
+      '#type' => 'details',
+      '#title' => $this->t('Breakpoints'),
+      '#open' => TRUE,
+    ];
+
+    $form['ebt_core_breakpoint']['ebt_core_mobile_breakpoint'] = [
       '#type' => 'number',
       '#title' => $this->t('Mobile breakpoint'),
       '#default_value' => $config->get('ebt_core_mobile_breakpoint'),
     ];
 
-    $form['ebt_core_tablet_breakpoint'] = [
+    $form['ebt_core_breakpoint']['ebt_core_tablet_breakpoint'] = [
       '#type' => 'number',
       '#title' => $this->t('Tablet breakpoint'),
       '#default_value' => $config->get('ebt_core_tablet_breakpoint'),
     ];
 
-    $form['ebt_core_desktop_breakpoint'] = [
+    $form['ebt_core_breakpoint']['ebt_core_desktop_breakpoint'] = [
       '#type' => 'number',
       '#title' => $this->t('Desktop breakpoint'),
       '#default_value' => $config->get('ebt_core_desktop_breakpoint'),
     ];
 
-    $form['ebt_core_xxsmall_width'] = [
+    $form['ebt_core_width'] = [
+      '#type' => 'details',
+      '#title' => $this->t('Width'),
+      '#open' => TRUE,
+    ];
+
+    $form['ebt_core_width']['ebt_core_xxsmall_width'] = [
       '#type' => 'number',
       '#title' => $this->t('xxSmall width'),
       '#default_value' => $config->get('ebt_core_xxsmall_width'),
     ];
 
-    $form['ebt_core_xsmall_width'] = [
+    $form['ebt_core_width']['ebt_core_xsmall_width'] = [
       '#type' => 'number',
       '#title' => $this->t('xSmall width'),
       '#default_value' => $config->get('ebt_core_xsmall_width'),
     ];
 
-    $form['ebt_core_small_width'] = [
+    $form['ebt_core_width']['ebt_core_small_width'] = [
       '#type' => 'number',
       '#title' => $this->t('Small width'),
       '#default_value' => $config->get('ebt_core_small_width'),
     ];
 
-    $form['ebt_core_default_width'] = [
+    $form['ebt_core_width']['ebt_core_default_width'] = [
       '#type' => 'number',
       '#title' => $this->t('Default width'),
       '#default_value' => $config->get('ebt_core_default_width'),
     ];
 
-    $form['ebt_core_large_width'] = [
+    $form['ebt_core_width']['ebt_core_large_width'] = [
       '#type' => 'number',
       '#title' => $this->t('Large width'),
       '#default_value' => $config->get('ebt_core_large_width'),
     ];
 
-    $form['ebt_core_xlarge_width'] = [
+    $form['ebt_core_width']['ebt_core_xlarge_width'] = [
       '#type' => 'number',
       '#title' => $this->t('xLarge width'),
       '#default_value' => $config->get('ebt_core_xlarge_width'),
     ];
 
-    $form['ebt_core_xxlarge_width'] = [
+    $form['ebt_core_width']['ebt_core_xxlarge_width'] = [
       '#type' => 'number',
       '#title' => $this->t('xxLarge width'),
       '#default_value' => $config->get('ebt_core_xxlarge_width'),