[Bug]: dissmissable attribute on dialog hides slot=button
Code of conduct
- [X] I agree to follow this project's code of conduct.
Impacted component(s)
sp-dialog
Expected behavior
slot=button content to be visible when dissmissable attribute is set on sp-dialog
Actual behavior
slot=button content is hidden with display: none;
Screenshots
No response
What browsers are you seeing the problem in?
No response
How can we reproduce this issue?
- Go to '...'
- Click on '....'
- Scroll to '....'
- Check console
- See error
Sample code or abstract reproduction which illustrates the problem
No response
Severity
None
Logs taken while reproducing problem
No response
Could you please create an abstracted version of this issue by forking this starter? @SavoInfostream
I'm having this issue aswell. It's quite confusing. Problem is present with this templated Lit code:
<overlay-trigger mode="modal" triggered-by="click">
<sp-dialog-base
slot="click-content"
underlay
>
<sp-dialog size="l" dismissable>
<h2 slot="heading">Simulation input for {headline}</h2>
<div class="json-view" style="max-height: 720px;">
{driftersJson}
</div>
<sp-button
slot="button"
@click="{Ev (fun ev -> console.debug("click ok"))}"
>
Clone
</sp-button>
</sp-dialog>
</sp-dialog-base>
<sp-action-button
id="drifter-info-button"
slot="trigger"
?disabled="{archiveOpt.IsNone}"
>
<sp-icon-info slot="icon"></sp-icon-info>
</sp-action-button>
</overlay-trigger>
Below is a screenshot of the produced html and css in google chrome:
I want the "Clone" button to show no matter what, but when I add "dismissable" to the inner <sp-dialog> it disappears. From the image you can clearly see that it says the button group should have set display none if the host has attribute dismissable. Which doesn't seem right to me. However, if I move the dismissable to the <sp-dialog-base>, then it works, but I no longer get the close button in the inner dialog. Which I want.