Fix scaling issue with multi-line FormFieldValidationMessage (#1537)

segmentio · Oct 25, 2022 · 83ad4ff · 83ad4ff
1 parent 957160f
commit 83ad4ff
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/src/form-field/src/FormFieldValidationMessage.js b/src/form-field/src/FormFieldValidationMessage.js
@@ -1,13 +1,16 @@
 import React, { memo, forwardRef } from 'react'
 import { ErrorIcon } from '../../icons'
 import { Pane } from '../../layers'
+import { majorScale } from '../../scales'
 import { Paragraph } from '../../typography'
 
 const FormFieldValidationMessage = memo(
   forwardRef(function FormFieldValidationMessage({ children, ...props }, ref) {
     return (
       <Pane ref={ref} display="flex" {...props}>
-        <ErrorIcon color="danger" marginTop={1} size={14} marginRight={8} />
+        <Pane display="flex" marginRight={majorScale(1)}>
+          <ErrorIcon color="danger" marginTop={1} size={14} />
+        </Pane>
         <Paragraph marginTop={0} size={300} color="danger" role="alert">
           {children}
         </Paragraph>

diff --git a/src/form-field/stories/index.stories.js b/src/form-field/stories/index.stories.js
@@ -38,5 +38,11 @@ storiesOf('form-field', module)
         document.body.style.height = '100vh'
       })()}
       <FormFieldValidationMessage>FormFieldValidationMessage</FormFieldValidationMessage>
+      <Box width={240}>
+        <FormFieldValidationMessage>
+          greatly nearby muscle evening picture took afraid fallen reason flight shout crew research act beneath flow
+          away cloth will pair world trip reach explain
+        </FormFieldValidationMessage>
+      </Box>
     </Box>
   ))