-
-
Notifications
You must be signed in to change notification settings - Fork 86
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Progress] New
Progress
components (#470)
- Loading branch information
1 parent
3dd6ed5
commit 0e60b91
Showing
48 changed files
with
2,304 additions
and
1 deletion.
There are no files selected for viewing
75 changes: 75 additions & 0 deletions
75
docs/data/base/components/progress/IndeterminateProgress.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,75 @@ | ||
import * as React from 'react'; | ||
import { styled, keyframes, css, Box } from '@mui/system'; | ||
import * as BaseProgress from '@base_ui/react/Progress'; | ||
|
||
export default function IndeterminateProgress() { | ||
return ( | ||
<Box sx={{ width: 320, p: 2 }}> | ||
<Progress value={null} aria-labelledby="ProgressLabel"> | ||
<span className="Progress-label" id="ProgressLabel"> | ||
Uploading files | ||
</span> | ||
<ProgressTrack> | ||
<ProgressIndicator /> | ||
</ProgressTrack> | ||
</Progress> | ||
</Box> | ||
); | ||
} | ||
|
||
const Progress = styled(BaseProgress.Root)` | ||
display: flex; | ||
flex-flow: column nowrap; | ||
gap: 1rem; | ||
`; | ||
|
||
const ProgressTrack = styled(BaseProgress.Track)( | ||
({ theme }) => ` | ||
position: relative; | ||
width: 100%; | ||
height: 4px; | ||
border-radius: 9999px; | ||
background-color: ${theme.palette.mode === 'dark' ? grey[400] : grey[400]}; | ||
display: flex; | ||
overflow: hidden; | ||
`, | ||
); | ||
|
||
const indeterminateProgress = keyframes` | ||
from { | ||
transform: translateX(-100%); | ||
} | ||
to { | ||
transform: translateX(20rem); | ||
} | ||
`; | ||
|
||
const ProgressIndicator = styled(BaseProgress.Indicator)( | ||
({ theme }) => css` | ||
background-color: ${theme.palette.mode === 'dark' ? BLUE400 : BLUE500}; | ||
border-radius: inherit; | ||
&[data-state='indeterminate'] { | ||
width: 25%; | ||
animation: ${indeterminateProgress} 1.5s infinite ease-in-out; | ||
will-change: transform; | ||
} | ||
`, | ||
); | ||
|
||
const grey = { | ||
50: '#F3F6F9', | ||
100: '#E5EAF2', | ||
200: '#DAE2ED', | ||
300: '#C7D0DD', | ||
400: '#B0B8C4', | ||
500: '#9DA8B7', | ||
600: '#6B7A90', | ||
700: '#434D5B', | ||
800: '#303740', | ||
900: '#1C2025', | ||
}; | ||
|
||
const BLUE400 = '#3399FF'; | ||
const BLUE500 = '#007FFF'; |
75 changes: 75 additions & 0 deletions
75
docs/data/base/components/progress/IndeterminateProgress.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,75 @@ | ||
import * as React from 'react'; | ||
import { styled, keyframes, css, Box } from '@mui/system'; | ||
import * as BaseProgress from '@base_ui/react/Progress'; | ||
|
||
export default function IndeterminateProgress() { | ||
return ( | ||
<Box sx={{ width: 320, p: 2 }}> | ||
<Progress value={null} aria-labelledby="ProgressLabel"> | ||
<span className="Progress-label" id="ProgressLabel"> | ||
Uploading files | ||
</span> | ||
<ProgressTrack> | ||
<ProgressIndicator /> | ||
</ProgressTrack> | ||
</Progress> | ||
</Box> | ||
); | ||
} | ||
|
||
const Progress = styled(BaseProgress.Root)` | ||
display: flex; | ||
flex-flow: column nowrap; | ||
gap: 1rem; | ||
`; | ||
|
||
const ProgressTrack = styled(BaseProgress.Track)( | ||
({ theme }) => ` | ||
position: relative; | ||
width: 100%; | ||
height: 4px; | ||
border-radius: 9999px; | ||
background-color: ${theme.palette.mode === 'dark' ? grey[400] : grey[400]}; | ||
display: flex; | ||
overflow: hidden; | ||
`, | ||
); | ||
|
||
const indeterminateProgress = keyframes` | ||
from { | ||
transform: translateX(-100%); | ||
} | ||
to { | ||
transform: translateX(20rem); | ||
} | ||
`; | ||
|
||
const ProgressIndicator = styled(BaseProgress.Indicator)( | ||
({ theme }) => css` | ||
background-color: ${theme.palette.mode === 'dark' ? BLUE400 : BLUE500}; | ||
border-radius: inherit; | ||
&[data-state='indeterminate'] { | ||
width: 25%; | ||
animation: ${indeterminateProgress} 1.5s infinite ease-in-out; | ||
will-change: transform; | ||
} | ||
`, | ||
); | ||
|
||
const grey = { | ||
50: '#F3F6F9', | ||
100: '#E5EAF2', | ||
200: '#DAE2ED', | ||
300: '#C7D0DD', | ||
400: '#B0B8C4', | ||
500: '#9DA8B7', | ||
600: '#6B7A90', | ||
700: '#434D5B', | ||
800: '#303740', | ||
900: '#1C2025', | ||
}; | ||
|
||
const BLUE400 = '#3399FF'; | ||
const BLUE500 = '#007FFF'; |
8 changes: 8 additions & 0 deletions
8
docs/data/base/components/progress/IndeterminateProgress.tsx.preview
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
<Progress value={null} aria-labelledby="ProgressLabel"> | ||
<span className="Progress-label" id="ProgressLabel"> | ||
Uploading files | ||
</span> | ||
<ProgressTrack> | ||
<ProgressIndicator /> | ||
</ProgressTrack> | ||
</Progress> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
import * as React from 'react'; | ||
import { styled, Box } from '@mui/system'; | ||
import * as BaseProgress from '@base_ui/react/Progress'; | ||
|
||
export default function RtlProgress() { | ||
return ( | ||
<Box sx={{ width: 320, p: 2 }}> | ||
<Progress value={65} aria-labelledby="RtlProgressLabel" dir="rtl"> | ||
<span className="Progress-label" id="RtlProgressLabel"> | ||
Uploading files (RTL) | ||
</span> | ||
<ProgressTrack> | ||
<ProgressIndicator /> | ||
</ProgressTrack> | ||
</Progress> | ||
</Box> | ||
); | ||
} | ||
|
||
const Progress = styled(BaseProgress.Root)` | ||
display: flex; | ||
flex-flow: column nowrap; | ||
gap: 1rem; | ||
`; | ||
|
||
const ProgressTrack = styled(BaseProgress.Track)( | ||
({ theme }) => ` | ||
position: relative; | ||
width: 100%; | ||
height: 4px; | ||
border-radius: 9999px; | ||
background-color: ${theme.palette.mode === 'dark' ? grey[400] : grey[400]}; | ||
display: flex; | ||
overflow: hidden; | ||
`, | ||
); | ||
|
||
const ProgressIndicator = styled(BaseProgress.Indicator)( | ||
({ theme }) => ` | ||
background-color: ${theme.palette.mode === 'dark' ? BLUE400 : BLUE500}; | ||
border-radius: inherit; | ||
`, | ||
); | ||
|
||
const grey = { | ||
50: '#F3F6F9', | ||
100: '#E5EAF2', | ||
200: '#DAE2ED', | ||
300: '#C7D0DD', | ||
400: '#B0B8C4', | ||
500: '#9DA8B7', | ||
600: '#6B7A90', | ||
700: '#434D5B', | ||
800: '#303740', | ||
900: '#1C2025', | ||
}; | ||
|
||
const BLUE400 = '#3399FF'; | ||
const BLUE500 = '#007FFF'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
import * as React from 'react'; | ||
import { styled, Box } from '@mui/system'; | ||
import * as BaseProgress from '@base_ui/react/Progress'; | ||
|
||
export default function RtlProgress() { | ||
return ( | ||
<Box sx={{ width: 320, p: 2 }}> | ||
<Progress value={65} aria-labelledby="RtlProgressLabel" dir="rtl"> | ||
<span className="Progress-label" id="RtlProgressLabel"> | ||
Uploading files (RTL) | ||
</span> | ||
<ProgressTrack> | ||
<ProgressIndicator /> | ||
</ProgressTrack> | ||
</Progress> | ||
</Box> | ||
); | ||
} | ||
|
||
const Progress = styled(BaseProgress.Root)` | ||
display: flex; | ||
flex-flow: column nowrap; | ||
gap: 1rem; | ||
`; | ||
|
||
const ProgressTrack = styled(BaseProgress.Track)( | ||
({ theme }) => ` | ||
position: relative; | ||
width: 100%; | ||
height: 4px; | ||
border-radius: 9999px; | ||
background-color: ${theme.palette.mode === 'dark' ? grey[400] : grey[400]}; | ||
display: flex; | ||
overflow: hidden; | ||
`, | ||
); | ||
|
||
const ProgressIndicator = styled(BaseProgress.Indicator)( | ||
({ theme }) => ` | ||
background-color: ${theme.palette.mode === 'dark' ? BLUE400 : BLUE500}; | ||
border-radius: inherit; | ||
`, | ||
); | ||
|
||
const grey = { | ||
50: '#F3F6F9', | ||
100: '#E5EAF2', | ||
200: '#DAE2ED', | ||
300: '#C7D0DD', | ||
400: '#B0B8C4', | ||
500: '#9DA8B7', | ||
600: '#6B7A90', | ||
700: '#434D5B', | ||
800: '#303740', | ||
900: '#1C2025', | ||
}; | ||
|
||
const BLUE400 = '#3399FF'; | ||
const BLUE500 = '#007FFF'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
<Progress value={65} aria-labelledby="RtlProgressLabel" dir="rtl"> | ||
<span className="Progress-label" id="RtlProgressLabel"> | ||
Uploading files (RTL) | ||
</span> | ||
<ProgressTrack> | ||
<ProgressIndicator /> | ||
</ProgressTrack> | ||
</Progress> |
79 changes: 79 additions & 0 deletions
79
docs/data/base/components/progress/UnstyledProgressIntroduction/css/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,79 @@ | ||
import * as React from 'react'; | ||
import { useTheme } from '@mui/system'; | ||
import * as Progress from '@base_ui/react/Progress'; | ||
|
||
export default function UnstyledProgressIntroduction() { | ||
return ( | ||
<div className="App"> | ||
<Progress.Root className="Progress" value={50} aria-labelledby="ProgressLabel"> | ||
<span className="Label" id="ProgressLabel"> | ||
Uploading files | ||
</span> | ||
<Progress.Track className="Progress-track"> | ||
<Progress.Indicator className="Progress-indicator" /> | ||
</Progress.Track> | ||
</Progress.Root> | ||
<Styles /> | ||
</div> | ||
); | ||
} | ||
|
||
function useIsDarkMode() { | ||
const theme = useTheme(); | ||
return theme.palette.mode === 'dark'; | ||
} | ||
|
||
export function Styles() { | ||
const isDarkMode = useIsDarkMode(); | ||
return ( | ||
<style>{` | ||
.App { | ||
font-family: system-ui, sans-serif; | ||
width: 20rem; | ||
padding: 1rem; | ||
} | ||
.Progress { | ||
display: flex; | ||
flex-flow: column nowrap; | ||
gap: 1rem; | ||
} | ||
.Progress-track { | ||
position: relative; | ||
width: 100%; | ||
height: 4px; | ||
border-radius: 9999px; | ||
background-color: ${grey[400]}; | ||
display: flex; | ||
overflow: hidden; | ||
} | ||
.Progress-indicator { | ||
background-color: ${isDarkMode ? BLUE400 : BLUE500}; | ||
border-radius: inherit; | ||
} | ||
.Label { | ||
cursor: unset; | ||
font-weight: bold; | ||
} | ||
`}</style> | ||
); | ||
} | ||
|
||
const grey = { | ||
50: '#F3F6F9', | ||
100: '#E5EAF2', | ||
200: '#DAE2ED', | ||
300: '#C7D0DD', | ||
400: '#B0B8C4', | ||
500: '#9DA8B7', | ||
600: '#6B7A90', | ||
700: '#434D5B', | ||
800: '#303740', | ||
900: '#1C2025', | ||
}; | ||
|
||
const BLUE400 = '#3399FF'; | ||
const BLUE500 = '#007FFF'; |
Oops, something went wrong.