MAGE-986 Enhance checkbox UI with help text

Author: cammonro

Block/Adminhtml/System/Config/Form/Field/Checkboxes.php

@@ -9,26 +9,77 @@ class Checkboxes extends Field
 {
     protected function _getElementHtml(AbstractElement $element)
     {
-        $html = '';
+        $elementId = $element->getHtmlId();
+        $html = <<<CSS
+            <style>
+                #$elementId .form-group {
+                  display: grid;
+                  grid-template-columns: 24px 1fr;
+                  align-items: start;
+                  margin-bottom: 20px;
+                }
+
+                #$elementId .form-group input[type="checkbox"] {
+                  margin-top: 2px;
+                }
+                #$elementId .form-content {
+                  display: flex;
+                  flex-direction: column;
+                }
+                #$elementId .form-content label {
+                  font-weight: bold;
+                  color: #333;
+                }
+                #$elementId .form-content .description {
+                  font-size: 0.9em;
+                  color: #666;
+                  margin-top: 2px;
+                }
+            </style>
+        CSS;
+
+        $html .= sprintf('<div id="%s">', $elementId);
         $name = $element->getName();
         $options = $element->getValues();
         $values = empty($element->getValue()) ? [] : explode(',', $element->getValue()); // store as CSV in config
 
         foreach ($options as $option) {
             $value = $option['value'];
-            $label = $option['label'];
-            $checked = in_array($value, $values) ? 'checked' : '';
-            $html .= '<label style="display:block">';
-            $html .= sprintf(
-                '<input type="checkbox" name="%s[]" value="%s" %s /> %s',
+            $html .= $this->getCheckboxHtml(
                 $name,
                 $value,
-                $checked,
-                $label
+                in_array($value, $values),
+                $option['label'],
+                array_key_exists('description', $option) ? $option['description'] : ''
             );
-            $html .= '</label>';
         }
 
+        $html .= '</div>';
+        return $html;
+    }
+
+    protected function getCheckboxHtml(
+        string $name,
+        string $value,
+        bool $checked,
+        ?string $label = null,
+        ?string $description = null
+    ): string
+    {
+        $html = '<div class="form-group">';
+        $html .= sprintf(
+            '<input type="checkbox" name="%s[]" value="%s" %s />',
+            $name,
+            $value,
+            $checked ? 'checked' : ''
+        );
+        $html .= '<div class="form-content">';
+        $html .= sprintf('<label>%s</label>',$label ?? $name);
+        if ($description) {
+            $html .= sprintf('<span class="description">%s</span>', $description);
+        }
+        $html .= '</div>';
+        $html .= '</div>';
         return $html;
     }
 }

Model/Source/InstantSearchRedirectOptions.php

@@ -17,19 +17,28 @@ public function toOptionArray()
         return [
             [
                 'value' => self::REDIRECT_ON_PAGE_LOAD,
-                'label' => __('Redirect on page load (if InstantSearch loads with a redirect, immediately take the user to that URL)'),
+                'label' => __('Redirect on page load'),
+                'description' => __('If InstantSearch loads search results that include a redirect, immediately take the user to that URL.')
             ],
             [
                 'value' => self::REDIRECT_ON_SEARCH_AS_YOU_TYPE,
                 'label' => __('Trigger redirect on "search as you type"'),
+                'description' =>
+                    __(
+                        'As the user types their query in the %1 widget, matching hits will be retrieved automatically from %2. If a redirect is found for the entered query, this setting will immediately take the user to that URL.',
+                        '<a href="https://www.algolia.com/doc/api-reference/widgets/search-box/js/" target="_blank"><code>searchBox</code></a>',
+                        '<a href="https://www.algolia.com/doc/guides/getting-started/how-algolia-works/" target="_blank">Algolia</a>'
+                    )
             ],
             [
                 'value' => self::SELECTABLE_REDIRECT,
-                'label' => __('Display the redirect as a selectable item above search result hits'),
+                'label' => __('Display redirect as a selectable item'),
+                'description' => __('If a redirect is found for a search query, display a clickable link to that URL above the search result hits.')
             ],
             [
                 'value' => self::OPEN_IN_NEW_WINDOW,
-                'label' => __('Open redirect URL in a new window (applies to clickable links only)'),
+                'label' => __('Open redirect URL in a new window'),
+                'description' => __('This setting applies to clickable links only.')
             ]
         ];
     }