How to combine lightning-quick-action-panel and slds-modal_large?

Question

I want to pop-up a modal LWC using a quick action, without any Aura components. This should be possible since Summer'21.

I am currently using an Aura component that does the pop-up and at the same time specifies the maximum size of the modal.

When specifying a LWC in a quick action, I cannot specify a size. So how can I do it? Because the default size is too small for me.

If I look at the Salesforce documentation on lightning-quick-action-panel, it states "The lightning-quick-action-panel component implements the Modals blueprint in the SLDS".

In that section, I see a demonstration of the slds-modal_large class and I would like to apply it to my modal, but I don't know how: slds-modal_large is not a class that can be applied to lightning-quick-action-panel. I want to use lightning-quick-action-panel because a) it is recommended and b) it gives a nice border for the modal.

Where and how in the CSS or HTML file do I combine lightning-quick-action-panel and slds-modal_large?

Answer 1

It's actually possible to increase size of the quick action's modal using loadStyle() hacks.

You just need to create, or use the existing one, static resource with the CSS file which contains the following code:

.slds-modal__container {
  width: 95% !important;
  max-width: 95% !important;
}

.slds-modal__content {
  height: 100% !important;
  max-height: 95% !important;
}

Then you need to import it in your component and that's all, it will work without any problems.

import { LightningElement } from "lwc";
import { loadStyle } from "lightning/platformResourceLoader";

import LargeQuickActionModal from "@salesforce/resourceUrl/LargeQuickActionModal";

export default class QuickActionWithLargeModal extends LightningElement {
  connectedCallback() {
    Promise.all([
      loadStyle(this, LargeQuickActionModal + "/increaseModalSize.css")
    ]);
  }
}

---

By the way, you can also add the slds-modal_large class to where it should belong if you will load a js file from the static resource, that will find the modal in the DOM tree and add the class. But, I think in the context of the quick action's modal it won't work because it has some additional modifications and the class doesn't have any effect.

Demo