Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[dialog] Create new component and hook #372

Merged
merged 107 commits into from
Jun 17, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
107 commits
Select commit Hold shift + click to select a range
577dcfc
Wrap the native dialog API
michaldudak Apr 29, 2024
774d060
Experiment
michaldudak Apr 29, 2024
d58c3ff
Directory structure
michaldudak May 1, 2024
b91aef2
Uncontrolled open/close
michaldudak May 1, 2024
e8d09d3
Wire up aria attributes
michaldudak May 1, 2024
369c620
Lint + proptypes
michaldudak May 1, 2024
f9b3ab8
closeOnClickOutside
michaldudak May 1, 2024
09fc8c4
Use ClickAwayListener
michaldudak May 3, 2024
cfdf07c
Trying out FocusTrap
michaldudak May 3, 2024
8a58db0
Use Floating UI to trap focus
michaldudak May 3, 2024
975edb8
useDialogRoot
michaldudak May 3, 2024
b5cfa50
Popup hook
michaldudak May 6, 2024
a315473
Fix Fragment props warning
michaldudak May 6, 2024
91bac5b
useBaseUIComponentRenderer
michaldudak May 6, 2024
1621d04
More hooks
michaldudak May 6, 2024
2af67f4
Backdrop types
michaldudak May 6, 2024
96174bb
Proptypes
michaldudak May 6, 2024
c7d248d
Improvements to the experiment
michaldudak May 6, 2024
f937183
Exports and API docs
michaldudak May 6, 2024
cc88b1a
Conformance tests
michaldudak May 7, 2024
3315a9c
Tests
michaldudak May 8, 2024
ab473ce
Merge remote-tracking branch 'upstream/master' into dialog
michaldudak May 8, 2024
985fd41
More tests
michaldudak May 8, 2024
98ecc8f
Revert popup
michaldudak May 8, 2024
e30f281
Tests
michaldudak May 8, 2024
2479109
Restore the experiment
michaldudak May 8, 2024
5406250
Simplify
michaldudak May 8, 2024
9c6e81a
docs:i18n
michaldudak May 8, 2024
4983100
Playing with transitions
michaldudak May 8, 2024
b8b7985
Using the `animation` prop
michaldudak May 9, 2024
1e9eb84
useTransitionStatus
michaldudak May 9, 2024
78b963c
Fix demos
michaldudak May 9, 2024
82be3d8
Docs
michaldudak May 10, 2024
06d8764
Do not use legacy animation hooks
michaldudak May 10, 2024
8f1433b
Merge remote-tracking branch 'upstream/master' into dialog
michaldudak May 10, 2024
f4906b5
Use data-state for transitions
michaldudak May 10, 2024
de14c09
useDialogBackdrop hook
michaldudak May 10, 2024
5e849dc
Fix tests
michaldudak May 10, 2024
e0e2b92
JSDocs
michaldudak May 13, 2024
425e8a5
Transitions with two states
michaldudak May 13, 2024
123397b
Animations with a glitch
michaldudak May 13, 2024
fbe6bcc
Include the Dialog in the package
michaldudak May 13, 2024
b7adc71
Animations demo
michaldudak May 14, 2024
8c16a70
Merge branch 'master' into dialog
michaldudak May 14, 2024
052d402
Do not read context from hooks
michaldudak May 14, 2024
a1a509e
Fix tests
michaldudak May 14, 2024
f7dd341
Remove support for transitions
michaldudak May 20, 2024
2b883e9
Support nested dialogs
michaldudak May 21, 2024
c17ba54
Try out @starting-style
michaldudak May 21, 2024
b5b23e4
Fix API docs gen
michaldudak May 21, 2024
7bb60e4
Fixing the build
michaldudak May 21, 2024
fbb2a23
Nested children info
michaldudak May 21, 2024
cb6575a
Nested dialogs with fancy transitions
michaldudak May 21, 2024
cefdfc8
Do not use implicit asChild in Trigger
michaldudak May 22, 2024
3ebc2e6
Merge remote-tracking branch 'upstream/master' into dialog
michaldudak May 22, 2024
4f88adf
Do not close all parent dialogs when clicking outside
michaldudak May 22, 2024
c804959
JSDocs
michaldudak May 22, 2024
37a9830
Merge remote-tracking branch 'upstream/master' into dialog
michaldudak May 22, 2024
906ca99
Nested dialog docs
michaldudak May 22, 2024
4ef48dd
Fix focus in animated dialog demo
michaldudak May 23, 2024
7ccf6fd
Introduction demo
michaldudak May 23, 2024
76cce38
Update the nested dialogs demo
michaldudak May 24, 2024
941182f
Merge remote-tracking branch 'upstream/master' into dialog
michaldudak May 24, 2024
af90f41
Merge remote-tracking branch 'upstream/master' into dialog
michaldudak May 28, 2024
848c22f
Merge remote-tracking branch 'upstream/master' into dialog
michaldudak May 29, 2024
87870e8
Fixes
michaldudak May 29, 2024
22850e0
[Tooltip][docs] Use the correct version of ComponentLinkHeader (#425)
michaldudak May 29, 2024
4da94f9
Merge remote-tracking branch 'upstream/master' into dialog
michaldudak May 29, 2024
3156e7e
Add the container prop to Popup
michaldudak May 29, 2024
8ba9468
Use common animation primitives
michaldudak May 29, 2024
61d2696
Update animation playground
michaldudak May 29, 2024
8c9c23c
Fix the build
michaldudak May 29, 2024
592ac01
Animation docs
michaldudak May 29, 2024
ab72fda
Prettier
michaldudak May 29, 2024
d5ff23c
Fix the CI
michaldudak May 29, 2024
5b0e258
Merge branch 'master' into dialog
michaldudak Jun 3, 2024
f2cdfd7
Correct the docs about Trigger
michaldudak Jun 5, 2024
7c153c1
Lock scroll
michaldudak Jun 5, 2024
f689774
James' feedback
michaldudak Jun 5, 2024
43acf9e
Remove unnecessary files
michaldudak Jun 5, 2024
7c4b3c4
Revert ClickAwayListener changes
michaldudak Jun 5, 2024
7149a7d
Revert Popup changes
michaldudak Jun 5, 2024
64fbdeb
useScrollLock docs
michaldudak Jun 5, 2024
0978384
Merge remote-tracking branch 'upstream/master' into dialog
michaldudak Jun 5, 2024
f9a4622
Update the intro demo
michaldudak Jun 5, 2024
02fb4f1
Merge remote-tracking branch 'upstream/master' into dialog
michaldudak Jun 11, 2024
3bb7912
Add AlertDialog component
michaldudak Jun 11, 2024
7dcf980
Merge remote-tracking branch 'upstream/master' into dialog
michaldudak Jun 11, 2024
dd7cc9b
Alert Dialog docs
michaldudak Jun 11, 2024
9372780
Throw warning when Backdrop is missing
michaldudak Jun 12, 2024
b34abca
Update docs
michaldudak Jun 12, 2024
2ad929f
dismissible/keyboardDismissible
michaldudak Jun 12, 2024
1a70349
Prettier
michaldudak Jun 12, 2024
79dfff0
Add missing AlertDialog subcomponents
michaldudak Jun 13, 2024
ddc96ea
docs:api
michaldudak Jun 13, 2024
f4e08de
Use the correct context
michaldudak Jun 13, 2024
266a449
Fix soft close
michaldudak Jun 13, 2024
d34358a
Remove the keyboardDismissible prop
michaldudak Jun 13, 2024
d5dbeb2
Merge branch 'master' into dialog
michaldudak Jun 13, 2024
97794d6
Slow down the tests
michaldudak Jun 13, 2024
6c9f081
Set closeOnFocus=false
michaldudak Jun 13, 2024
0a0eb8e
Use layout effect to set ids
michaldudak Jun 13, 2024
d2d7c4b
Move the `animated` prop to the root
michaldudak Jun 14, 2024
faeaed2
Test the `animated` prop
michaldudak Jun 14, 2024
064d6a8
Look for inaccessible elements in tests
michaldudak Jun 14, 2024
b34c367
Close the topmost dialog on escape press
michaldudak Jun 17, 2024
c045fe2
Merge branch 'master' into dialog
michaldudak Jun 17, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -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>
);
}
Original file line number Diff line number Diff line change
@@ -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>
);
}
Original file line number Diff line number Diff line change
@@ -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;
`;
Loading