Skip to content
Snippets Groups Projects
Commit a7b5a1bf authored by Aanand Prasad's avatar Aanand Prasad
Browse files

style: add 'inline' prop to TextField

parent 3dd4a0f8
No related branches found
No related tags found
No related merge requests found
import styled from 'styled-components'
const Label = styled.label`
margin-right: 10px;
`
const Label = styled.label``
export default Label
......@@ -7,10 +7,21 @@ import Input from '../atoms/Input'
const Root = styled.div`
--font-local: var(--font-reviewer);
align-items: center;
display: flex;
flex-direction: ${props => (props.inline ? 'row' : 'column')};
align-items: ${props => (props.inline ? 'center' : 'normal')};
justify-items: ${props => (props.inline ? 'bottom' : 'auto')};
max-width: 200px;
margin-top: 0;
margin-bottom: 20px;
font-size: 1em;
line-height: 1.8;
${Input} {
margin-left: ${props => (props.inline ? '1em' : '')};
}
`
const TextField = ({
......@@ -23,8 +34,9 @@ const TextField = ({
onBlur,
onChange,
readonly,
inline,
}) => (
<Root>
<Root inline={inline}>
{label && <Label>{label}</Label>}
<Input
name={name}
......
......@@ -20,3 +20,16 @@ initialState = { value: '' }
onChange={event => setState({ value: event.target.value })}
/>
```
By default, the label is above the input. Pass `inline` to put them side-by-side.
```js
initialState = { value: '' }
;<TextField
inline
label="Foo"
value={state.value}
placeholder="so you can write some in here"
onChange={event => setState({ value: event.target.value })}
/>
```
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment