experiment: native dialog component (#15926)

* feat: native dialog component

* chore: update copyright

* fix: use mergeRefs

* feat: review updates

* Update packages/styles/scss/components/_index.scss

Co-authored-by: Taylor Jones <[email protected]>

* chore: includeStories empty suggestion

---------

Co-authored-by: Taylor Jones <[email protected]>

packages/react/src/components/Dialog/Dialog-story.js

@@ -7,149 +7,76 @@
 
 /* eslint-disable storybook/story-exports */
 
-import * as React from 'react';
-import { FocusScope } from '../FocusScope';
-import { Dialog } from '../Dialog';
-import { useId } from '../../internal/useId';
-import { Portal } from '../Portal';
+import React, { useEffect, useState } from 'react';
+import Dialog from './';
+import Button from '../Button';
+import { action } from '@storybook/addon-actions';
 
 export default {
   title: 'Experimental/unstable_Dialog',
   component: Dialog,
   includeStories: [],
 };
 
-export const Default = () => {
-  function DemoComponent() {
-    const [open, setOpen] = React.useState(false);
-    const ref = React.useRef(null);
+export const Default = ({ open: _open, ...args }) => {
+  const [open, setOpen] = useState(_open);
 
-    return (
-      <div
-        style={{
-          border: '1px solid black',
-          background: 'rgba(0, 0, 0, 0.1)',
-          padding: '1rem',
-        }}>
-        <button
-          type="button"
-          onClick={() => {
-            setOpen(true);
-          }}>
-          Open
-        </button>
-        {open ? (
-          <FocusScope>
-            <div>
-              <p>
-                Elit hic at labore culpa itaque fugiat. Consequuntur iure autem
-                autem officiis dolores facilis nulla earum! Neque quia nemo
-                sequi assumenda ratione officia Voluptate beatae eligendi
-                placeat nemo laborum, ratione.
-              </p>
-              <DemoComponent />
-              <button
-                ref={ref}
-                type="button"
-                onClick={() => {
-                  setOpen(false);
-                }}>
-                Close
-              </button>
-            </div>
-          </FocusScope>
-        ) : null}
-      </div>
-    );
-  }
-  return (
-    <>
-      <DemoComponent />
-      <button type="button">Hello</button>
-    </>
-  );
-};
+  const handleOpenDialog = () => {
+    setOpen(!open);
+  };
 
-export const DialogExample = () => {
-  function Example() {
-    const [open, setOpen] = React.useState(false);
-    const id = useId();
+  const closeAction = action('Close action');
 
-    return (
-      <div>
-        <div>
-          <button type="button">First</button>
-        </div>
-        <button
-          type="button"
-          onClick={() => {
-            setOpen(true);
-          }}>
-          Open
-        </button>
-        {open ? (
-          <Portal
-            style={{
-              position: 'fixed',
-              top: 0,
-              right: 0,
-              bottom: 0,
-              left: 0,
-              zIndex: 9999,
-            }}>
-            <FullPage />
-            <Dialog
-              aria-labelledby={id}
-              onDismiss={() => {
-                setOpen(false);
-              }}
-              style={{
-                position: 'relative',
-                zIndex: 9999,
-                padding: '1rem',
-                background: 'white',
-              }}>
-              <div>
-                <span id={id}>Hello</span>
-              </div>
-              <div>
-                <Example />
-              </div>
-              <button
-                type="button"
-                onClick={() => {
-                  setOpen(false);
-                }}>
-                Close
-              </button>
-            </Dialog>
-          </Portal>
-        ) : null}
+  const handleCloseEvent = () => {
+    closeAction();
+    // keep local state the same as the dialog otherwise open will
+    // need two clicks after a close
+    setOpen(false);
+  };
 
-        <div>
-          <button type="button">Last</button>
-        </div>
-      </div>
-    );
-  }
+  const handleCloseClick = () => {
+    setOpen(false);
+  };
 
-  return <Example />;
-};
+  useEffect(() => {
+    setOpen(_open);
+  }, [_open]);
 
-const FullPage = React.forwardRef(function FullPage(props, ref) {
   return (
-    <div
-      ref={ref}
-      style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        bottom: 0,
-        right: 0,
-        transform: 'translateZ(0)',
-        background: 'rgba(0, 0, 0, 0.5)',
-      }}
-      {...props}
-    />
+    <div>
+      <Button type="button" onClick={handleOpenDialog}>
+        Toggle open
+      </Button>
+      <Dialog onRequestClose={handleCloseEvent} open={open} {...args}>
+        <p>
+          Elit hic at labore culpa itaque fugiat. Consequuntur iure autem autem
+          officiis dolores facilis nulla earum! Neque quia nemo sequi assumenda
+          ratione officia Voluptate beatae eligendi placeat nemo laborum,
+          ratione.
+        </p>
+        <br></br>
+        <p>
+          Elit hic at labore culpa itaque fugiat. Consequuntur iure autem autem
+          officiis dolores facilis nulla earum! Neque quia nemo sequi assumenda
+          ratione officia Voluptate beatae eligendi placeat nemo laborum,
+          ratione.
+        </p>
+        <br></br>
+        <p>
+          Elit hic at labore culpa itaque fugiat. Consequuntur iure autem autem
+          officiis dolores facilis nulla earum! Neque quia nemo sequi assumenda
+          ratione officia Voluptate beatae eligendi placeat nemo laborum,
+          ratione.
+        </p>
+        <br></br>
+        <Button
+          type="button"
+          kind="secondary"
+          onClick={handleCloseClick}
+          autofocus>
+          Close
+        </Button>
+      </Dialog>
+    </div>
   );
-});
+};