Add modal option to hide divider, and make title rendering optional

This commit is contained in:
Andrew Kingston 2021-07-30 13:57:33 +01:00
parent 699c1964dc
commit a831b7f91e
1 changed files with 15 additions and 5 deletions

View File

@ -15,6 +15,7 @@
export let showCloseIcon = true
export let onConfirm = undefined
export let disabled = false
export let showDivider = true
const { hide, cancel } = getContext(Context.Modal)
let loading = false
@ -41,11 +42,17 @@
aria-modal="true"
>
<div class="spectrum-Dialog-grid">
<h1 class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader">
{title}
</h1>
<Divider size="M" />
{#if title}
<h1
class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader"
class:noDivider={!showDivider}
>
{title}
</h1>
{#if showDivider}
<Divider size="M" />
{/if}
{/if}
<!-- TODO: Remove content-grid class once Layout components are in bbui -->
<section class="spectrum-Dialog-content content-grid">
<slot />
@ -96,6 +103,9 @@
.spectrum-Dialog-heading {
font-family: var(--font-sans);
}
.spectrum-Dialog-heading.noDivider {
margin-bottom: 12px;
}
.spectrum-Dialog-buttonGroup {
gap: var(--spectrum-global-dimension-static-size-200);