From 2e7e9389c038a14f4b8bddc19246906b7bc5bf13 Mon Sep 17 00:00:00 2001
From: Al-Raheem <XYMF@corp1.ad1.seb.net>
Date: Thu, 9 May 2019 14:35:41 +0800
Subject: [PATCH 1/2] fix: fixes #11

fixes issue #11 causing radio button conflicts in radiogroup component

#11
---
 src/RadioGroup/RadioGroup.tsx | 39 ++++++++++++++++++-----------------
 1 file changed, 20 insertions(+), 19 deletions(-)

diff --git a/src/RadioGroup/RadioGroup.tsx b/src/RadioGroup/RadioGroup.tsx
index 0f98cc0eb..30e9dd477 100644
--- a/src/RadioGroup/RadioGroup.tsx
+++ b/src/RadioGroup/RadioGroup.tsx
@@ -31,25 +31,26 @@ export const RadioGroup: React.FunctionComponent<RadioGroupProps> = (props: Radi
             <div className={inputFieldClass}>
                 {props.label && <label className="radio-group-label" htmlFor={props.name}>{props.label}</label>}
 
-                {props.list && props.list.map((item, index) =>
-                    <div key={index} className="radio-item">
-
-                        <label className="radio-label" htmlFor={item.label}>{item.label}</label>
-                        <input
-                            className="radio-input"
-                            type="radio"
-                            value={item.value}
-                            name={item.group}
-                            id={item.label}
-                            checked={props.value === item.value}
-                            disabled={props.disableAll || item.disabled}
-                            onChange={(e) => { props.onChange(item.value); }}
-                        />
-
-                        <span className="checkmark" />
-                        {item.description && <span className="radio-description">{item.description}</span>}
-                    </div>
-                )}
+                {props.list && props.list.map((item, index) => {
+                    const identifier: string = item.label.replace(" ", "_") + Math.floor(Math.random() * 100) + (new Date()).getTime();
+                    return (
+                        <div key={index} className="radio-item">
+                            <label className="radio-label" htmlFor={identifier}>{item.label}</label>
+                            <input
+                                className="radio-input"
+                                type="radio"
+                                value={item.value}
+                                name={item.group}
+                                id={identifier}
+                                checked={props.value === item.value}
+                                disabled={props.disableAll || item.disabled}
+                                onChange={(e) => { props.onChange(item.value); }}
+                            />
+                            <span className="checkmark" />
+                            {item.description && <span className="radio-description">{item.description}</span>}
+                        </div>
+                    );
+                })}
                 {props.error && <div className={"alert alert-danger"}>{props.error}</div>}
             </div>
         </div>

From 51a3ba096c3d6e2b4687061bd8aefd875f1f3852 Mon Sep 17 00:00:00 2001
From: Al-Raheem <XYMF@corp1.ad1.seb.net>
Date: Thu, 9 May 2019 14:47:19 +0800
Subject: [PATCH 2/2] fix: fixes #12

fixed radio buttons vertical alignment seen when using it inline

#12
---
 src/RadioGroup/radio-group-style.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/RadioGroup/radio-group-style.scss b/src/RadioGroup/radio-group-style.scss
index be57996c5..3d1fbcff6 100644
--- a/src/RadioGroup/radio-group-style.scss
+++ b/src/RadioGroup/radio-group-style.scss
@@ -15,6 +15,7 @@ $red: #F03529;
         user-select: none;
         transition: all $transition-time;
         .radio-item {
+            vertical-align: top;
             position: relative;
             margin-bottom: 5px;
             input[type=radio] {