Content Comparison

...

• 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

...

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

   

2. Enter the new value

   

3. Click the ‘save’ button on the input

   

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

   

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)