consul/ui/packages/consul-ui/app/components/modal-dialog/index.hbs

{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: MPL-2.0
}}

{{#let (hash
  labelledby=(unique-id)
) as |aria|}}
  <Portal @target="modal">
    {{yield}}
    <div
      class="modal-dialog"
      aria-hidden="true"
      ...attributes
      {{did-insert (action "connect")}}
      {{will-destroy (action "disconnect")}}
    >
      <div tabindex="-1" data-a11y-dialog-hide></div>
      <div
        class="modal-dialog-modal"
        role="dialog"
        aria-label={{@aria.label}}
      >
        <div
          role="document"
        >
          <header class="modal-dialog-header">
            <Hds::Button
              data-a11y-dialog-hide
              @text='Close dialog'
              @color='secondary'
              @icon='x'
              @size='small'
              @isIconOnly={{true}}
            />
            <YieldSlot @name="header">
              {{yield (hash
                open=(action "open")
                close=(action "close")
                opened=this.isOpen
                aria=aria
              )}}
            </YieldSlot>
          </header>
          <div class="modal-dialog-body">
            <YieldSlot @name="body">
              {{yield (hash
                open=(action "open")
                close=(action "close")
                opened=this.isOpen
                aria=aria
              )}}
            </YieldSlot>
          </div>
          <footer class="modal-dialog-footer">
            <YieldSlot @name="actions" @params={{block-params (action "close")}}>
              {{yield (hash
                open=(action "open")
                close=(action "close")
                opened=this.isOpen
                aria=aria
              )}}
            </YieldSlot>
          </footer>
        </div>
      </div>
    </div>
  </Portal>
{{/let}}