From 928ca6df4553350c80b80518d69f990e78c62a5a Mon Sep 17 00:00:00 2001
From: Mirco Bellagamba <mirco.bellag@gmail.com>
Date: Fri, 16 Apr 2021 09:49:31 +0200
Subject: [PATCH 1/2] dialog: fix warning in animated example docs

---
 website/src/pages/dialog.mdx | 83 ++++++++++++++++++++----------------
 1 file changed, 46 insertions(+), 37 deletions(-)

diff --git a/website/src/pages/dialog.mdx b/website/src/pages/dialog.mdx
index f98435a5d..48b294bee 100644
--- a/website/src/pages/dialog.mdx
+++ b/website/src/pages/dialog.mdx
@@ -518,46 +518,55 @@ If you'd like to animate the content, give [React Spring](https://github.com/drc
 
 ```jsx
 // jsx-demo
-function Example(props) {
+(() => {
   const AnimatedDialogOverlay = animated(DialogOverlay);
   const AnimatedDialogContent = animated(DialogContent);
-  const [showDialog, setShowDialog] = React.useState(false);
-  const transitions = useTransition(showDialog, null, {
-    from: { opacity: 0, y: -10 },
-    enter: { opacity: 1, y: 0 },
-    leave: { opacity: 0, y: 10 },
-  });
-  return (
-    <div>
-      <button onClick={() => setShowDialog(true)}>Show Dialog</button>
-      {transitions.map(
-        ({ item, key, props: styles }) =>
-          item && (
-            <AnimatedDialogOverlay style={{ opacity: styles.opacity }}>
-              <AnimatedDialogContent
-                style={{
-                  transform: styles.y.interpolate(
-                    (value) => `translate3d(0px, ${value}px, 0px)`
-                  ),
-                  border: "4px solid hsla(0, 0%, 0%, 0.5)",
-                  borderRadius: 10,
-                }}
+
+  function Example(props) {
+    const [showDialog, setShowDialog] = React.useState(false);
+    const transitions = useTransition(showDialog, null, {
+      from: { opacity: 0, y: -10 },
+      enter: { opacity: 1, y: 0 },
+      leave: { opacity: 0, y: 10 },
+    });
+    return (
+      <div>
+        <button onClick={() => setShowDialog(true)}>Show Dialog</button>
+        {transitions.map(
+          ({ item, key, props: styles }) =>
+            item && (
+              <AnimatedDialogOverlay
+                key={key}
+                style={{ opacity: styles.opacity }}
               >
-                <button onClick={() => setShowDialog(false)}>
-                  Close Dialog
-                </button>
-                <p>React Spring makes it too easy!</p>
-                <input type="text" />
-                <br />
-                <input type="text" />
-                <button>Ayyyyyy</button>
-              </AnimatedDialogContent>
-            </AnimatedDialogOverlay>
-          )
-      )}
-    </div>
-  );
-}
+                <AnimatedDialogContent
+                  aria-labelledby="dialog-title"
+                  style={{
+                    transform: styles.y.interpolate(
+                      (value) => `translate3d(0px, ${value}px, 0px)`
+                    ),
+                    border: "4px solid hsla(0, 0%, 0%, 0.5)",
+                    borderRadius: 10,
+                  }}
+                >
+                  <button onClick={() => setShowDialog(false)}>
+                    Close Dialog
+                  </button>
+                  <h2 id="dialog-title">Animated Dialog</h2>
+                  <p>React Spring makes it too easy!</p>
+                  <input type="text" />
+                  <br />
+                  <input type="text" />
+                  <button>Ayyyyyy</button>
+                </AnimatedDialogContent>
+              </AnimatedDialogOverlay>
+            )
+        )}
+      </div>
+    );
+  }
+  return <Example />;
+})();
 ```
 
 ## Accessibility

From a1104a84e358f209cf4b1d2981105c008951ca77 Mon Sep 17 00:00:00 2001
From: Mirco Bellagamba <mirco.bellag@gmail.com>
Date: Fri, 16 Apr 2021 09:50:25 +0200
Subject: [PATCH 2/2] dialog: add animated example

---
 packages/dialog/examples/animated.example.js | 58 ++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 packages/dialog/examples/animated.example.js

diff --git a/packages/dialog/examples/animated.example.js b/packages/dialog/examples/animated.example.js
new file mode 100644
index 000000000..39aa4860a
--- /dev/null
+++ b/packages/dialog/examples/animated.example.js
@@ -0,0 +1,58 @@
+import React from "react";
+import { DialogOverlay, DialogContent } from "@reach/dialog";
+import { animated, useTransition } from "react-spring";
+import "@reach/dialog/styles.css";
+
+let name = "Animated";
+
+const AnimatedDialogOverlay = animated(DialogOverlay);
+const AnimatedDialogContent = animated(DialogContent);
+
+function Example() {
+  const [showDialog, setShowDialog] = React.useState(false);
+  const transitions = useTransition(showDialog, null, {
+    from: { opacity: 0, y: -10 },
+    enter: { opacity: 1, y: 0 },
+    leave: { opacity: 0, y: 10 },
+  });
+
+  return (
+    <div>
+      <button onClick={() => setShowDialog(true)}>Show Dialog</button>
+      {transitions.map(
+        ({ item, key, props: styles }) =>
+          item && (
+            <AnimatedDialogOverlay
+              key={key}
+              style={{ opacity: styles.opacity }}
+            >
+              <AnimatedDialogContent
+                aria-labelledby="dialog-title"
+                style={{
+                  transform: styles.y.interpolate(
+                    (value) => `translate3d(0px, ${value}px, 0px)`
+                  ),
+                  border: "4px solid hsla(0, 0%, 0%, 0.5)",
+                  borderRadius: 10,
+                }}
+              >
+                <button onClick={() => setShowDialog(false)}>
+                  Close Dialog
+                </button>
+                <h2 id="dialog-title">Animated Dialog</h2>
+                <p>React Spring makes it too easy!</p>
+                <input type="text" />
+                <br />
+                <input type="text" />
+                <button>Ayyyyyy</button>
+              </AnimatedDialogContent>
+            </AnimatedDialogOverlay>
+          )
+      )}
+    </div>
+  );
+}
+
+Example.story = { name };
+export const Comp = Example;
+export default { title: "Dialog" };