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>
2022-06-25 16:57:58 -04:00 · 2022-06-25 16:57:58 -04:00 · 476ee36d77
--- a/pages/guideforms.py
+++ b/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>',
--- a/static/components.js
+++ b/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';
--- a/static/elements/chromedash-checkbox.js
+++ b/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);
+
--- a/static/sass/forms.scss
+++ b/static/sass/forms.scss
@ -8,33 +8,36 @@ table {
  }

  th {
-    max-width: 200px;
-    padding: 12px 10px 10px 0;
+    padding: 12px 10px 5px 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: smaller;
+    font-size: small;
    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;
 }

--- a/templates/django/forms/widgets/checkbox.html
+++ b/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>
--- a/templates/guide/metadata.html
+++ b/templates/guide/metadata.html
@ -116,11 +116,10 @@
          {{ overview_form }}

          <tr>
-            <th></th>
-            <td>
+            <th colspan="2">
              <input class="button" type="submit" value="Submit">
              <button id="close-metadata" type="reset">Cancel</button>
-            </td>
+            </th>
          </tr>
        </table>
      </form>
--- a/templates/guide/new.html
+++ b/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>
-        <td class="choices" style="padding-top:0">
-          <div>
+        <th colspan="2"><b>Feature type:</b></th>
+      </tr>
+
+      <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>
-          <div>
+        </td>
+      </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>
-          <div>
+        </td>
+      </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>
-        <td>
+        <th colspan="2">
+          {% 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>
--- a/templates/guide/stage.html
+++ b/templates/guide/stage.html
@ -32,24 +32,29 @@
      {{ feature_form }}

      <tr>
-        <th><label>Process stage:</label></th>
-        <td>
+        <th colspan="2"><b>Process stage:</b></th>
+      </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>
-            <td>
+            <th colspan="2">Implementation status:</th>
+          </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 %}