Form cleanups (focus for radio buttons, extra br) (#1960)

* Misc changes in the works.

* Add workaround for missing focus style on radio buttons.

* Remove use of sl-radio.

* Clarify comment about sl-radio.

pages/guideforms.py

@@ -815,6 +815,18 @@ METADATA_FIELDS = [
      'bug_url', 'launch_bug_url',
 ]
 
+class ChromedashForm(forms.Form):
+
+    def as_table(self):
+        "Return this form rendered as HTML <tr>s -- excluding the <table></table>."
+        return self._html_output(
+            normal_row='<tr%(html_class_attr)s><th>%(label)s</th><td>%(errors)s%(field)s%(help_text)s</td></tr>',
+            error_row='<tr><td colspan="2">%s</td></tr>',
+            row_ender='</td></tr>',
+            help_text_html='<span class="helptext">%s</span>',
+            errors_on_separate_row=False,
+        )
+
 def define_form_class_using_shared_fields(class_name, field_spec_list):
   """Define a new subsblass of forms.Form with the given fields, in order."""
   # field_spec_list is normally just a list of simple field names,
@@ -826,7 +838,7 @@ def define_form_class_using_shared_fields(class_name, field_spec_list):
     class_dict[form_field_name] = ALL_FIELDS[shared_field_name]
     class_dict['field_order'].append(form_field_name)
 
-  return type(class_name, (forms.Form,), class_dict)
+  return type(class_name, (ChromedashForm,), class_dict)
 
 
 NewFeatureForm = define_form_class_using_shared_fields(

static/sass/forms.scss

@@ -122,6 +122,7 @@ sl-input::part(base) {
 }
 
 sl-input[invalid]::part(input),
+sl-checkbox[invalid]::part(input),
 chromedash-textarea[invalid]::part(textarea)
 {
   outline: 1px dotted red;
@@ -142,10 +143,3 @@ sl-select[size="small"] sl-menu-item::part(base) {
 sl-select sl-menu-item:not(:defined) {
    display: none 
 }
-
-/* Hide extra br following display:block elements */
-chromedash-textarea+br,
-sl-select+br,
-sl-input+br {
-  display: none;
-}

templates/guide/new.html

@@ -2,6 +2,17 @@
 
 {% block css %}
 <link rel="stylesheet" href="/static/css/forms.css">
+
+<!--
+ The following style is a workaround to better support radio buttons
+ without sl-radio which does not yet do validation.
+ We do depend on sl-focus-ring being defined.
+-->
+<style>
+table label input[type=radio]:focus { 
+  box-shadow: var(--sl-focus-ring);
+}
+</style>
 {% endblock %}
 
 {% block drawer %}