diff --git a/app/components/Button.js b/app/components/Button.js index 5e381807..aef59747 100644 --- a/app/components/Button.js +++ b/app/components/Button.js @@ -114,7 +114,7 @@ export default function Button({ const hasIcon = icon !== undefined; return ( - + {hasIcon && icon} {hasText && } diff --git a/app/components/Input.js b/app/components/Input.js index c092ad0d..7b5fe266 100644 --- a/app/components/Input.js +++ b/app/components/Input.js @@ -3,6 +3,7 @@ import * as React from 'react'; import { observer } from 'mobx-react'; import { observable } from 'mobx'; import styled from 'styled-components'; +import VisuallyHidden from 'components/VisuallyHidden'; import Flex from 'shared/components/Flex'; const RealTextarea = styled.textarea` @@ -38,9 +39,10 @@ const RealInput = styled.input` `; const Wrapper = styled.div` + flex: ${props => (props.flex ? '1' : '0')}; max-width: ${props => (props.short ? '350px' : '100%')}; min-height: ${({ minHeight }) => (minHeight ? `${minHeight}px` : '0')}; - max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : 'auto')}; + max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : 'initial')}; `; export const Outline = styled(Flex)` @@ -70,6 +72,8 @@ export type Props = { value?: string, label?: string, className?: string, + labelHidden?: boolean, + flex?: boolean, short?: boolean, }; @@ -86,14 +90,28 @@ class Input extends React.Component { }; render() { - const { type = 'text', label, className, short, ...rest } = this.props; + const { + type = 'text', + label, + className, + short, + flex, + labelHidden, + ...rest + } = this.props; const InputComponent = type === 'textarea' ? RealTextarea : RealInput; + const wrappedLabel = {label}; return ( - +