Banner component #2939
Assignees
Labels
release-12.11.0
Issue or pull request that will be included in release 12.11.0
Comments
7 tasks
david0xd
added a commit
to MetaMask/metamask-extension
that referenced
this issue
Dec 17, 2024
## **Description** Add Snap UI Banner component. [](https://codespaces.new/MetaMask/metamask-extension/pull/29271?quickstart=1) ## **Related issues** Fixes: MetaMask/snaps#2939 ## **Manual testing steps** 1. Install test Snap from the code example provided and check the results. Example Snap code with Banners in the UI: ```typescript <Container> <Box> <Banner title="Success banner" severity="success"> <Text> <Icon name="arrow-right" color="primary" size="inherit" /> Here is the banner content! </Text> <Bold>Banner bold formatted text</Bold> <Italic>Banner italic formatted text</Italic> <Text> You can click here: <Link href="https://snaps.metamask.io/">Banner link</Link> </Text> <Button type="button">Banner Action Button</Button> </Banner> <Banner title="Info banner" severity="info"> <Text>Here is the banner content!</Text> </Banner> <Banner title="Warning banner" severity="warning"> <Text>Here is the banner content!</Text> </Banner> <Banner title="Danger banner" severity="danger"> <Text>Here is the banner content!</Text> </Banner> </Box> </Container> ``` ## **Screenshots/Recordings** ### **Before** Banner in Snap UI was not available before this PR. Nothing to show here. ### **After**  ## **Pre-merge author checklist** - [ ] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've completed the PR template to the best of my ability - [ ] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.
FrederikBolding
pushed a commit
to MetaMask/metamask-extension
that referenced
this issue
Dec 20, 2024
Add Snap UI Banner component. [](https://codespaces.new/MetaMask/metamask-extension/pull/29271?quickstart=1) Fixes: MetaMask/snaps#2939 1. Install test Snap from the code example provided and check the results. Example Snap code with Banners in the UI: ```typescript <Container> <Box> <Banner title="Success banner" severity="success"> <Text> <Icon name="arrow-right" color="primary" size="inherit" /> Here is the banner content! </Text> <Bold>Banner bold formatted text</Bold> <Italic>Banner italic formatted text</Italic> <Text> You can click here: <Link href="https://snaps.metamask.io/">Banner link</Link> </Text> <Button type="button">Banner Action Button</Button> </Banner> <Banner title="Info banner" severity="info"> <Text>Here is the banner content!</Text> </Banner> <Banner title="Warning banner" severity="warning"> <Text>Here is the banner content!</Text> </Banner> <Banner title="Danger banner" severity="danger"> <Text>Here is the banner content!</Text> </Banner> </Box> </Container> ``` Banner in Snap UI was not available before this PR. Nothing to show here.  - [ ] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've completed the PR template to the best of my ability - [ ] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.
github-merge-queue bot
pushed a commit
to MetaMask/metamask-extension
that referenced
this issue
Dec 20, 2024
](https://codespaces.new/MetaMask/metamask-extension/pull/29271?quickstart=1){kind=link}
<!-- Please submit this PR as a draft initially. Do not mark it as "Ready for review" until the template has been completely filled out, and PR status checks have passed at least once. --> ## **Description** Bump Snaps packages and handle any required changes. Summary of Snaps changes: - Allow async initialization logic for Snap bundles - Add `onSettingsPage` export - Add `Banner` component - Support `size` prop on `Button` - Support `fontWeight` prop on `Text` - Add `loading` state for `Button` - Use BigInt for processing insight chain IDs [](https://codespaces.new/MetaMask/metamask-extension/pull/29275?quickstart=1) ## **Related issues** Closes MetaMask/snaps#2939 Closes MetaMask/snaps#2947 Closes MetaMask/snaps#2874 Closes MetaMask/snaps#2694 --------- Co-authored-by: David Drazic <[email protected]> Co-authored-by: Guillaume Roux <[email protected]>
](https://codespaces.new/MetaMask/metamask-extension/pull/29275?quickstart=1){kind=link}
metamaskbot
added
the
release-12.11.0
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Let's expose the DS BannerAlert as snaps custom UI component.
At first glance, I think all props / variants make sense - but open to hearing an engineering perspective on this
The text was updated successfully, but these errors were encountered: