From 19d3ee34ed0ff26f3f18d0e91e3d2dfe82ac058d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Renato=20Gon=C3=A7alves=20H?=
 <34697-renatog@users.noreply.drupalcode.org>
Date: Tue, 21 Feb 2023 13:54:29 -0300
Subject: [PATCH] Issue #3343454: Organize the Global Settings with field
 groups for colors, breakpoints and width values

---
 src/Form/EbtCoreSettingsForm.php | 49 ++++++++++++++++++++++----------
 1 file changed, 34 insertions(+), 15 deletions(-)

diff --git a/src/Form/EbtCoreSettingsForm.php b/src/Form/EbtCoreSettingsForm.php
index d57c3fc..b640159 100644
--- a/src/Form/EbtCoreSettingsForm.php
+++ b/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'),
-- 
GitLab