Skip to content

Commit

Permalink
[base-ui][Modal] Refine demos (mui#39824)
Browse files Browse the repository at this point in the history
  • Loading branch information
@zanivan @mnajdova
zanivan authored and mnajdova committed Dec 6, 2023
1 parent 80b98f0 commit f3d6e66
Show file tree
Hide file tree
Showing 15 changed files with 166 additions and 188 deletions.
23 changes: 12 additions & 11 deletions docs/data/base/components/modal/KeepMountedModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,12 @@ export default function KeepMountedModal() {
keepMounted
>
<ModalContent sx={style}>
<h2 id="keep-mounted-modal-title">Text in a modal</h2>
<p id="keep-mounted-modal-description">Aliquid amet deserunt earum!</p>
<h2 id="keep-mounted-modal-title" className="modal-title">
Text in a modal
</h2>
<p id="keep-mounted-modal-description" className="modal-description">
Aliquid amet deserunt earum!
</p>
</ModalContent>
</Modal>
</div>
Expand Down Expand Up @@ -98,7 +102,10 @@ const style = {

const ModalContent = styled(Box)(
({ theme }) => `
width: 400,
font-family: IBM Plex Sans, sans-serif;
font-weight: 500;
text-align: start;
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
Expand All @@ -107,20 +114,14 @@ const ModalContent = styled(Box)(
border-radius: 8px;
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
box-shadow: 0px 4px 12px ${
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.20)'
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.20)'
};
padding: 1rem;
padding: 16px;
color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
font-family: IBM Plex Sans, sans-serif;
font-weight: 500;
text-align: start;
position: relative;
& .modal-title {
margin: 0;
line-height: 1.5rem;
margin-right: 0.5rem;
}
& .modal-description {
Expand Down
23 changes: 12 additions & 11 deletions docs/data/base/components/modal/KeepMountedModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,12 @@ export default function KeepMountedModal() {
keepMounted
>
<ModalContent sx={style}>
<h2 id="keep-mounted-modal-title">Text in a modal</h2>
<p id="keep-mounted-modal-description">Aliquid amet deserunt earum!</p>
<h2 id="keep-mounted-modal-title" className="modal-title">
Text in a modal
</h2>
<p id="keep-mounted-modal-description" className="modal-description">
Aliquid amet deserunt earum!
</p>
</ModalContent>
</Modal>
</div>
Expand Down Expand Up @@ -95,7 +99,10 @@ const style = {

const ModalContent = styled(Box)(
({ theme }) => `
width: 400,
font-family: IBM Plex Sans, sans-serif;
font-weight: 500;
text-align: start;
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
Expand All @@ -104,20 +111,14 @@ const ModalContent = styled(Box)(
border-radius: 8px;
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
box-shadow: 0px 4px 12px ${
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.20)'
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.20)'
};
padding: 1rem;
padding: 16px;
color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
font-family: IBM Plex Sans, sans-serif;
font-weight: 500;
text-align: start;
position: relative;
& .modal-title {
margin: 0;
line-height: 1.5rem;
margin-right: 0.5rem;
}
& .modal-description {
Expand Down
16 changes: 0 additions & 16 deletions docs/data/base/components/modal/KeepMountedModal.tsx.preview
View file

This file was deleted.

18 changes: 8 additions & 10 deletions docs/data/base/components/modal/ModalUnstyled.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ export default function ModalUnstyled() {
slots={{ backdrop: StyledBackdrop }}
>
<ModalContent sx={style}>
<h3 id="unstyled-modal-title" className="modal-title">
<h2 id="unstyled-modal-title" className="modal-title">
Text in a modal
</h3>
</h2>
<p id="unstyled-modal-description" className="modal-description">
Aliquid amet deserunt earum!
</p>
Expand Down Expand Up @@ -95,6 +95,10 @@ const style = {

const ModalContent = styled(Box)(
({ theme }) => `
font-family: IBM Plex Sans, sans-serif;
font-weight: 500;
text-align: start;
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
Expand All @@ -103,20 +107,14 @@ const ModalContent = styled(Box)(
border-radius: 8px;
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
box-shadow: 0px 4px 12px ${
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.20)'
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.20)'
};
padding: 1rem;
padding: 16px;
color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
font-family: IBM Plex Sans, sans-serif;
font-weight: 500;
text-align: start;
position: relative;
& .modal-title {
margin: 0;
line-height: 1.5rem;
margin-right: 0.5rem;
}
& .modal-description {
Expand Down
18 changes: 8 additions & 10 deletions docs/data/base/components/modal/ModalUnstyled.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@ export default function ModalUnstyled() {
slots={{ backdrop: StyledBackdrop }}
>
<ModalContent sx={style}>
<h3 id="unstyled-modal-title" className="modal-title">
<h2 id="unstyled-modal-title" className="modal-title">
Text in a modal
</h3>
</h2>
<p id="unstyled-modal-description" className="modal-description">
Aliquid amet deserunt earum!
</p>
Expand Down Expand Up @@ -92,6 +92,10 @@ const style = {

const ModalContent = styled(Box)(
({ theme }) => `
font-family: IBM Plex Sans, sans-serif;
font-weight: 500;
text-align: start;
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
Expand All @@ -100,20 +104,14 @@ const ModalContent = styled(Box)(
border-radius: 8px;
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
box-shadow: 0px 4px 12px ${
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.20)'
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.20)'
};
padding: 1rem;
padding: 16px;
color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
font-family: IBM Plex Sans, sans-serif;
font-weight: 500;
text-align: start;
position: relative;
& .modal-title {
margin: 0;
line-height: 1.5rem;
margin-right: 0.5rem;
}
& .modal-description {
Expand Down
34 changes: 16 additions & 18 deletions docs/data/base/components/modal/NestedModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@ export default function NestedModal() {
slots={{ backdrop: StyledBackdrop }}
>
<ModalContent sx={style}>
<h3 id="parent-modal-title" className="modal-title">
<h2 id="parent-modal-title" className="modal-title">
Text in a modal
</h3>
</h2>
<p id="parent-modal-description" className="modal-description">
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
</p>
Expand Down Expand Up @@ -58,9 +58,9 @@ function ChildModal() {
slots={{ backdrop: StyledBackdrop }}
>
<ModalContent sx={[style, { width: '240px' }]}>
<h3 id="child-modal-title" className="modal-title">
<h2 id="child-modal-title" className="modal-title">
Text in a child modal
</h3>
</h2>
<p id="child-modal-description" className="modal-description">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</p>
Expand Down Expand Up @@ -136,6 +136,10 @@ const style = {

const ModalContent = styled(Box)(
({ theme }) => `
font-family: IBM Plex Sans, sans-serif;
font-weight: 500;
text-align: start;
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
Expand All @@ -144,20 +148,14 @@ const ModalContent = styled(Box)(
border-radius: 8px;
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
box-shadow: 0px 4px 12px ${
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.20)'
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.20)'
};
padding: 1rem;
padding: 16px;
color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
font-family: IBM Plex Sans, sans-serif;
font-weight: 500;
text-align: start;
position: relative;
& .modal-title {
margin: 0;
line-height: 1.5rem;
margin-right: 0.5rem;
}
& .modal-description {
Expand Down Expand Up @@ -190,12 +188,11 @@ const TriggerButton = styled(Button)(
border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
}
&.active {
background-color: ${blue[700]};
box-shadow: none;
&:active {
background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
}
&.focusVisible {
&:focus-visible {
box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
outline: none;
}
Expand Down Expand Up @@ -224,15 +221,16 @@ const ModalButton = styled(Button)(
}
&:active {
background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
background-color: ${blue[700]};
box-shadow: none;
}
&:focus-visible {
box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
outline: none;
}
&.disabled {
&:disabled {
opacity: 0.4;
cursor: not-allowed;
box-shadow: none;
Expand Down
34 changes: 16 additions & 18 deletions docs/data/base/components/modal/NestedModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@ export default function NestedModal() {
slots={{ backdrop: StyledBackdrop }}
>
<ModalContent sx={style}>
<h3 id="parent-modal-title" className="modal-title">
<h2 id="parent-modal-title" className="modal-title">
Text in a modal
</h3>
</h2>
<p id="parent-modal-description" className="modal-description">
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
</p>
Expand Down Expand Up @@ -57,9 +57,9 @@ function ChildModal() {
slots={{ backdrop: StyledBackdrop }}
>
<ModalContent sx={[style, { width: '240px' }]}>
<h3 id="child-modal-title" className="modal-title">
<h2 id="child-modal-title" className="modal-title">
Text in a child modal
</h3>
</h2>
<p id="child-modal-description" className="modal-description">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</p>
Expand Down Expand Up @@ -133,6 +133,10 @@ const style = {

const ModalContent = styled(Box)(
({ theme }) => `
font-family: IBM Plex Sans, sans-serif;
font-weight: 500;
text-align: start;
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
Expand All @@ -141,20 +145,14 @@ const ModalContent = styled(Box)(
border-radius: 8px;
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
box-shadow: 0px 4px 12px ${
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.20)'
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.20)'
};
padding: 1rem;
padding: 16px;
color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
font-family: IBM Plex Sans, sans-serif;
font-weight: 500;
text-align: start;
position: relative;
& .modal-title {
margin: 0;
line-height: 1.5rem;
margin-right: 0.5rem;
}
& .modal-description {
Expand Down Expand Up @@ -187,12 +185,11 @@ const TriggerButton = styled(Button)(
border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
}
&.active {
background-color: ${blue[700]};
box-shadow: none;
&:active {
background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
}
&.focusVisible {
&:focus-visible {
box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
outline: none;
}
Expand Down Expand Up @@ -221,15 +218,16 @@ const ModalButton = styled(Button)(
}
&:active {
background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
background-color: ${blue[700]};
box-shadow: none;
}
&:focus-visible {
box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
outline: none;
}
&.disabled {
&:disabled {
opacity: 0.4;
cursor: not-allowed;
box-shadow: none;
Expand Down
Loading

0 comments on commit f3d6e66

Please sign in to comment.