m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Correct the vertical margins on the RadioGroup component (#11769)

Browse Source
This commit is contained in:
David Walsh 2021-08-10 16:56:16 -05:00 committed by GitHub
parent da79ac382e
commit 00572f5910
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/components/ui/radio-group/index.scss
View File

@ -1,9 +1,13 @@
.radio-group { .radio-group {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px; grid-template-rows: 60px;
width: 300px; width: 300px;
&--has-recommendation {
grid-template-rows: 100px;
}
label { label {
cursor: pointer; cursor: pointer;
} }

14
ui/components/ui/radio-group/radio-group.component.js
View File

@ -1,5 +1,6 @@
import React, { useContext } from 'react'; import React, { useContext } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classNames from 'classnames';
import { I18nContext } from '../../../contexts/i18n'; import { I18nContext } from '../../../contexts/i18n';
import Typography from '../typography/typography'; import Typography from '../typography/typography';
import { import {
@ -11,13 +12,22 @@ import {
export default function RadioGroup({ options, name, selectedValue, onChange }) { export default function RadioGroup({ options, name, selectedValue, onChange }) {
const t = useContext(I18nContext); const t = useContext(I18nContext);
const hasRecommendation = Boolean(
options.find((option) => option.recommended),
);
return ( return (
<div className="radio-group"> <div
className={classNames('radio-group', {
'radio-group--has-recommendation': hasRecommendation,
})}
>
{options.map((option) => { {options.map((option) => {
const checked = option.value === selectedValue; const checked = option.value === selectedValue;
return ( return (
<div className="radio-group__column" key={`${name}-${option.value}`}> <div className="radio-group__column" key={`${name}-${option.value}`}>
<label> <label>
{hasRecommendation && (
<Typography <Typography
color={COLORS.SUCCESS3} color={COLORS.SUCCESS3}
className="radio-group__column-recommended" className="radio-group__column-recommended"
@ -25,7 +35,7 @@ export default function RadioGroup({ options, name, selectedValue, onChange }) {
> >
{option.recommended ? t('recommendedGasLabel') : ''} {option.recommended ? t('recommendedGasLabel') : ''}
</Typography> </Typography>
)}
<div className="radio-group__column-radio"> <div className="radio-group__column-radio">
<input <input
type="radio" type="radio"