Change the guide form field layout for all tables (#1965)

* Change the guide form field layout for all tables

* Updates following comments

* Add chromedash-checkbox, just so we can use the label attribute.

* Add missing option close tag: <option></option>

pages/guideforms.py

@@ -96,7 +96,7 @@ SHIPPED_WEBVIEW_HELP_TXT = ('First milestone to ship with this status. '
                             'Applies to Enabled by default, Browser '
                             'Intervention, Deprecated, and Removed.')
 
-SUMMARY_PLACEHOLDER_TXT = (
+SUMMARY_HELP_TXT = (
   'NOTE: Text in the beta release post, the enterprise release notes, '
   'and other external sources will be based on this text.\n\n'
   'Begin with one line explaining what the feature does. Add one or two '
@@ -163,9 +163,10 @@ ALL_FIELDS = {
 
     'summary': forms.CharField(
         required=True,
-        widget=ChromedashTextarea(attrs={'placeholder': SUMMARY_PLACEHOLDER_TXT}),
+        widget=ChromedashTextarea(),
         help_text=
-        ('<a target="_blank" href="'
+        (SUMMARY_HELP_TXT +
+         '<br><a target="_blank" href="'
          'https://github.com/GoogleChrome/chromium-dashboard/wiki/'
          'EditingHelp#summary-example">Guidelines and example</a>.'
         )),
@@ -252,6 +253,8 @@ ALL_FIELDS = {
                    'feature implements?')),
 
     'unlisted': forms.BooleanField(
+      label="Unlisted",
+      widget=forms.CheckboxInput(attrs={'label': "Unlisted"}),
       required=False, initial=False,
       help_text=('Check this box for draft features that should not appear '
                  'in the feature list. Anyone with the link will be able to '
@@ -265,9 +268,11 @@ ALL_FIELDS = {
                    'spec link when available.')),
 
     'api_spec': forms.BooleanField(
-        required=False, initial=False, label='API spec',
+        label='API spec',
+        widget=forms.CheckboxInput(attrs={'label': "API spec"}),
+        required=False, initial=False,
         help_text=('The spec document has details in a specification language '
-                   'such as Web IDL, or there is an exsting MDN page.')),
+                   'such as Web IDL, or there is an existing MDN page.')),
 
     'spec_mentors': MultiEmailField(
         required=False, label='Spec mentor',
@@ -622,7 +627,9 @@ ALL_FIELDS = {
          'DevTools support checklist</a> for guidance.')),
 
     'all_platforms': forms.BooleanField(
-        required=False, initial=False, label='Supported on all platforms?',
+        label='Supported on all platforms?',
+        widget=forms.CheckboxInput(attrs={'label': "Supported on all platforms"}),
+        required=False, initial=False, 
         help_text=
         ('Will this feature be supported on all six Blink platforms '
          '(Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?')),
@@ -636,7 +643,9 @@ ALL_FIELDS = {
                 'supported on all platforms.')),
 
     'wpt': forms.BooleanField(
-        required=False, initial=False, label='Web Platform Tests',
+        label='Web Platform Tests',
+        widget=forms.CheckboxInput(attrs={'label': "Web Platform Tests"}),
+        required=False, initial=False, 
         help_text='Is this feature fully tested in Web Platform Tests?'),
 
     'wpt_descr': forms.CharField(
@@ -739,6 +748,8 @@ ALL_FIELDS = {
         help_text=SHIPPED_WEBVIEW_HELP_TXT),
 
     'requires_embedder_support': forms.BooleanField(
+      label='Requires Embedder Support',
+      widget=forms.CheckboxInput(attrs={'label': "Requires Embedder Support"}),
       required=False, initial=False,
       help_text=(
           'Will this feature require support in //chrome?  '
@@ -790,7 +801,9 @@ ALL_FIELDS = {
         help_text='Name of the flag that enables this feature.'),
 
     'prefixed': forms.BooleanField(
-        required=False, initial=False, label='Prefixed?'),
+        label='Prefixed?',
+        widget=forms.CheckboxInput(attrs={'label': "Prefixed"}),
+        required=False, initial=False),
 
     'search_tags': forms.CharField(
         label='Search tags', required=False,
@@ -819,8 +832,10 @@ class ChromedashForm(forms.Form):
 
     def as_table(self):
         "Return this form rendered as HTML <tr>s -- excluding the <table></table>."
+        header = '<tr%(html_class_attr)s><th colspan="2"><b>%(label)s</b></th></tr>'
+        html = header + '<tr%(html_class_attr)s><td>%(errors)s%(field)s</td><td>%(help_text)s</td></tr>'
         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>',
+            normal_row=html,
             error_row='<tr><td colspan="2">%s</td></tr>',
             row_ender='</td></tr>',
             help_text_html='<span class="helptext">%s</span>',

static/components.js

@@ -26,6 +26,7 @@ import './elements/icons';
 import './elements/chromedash-approvals-dialog';
 import './elements/chromedash-banner';
 import './elements/chromedash-callout';
+import './elements/chromedash-checkbox';
 import './elements/chromedash-color-status';
 import './elements/chromedash-feature';
 import './elements/chromedash-feature-detail';

static/elements/chromedash-checkbox.js

@@ -0,0 +1,48 @@
+import {LitElement, css, html} from 'lit';
+import {ifDefined} from 'lit/directives/if-defined.js';
+import {live} from 'lit/directives/live.js';
+import {SHARED_STYLES} from '../sass/shared-css.js';
+
+export class ChromedashCheckbox extends LitElement {
+  static get properties() {
+    return {
+      id: {type: String},
+      name: {type: String},
+      label: {type: String},
+      class: {type: String},
+      checked: {type: Boolean},
+      disabled: {type: Boolean},
+      required: {type: Boolean},
+      value: {type: String},
+    };
+  }
+
+  static get styles() {
+    return [
+      ...SHARED_STYLES,
+      css`
+:host sl-checkbox::part(label) {
+    font-size: var(--sl-input-font-size-small);
+}
+  `];
+  }
+
+  render() {
+    return html`
+    <sl-checkbox
+      id=${ifDefined(this.id)}
+      name=${ifDefined(this.name)}
+      class=${ifDefined(this.class)}
+      size="small"
+      .checked=${live(this.checked)}
+      .disabled=${this.disabled}
+      .required=${this.required}
+      value=${ifDefined(this.value)}
+      >
+      ${this.label}
+    </sl-checkbox>`;
+  }
+}
+
+customElements.define('chromedash-checkbox', ChromedashCheckbox);
+

static/sass/forms.scss

@@ -8,33 +8,36 @@ table {
   }
 
   th {
-    max-width: 200px;
+    padding: 12px 10px 5px 0;
-    padding: 12px 10px 10px 0;
     vertical-align: top;
   }
 
   td {
-    padding: 10px;
+    padding: 6px 10px;
     vertical-align: top;
   }
+
+  td:first-of-type { 
+    width: 60% 
+  }
+
   .choices label {
     font-weight: bold;
   }
   .choices div {
     margin-top: 1em;
   }
-
   .choices p {
     margin: .5em 1.5em 1em;
   }
 
   .helptext {
     display: block;
-    font-style: italic;
+    font-size: small;
-    font-size: smaller;
     max-width: 40em;
     margin-top: 2px;
   }
+
   input[type="text"], input[type="url"], input[type="email"], textarea {
     width: 100%;
     font: var(--form-element-font);
@@ -109,10 +112,6 @@ form section.flat_form + h3, .final_buttons {
   box-shadow: rgba(0, 0, 0, 0.067) 1px 1px 4px;
 }
 
-.stage_form th, .flat_form th, .final_buttons th {
-  width: 200px;
-}
-
 #metadata-readonly div + div {
   margin-top: 4px;
 }
@@ -130,7 +129,7 @@ chromedash-textarea[invalid]::part(textarea)
 }
 
 sl-select[size="small"] sl-menu-item::part(base) {
-  font-size: 12px;  /* == --sl-font-size-x-small */
+  font-size: var(--sl-font-size-x-small);
   padding: 0px;
 }
 

templates/django/forms/widgets/checkbox.html

@@ -1,8 +1,8 @@
-<sl-checkbox
+<chromedash-checkbox
     name="{{ widget.name }}"
     size="small"
     {% if widget.value != None %} 
       value="{{ widget.value|stringformat:'s' }}"
     {% endif %}
     {% include "django/forms/widgets/attrs.html" %}>
-</sl-checkbox>
+</chromedash-checkbox>

templates/guide/metadata.html

@@ -116,11 +116,10 @@
           {{ overview_form }}
 
           <tr>
-            <th></th>
+            <th colspan="2">
-            <td>
               <input class="button" type="submit" value="Submit">
               <button id="close-metadata" type="reset">Cancel</button>
-            </td>
+            </th>
           </tr>
         </table>
       </form>

templates/guide/new.html

@@ -33,7 +33,7 @@ table label input[type=radio]:focus {
 <section id="stage_form">
   <form name="overview_form" method="POST" action="{{ current_path }}">
     <input type="hidden" name="token" value="{{xsrf_token}}">
-    <table style="max-width: 60em">
+    <table style="max-width: 80em">
       <tr>
         <th></th>
         <td>
@@ -43,56 +43,71 @@ table label input[type=radio]:focus {
           page for process instructions.
         </td>
       </tr>
+
       {{ overview_form }}
+
       <tr>
-        <th><label>Feature type:</label></th>
+        <th colspan="2"><b>Feature type:</b></th>
-        <td class="choices" style="padding-top:0">
+      </tr>
-          <div>
+
+      <tr>
+        <td colspan="2" class="choices" style="padding-top:0">
             <label for="id_feature_type_0">
               <input id="id_feature_type_0" name="feature_type" type="radio"
                      value="0" required>
               New feature incubation
             </label>
+
             <p>When building new features, we follow a
               process that emphasizes engagement with the WICG and other
               stakeholders early.</p>
-          </div>
+        </td>
-          <div>
+      </tr>
+
+      <tr>
+        <td colspan="2" class="choices">
             <label for="id_feature_type_1">
               <input id="id_feature_type_1" name="feature_type" type="radio"
                      value="1" required>
               Existing feature implementation
             </label>
+
             <p>If there is already an agreed specification, work may
               quickly start on implementation and origin trials.</p>
-          </div>
+        </td>
-          <div>
+      </tr>
+
+      <tr>
+        <td colspan="2" class="choices">
             <label for="id_feature_type_2">
               <input id="id_feature_type_2" name="feature_type" type="radio"
                      value="2" required>
               Web developer facing change to existing code
             </label>
+
             <p>Sometimes a change to a shipped feature requires an additional
               feature entry.  This type of feature entry can be referenced
               from a PSA immediately.</p>
-          </div>
+        </td>
+      </tr>
 
-          <div>
+      <tr>
+        <td colspan="2" class="choices">
             <label for="id_feature_type_3">
               <input id="id_feature_type_3" name="feature_type" type="radio"
                      value="3" required>
               Feature deprecation
             </label>
-            <p>Deprecate and remove an old feature.</p>
-          </div>
 
+            <p>Deprecate and remove an old feature.</p>
         </td>
       </tr>
+
       <tr>
-        <th></th>
+        <th colspan="2">
-        <td>
+          {% comment %} <sl-button type="submit" class="primary" variant="primary" size="small">Submit</sl-button> {% endcomment %}
           <input type="submit" class="primary" value="Submit">
-        </td>
+        </th>
       </tr>
     </table>
   </form>

templates/guide/stage.html

@@ -32,24 +32,29 @@
       {{ feature_form }}
 
       <tr>
-        <th><label>Process stage:</label></th>
+        <th colspan="2"><b>Process stage:</b></th>
-        <td>
+      </tr>
+      <tr>
           {% if already_on_this_stage %}
+          <td colspan="2">
             This feature is already in stage <b>{{ stage_name }}</b>.
+          </td>
           {% else %}
+          <td>
             <input type="checkbox" name="set_stage"
                    id="set_stage">
             <label for="set_stage">
               Set to: <b>{{ stage_name }}</b>
-              <br>
+            </label>
+          </td>
+          <td>
               <span class="helptext">
                 Check this box to move this feature to this
                 stage in the process. Leave it unchecked if you are adding
                 draft information or revising a previous stage.
               </span>
-            </label>
+          </td> 
           {% endif %}
-        </td>
       </tr>
     </table>
   </section>
@@ -61,12 +66,16 @@
       <table>
         {% if impl_status_name %}
           <tr>
-            <th>Implementation status:</th>
+            <th colspan="2">Implementation status:</th>
-            <td>
+          </tr>
+          <tr>
               {% if already_on_this_impl_status %}
+              <td colspan="2">
                 This feature already has implementation status:
                 <b>{{ impl_status_name }}</b>.
+              </td>
               {% else %}
+              <td>
                 <input type="hidden" name="impl_status_offered"
                        value="{{impl_status_offered}}">
                 <input type="checkbox" name="set_impl_status"
@@ -74,14 +83,17 @@
                 <!-- TODO(jrobbins): When checked, make some milestone fields required. -->
                 <label for="set_impl_status">
                   Set implementation status to: <b>{{ impl_status_name }}</b>
-                  <br>
-                  <span class="helptext">
-                    Check this box to update the implementation
-                    status of this feature in Chromium.
-                  </span>
                 </label>
+              </td>
+              <td>
+                <br>
+                <span class="helptext">
+                  Check this box to update the implementation
+                  status of this feature in Chromium.
+                </span>
+              </td>
               {% endif %}
-            </td>
+
           </tr>
         {% endif %}