Lightning component action is a handy option to create custom function called from record detail page. We can launch a lightning component from a custom action by just implementing either force:lightningQuickAction or force:lightningQuickActionWithoutHeader. However, lightning component action has serious user interface problems. I will introduce them and propose a workaround.
A component implemented force:lightningQuickAction is shown on the auto-created modal and its header and footer are outside of the component. So we can neither customize the header text nor put an another button next to the cancel button on the footer.
It's a natural to think about recreating everything in a component implemented force:lightningQuickActionWithoutHeader. However, it has another problem. Extra margin is generated.
We can overwrite the style of the auto-created modal by inline CSS
to disable extra margin. Another possibility
is calling a custom modal from lightning:button tag but it requires you to recreate a highlight panel and it would be a tough work.
Now we get a modal which is similar to standard action.
I created a template modal component which can be used in a component implemented force:lightningQuickActionWithoutHeader. It is available on this repository.
<c:LightningActionModal title="Hello world!" percentWidth="85" bodyHeight="300">
//awesome modal body
<lightning:button label="Cancel" variant="neutral"/>
<lightning:button label="Save" variant="brand" />
|| Text shown on the modal header.
|| Designate the width of the modal by percent. Default value is 50.
|| Designate the height of the modal body by pixel. Default value is 250. The value in the custom action setting is neglected due to the overwritten CSS.
|| Content in the modal body.
|| Content in the modal footer.