From 9bbc002ad8cefc538f61b0936803febe2c67310c Mon Sep 17 00:00:00 2001
From: Chris Thielen <christopherthielen@users.noreply.github.com>
Date: Tue, 4 Jun 2019 10:00:56 -0700
Subject: [PATCH] feat(core/presentation): Support inline radio buttons (#7078)

- Remove inline checkbox and radio button CSS tweaks (revert
margin/padding to Bootstrap 3 defaults)
- Add margin hack for inline radio/checkboxes to support wrapping to the
next line
---
 .../core/src/entityTag/EntityTagEditor.tsx    |  2 +-
 .../forms/inputs/RadioButtonInput.tsx         | 48 ++++++++++++-------
 .../modules/core/src/presentation/main.less   | 19 ++++----
 3 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/app/scripts/modules/core/src/entityTag/EntityTagEditor.tsx b/app/scripts/modules/core/src/entityTag/EntityTagEditor.tsx
index 214898b39a4..9aa6c4f752d 100644
--- a/app/scripts/modules/core/src/entityTag/EntityTagEditor.tsx
+++ b/app/scripts/modules/core/src/entityTag/EntityTagEditor.tsx
@@ -190,7 +190,7 @@ export class EntityTagEditor extends React.Component<IEntityTagEditorProps, IEnt
                       const option = ownerOptions.find(opt => opt.label === evt.target.value);
                       setFieldValue('ownerOption', option);
                     }}
-                    input={props => <RadioButtonInput {...props} options={ownerOptions.map(opt => opt.label)} />}
+                    input={props => <RadioButtonInput {...props} stringOptions={ownerOptions.map(opt => opt.label)} />}
                   />
                 )}
               </Modal.Body>
diff --git a/app/scripts/modules/core/src/presentation/forms/inputs/RadioButtonInput.tsx b/app/scripts/modules/core/src/presentation/forms/inputs/RadioButtonInput.tsx
index e5b68116457..78a8e4c1e7c 100644
--- a/app/scripts/modules/core/src/presentation/forms/inputs/RadioButtonInput.tsx
+++ b/app/scripts/modules/core/src/presentation/forms/inputs/RadioButtonInput.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Option } from 'react-select';
 
-import { Markdown, OmitControlledInputPropsFrom, StringsAsOptions } from 'core/presentation';
+import { Markdown, OmitControlledInputPropsFrom } from 'core/presentation';
 
 import { isStringArray, orEmptyString, validationClassName } from './utils';
 import { IFormInputProps } from '../interface';
@@ -9,32 +9,44 @@ import { IFormInputProps } from '../interface';
 interface IRadioButtonInputProps
   extends IFormInputProps,
     OmitControlledInputPropsFrom<React.TextareaHTMLAttributes<any>> {
-  options: Array<string | Option<string | number>>;
+  stringOptions?: string[];
+  options?: Option[];
   inputClassName?: string;
+  inline?: boolean;
 }
 
 export const RadioButtonInput = (props: IRadioButtonInputProps) => {
-  const { value, validation, inputClassName, options, ...otherProps } = props;
-  const className = `RadioButtonInput radio ${orEmptyString(inputClassName)} ${validationClassName(validation)}`;
+  const { inline, value: selectedValue, validation, inputClassName, options, stringOptions, ...otherProps } = props;
+  const radioOptions = isStringArray(stringOptions) ? stringOptions.map(value => ({ value, label: value })) : options;
 
-  const RadioButtonsElement = ({ opts }: { opts: Array<Option<string>> }) => (
+  const userClassName = orEmptyString(inputClassName);
+  const validClassName = validationClassName(validation);
+  const elementClassName = `RadioButtonInput radio ${userClassName} ${validClassName}`;
+
+  const RadioButton = ({ option }: { option: Option }) => (
+    <label key={option.label} className={inline ? 'radio-inline clickable' : 'inline clickable'}>
+      <input type="radio" {...otherProps} value={option.value as any} checked={option.value === selectedValue} />
+      <Markdown message={option.label} />
+    </label>
+  );
+
+  const VerticalRadioButtons = ({ opts }: { opts: Option[] }) => (
     <div className="vertical left">
+      <div className={elementClassName}>
+        {opts.map(option => (
+          <RadioButton key={option.label} option={option} />
+        ))}
+      </div>
+    </div>
+  );
+
+  const InlineRadioButtons = ({ opts }: { opts: Option[] }) => (
+    <div className={elementClassName}>
       {opts.map(option => (
-        <div key={option.label} className={className}>
-          <label>
-            <input type="radio" {...otherProps} value={option.value} checked={option.value === value} />
-            <span className="marked">
-              <Markdown message={option.label} />
-            </span>
-          </label>
-        </div>
+        <RadioButton key={option.label} option={option} />
       ))}
     </div>
   );
 
-  if (isStringArray(options)) {
-    return <StringsAsOptions strings={options}>{opts => <RadioButtonsElement opts={opts} />}</StringsAsOptions>;
-  } else {
-    return <RadioButtonsElement opts={options as Array<Option<string>>} />;
-  }
+  return inline ? <InlineRadioButtons opts={radioOptions} /> : <VerticalRadioButtons opts={radioOptions} />;
 };
diff --git a/app/scripts/modules/core/src/presentation/main.less b/app/scripts/modules/core/src/presentation/main.less
index 1e2227ec0d4..eda3032bf8c 100644
--- a/app/scripts/modules/core/src/presentation/main.less
+++ b/app/scripts/modules/core/src/presentation/main.less
@@ -1431,16 +1431,19 @@ body > .select2-container.open {
   }
 }
 
+.checkbox-inline + .checkbox-inline,
+.radio-inline + .radio-inline {
+  margin-left: 0 !important;
+}
+
 .checkbox-inline,
 .radio-inline {
-  input[type='checkbox'],
-  input[type='radio'] {
-    margin-left: -15px;
-  }
-  padding-left: 25px;
-  &:first-child {
-    padding-left: 15px;
-  }
+  margin-right: 15px;
+}
+
+.checkbox-inline:last-of-type,
+.radio-inline:last-of-type {
+  margin-right: 0;
 }
 
 ul.checkmap {