Skip to content

Commit

Permalink
feat(dialog): add dialog container slot
Browse files Browse the repository at this point in the history
PiperOrigin-RevId: 721930993
  • Loading branch information
material-web-copybara authored and copybara-github committed Jan 31, 2025
1 parent ac91657 commit d5d6b2d
Show file tree
Hide file tree
Showing 3 changed files with 71 additions and 2 deletions.
10 changes: 10 additions & 0 deletions dialog/internal/_dialog.scss
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,16 @@
position: absolute;
}

.container-slot {
border-radius: inherit;
inset: 0;
position: absolute;
}

slot[name='container'] {
border-radius: inherit;
}

.scroller {
display: flex;
flex: 1;
Expand Down
36 changes: 36 additions & 0 deletions dialog/internal/animations.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,11 @@ export interface DialogAnimation {
*/
scrim?: DialogAnimationArgs[];

/**
* Animations for the container slot.
*/
containerSlot?: DialogAnimationArgs[];

/**
* Animations for the container of the dialog.
*/
Expand Down Expand Up @@ -64,6 +69,22 @@ export const DIALOG_DEFAULT_OPEN_ANIMATION: DialogAnimation = {
{duration: 500, easing: 'linear'},
],
],
containerSlot: [
[
// Container slot fade in
[{'opacity': 0}, {'opacity': 1}],
{duration: 50, easing: 'linear'},
],
[
// Container slot grow
// Note: current spec says to grow from 0dp->100% and shrink from
// 100%->35%. We change this to 35%->100% to simplify the animation that
// is supposed to clip content as it grows. From 0dp it's possible to see
// text/actions appear before the container has fully grown.
[{'height': '35%'}, {'height': '100%'}],
{duration: 500, easing: EASING.EMPHASIZED},
],
],
container: [
[
// Container fade in
Expand Down Expand Up @@ -121,6 +142,21 @@ export const DIALOG_DEFAULT_CLOSE_ANIMATION: DialogAnimation = {
{duration: 150, easing: 'linear'},
],
],
containerSlot: [
[
// Container slot shrink
[{'height': '100%'}, {'height': '35%'}],
{
duration: 150,
easing: EASING.EMPHASIZED_ACCELERATE,
},
],
[
// Container slot fade out
[{'opacity': '1'}, {'opacity': '0'}],
{delay: 100, duration: 50, easing: 'linear'},
],
],
container: [
[
// Container shrink
Expand Down
27 changes: 25 additions & 2 deletions dialog/internal/dialog.ts
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,8 @@ export class Dialog extends dialogBaseClass {
private isConnectedPromise = this.getIsConnectedPromise();
@query('dialog') private readonly dialog!: HTMLDialogElement | null;
@query('.scrim') private readonly scrim!: HTMLDialogElement | null;
@query('.container-slot')
private readonly containerSlot!: HTMLDialogElement | null;
@query('.container') private readonly container!: HTMLDialogElement | null;
@query('.headline') private readonly headline!: HTMLDialogElement | null;
@query('.content') private readonly content!: HTMLDialogElement | null;
Expand Down Expand Up @@ -301,6 +303,9 @@ export class Dialog extends dialogBaseClass {
@keydown=${this.handleKeydown}
.returnValue=${this.returnValue || nothing}>
${showFocusTrap ? focusTrap : nothing}
<div class="container-slot">
<slot name="container"></slot>
</div>
<div class="container" @click=${this.handleContentClick}>
<div class="headline">
<div class="icon" aria-hidden="true">
Expand Down Expand Up @@ -433,13 +438,30 @@ export class Dialog extends dialogBaseClass {
return;
}

const {dialog, scrim, container, headline, content, actions} = this;
if (!dialog || !scrim || !container || !headline || !content || !actions) {
const {
dialog,
scrim,
containerSlot,
container,
headline,
content,
actions,
} = this;
if (
!dialog ||
!scrim ||
!containerSlot ||
!container ||
!headline ||
!content ||
!actions
) {
return;
}

const {
container: containerAnimate,
containerSlot: containerSlotAnimate,
dialog: dialogAnimate,
scrim: scrimAnimate,
headline: headlineAnimate,
Expand All @@ -450,6 +472,7 @@ export class Dialog extends dialogBaseClass {
const elementAndAnimation: Array<[Element, DialogAnimationArgs[]]> = [
[dialog, dialogAnimate ?? []],
[scrim, scrimAnimate ?? []],
[containerSlot, containerSlotAnimate ?? []],
[container, containerAnimate ?? []],
[headline, headlineAnimate ?? []],
[content, contentAnimate ?? []],
Expand Down

0 comments on commit d5d6b2d

Please sign in to comment.