From c648ca68784c36e24af51e9feb7d1fbb3002580b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Wed, 1 Mar 2017 17:04:58 +0000
Subject: [PATCH] don't use value's `id` on radio instances

---
 ui/src/components/form/input/story.js | 70 ++++++---------------------
 ui/src/components/form/radio/index.js | 15 +++++-
 ui/src/components/form/toggle-base.js | 28 ++++++++---
 3 files changed, 49 insertions(+), 64 deletions(-)

diff --git a/ui/src/components/form/input/story.js b/ui/src/components/form/input/story.js
index 580a8cd3..7e44043a 100644
--- a/ui/src/components/form/input/story.js
+++ b/ui/src/components/form/input/story.js
@@ -12,10 +12,7 @@ storiesOf('Input', module)
   .add('type=email', () => (
     <FormGroup>
       <Label>Email Address</Label>
-      <Input
-        placeholder='Enter email'
-        type='email'
-      />
+      <Input placeholder='Enter email' type='email' />
       <small>We&apos;ll never share your email with anyone else.</small>
     </FormGroup>
   ))
@@ -23,36 +20,24 @@ storiesOf('Input', module)
     <div>
       <FormGroup>
         <Label>Email Address</Label>
-        <Input
-          placeholder='Enter email'
-          type='email'
-        />
+        <Input placeholder='Enter email' type='email' />
         <FormMeta error='Unexpected inline error!' />
       </FormGroup>
       <FormGroup error='Unexpected group error!'>
         <Label>Email Address</Label>
-        <Input
-          placeholder='Enter email'
-          type='email'
-        />
+        <Input placeholder='Enter email' type='email' />
         <FormMeta />
       </FormGroup>
       {/* eslint-disable object-curly-newline */}
       <FormGroup meta={{error: 'Unexpected meta error!'}}>
         {/* eslint-enable object-curly-newline */}
         <Label>Email Address</Label>
-        <Input
-          placeholder='Enter email'
-          type='email'
-        />
+        <Input placeholder='Enter email' type='email' />
         <FormMeta />
       </FormGroup>
       <FormGroup>
         <Label>Email Address</Label>
-        <Input
-          placeholder='Enter email'
-          type='email'
-        />
+        <Input placeholder='Enter email' type='email' />
         <FormMeta error>
           Unexpected children error!
         </FormMeta>
@@ -63,36 +48,24 @@ storiesOf('Input', module)
     <div>
       <FormGroup>
         <Label>Email Address</Label>
-        <Input
-          placeholder='Enter email'
-          type='email'
-        />
+        <Input placeholder='Enter email' type='email' />
         <FormMeta warning='Unexpected inline warning!' />
       </FormGroup>
       <FormGroup warning='Unexpected group warning!'>
         <Label>Email Address</Label>
-        <Input
-          placeholder='Enter email'
-          type='email'
-        />
+        <Input placeholder='Enter email' type='email' />
         <FormMeta />
       </FormGroup>
       {/* eslint-disable object-curly-newline */}
       <FormGroup meta={{warning: 'Unexpected meta warning!'}}>
         {/* eslint-enable object-curly-newline */}
         <Label>Email Address</Label>
-        <Input
-          placeholder='Enter email'
-          type='email'
-        />
+        <Input placeholder='Enter email' type='email' />
         <FormMeta />
       </FormGroup>
       <FormGroup>
         <Label>Email Address</Label>
-        <Input
-          placeholder='Enter email'
-          type='email'
-        />
+        <Input placeholder='Enter email' type='email' />
         <FormMeta warning>
           Unexpected children warning!
         </FormMeta>
@@ -103,36 +76,24 @@ storiesOf('Input', module)
     <div>
       <FormGroup>
         <Label>Email Address</Label>
-        <Input
-          placeholder='Enter email'
-          type='email'
-        />
+        <Input placeholder='Enter email' type='email' />
         <FormMeta success='Unexpected inline success!' />
       </FormGroup>
       <FormGroup success='Unexpected group success!'>
         <Label>Email Address</Label>
-        <Input
-          placeholder='Enter email'
-          type='email'
-        />
+        <Input placeholder='Enter email' type='email' />
         <FormMeta />
       </FormGroup>
       {/* eslint-disable object-curly-newline */}
       <FormGroup meta={{success: 'Unexpected meta success!'}}>
         {/* eslint-enable object-curly-newline */}
         <Label>Email Address</Label>
-        <Input
-          placeholder='Enter email'
-          type='email'
-        />
+        <Input placeholder='Enter email' type='email' />
         <FormMeta />
       </FormGroup>
       <FormGroup>
         <Label>Email Address</Label>
-        <Input
-          placeholder='Enter email'
-          type='email'
-        />
+        <Input placeholder='Enter email' type='email' />
         <FormMeta success>
           Unexpected children success!
         </FormMeta>
@@ -142,10 +103,7 @@ storiesOf('Input', module)
   .add('Base meta', () => (
     <FormGroup>
       <Label>Email Address</Label>
-      <Input
-        placeholder='Enter email'
-        type='email'
-      />
+      <Input placeholder='Enter email' type='email' />
       <FormMeta>I&#39;m a children of meta</FormMeta>
     </FormGroup>
   ));
diff --git a/ui/src/components/form/radio/index.js b/ui/src/components/form/radio/index.js
index ccee7b9a..840837a2 100644
--- a/ui/src/components/form/radio/index.js
+++ b/ui/src/components/form/radio/index.js
@@ -2,10 +2,21 @@ import styled from 'styled-components';
 import ToggleBase from '../toggle-base';
 import { Baseline } from '../../../shared/composers';
 import BaseInput from '../base-input';
+import React from 'react';
 
-const RadioItem = BaseInput(styled.li`
+const Li = styled.li`
   list-style-type: none;
-`);
+`;
+
+const RadioItem = BaseInput(({
+  children,
+  id, // hide id from li
+  ...props
+}) => (
+  <Li {...props}>
+    {children}
+  </Li>
+));
 
 const StyledUl = styled.ul`
   margin: 0;
diff --git a/ui/src/components/form/toggle-base.js b/ui/src/components/form/toggle-base.js
index e50a902c..c1e0b024 100644
--- a/ui/src/components/form/toggle-base.js
+++ b/ui/src/components/form/toggle-base.js
@@ -1,5 +1,5 @@
-import { remcalc, unitcalc, is } from '../../shared/functions';
-import { Subscriber } from 'react-broadcast';
+import { remcalc, unitcalc, is, rndId } from '../../shared/functions';
+import { Broadcast, Subscriber } from 'react-broadcast';
 import { boxes, colors } from '../../shared/constants';
 import BaseInput from './base-input';
 import styled from 'styled-components';
@@ -118,17 +118,27 @@ const ToggleBase = ({
     [type]: true
   };
 
-  const render = (value) => {
+  const render = ({
+    // eslint-disable-next-line react/prop-types
+    id, // ignore id from value
+    ...oldValue
+  }) => {
+    const newValue = {
+      ...oldValue,
+      id: rndId()
+    };
+
     const toggle = (
       <InnerContainer {...types} type={type}>
         <Input
           {...props}
-          {...value}
+          {...oldValue}
+          id={newValue.id}
           type={type}
         />
         <Label
           {...types}
-          htmlFor={value.id}
+          htmlFor={newValue.id}
           // eslint-disable-next-line react/prop-types
           error={props.error}
           // eslint-disable-next-line react/prop-types
@@ -139,12 +149,18 @@ const ToggleBase = ({
       </InnerContainer>
     );
 
-    return !OuterContainer ? toggle : (
+    const el = !OuterContainer ? toggle : (
       <OuterContainer>
         {toggle}
         {children}
       </OuterContainer>
     );
+
+    return (
+      <Broadcast channel='input-group' value={newValue}>
+        {el}
+      </Broadcast>
+    );
   };
 
   return (