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 110a39e7f4
commit 78b2908a5d
1 changed files with 15 additions and 5 deletions

View File

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