feat(www): change style to filled fields to stay consistent with othe…

…r text fields (#1751) * Change style to filled fields without color background to stay consistent with our Material 1 text fields. * Fix tests. * More style changes based on design review. * Fix test. * Add container class.
Jigsaw-Code · Oct 25, 2023 · b1c8491 · b1c8491
1 parent 7c87dc1
commit b1c8491
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 257 deletions.
diff --git a/src/www/ui_components/server-rename-dialog.js b/src/www/ui_components/server-rename-dialog.js
@@ -14,30 +14,27 @@
   limitations under the License.
 */
 
+import '@material/mwc-textfield';
 import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
 import {html} from '@polymer/polymer/lib/utils/html-tag.js';
 import {afterNextRender} from '@polymer/polymer/lib/utils/render-status.js';
 
 Polymer({
   _template: html`
     <style>
-      h3 {
-        margin-bottom: 0;
-      }
-      paper-input {
+      mwc-textfield {
         margin-top: 0;
-        --paper-input-container-focus-color: var(--medium-green);
       }
     </style>
     <paper-dialog id="renameDialog" with-backdrop="">
       <h3>[[localize('server-rename')]]</h3>
-      <paper-input id="serverNameInput" always-float-label="" maxlength="100" tabindex="0"></paper-input>
+      <mwc-textfield id="serverNameInput" maxlength="100" tabindex="0"></mwc-textfield>
       <div class="buttons">
         <paper-button dialog-dismiss="">[[localize('cancel')]]</paper-button>
         <paper-button dialog-confirm="" on-tap="_saveRename">[[localize('save')]]</paper-button>
       </div>
     </paper-dialog>
-`,
+  `,
 
   is: 'server-rename-dialog',
 
@@ -50,7 +47,7 @@ Polymer({
     __serverId: String,
   },
 
-  open: function(serverName, serverId) {
+  open: function (serverName, serverId) {
     // Store the initial serverName so we can know if it changed, and
     // store the serverId so we can emit the rename request event.
     this.__serverName = serverName;
@@ -63,10 +60,10 @@ Polymer({
     });
   },
 
-  _saveRename: function() {
+  _saveRename: function () {
     const newName = this.$.serverNameInput.value;
     if (newName !== this.__serverName) {
       this.fire('RenameRequested', {serverId: this.__serverId, newName: newName});
     }
-  }
+  },
 });
diff --git a/src/www/views/contact_view/index.spec.ts b/src/www/views/contact_view/index.spec.ts
@@ -56,7 +56,7 @@ describe('ContactView client variant', () => {
     radioButton.click();
     await nextFrame();
 
-    const exitCard = el.shadowRoot!.querySelector('outline-card.exit')!;
+    const exitCard = el.shadowRoot!.querySelector('.exit')!;
     expect(exitCard.textContent).toContain('experiencing high support volume');
   });
 
@@ -68,7 +68,7 @@ describe('ContactView client variant', () => {
     el.reset();
     await nextFrame();
 
-    const exitCard = el.shadowRoot!.querySelector('outline-card.exit')!;
+    const exitCard = el.shadowRoot!.querySelector('.exit')!;
     expect(exitCard).toBeNull();
   });
 
@@ -128,7 +128,7 @@ describe('ContactView client variant', () => {
         issue.click();
         await nextFrame();
 
-        const exitCard = el.shadowRoot!.querySelector('outline-card.exit')!;
+        const exitCard = el.shadowRoot!.querySelector('.exit')!;
         expect(exitCard.textContent).toContain(expectedMsg);
       });
     }
@@ -190,7 +190,7 @@ describe('ContactView client variant', () => {
 
         await nextFrame();
 
-        expect(el.shadowRoot?.querySelector('h1')?.textContent).toContain('Tell us how we can help.');
+        expect(el.shadowRoot?.querySelector('p.intro')?.textContent).toContain('Tell us how we can help.');
         expect(el.shadowRoot?.querySelector('support-form')).toBeNull();
       });
     });

diff --git a/src/www/views/contact_view/index.ts b/src/www/views/contact_view/index.ts
@@ -26,7 +26,6 @@ import {Radio} from '@material/mwc-radio';
 import {SingleSelectedEvent} from '@material/mwc-list/mwc-list';
 
 import './support_form';
-import {CardType} from '../shared/card';
 import {IssueType, UNSUPPORTED_ISSUE_TYPE_HELPPAGES} from './issue_type';
 import {AppType} from './app_type';
 import {FormValues, SupportForm, ValidFormValues} from './support_form';
@@ -45,15 +44,20 @@ export class ContactView extends LitElement {
   static styles = [
     css`
       :host {
+        background: #fff;
         color: var(--outline-text-color);
-        display: block;
         font-family: var(--outline-font-family);
-        margin: 0 auto;
-        max-width: var(--contact-view-max-width);
         padding: var(--contact-view-gutter, var(--outline-gutter));
         width: 100%;
       }
 
+      main {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        max-width: var(--contact-view-max-width);
+      }
+
       mwc-circular-progress {
         left: 50%;
         position: absolute;
@@ -66,17 +70,13 @@ export class ContactView extends LitElement {
         margin-bottom: var(--contact-view-gutter, var(--outline-gutter));
       }
 
-      outline-card {
-        width: 100%;
-      }
-
       p {
         margin-top: .25rem;
       }
 
       ol {
         list-style-type: none;
-        margin: .25rem 0;
+        margin: 1.5rem 0;
         padding-inline-start: 0;
       }
 
@@ -89,8 +89,9 @@ export class ContactView extends LitElement {
          * this issue.
          */
         --mdc-menu-max-height: 200px;
-        --mdc-menu-max-width: calc(100vw - calc(var(--outline-gutter) * 4));
+        --mdc-menu-max-width: min(calc(100vw - calc(var(--outline-gutter) * 4)), var(--contact-view-max-width));
         margin-top: 1rem;
+        max-width: var(--contact-view-max-width);
         width: 100%;
       }
 
@@ -99,6 +100,7 @@ export class ContactView extends LitElement {
       }
 
       mwc-list-item {
+        line-height: 1.25rem;
         /**
          * The default styling of list items that wrap to 3+ lines is bad, and
          * our items here are quite long and tend to wrap that much. To allow
@@ -231,7 +233,7 @@ export class ContactView extends LitElement {
   }
 
   private get renderIntroTemplate(): TemplateResult {
-    return html`<h1 class="intro">${this.localize('contact-view-intro')}</h1>`;
+    return html`<p class="intro">${this.localize('contact-view-intro')}</p>`;
   }
 
   private get renderForm(): TemplateResult | typeof nothing {
@@ -253,61 +255,62 @@ export class ContactView extends LitElement {
     `;
   }
 
-  render() {
+  private get renderMainContent(): TemplateResult {
     switch (this.step) {
       case Step.FORM: {
         return html` ${this.renderIntroTemplate} ${this.renderForm} `;
       }
 
       case Step.EXIT: {
-        return html` <outline-card class="exit" .type=${CardType.Elevated}> ${this.exitTemplate} </outline-card> `;
+        return html` <p class="exit">${this.exitTemplate}</p>`;
       }
 
       case Step.ISSUE_WIZARD:
       default: {
         return html`
           ${this.renderIntroTemplate}
 
-          <outline-card .type=${CardType.Elevated}>
-            <p>${this.localize('contact-view-open-ticket')}</p>
-
-            <ol>
-              ${this.openTicketSelectionOptions.map(
-                element => html`
-                  <li>
-                    <mwc-formfield .label=${this.localize(element.labelMsg)}>
-                      <mwc-radio
-                        name="open-ticket"
-                        .value="${element.value}"
-                        required
-                        @change=${this.selectHasOpenTicket}
-                        ${ref(element.ref)}
-                      >
-                      </mwc-radio>
-                    </mwc-formfield>
-                  </li>
-                `
-              )}
-            </ol>
-
-            <mwc-select
-              .label=${this.localize('contact-view-issue')}
-              outlined
-              ?hidden=${!this.showIssueSelector}
-              ?fixedMenuPosition=${true}
-              @selected="${this.selectIssue}"
-            >
-              ${ContactView.ISSUES[this.variant].map(value => {
-                return html`
-                  <mwc-list-item value="${value}">
-                    <span>${this.localize(`contact-view-issue-${value}`)}</span>
-                  </mwc-list-item>
-                `;
-              })}
-            </mwc-select>
-          </outline-card>
+          <p>${this.localize('contact-view-open-ticket')}</p>
+
+          <ol>
+            ${this.openTicketSelectionOptions.map(
+              element => html`
+                <li>
+                  <mwc-formfield .label=${this.localize(element.labelMsg)}>
+                    <mwc-radio
+                      name="open-ticket"
+                      .value="${element.value}"
+                      required
+                      @change=${this.selectHasOpenTicket}
+                      ${ref(element.ref)}
+                    >
+                    </mwc-radio>
+                  </mwc-formfield>
+                </li>
+              `
+            )}
+          </ol>
+
+          <mwc-select
+            .label=${this.localize('contact-view-issue')}
+            ?hidden=${!this.showIssueSelector}
+            ?fixedMenuPosition=${true}
+            @selected="${this.selectIssue}"
+          >
+            ${ContactView.ISSUES[this.variant].map(value => {
+              return html`
+                <mwc-list-item value="${value}">
+                  <span>${this.localize(`contact-view-issue-${value}`)}</span>
+                </mwc-list-item>
+              `;
+            })}
+          </mwc-select>
         `;
       }
     }
   }
+
+  render() {
+    return html`<main>${this.renderMainContent}</main>`;
+  }
 }