Spearhead
/
joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

don't use value's `id` on radio instances

This commit is contained in:
Sérgio Ramos 2017-03-01 17:04:58 +00:00 committed by Judit Greskovits
parent a8c4ca642c
commit c648ca6878
3 changed files with 49 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
ui/src/components/form/input/story.js
View File

@ -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>
));

15
ui/src/components/form/radio/index.js
View File

@ -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;

28
ui/src/components/form/toggle-base.js
View File

@ -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 (