Lightning Component Modal Heading

Question

I am using the lightning:overlayLibrary to display a modal. The header and footer are coming through fine but the header is not displaying as expected.

When I pass the title through the header object there is no heading tag. It is just text in the modal header class.

Has anyone come across this issue?

Is there a way to wrap the header text in a tag?

Here is my controller which is creating the modal.

({
  handleShowModal: function(component, evt, helper) {
    var modalBody;
    var modalFooter;
    $A.createComponents([['c:dfd_modalContent', {}], ['c:dfd_modalFooter', {}]], function(components, status) {
      if (status === 'SUCCESS') {
        modalBody = components[0];
        modalFooter = components[1];
        component.find('overlayLib').showCustomModal({
          header: 'Expedite your order',
          body: modalBody,
          footer: modalFooter,
          showCloseButton: true,
          cssClass: 'mymodal, slds-modal__footer_directional'
        });
      }
    });
  }
});

Answer 1

I used aura:html to generate the header tag, not sure if this is the best way, but works.

Psuedo code would looks as follows:

({
    handleShowModal: function(component, evt, helper) {
        var modalHeader;
        var modalBody;
        var modalFooter;
        $A.createComponents(
            [
                ["aura:html", {
                    "tag": "h2",
                    "body": "Expedite your order",
                    "HTMLAttributes": { 
                        "class": "slds-text-heading_medium slds-hyphenate" 
                    }
                }],
                ['c:dfd_modalContent', {}], 
                ['c:dfd_modalFooter', {}]
            ], 
            function(components, status) {
                if (status === 'SUCCESS') {
                    modalHeader = components[0]
                    modalBody = components[1];
                    modalFooter = components[2];
                    component.find('overlayLib').showCustomModal({
                        header: modalHeader,
                        body: modalBody,
                        footer: modalFooter,
                        showCloseButton: true,
                        cssClass: 'mymodal, slds-modal__footer_directional'
                    });
                }
            });
    }
});