Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(snaps): Add background color prop to Snaps UI Container component (
#29095) ## **Description** This PR adds `backgroundColor` property to Container component. Background colors that can be used are predefined as: default and alternative. This PR deliberately disables the `backgroundColor` feature for containers used within Transaction Insights pages (Snaps). [](https://codespaces.new/MetaMask/metamask-extension/pull/29095?quickstart=1) ## **Related issues** Fixes: MetaMask/snaps#2906 Related Snaps PR: MetaMask/snaps#2950 ## **Manual testing steps** 1. Try installing and using a Snap with confirmation window or home page, with `Container` in its content with `backgroundColor` defined (e.g. `<Container backgroundColor="default">`). 2. Try the same thing on transaction insights Snaps and confirm that the colors are not changing there. 3. Confirm that the colors are as expected on all pages. Some source code used for testing: - Source code used for confirmation content: ```typescript export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => { switch (request.method) { case 'hello': return snap.request({ method: 'snap_dialog', params: { content: ( <Container backgroundColor="default"> <Box> <Section> <Row label="From"> <Address address="0x1234567890123456789012345678901234567890" /> </Row> <Row label="To" variant="warning" tooltip="This address has been deemed dangerous." > <Address address="0x0000000000000000000000000000000000000000" /> </Row> </Section> <Form name="form"> <Box direction="horizontal"> <Field label="baz"> <Input name="baz" placeholder="Enter something..." /> </Field> <Field label="foo"> <Selector title="bar" name="test"> <SelectorOption value="one"> <Card title="test" value="test" /> </SelectorOption> </Selector> </Field> </Box> <Field label="something_else"> <Selector title="bar" name="test2"> <SelectorOption value="one"> <Card title="test" value="test" /> </SelectorOption> </Selector> </Field> <Box direction="horizontal"> <Field label="baz2"> <Input name="baz2" placeholder="Enter something..." /> </Field> <Field label="foo3"> <Input name="foo3" placeholder="Enter something..." /> </Field> </Box> <Box direction="horizontal"> <Field label="Example Dropdown"> <Dropdown name="example-dropdown"> <Option value="option1">Option 1</Option> <Option value="option2">Option 2</Option> <Option value="option3">Option 3</Option> </Dropdown> </Field> <Field label="Example RadioGroup"> <RadioGroup name="example-radiogroup"> <Radio value="option1">Option 1</Radio> <Radio value="option2">Option 2</Radio> <Radio value="option3">Option 3</Radio> </RadioGroup> </Field> </Box> <Field label="Example Dropdown full width"> <Dropdown name="example-dropdown-full"> <Option value="option1">Option 1</Option> <Option value="option2">Option 2</Option> <Option value="option3">Option 3</Option> </Dropdown> </Field> <Field label="Example RadioGroup full width"> <RadioGroup name="example-radiogroup-full"> <Radio value="option11">Option 11</Radio> <Radio value="option22">Option 22</Radio> <Radio value="option33">Option 33</Radio> </RadioGroup> </Field> <Field label="foo4"> <Input name="foo4" placeholder="Enter something..." /> </Field> <Box direction="horizontal"> <Field label="baz3"> <Input name="baz3" placeholder="Enter something..." /> </Field> </Box> <Box direction="horizontal"> <Field label="Example Checkbox"> <Checkbox name="example-checkbox" label="Checkbox" /> </Field> <Field label="Example Selector"> <Selector name="example-selector" title="Choose an option" value="option1" > <SelectorOption value="option1"> <Card title="Option 1" value="option1" /> </SelectorOption> <SelectorOption value="option2"> <Card title="Option 2" value="option2" /> </SelectorOption> <SelectorOption value="option3"> <Card title="Option 3" value="option3" /> </SelectorOption> </Selector> </Field> </Box> <Field label="Example FileInput 2"> <FileInput name="file-input-2" /> </Field> <Field label="Example Checkbox Full field"> <Checkbox name="example-checkbox-full" label="Checkbox" /> </Field> <Box direction="horizontal"> <Field label="baz4"> <Input name="baz4" placeholder="Enter something..." /> </Field> <Field label="Example FileInput"> <FileInput name="file-input-1" /> </Field> </Box> <Box direction="horizontal"> <Field label="baz5"> <Input name="baz5" placeholder="Enter something..." /> </Field> <Field label="FileInput Compact"> <FileInput name="file-input-3" compact={true} /> </Field> </Box> <Field label="FileInput Compact 2 full"> <FileInput name="file-input-4" compact={true} /> </Field> </Form> </Box> </Container> ), }, }); default: throw new Error('Method not found.'); } }; ``` ## **Screenshots/Recordings** ### **Before** Note: Changing container colors was not possible before.   ### **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.
- Loading branch information
](https://codespaces.new/MetaMask/metamask-extension/pull/29095?quickstart=1){kind=link}