fix: Allow word wrap in Label (#61)

Author: tassoevan

packages/fuselage/.loki/reference/chrome_iphone7_Elements_Label_required.png

@@ -21,36 +21,38 @@ const Wrapper = styled.div`
   ${ withText(textStyle) }
 
   display: flex;
-
-  flex: 1 0 auto;
-
-  flex-flow: row nowrap;
+  align-items: center;
 `;
 
 const topPositioned = css`
   flex-flow: column nowrap;
   align-items: stretch;
 
   & > ${ Wrapper } {
+    flex: 1 0 auto;
     margin: 0 0 ${ spacing } 0;
   }
 `;
 
 const startPositioned = css`
   flex-flow: row nowrap;
-  align-items: center;
+  align-items: flex-start;
 
   & > ${ Wrapper } {
+    flex: 1 0 0;
     margin: 0 ${ spacing } 0 0;
+    align-self: stretch;
   }
 `;
 
 const endPositioned = css`
   flex-flow: row-reverse nowrap;
-  align-items: center;
+  align-items: flex-start;
 
   & > ${ Wrapper } {
+    flex: 1 0 0;
     margin: 0 0 0 ${ spacing };
+    align-self: stretch;
   }
 `;
 
@@ -67,15 +69,14 @@ const Container = styled.label`
 
 const withRequiredMark = css`
   &::before {
-    content: '* ';
+    content: '*\0a0';
 
     color: ${ requiredMarkColor };
   }
 `;
 
 const Text = styled.span`
   ${ normalized }
-  ${ withTruncatedText }
   ${ withSelectableText }
 
   flex: 1 1 0;
@@ -94,6 +95,8 @@ const Error = styled.span`
   margin-left: ${ spacing };
 
   color: ${ errorColor };
+
+  white-space: wrap;
 `;
 
 const LabelContext = createContext(false);

packages/fuselage/.loki/reference/chrome_laptop_Elements_Label_required.png

@@ -51,9 +51,6 @@ storiesOf('Elements|Label', module)
         end: { position: 'end' },
       }}
     />
-    <TextSection>
-      <h2>Label</h2>
-    </TextSection>
   </Document>);
 
 const props = createPropsFromKnobs({