From 213049cc2e6dfddb872c2286a2a8e5f00c22d73e Mon Sep 17 00:00:00 2001
From: Hyunbin <47051820+hyunbinseo@users.noreply.github.com>
Date: Tue, 21 Feb 2023 20:07:33 +0900
Subject: [PATCH] docs: update dialog example (#8200)

* feat: update dialog example

* button always autofocusses, allows us to simplify

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 .../15-composition/05-modal/App.svelte        |  36 +++---
 .../15-composition/05-modal/Modal.svelte      | 118 ++++++++----------
 2 files changed, 68 insertions(+), 86 deletions(-)

diff --git a/site/content/examples/15-composition/05-modal/App.svelte b/site/content/examples/15-composition/05-modal/App.svelte
index cfd3856447..af93ba39af 100644
--- a/site/content/examples/15-composition/05-modal/App.svelte
+++ b/site/content/examples/15-composition/05-modal/App.svelte
@@ -4,26 +4,26 @@
 	let showModal = false;
 </script>
 
-<button on:click="{() => showModal = true}">
+<button on:click={() => (showModal = true)}>
 	show modal
 </button>
 
-{#if showModal}
-	<Modal on:close="{() => showModal = false}">
-		<h2 slot="header">
-			modal
-			<small><em>adjective</em>  mod·al \ˈmō-dəl\</small>
-		</h2>
+<Modal bind:showModal>
+	<h2 slot="header">
+		modal
+		<small><em>adjective</em> mod·al \ˈmō-dəl\</small>
+	</h2>
 
-		<ol class="definition-list">
-			<li>of or relating to modality in logic</li>
-			<li>containing provisions as to the mode of procedure or the manner of taking effect —used of a contract or legacy</li>
-			<li>of or relating to a musical mode</li>
-			<li>of or relating to structure as opposed to substance</li>
-			<li>of, relating to, or constituting a grammatical form or category characteristically indicating predication</li>
-			<li>of or relating to a statistical mode</li>
-		</ol>
+	<ol class="definition-list">
+		<li>of or relating to modality in logic</li>
+		<li>
+			containing provisions as to the mode of procedure or the manner of taking effect —used of a contract or legacy
+		</li>
+		<li>of or relating to a musical mode</li>
+		<li>of or relating to structure as opposed to substance</li>
+		<li>of, relating to, or constituting a grammatical form or category characteristically indicating predication</li>
+		<li>of or relating to a statistical mode</li>
+	</ol>
 
-		<a href="https://www.merriam-webster.com/dictionary/modal">merriam-webster.com</a>
-	</Modal>
-{/if}
+	<a href="https://www.merriam-webster.com/dictionary/modal">merriam-webster.com</a>
+</Modal>
diff --git a/site/content/examples/15-composition/05-modal/Modal.svelte b/site/content/examples/15-composition/05-modal/Modal.svelte
index baa57824bc..acdbd50ab1 100644
--- a/site/content/examples/15-composition/05-modal/Modal.svelte
+++ b/site/content/examples/15-composition/05-modal/Modal.svelte
@@ -1,81 +1,63 @@
 <script>
-	import { createEventDispatcher, onDestroy } from 'svelte';
+	export let showModal; // boolean
 
-	const dispatch = createEventDispatcher();
-	const close = () => dispatch('close');
+	let dialog; // HTMLDialogElement
 
-	let modal;
-
-	const handle_keydown = e => {
-		if (e.key === 'Escape') {
-			close();
-			return;
-		}
-
-		if (e.key === 'Tab') {
-			// trap focus
-			const nodes = modal.querySelectorAll('*');
-			const tabbable = Array.from(nodes).filter(n => n.tabIndex >= 0);
-
-			let index = tabbable.indexOf(document.activeElement);
-			if (index === -1 && e.shiftKey) index = 0;
-
-			index += tabbable.length + (e.shiftKey ? -1 : 1);
-			index %= tabbable.length;
-
-			tabbable[index].focus();
-			e.preventDefault();
-		}
-	};
-
-	const previously_focused = typeof document !== 'undefined' && document.activeElement;
-
-	if (previously_focused) {
-		onDestroy(() => {
-			previously_focused.focus();
-		});
-	}
+	$: if (dialog && showModal) dialog.showModal();
 </script>
 
-<svelte:window on:keydown={handle_keydown}/>
-
-<div class="modal-background" on:click={close}></div>
-
-<div class="modal" role="dialog" aria-modal="true" bind:this={modal}>
-	<slot name="header"></slot>
-	<hr>
-	<slot></slot>
-	<hr>
-
-	<!-- svelte-ignore a11y-autofocus -->
-	<button autofocus on:click={close}>close modal</button>
-</div>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<dialog
+	bind:this={dialog}
+	on:close={() => (showModal = false)}
+	on:click|self={() => dialog.close()}
+>
+	<div on:click|stopPropagation>
+		<slot name="header" />
+		<hr />
+		<slot />
+		<hr />
+		<!-- svelte-ignore a11y-autofocus -->
+		<button autofocus on:click={() => dialog.close()}>close modal</button>
+	</div>
+</dialog>
 
 <style>
-	.modal-background {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background: rgba(0,0,0,0.3);
-	}
-
-	.modal {
-		position: absolute;
-		left: 50%;
-		top: 50%;
-		width: calc(100vw - 4em);
+	dialog {
 		max-width: 32em;
-		max-height: calc(100vh - 4em);
-		overflow: auto;
-		transform: translate(-50%,-50%);
-		padding: 1em;
 		border-radius: 0.2em;
-		background: white;
+		border: none;
+		padding: 0;
+	}
+	dialog::backdrop {
+		background: rgba(0, 0, 0, 0.3);
+	}
+	dialog > div {
+		padding: 1em;
+	}
+	dialog[open] {
+		animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+	}
+	@keyframes zoom {
+		from {
+			transform: scale(0.95);
+		}
+		to {
+			transform: scale(1);
+		}
+	}
+	dialog[open]::backdrop {
+		animation: fade 0.2s ease-out;
+	}
+	@keyframes fade {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
 	}
-
 	button {
 		display: block;
 	}
-</style>
\ No newline at end of file
+</style>