New component: dialog - Githubissues

This will offer 2 basic tools:

a) The dialog service b) a base dialog component

Requirements

Service
- [ ] Name: TsDialogService
- [ ] canDismiss is an option set to true by default.
  - When set to false, no close button should be shown and clicking the backdrop or using the esc does not close the modal.
- [ ] Should be able to pass in a full set of options at creation (canDismiss, size, etc)
- [ ] Emit events
  - afterClosed
  - afterOpened
  - backdropClicked
- [ ] Should allow multiple modals on a single page
- [ ] Should be able to define if we allow multiple dialogs to be open or if opening a new one auto-closes others
- [ ] Allow blocking of background scrolling
- [ ] Allow user defined class to be added to modal wrapper
Component
- [ ] support header slot <ts-dialog-header>My custom HTML</ts-dialog-header>
  - [ ] If not using the header slot, the title can be set via @Input title: string
  - [ ] If not using the header slot, the subtitle can be set via @Input subTitle: string
- [ ] support close button (if canDismiss is true)
- [ ] support footer slot <ts-dialog-footer>My custom HTML</ts-dialog-footer>
  - [ ] provide css property to allow consumers to set flex row properties (ie space-between etc)
- [ ] supports multiple sizes
  - standard default - small (see image) - large, almost full screen with gutter ~26px
  - Can also pass in specific height/width values in settings
  - Start with: s/m/l/
- [ ] Center content area should support scrolling overflow without obscuring the header or footer
- [ ] a11y
  - [ ] should trap focus
    - https://material.angular.io/cdk/a11y/overview (see cdkTrapFocus)
    - [ ] tab key cycles through contents without hitting primary page
    - [ ] shift tab cycles in reverse
    - [ ] enter key submits if applicable (expose directive?)
  - [ ] esc should close (optional - default true)
  - [ ] role="dialog"
  - [ ] When the modal is open, everything behind it has HTML attribute aria-hidden="true", so assistive technology won't read out the underlying page. The best way to do this is to give the modal and the page separate wrapper elements and toggle aria-hidden="true"/aria-hidden="false" on the main page's wrapper depending on whether or not the modal is open.
  - [ ] contains heading
  - [ ] has aria-labelledby attribute whose value is the id of the modal’s heading
- [ ] Expose custom CSS properties
  - [ ] custom transition
  - [ ] custom backdrop background
  - [ ] custom gutter? (this could allow custom sizing from a single css property)
- Style
  - backdrop: grey-90 at 85% opacity
  - title 20px/ 25px 700, 6px margin bottom
  - close icon: 10px wide, gray 70 3E464C
  - header padding: 24 24 16 24
  - footer/header border: 1px solid E9EBED - full width
  - footer padding: 16 24 24 24
  - panel: border radius 4
  - panel background: #fff
[ ] Expose directive to autofocus a specific element when the modal becomes visible
- https://material.angular.io/cdk/a11y/overview (see cdkFocusInitial)
- Or possibly just point people to use cdkFocusInitial?

Example implementations

Service-based examples

// The consumer defined data structure:
export interface MyDialogData {
  animal: string;
  name: string;
}

// The consumer component that needs a dialog:
@Component({
  selector: 'consumer-component',
  templateUrl: 'consumer-component.html',
})
export class ConsumerComponent {
  animal: string;
  name: string;

  constructor(public modal: TsModalService) {}

  open(): void {
    const modalRef = this.modal.open(ConsumerExampleModal, {
      data: {name: this.name, animal: this.animal}
    });

    modalRef.afterClosed().subscribe(result => {
      console.log('The modal was closed');
      this.animal = result;
    });
  }

}

// The actual dialog component that will be shown.
// The consumer can rely on a `<ts-dialog>|<ts-dialog-header>|<ts-dialog-footer>` components to get basic layout and styles.
@Component({
  selector: 'consumer-dialog-content',
  templateUrl: 'consumer-dialog-content.html',
})
export class ConsumerDialogContent {
  constructor(
    public dialogRef: TsDialogRef<ConsumerDialogContent>,
    @Inject(TS_DIALOG_DATA) public data: MyDialogData,
  ) {}

  onCancelClick(): void {
    this.dialogRef.close();
  }
}

Component-based examples

NOTE: I think that long-term, this approach is too simplistic; but I am leaving the examples here for discussion.

<ts-dialog title="My Title" [isVisible]="true">
  Content
</ts-dialog>

<ts-dialog [isVisible]="true">
  <ts-dialog-header>
    <h2>My title</h2>
    <ts-chip badge>Read Only</ts-chip>
  </ts-dialog-header>

  <ts-dialog-footer>
    <button>Cancel</button>
    <button>Submit</button>
  </ts-dialog-footer>
</ts-dialog>

<ts-dialog maxHeight="86%" maxWidth="400px">
  Content
</ts-dialog>

<!-- standard api -->
<button (click)="dialog1.isVisible ? dialog1.hide() : dialog1.show()">Toggle dialog 1</button>
<button (click)="dialog2.isVisible ? dialog2.hide() : dialog2.show()">Toggle dialog 2</button>

<!-- shortcut -->
<button (click)="dialog2.toggle()">Toggle dialog 2</button>

<ts-dialog #tsDialog="dialog1">First modal</ts-dialog>
<ts-dialog #tsDialog="dialog2">Second modal</ts-dialog>

GetTerminus / terminus-oss

New component: dialog #505

Requirements

Example implementations

Service-based examples

Component-based examples

Resources