Skip to content

Commit

Permalink
fix(dialog): use styles from the modal package
Browse files Browse the repository at this point in the history
  • Loading branch information
@Westbrook
Westbrook committed Jan 4, 2021
1 parent 9f29bbe commit 0f04ce1
Show file tree
Hide file tree
Showing 2 changed files with 111 additions and 97 deletions.
71 changes: 39 additions & 32 deletions packages/dialog/src/Dialog.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
query,
} from '@spectrum-web-components/base';

import '@spectrum-web-components/rule/sp-rule.js';
import '@spectrum-web-components/button/sp-action-button.js';
import alertMediumStyles from '@spectrum-web-components/icon/src/spectrum-icon-alert-medium.css.js';
import crossLargeStyles from '@spectrum-web-components/icon/src/spectrum-icon-cross-large.css.js';
Expand All @@ -36,10 +37,10 @@ import styles from './dialog.css.js';
*
* @fires close - Announces that the dialog has been closed.
*/
export class Dialog extends ObserveSlotPresence(
SpectrumElement,
'[slot="footer"]'
) {
export class Dialog extends ObserveSlotPresence(SpectrumElement, [
'[slot="footer"]',
'[slot="button"]',
]) {
public static get styles(): CSSResultArray {
return [styles, alertMediumStyles, crossLargeStyles];
}
Expand All @@ -51,18 +52,19 @@ export class Dialog extends ObserveSlotPresence(
public error = false;

@property({ type: Boolean, reflect: true })
public dismissible = false;
public dismissable = false;

protected get hasFooter(): boolean {
return this.slotContentIsPresent;
return this.getSlotContentPresence('[slot="footer"]');
}

protected get hasButtons(): boolean {
return this.getSlotContentPresence('[slot="button"]');
}

@property({ type: Boolean, reflect: true, attribute: 'no-divider' })
public noDivider = false;

@property({ type: Boolean, reflect: true })
public open = false;

@property({ type: String, reflect: true })
public mode?: 'fullscreen' | 'fullscreenTakeover';

Expand Down Expand Up @@ -92,7 +94,6 @@ export class Dialog extends ObserveSlotPresence(
}

public close(): void {
this.open = false;
this.dispatchEvent(
new Event('close', {
bubbles: true,
Expand All @@ -102,17 +103,17 @@ export class Dialog extends ObserveSlotPresence(

protected render(): TemplateResult {
return html`
<slot name="hero"></slot>
<div class="header">
<slot name="title"></slot>
<div class="grid">
<slot name="hero"></slot>
<slot name="heading"></slot>
${this.error
? html`
<sp-icon class="type-icon alert-medium" size="s">
<sp-icon class="type-icon alert-medium">
${AlertMediumIcon({ hidden: true })}
</sp-icon>
`
: html``}
${this.dismissible
${this.dismissable
? html`
<sp-action-button
class="close-button"
Expand All @@ -126,27 +127,33 @@ export class Dialog extends ObserveSlotPresence(
</sp-action-button>
`
: html``}
${this.mode
${this.noDivider
? html``
: html`
<sp-rule size="medium" class="divider"></sp-rule>
`}
<div class="content">
<slot @slotchange=${this.onContentSlotChange}></slot>
</div>
${this.hasFooter
? html`
<slot name="button"></slot>
<div class="footer">
<slot name="footer"></slot>
</div>
`
: html``}
${this.hasButtons
? html`
<sp-button-group
class="buttonGroup ${this.hasFooter
? ''
: 'buttonGroup--noFooter'}"
>
<slot name="button"></slot>
</sp-button-group>
`
: html``}
</div>
<div class="content">
<slot @slotchange=${this.onContentSlotChange}></slot>
</div>
${!this.mode || this.hasFooter
? html`
<div class="footer">
<slot name="footer"></slot>
${!this.mode
? html`
<slot name="button"></slot>
`
: html``}
</div>
`
: html``}
`;
}

Expand Down
137 changes: 72 additions & 65 deletions packages/dialog/src/DialogWrapper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import '@spectrum-web-components/underlay/sp-underlay.js';
import '@spectrum-web-components/button/sp-button.js';

import '../sp-dialog.js';
import styles from './dialog-wrapper.css.js';
import styles from '@spectrum-web-components/modal/src/modal.css.js';
import { Dialog } from './Dialog.js';

/**
Expand All @@ -50,7 +50,7 @@ export class DialogWrapper extends SpectrumElement {
public confirmLabel = '';

@property({ type: Boolean, reflect: true })
public dismissible = false;
public dismissable = false;

@property()
public footer = '';
Expand Down Expand Up @@ -159,69 +159,76 @@ export class DialogWrapper extends SpectrumElement {
></sp-underlay>
`
: html``}
<sp-dialog
?dismissible=${this.dismissible}
?no-divider=${this.noDivider}
?open=${this.open}
mode=${ifDefined(this.mode ? this.mode : undefined)}
size=${ifDefined(this.size ? this.size : undefined)}
@close=${this.close}
>
${this.hero
? html`
<img
src="${this.hero}"
slot="hero"
aria-hidden=${ifDefined(
this.heroLabel ? undefined : 'true'
)}
alt=${ifDefined(
this.heroLabel ? this.heroLabel : undefined
)}
/>
`
: html``}
${this.headline
? html`
<h2 slot="title">${this.headline}</h2>
`
: html``}
<slot></slot>
<div slot="footer">${this.footer}</div>
${this.secondaryLabel
? html`
<sp-button
variant="primary"
slot="button"
@click=${this.clickSecondary}
>
${this.secondaryLabel}
</sp-button>
`
: html``}
${this.cancelLabel
? html`
<sp-button
variant="secondary"
slot="button"
@click=${this.clickCancel}
>
${this.cancelLabel}
</sp-button>
`
: html``}
${this.confirmLabel
? html`
<sp-button
variant="cta"
slot="button"
@click=${this.clickConfirm}
>
${this.confirmLabel}
</sp-button>
`
: html``}
</sp-dialog>
<div class="modal ${this.mode}">
<sp-dialog
?dismissable=${this.dismissable}
?no-divider=${this.noDivider}
mode=${ifDefined(this.mode ? this.mode : undefined)}
size=${ifDefined(this.size ? this.size : undefined)}
@close=${this.close}
>
${this.hero
? html`
<img
src="${this.hero}"
slot="hero"
aria-hidden=${ifDefined(
this.heroLabel ? undefined : 'true'
)}
alt=${ifDefined(
this.heroLabel
? this.heroLabel
: undefined
)}
/>
`
: html``}
${this.headline
? html`
<h2 slot="heading">${this.headline}</h2>
`
: html``}
<slot></slot>
${this.footer
? html`
<div slot="footer">${this.footer}</div>
`
: html``}
${this.secondaryLabel
? html`
<sp-button
variant="primary"
slot="button"
@click=${this.clickSecondary}
>
${this.secondaryLabel}
</sp-button>
`
: html``}
${this.cancelLabel
? html`
<sp-button
variant="secondary"
slot="button"
@click=${this.clickCancel}
>
${this.cancelLabel}
</sp-button>
`
: html``}
${this.confirmLabel
? html`
<sp-button
variant="cta"
slot="button"
@click=${this.clickConfirm}
>
${this.confirmLabel}
</sp-button>
`
: html``}
</sp-dialog>
</div>
`;
}
}

0 comments on commit 0f04ce1

Please sign in to comment.