refactor: hasMessageSpacer prop for Inputs

korhaliv · Oct 10, 2019 · 7cb7076 · 7cb7076
1 parent 16c90ae
commit 7cb7076
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/renderer/components/Form/Field.js b/renderer/components/Form/Field.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Flex } from 'rebass/styled-components'
+import { Box, Flex } from 'rebass/styled-components'
 import { Message, Text } from 'components/UI'
 import Label from './Label'
 
@@ -10,6 +10,7 @@ const Field = ({
   error,
   field,
   hasFocus,
+  hasMessageSpacer,
   isDisabled,
   isReadOnly,
   isRequired,
@@ -40,6 +41,12 @@ const Field = ({
         {error}
       </Message>
     )}
+
+    {hasMessageSpacer && !error && (
+      <Box fontSize="s" fontWeight="normal" height="16px" mt={1}>
+        &nbsp;
+      </Box>
+    )}
   </Flex>
 )
 
@@ -49,6 +56,7 @@ Field.propTypes = {
   error: PropTypes.node,
   field: PropTypes.string.isRequired,
   hasFocus: PropTypes.bool,
+  hasMessageSpacer: PropTypes.bool,
   isDisabled: PropTypes.bool,
   isReadOnly: PropTypes.bool,
   isRequired: PropTypes.bool,

diff --git a/renderer/components/Form/Input.js b/renderer/components/Form/Input.js
@@ -19,6 +19,7 @@ const Input = props => {
     fieldState,
     forwardedRef,
     hasMessage,
+    hasMessageSpacer,
     initialValue,
     isDisabled,
     isReadOnly,
@@ -67,6 +68,7 @@ const Input = props => {
       error={fieldError}
       field={field}
       hasFocus={hasFocus}
+      hasMessageSpacer={hasMessageSpacer}
       isDisabled={isDisabled}
       isReadOnly={isReadOnly}
       isRequired={isRequired}
@@ -132,6 +134,7 @@ Input.propTypes = {
   fieldState: PropTypes.object.isRequired,
   forwardedRef: PropTypes.object,
   hasMessage: PropTypes.bool,
+  hasMessageSpacer: PropTypes.bool,
   highlightOnValid: PropTypes.bool,
   initialValue: PropTypes.string,
   isDisabled: PropTypes.bool,