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

...

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)