Style standalone radio inputs with unified radio appearance

Author: Neloop

src/components/Users/EffectiveRoleSwitching/EffectiveRoleSwitching.js

@@ -4,6 +4,7 @@ import { Table } from 'react-bootstrap';
 import classnames from 'classnames';
 
 import { knownRoles, roleLabels, UserRoleIcon } from '../../helpers/usersRoles';
+import StandaloneRadioInput from '../../forms/StandaloneRadioInput/StandaloneRadioInput';
 
 const EffectiveRoleSwitching = ({ effectiveRole, setEffectiveRole, updating = null }) => (
   <Table hover className="no-margin">
@@ -19,8 +20,7 @@ const EffectiveRoleSwitching = ({ effectiveRole, setEffectiveRole, updating = nu
             setEffectiveRole(role);
           }}>
           <td className="shrink-col">
-            <input
-              type="radio"
+            <StandaloneRadioInput
               name="effectiveRole"
               value={role}
               checked={role === (updating || effectiveRole)}

src/components/forms/EditUserRoleForm/EditUserRoleForm.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, injectIntl } from 'react-intl';
-import { reduxForm, Field } from 'redux-form';
+import { reduxForm } from 'redux-form';
 import { Alert, Table } from 'react-bootstrap';
 import classnames from 'classnames';
 
 import { knownRoles, roleLabels, roleDescriptions, UserRoleIcon } from '../../helpers/usersRoles';
 import FormBox from '../../widgets/FormBox';
 import SubmitButton from '../SubmitButton';
+import StandaloneRadioField from '../Fields/StandaloneRadioField';
 
 const EditUserRoleForm = ({
   currentRole = null,
@@ -55,7 +56,7 @@ const EditUserRoleForm = ({
             })}
             onClick={() => change('role', role)}>
             <td className="shrink-col text-nowrap text-center">
-              <Field name="role" component="input" type="radio" value={role} />
+              <StandaloneRadioField name="role" value={role} />
             </td>
             <td className="shrink-col text-nowrap text-center">
               <UserRoleIcon role={role} />

src/components/forms/Fields/RadioField.js

@@ -3,21 +3,19 @@ import PropTypes from 'prop-types';
 
 import { FormGroup, HelpBlock, Radio } from 'react-bootstrap';
 
-import styles from './RadioField.less';
-
 const RadioField = ({ input, meta: { error, warning }, options }) => {
   return (
     <FormGroup validationState={error ? 'error' : warning ? 'warning' : undefined} controlId={input.name}>
       {options.map(({ key, name }, idx) => (
         <Radio
-          className={styles.radioContainer}
+          className={'radio-container'}
           key={`radio${idx}-${key}`}
           name={input.name}
           value={key}
           checked={input.value === key}
           onChange={input.onChange}>
           {name}
-          <span className={styles.radiomark}></span>
+          <span className={'radiomark'}></span>
         </Radio>
       ))}
 

src/components/forms/Fields/RadioField.less

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Field } from 'redux-form';
+
+const StandaloneRadioField = ({ name, value }) => {
+  return (
+    <div className={'radio-container'}>
+      <label>
+        <Field name={name} component="input" type="radio" value={value} />
+        <span className={'radiomark'}></span>
+      </label>
+    </div>
+  );
+};
+
+StandaloneRadioField.propTypes = {
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+};
+
+export default StandaloneRadioField;

src/components/forms/Fields/StandaloneRadioField.js

@@ -23,3 +23,4 @@ export { default as ExpandingTextField } from './ExpandingTextField';
 export { default as ExpandingSelectField } from './ExpandingSelectField';
 export { default as ExpandingInputFilesField } from './ExpandingInputFilesField';
 export { default as TagsSelectorField } from './TagsSelectorField';
+export { default as StandaloneRadioField } from './StandaloneRadioField';

src/components/forms/Fields/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const StandaloneRadioInput = ({ name, value, checked, disabled, readOnly }) => {
+  return (
+    <div className={'radio-container'}>
+      <label>
+        <input
+          type="radio"
+          name={name}
+          value={value}
+          checked={checked}
+          disabled={disabled}
+          readOnly={readOnly}
+        />
+        <span className={'radiomark'}></span>
+      </label>
+    </div>
+  );
+};
+
+StandaloneRadioInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  checked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+};
+
+export default StandaloneRadioInput;

src/components/forms/StandaloneRadioInput/StandaloneRadioInput.js

@@ -0,0 +1,2 @@
+import StandaloneRadioInput from './StandaloneRadioInput';
+export default StandaloneRadioInput;

src/components/forms/StandaloneRadioInput/index.js

@@ -226,3 +226,82 @@ table.table-hover td.clickable:hover, table.table-hover th.clickable:hover {
 .noselection .ace_cursor {
   color: transparent !important;
 }
+
+/******************************************************************************/
+/* Radio Input Styling                                                        */
+/* Taken from W3Schools and adapted for our use case...                       */
+/* https://www.w3schools.com/howto/howto_css_custom_checkbox.asp              */
+/******************************************************************************/
+
+ /* Customize the container of the radio input */
+ .radio-container {
+  display: block;
+  position: relative;
+  padding-left: 35px;
+}
+
+/* Remove default label margin and paddings */
+.radio-container label {
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+}
+
+/* Hide the browser's default radio button */
+.radio-container input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+/* Create a custom radio button */
+.radiomark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 20px;
+  width: 20px;
+  background-color: #eee;
+  border-radius: 50%;
+}
+
+/* On mouse-over, add a grey background color */
+.radio-container label:hover input ~ .radiomark {
+  background-color: #ccc;
+}
+
+/* When the radio button is checked, add a green background */
+.radio-container label input:checked ~ .radiomark {
+  background-color: #00a65a;
+}
+
+/* On mouse-over, when the radio button is checked, add a darker green background */
+.radio-container label:hover input:checked ~ .radiomark {
+  background-color: #008d4c;
+}
+
+/* Create the indicator (the dot/circle - hidden when not checked) */
+.radiomark:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+
+/* Show the indicator (dot/circle) when checked */
+.radio-container input:checked ~ .radiomark:after {
+  display: block;
+}
+
+/* Style the indicator (dot/circle) */
+.radio-container .radiomark:after {
+  top: 4px;
+  left: 4px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #eee;
+}
+
+/******************************************************************************/