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 20 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.

  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