Platform: Modal Technical Design

Modal Component

Summary

The modal is used as a container to be displayed in response to an action. It is commonly used to collect simple information with a short form, to get confirmation or display contextual information that does not require a page. The modal interrupts a current app process to prompt the user for information or to complete a short-term task. It’s a secondary window above the app, allowing the user to stay within the context of the current process. It requires users to make a decision or complete an action before they can continue.

Design

<fdp-modal>
 <fdp-modal-header [title]="Modal title" [icon]="cart" (modalClosed)="onModalClose()" [closeable]="true"></fdp-modal-header>
   <fdp-modal-body>
      <ng-template>
        <span>Modal Content Goes here.......</span>
      </ng-template>
   </fdp-modal-body>
 <fdp-modal-footer [showseparator]="true" [actions]="actions" (onModalAction)="onModalaction($event)"></fdp-modal-footer>
</fdp-modal>

Property Bindings

title: string

The 'title' property allows the user to set the Modal title.

icon: string

The 'icon' property allows the user to configure any icons in the modal header.

closeable: boolean

The 'closeable' property allows the user to set is modal can be close?

showseparator: boolean

showseparator allows the user to set separator line between the modal body and nodal footer,

actions: Action[]

actions allows to configure set of actions can taken on modal.

---

Event Bindings

modalClosed: EventEmitter<void>

On clicking of close icon on modal header , Modal should close.

'onModalAction:EventEmitter'

On clicking of any action button on the modal footer.

Interfaces

SuggestionItem

export interface ActionItem {
                label: string, // specifies the action label
                type: string,  // action button type
                priority: number,// priority of the action 
                options: 'string' // option for the action button
}