Skip to content

Commit

Permalink
style(snackbar): fix grid one-lined item alignments
Browse files Browse the repository at this point in the history
  • Loading branch information
soykje committed Jun 18, 2024
1 parent 9917041 commit fe176ab
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 20 deletions.
56 changes: 38 additions & 18 deletions packages/components/snackbar/src/Snackbar.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -215,22 +215,40 @@ export const QAWithNewLineAction: StoryFn = _args => (
<div>
<Snackbar />

<Button
onClick={() =>
addSnackbar({
message:
'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora voluptatum cupiditate ut natus distinctio illum modi, id mollitia sequi dolorem nostrum autem suscipit eius sapiente vitae ipsum amet doloribus praesentium.',
actionLabel: 'Undo',
onAction: () => console.log('Undone'),
icon: <FavoriteFill />,
isClosable: true,
actionOnNewline: true,
timeout: null,
})
}
>
Display snackbar
</Button>
<div className="grid grid-cols-1 gap-xl md:grid-cols-2">
<Button
onClick={() =>
addSnackbar({
message:
'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora voluptatum cupiditate ut natus distinctio illum modi, id mollitia sequi dolorem nostrum autem suscipit eius sapiente vitae ipsum amet doloribus praesentium.',
actionLabel: 'Undo',
onAction: () => console.log('Undone'),
icon: <FavoriteFill />,
isClosable: true,
timeout: null,
})
}
>
Display snackbar
</Button>

<Button
onClick={() =>
addSnackbar({
message:
'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora voluptatum cupiditate ut natus distinctio illum modi, id mollitia sequi dolorem nostrum autem suscipit eius sapiente vitae ipsum amet doloribus praesentium.',
actionLabel: 'Undo',
onAction: () => console.log('Undone'),
icon: <FavoriteFill />,
isClosable: true,
actionOnNewline: true,
timeout: null,
})
}
>
Display snackbar with action on new line
</Button>
</div>
</div>
)

Expand All @@ -244,7 +262,8 @@ export const Action: StoryObj = {
<Button
onClick={() =>
addSnackbar({
message: "You're done!",
message:
'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora voluptatum cupiditate ut natus distinctio illum.',
actionLabel: 'Undo',
onAction: () => console.log('Undone'),
})
Expand All @@ -256,7 +275,8 @@ export const Action: StoryObj = {
<Button
onClick={() =>
addSnackbar({
message: "You're done! But maybe you should care about what you just did?",
message:
'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora voluptatum cupiditate ut natus distinctio illum.',
actionLabel: 'Undo',
onAction: () => console.log('Undone'),
actionOnNewline: true,
Expand Down
3 changes: 1 addition & 2 deletions packages/components/snackbar/src/SnackbarItem.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -87,9 +87,8 @@ export const snackbarItemVariant = cva(
"[grid-template-areas:'icon_message_close'_'._message_.'_'action_action_action']",
],
false: [
'grid-rows-[52px_1fr]',
'grid-cols-[min-content_1fr_min-content_min-content]',
"[grid-template-areas:'icon_message_action_close'_'._message_._.']",
"[grid-template-areas:'icon_message_action_close']",
],
},
},
Expand Down

0 comments on commit fe176ab

Please sign in to comment.