Skip to content

Commit ed2fb49

Browse files
authored
fix: centering on Snap radio buttons (#29850)
## **Description** Write a short description of the changes included in this pull request, also include relevant motivation and context. Have in mind the following questions: 1. What is the reason for the change? Radio buttons were not aligned with their labels in the snap component. 2. What is the improvement/solution? Strip radio button of margin. ## **Related issues** Fixes: #29725 ## **Manual testing steps** 1. Build this branch 2. Go to https://metamask.github.io/snaps/test-snaps/2.18.0/ 3. Trigger the custom ui interactive snap dialog 4. Observe the changes below. ## **Screenshots/Recordings** ### **Before** [See issue](#29725) ### **After** <img width="380" alt="Screenshot 2025-01-22 at 9 47 19 AM" src="https://github.com/user-attachments/assets/411479ea-b027-4581-9df1-64edf4e75a9c" /> ## **Pre-merge author checklist** - [x] 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). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] 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** - [x] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [x] 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.
1 parent 82db3ee commit ed2fb49

File tree

1 file changed

+2
-1
lines changed

1 file changed

+2
-1
lines changed

ui/components/app/snaps/snap-ui-radio-group/snap-ui-radio-group.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -60,12 +60,13 @@ export const SnapUIRadioGroup: FunctionComponent<SnapUIRadioGroupProps> = ({
6060
value={option.value}
6161
checked={value === option.value}
6262
onChange={() => handleChange(option.value)}
63+
style={{ margin: '0' }} // radio buttons have default margins that need to be stripped to ensure proper centering
6364
/>
6465
<Text
6566
as="label"
6667
htmlFor={option.name}
6768
variant={TextVariant.bodyMd}
68-
marginLeft={1}
69+
marginLeft={2}
6970
>
7071
{option.name}
7172
</Text>

0 commit comments

Comments
 (0)