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 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px;
grid-template-rows: 60px;
width: 300px;
&--has-recommendation {
grid-template-rows: 100px;
}
label {
cursor: pointer;
}

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

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