Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 21 Next »

References


Example

Usage

Structure

<mat-form-field>
  <label class="required">Label Name</label>
  <input matInput type="text">
  <mat-hint>
    Error message here
  </mat-hint>
</mat-form-field>

Container

  • 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

Input

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

‘Input Hint' 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


Disabled Inputs

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

    <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

  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]

  • No labels