New Admin UI - Alert Component #4386
Merged
Conversation
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
|
/storybook |
|
🚀 Storybook Preview |
leopuleo
requested changes
Nov 18, 2024
| const AlertContext = React.createContext<Pick<AlertProps, "variant">>({}); | ||
|
|
||
| const AlertActionBase = React.forwardRef<HTMLButtonElement, ButtonProps>( | ||
| ({ className, ...props }, ref) => { |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Changes
This PR introduces the Alert component.
We have four types of alerts: info, success, warning, and danger. We also have two variants: strong and subtle. In total, visually, we ended up with 8 different variants (it's all per Figma specs ofc).
Screenshots below.
Extra Changes
1. Imported Tokens
I reimported the tokens from Figma. A couple of missing tokens were added.
2. Fixed HLS Colors
HSL colors were incorrectly generated in
theme.scssfile, because there were commas between the HSL numbers. For example:--bg-secondary-default: 170, 100%, 37.5%;--bg-primary-muted: 14 94.7% 77.8%;I noticed this while trying to apply opacity on one of the colors (e.g.
bg-primary/50).This has now been resolved.
3. Button: Added
ghost-negativeVariantTalked with Kreso about this and ultimately, we decided to intro a new button variant. This variant of a button is used on strong variants of all types of alerts.
Screenshots