Content Comparison

...

• Every input should have a mat-form-field container, which formats its' content styles and spacing, and facilitates spacing for any required input field error messages.

Label

• Use <label> for input labels

...

• Use matInput for all instances of <input type="text">

...

‘Input Hint' Usage Rules

Use 'input hints' for individual/single input feedback. For whole page related feedback, see Snackbar usage rules.

...

• Use <mat-hint> container if the input is required and needs a ‘required message' e.g. This field is required or if the field has HTML5 input validation, e.g. email format check

• If an input is required, add class=”required” to the label, which will add a red asterix after the label to indicate the field must be completed

MiscDisabled Inputs

• Use disabled tag within input, which will automatically pull in disabled input styling

  Code Block
  language html
  <input matInput type="text" disabled="disabled"> OR <input matInput type="text" disabled>

Inline Editing/Saving Text and Select Inputs

Normally, changes are made to the contents of an input and within corresponding panel footer, there will be a ‘Save’ button to save the changes.

However, there are a few instances where we do not have this ‘whole panel' save button, where instead inputs are saved on a change by change basis. This is achieved through an ‘inline’ set of controls to allow the enabling, changing and saving of an inputs content. The UX journey works as follows:

1. Click the ‘edit’ button to enable the input

   Image Added

2. Enter the new value

   Image Added

3. Click the ‘save’ button on the input

   Image Added

4. New value is saved without having to click a ‘whole panel’ save button

   Image Added

This method means that sensitive/impactful input values require a few purposeful UX interactions in order to be able to edit and save values, therefore preventing mistakes and errors. Currently, inline input editing is used on:

• Advertisers > Advertiser > Value Transforms Table

• Advertisers > Advertiser > Validations Lists Table

• Campaign > Processr Table

• Leads > Lead Profile Modal > Profile Tab Table [Development In Progress]

Input Prefix

N/A (Campaign > Publisher > Assign > Payout Column)