[Dialog] Create new component and hook (#372)

mui · Jun 17, 2024 · 0270fba · 0270fba
1 parent fe2c0ba
commit 0270fba
Show file tree

Hide file tree

Showing 136 changed files with 7,395 additions and 11 deletions.
diff --git a/docs/data/base/components/alert-dialog/AlertDialogIntroduction/css/index.js b/docs/data/base/components/alert-dialog/AlertDialogIntroduction/css/index.js
@@ -0,0 +1,117 @@
+import * as React from 'react';
+import * as AlertDialog from '@base_ui/react/AlertDialog';
+import { useTheme } from '@mui/system';
+
+export default function AlertDialogIntroduction() {
+  return (
+    <React.Fragment>
+      <AlertDialog.Root>
+        <AlertDialog.Trigger className="trigger">Subscribe</AlertDialog.Trigger>
+        <AlertDialog.Backdrop className="backdrop" />
+        <AlertDialog.Popup className="popup">
+          <AlertDialog.Title className="title">Subscribe</AlertDialog.Title>
+          <AlertDialog.Description>
+            Are you sure you want to subscribe?
+          </AlertDialog.Description>
+          <div className="controls">
+            <AlertDialog.Close className="close">Yes</AlertDialog.Close>
+            <AlertDialog.Close className="close">No</AlertDialog.Close>
+          </div>
+        </AlertDialog.Popup>
+      </AlertDialog.Root>
+      <Styles />
+    </React.Fragment>
+  );
+}
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+const grey = {
+  900: '#0f172a',
+  800: '#1e293b',
+  700: '#334155',
+  500: '#64748b',
+  300: '#cbd5e1',
+  200: '#e2e8f0',
+  100: '#f1f5f9',
+  50: '#f8fafc',
+};
+
+function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <style>
+      {`
+        .popup {
+          background: ${isDarkMode ? grey[900] : grey[50]};
+          border: 1px solid ${isDarkMode ? grey[700] : grey[100]};
+          min-width: 400px;
+          border-radius: 4px;
+          box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
+          position: fixed;
+          top: 50%;
+          left: 50%;
+          font-family: IBM Plex Sans;
+          transform: translate(-50%, -50%);
+          padding: 16px;
+          z-index: 2100;
+        }
+
+        .trigger {
+          background-color: ${isDarkMode ? grey[50] : grey[900]};
+          color: ${isDarkMode ? grey[900] : grey[50]};
+          padding: 8px 16px;
+          border-radius: 4px;
+          border: none;
+          font-family:
+            IBM Plex Sans,
+            sans-serif;
+
+          &:hover {
+            background-color: ${isDarkMode ? grey[200] : grey[700]};
+          }
+        }
+
+        .close {
+          background-color: transparent;
+          border: 1px solid ${isDarkMode ? grey[300] : grey[500]};
+          color: ${isDarkMode ? grey[50] : grey[900]};
+          padding: 8px 16px;
+          border-radius: 4px;
+          font-family: IBM Plex Sans, sans-serif;
+          min-width: 80px;
+
+          &:hover {
+            background-color: ${isDarkMode ? grey[700] : grey[200]};
+          }
+        }
+
+        .controls {
+          display: flex;
+          flex-direction: row-reverse;
+          background: ${isDarkMode ? grey[800] : grey[100]};
+          gap: 8px;
+          padding: 16px;
+          margin: 32px -16px -16px;
+        }
+
+        .title {
+          font-size: 1.25rem;
+        }
+
+        .backdrop {
+          background: rgba(0, 0, 0, 0.35);
+          position: fixed;
+          inset: 0;
+          backdrop-filter: blur(4px);
+          z-index: 2000;
+        }
+    `}
+    </style>
+  );
+}
diff --git a/docs/data/base/components/alert-dialog/AlertDialogIntroduction/css/index.tsx b/docs/data/base/components/alert-dialog/AlertDialogIntroduction/css/index.tsx
@@ -0,0 +1,117 @@
+import * as React from 'react';
+import * as AlertDialog from '@base_ui/react/AlertDialog';
+import { useTheme } from '@mui/system';
+
+export default function AlertDialogIntroduction() {
+  return (
+    <React.Fragment>
+      <AlertDialog.Root>
+        <AlertDialog.Trigger className="trigger">Subscribe</AlertDialog.Trigger>
+        <AlertDialog.Backdrop className="backdrop" />
+        <AlertDialog.Popup className="popup">
+          <AlertDialog.Title className="title">Subscribe</AlertDialog.Title>
+          <AlertDialog.Description>
+            Are you sure you want to subscribe?
+          </AlertDialog.Description>
+          <div className="controls">
+            <AlertDialog.Close className="close">Yes</AlertDialog.Close>
+            <AlertDialog.Close className="close">No</AlertDialog.Close>
+          </div>
+        </AlertDialog.Popup>
+      </AlertDialog.Root>
+      <Styles />
+    </React.Fragment>
+  );
+}
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+const grey = {
+  900: '#0f172a',
+  800: '#1e293b',
+  700: '#334155',
+  500: '#64748b',
+  300: '#cbd5e1',
+  200: '#e2e8f0',
+  100: '#f1f5f9',
+  50: '#f8fafc',
+};
+
+function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <style>
+      {`
+        .popup {
+          background: ${isDarkMode ? grey[900] : grey[50]};
+          border: 1px solid ${isDarkMode ? grey[700] : grey[100]};
+          min-width: 400px;
+          border-radius: 4px;
+          box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
+          position: fixed;
+          top: 50%;
+          left: 50%;
+          font-family: IBM Plex Sans;
+          transform: translate(-50%, -50%);
+          padding: 16px;
+          z-index: 2100;
+        }
+
+        .trigger {
+          background-color: ${isDarkMode ? grey[50] : grey[900]};
+          color: ${isDarkMode ? grey[900] : grey[50]};
+          padding: 8px 16px;
+          border-radius: 4px;
+          border: none;
+          font-family:
+            IBM Plex Sans,
+            sans-serif;
+
+          &:hover {
+            background-color: ${isDarkMode ? grey[200] : grey[700]};
+          }
+        }
+
+        .close {
+          background-color: transparent;
+          border: 1px solid ${isDarkMode ? grey[300] : grey[500]};
+          color: ${isDarkMode ? grey[50] : grey[900]};
+          padding: 8px 16px;
+          border-radius: 4px;
+          font-family: IBM Plex Sans, sans-serif;
+          min-width: 80px;
+
+          &:hover {
+            background-color: ${isDarkMode ? grey[700] : grey[200]};
+          }
+        }
+
+        .controls {
+          display: flex;
+          flex-direction: row-reverse;
+          background: ${isDarkMode ? grey[800] : grey[100]};
+          gap: 8px;
+          padding: 16px;
+          margin: 32px -16px -16px;
+        }
+
+        .title {
+          font-size: 1.25rem;
+        }
+
+        .backdrop {
+          background: rgba(0, 0, 0, 0.35);
+          position: fixed;
+          inset: 0;
+          backdrop-filter: blur(4px);
+          z-index: 2000;
+        }
+    `}
+    </style>
+  );
+}
diff --git a/docs/data/base/components/alert-dialog/AlertDialogIntroduction/system/index.js b/docs/data/base/components/alert-dialog/AlertDialogIntroduction/system/index.js
@@ -0,0 +1,104 @@
+import * as React from 'react';
+import * as AlertDialog from '@base_ui/react/AlertDialog';
+import { styled } from '@mui/system';
+
+export default function AlertDialogIntroduction() {
+  return (
+    <AlertDialog.Root>
+      <TriggerButton>Subscribe</TriggerButton>
+      <Backdrop />
+      <Popup>
+        <Title>Subscribe</Title>
+        <Description>Are you sure you want to subscribe?</Description>
+        <Controls>
+          <CloseButton>Yes</CloseButton>
+          <CloseButton>No</CloseButton>
+        </Controls>
+      </Popup>
+    </AlertDialog.Root>
+  );
+}
+
+const grey = {
+  900: '#0f172a',
+  800: '#1e293b',
+  700: '#334155',
+  500: '#64748b',
+  300: '#cbd5e1',
+  200: '#e2e8f0',
+  100: '#f1f5f9',
+  50: '#f8fafc',
+};
+
+const TriggerButton = styled(AlertDialog.Trigger)(
+  ({ theme }) => `
+  background-color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
+  color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  padding: 8px 16px;
+  border-radius: 4px;
+  border: none;
+  font-family: "IBM Plex Sans", sans-serif;
+
+  &:hover {
+    background-color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
+  }
+`,
+);
+
+const Popup = styled(AlertDialog.Popup)(
+  ({ theme }) => `
+  background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+  min-width: 400px;
+  border-radius: 4px;
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  font-family: "IBM Plex Sans", sans-serif;
+  transform: translate(-50%, -50%);
+  padding: 16px;
+  z-index: 2100;
+`,
+);
+
+const Controls = styled('div')(
+  ({ theme }) => `
+  display: flex;
+  flex-direction: row-reverse;
+  background: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
+  gap: 8px;
+  padding: 16px;
+  margin: 32px -16px -16px;
+`,
+);
+
+const CloseButton = styled(AlertDialog.Close)(
+  ({ theme }) => `
+  background-color: transparent;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
+  color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-family: "IBM Plex Sans", sans-serif;
+  min-width: 80px;
+
+  &:hover {
+    background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  }
+`,
+);
+
+const Title = styled(AlertDialog.Title)`
+  font-size: 1.25rem;
+`;
+
+const Description = styled(AlertDialog.Description)``;
+
+const Backdrop = styled(AlertDialog.Backdrop)`
+  background: rgb(0 0 0 / 0.35);
+  position: fixed;
+  inset: 0;
+  backdrop-filter: blur(4px);
+  z-index: 2000;
+`;