Add modal option to hide divider, and make title rendering optional
This commit is contained in:
parent
110a39e7f4
commit
78b2908a5d
|
@ -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);
|
||||||
|
|
Loading…
Reference in New Issue