Skip to content

Standardize/abstract form control labels and common Inputs #672

Open
@cal-smith

Description

@cal-smith

Most form controls share a general structure, with a ibm-form-item component we can standardize our label handling and reduce repitetion. We should also implement a BaseFormControl that provides common Inputs, Outputs, and methods (such as isTemplate)

ibm-form-item rough sample (for ibm-select):

<ibm-form-item 
  [label]="label" 
  [helperText]="helperText"
  [invalid]="invalid"
  [invalidText]="invalidText">
  <div 
    class="bx--select-input__wrapper" 
    [attr.data-invalid]="(invalid ? true : null)">
    <select
      #select
      [attr.id]="id"
      [disabled]="disabled"
      (change)="onChange($event)"
      class="bx--select-input">
        <ng-content></ng-content>
    </select>
    <ibm-icon-warning-filled16
      *ngIf="!skeleton && invalid"
      class="bx--select__invalid-icon"
      style="display: inherit;">
    </ibm-icon-warning-filled16>
    <ibm-icon-chevron-down16 
      *ngIf="!skeleton" 
      class="bx--select__arrow" 
      style="display: inherit;">
    </ibm-icon-chevron-down16>
  </div>
</ibm-form-item>

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions