feat: Unify Alert and Banner under a single Banner component with new designs #855
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.
Short description
Recently, in the "Downgrade" squad, the team put together new designs that included banners that didn't match the current version of the banner component in Reactist. The design team has since updated the design system product library, and we're now ready on the frontend side to implement those changes.
Although not strictly necessary, we're taking this opportunity to unify the Alert and the Banner components under a single component, as in the design system library, there's only a "Banner" component, and both have similar use cases.
One caveat is that the banner variant with an image is not responsive. I tried to implement a CSS-only solution but wasn't successful; we might have to resort to using JavaScript. That said, there aren't any instances of the new variant in our apps, so I propose revisiting this limitation in the future, if necessary.
Figma ref
Twist: Banner Component
PR Checklist
npm run validate
and made sure no errors / warnings were shownCHANGELOG.md
package.json
andpackage-lock.json
(npm --no-git-tag-version version <major|minor|patch>
) ref📸 Demo
CleanShot.2024-12-26.at.15.59.56.mp4
Versioning
Major - Breaking change as the
Banner
API is changing andAlert
is removed.