GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-06 07:21:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

Nicer icon.

Browse Source
This commit is contained in:
Gert Hengeveld 2020-10-30 13:01:12 +01:00
parent 5e03cfc472
commit effba9e367
1 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
lib/components/src/Loader/Loader.tsx
View File

@ -40,6 +40,7 @@ const ProgressWrapper = styled.div({
const ProgressTrack = styled.div(({ theme }) => ({ const ProgressTrack = styled.div(({ theme }) => ({
position: 'relative', position: 'relative',
width: '80%', width: '80%',
marginBottom: '0.75rem',
maxWidth: 300, maxWidth: 300,
height: 5, height: 5,
borderRadius: 5, borderRadius: 5,
@ -58,15 +59,16 @@ const ProgressBar = styled.div(({ theme }) => ({
const ProgressMessage = styled.div(({ theme }) => ({ const ProgressMessage = styled.div(({ theme }) => ({
minHeight: '2em', minHeight: '2em',
marginTop: '0.75rem',
fontSize: `${theme.typography.size.s1}px`, fontSize: `${theme.typography.size.s1}px`,
color: theme.barTextColor, color: theme.barTextColor,
})); }));
const ErrorIcon = styled(Icons)({ const ErrorIcon = styled(Icons)(({ theme }) => ({
width: 20, width: 20,
height: 20, height: 20,
}); marginBottom: '0.5rem',
color: theme.color.mediumdark,
}));
const ellipsis = keyframes` const ellipsis = keyframes`
from { content: "..." } from { content: "..." }
@ -107,7 +109,7 @@ export const PureLoader: FunctionComponent<
if (error) { if (error) {
return ( return (
<ProgressWrapper aria-label={error.toString()} aria-live="polite" role="status" {...props}> <ProgressWrapper aria-label={error.toString()} aria-live="polite" role="status" {...props}>
<ErrorIcon icon="alert" /> <ErrorIcon icon="lightningoff" />
<ProgressMessage>{error.message}</ProgressMessage> <ProgressMessage>{error.message}</ProgressMessage>
</ProgressWrapper> </ProgressWrapper>
); );