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.

Sign up for GitHub

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

Snackbar enable actions #713

Merged
merged 4 commits into from
Dec 22, 2023
Merged

Snackbar enable actions #713

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7fc6e0c
enable action in snackbar
susannalandstrom Dec 22, 2023
567cbee
adjust styling
susannalandstrom Dec 22, 2023
be85fd6
bump version to 3.6.1
susannalandstrom Dec 22, 2023
50b68a7
remove redundant import
susannalandstrom Dec 22, 2023
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
4 changes: 2 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "@lyyti/design-system",
"description": "Lyyti Design System",
"homepage": "https://lyytioy.github.io/lyyti-design-system",
"version": "3.6.0",
"version": "3.6.1",
"engines": {
"node": "^18",
"npm": "^9"
Expand Down
10 changes: 9 additions & 1 deletion src/components/AlertBase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,15 @@ const AlertBase = (
{ severity = 'success', variant = 'standard', ...props }: AlertBaseProps,
ref: Ref<HTMLDivElement>
): JSX.Element => {
return <MuiAlert ref={ref} severity={severity} variant={variant} {...props} />;
return (
<MuiAlert
ref={ref}
severity={severity}
variant={variant}
sx={{ alignItems: 'center', '& .MuiAlert-action': { pt: 0, pl: 5 } }}
Copy link
Contributor

@grzegorz-bach grzegorz-bach Dec 22, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would destructure sx prop and put it here to avoid overriding default sx props accidentally :)

Suggested change
sx={{ alignItems: 'center', '& .MuiAlert-action': { pt: 0, pl: 5 } }}
sx={{ alignItems: 'center', '& .MuiAlert-action': { pt: 0, pl: 5 }, ...sx }}

{...props}
/>
);
};

export default forwardRef(AlertBase);
5 changes: 3 additions & 2 deletions src/components/Snackbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export interface SnackbarProps extends MuiSnackbarProps {
direction?: 'right' | 'left' | 'up' | 'down';
severity?: 'success' | 'info' | 'warning' | 'error';
variant?: 'standard' | 'filled' | 'outlined';
ref?: Ref<HTMLDivElement>
ref?: Ref<HTMLDivElement>;
}

const Snackbar = (
Expand All @@ -28,6 +28,7 @@ const Snackbar = (
direction = 'left',
severity = 'success',
variant = 'standard',
action,
...props
}: SnackbarProps,
ref: Ref<HTMLDivElement>
Expand All @@ -43,7 +44,7 @@ const Snackbar = (
{...props}
>
<div>
<AlertBase color={color} severity={severity} variant={variant}>
<AlertBase color={color} severity={severity} variant={variant} action={action}>
{props.message}
</AlertBase>
</div>
Expand Down
24 changes: 19 additions & 5 deletions stories/Feedback/Snackbar.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useState, SyntheticEvent } from 'react';
import Snackbar, { SnackbarProps } from '../../src/components/Snackbar';
import Button from '../../src/components/Button';
import { modifyExcludedParams } from '../../.storybook/excludedParams';
import { Box } from '@mui/material';

const meta: Meta = {
title: 'Components/Feedback/Snackbar',
Expand Down Expand Up @@ -50,12 +51,10 @@ const Template: StoryFn<SnackbarProps> = (args) => {
args.onClose = handleClose;

return (
<>
<Button variant="contained" color="primary" onClick={() => setShowSnackbar(true)}>
{'Open snackbar'}
</Button>
<Box sx={{ width: '800px', display: 'flex', justifyContent: 'center' }}>
<Button onClick={() => setShowSnackbar(true)}>{'Open snackbar'}</Button>
<Snackbar {...args} />
</>
</Box>
);
};

Expand All @@ -64,6 +63,16 @@ Success.args = {
message: 'Success message',
};

export const SuccessWithAction = Template.bind({});
SuccessWithAction.args = {
message: 'Success message',
action: (
<Button color="inherit" onClick={() => console.log('clicked snackbar button')} variant="text">
Click me
</Button>
),
};

export const Error = Template.bind({});
Error.args = {
message: 'Error occured',
Expand All @@ -86,4 +95,9 @@ Info.args = {
horizontal: 'left',
},
direction: 'up',
action: (
<Button color="inherit" onClick={() => console.log('clicked snackbar button')} variant="text">
click me
</Button>
),
};