feat: Add floating label to select (#73)

src/Form/Select.js

@@ -52,7 +52,7 @@ const IconContainer = styled(Flex)`
 const SelectInput = createComponent({
   name: 'Select',
   tag: 'select',
-  style: css`
+  style: ({ isFloating }) => css`
     position: relative;
     z-index: 2;
     padding: 0 8px;
@@ -62,6 +62,10 @@ const SelectInput = createComponent({
     background: transparent;
     border: none;
     -webkit-appearance: none;
+    ${isFloating &&
+      css`
+        margin-top: 14px;
+      `};
   `,
 });
 
@@ -117,20 +121,28 @@ export class Select extends Component {
   };
 
   render() {
-    const { id, name, options, placeholder, error, size = 'md', label, ...props } = this.props;
+    const { id, name, options, placeholder, error, size = 'md', label, floating, ...props } = this.props;
     const { value } = this.state;
+    const isFloating = floating && value != undefined && `${value}`.trim();
+    const FloatingLabel = (
+      <Label htmlFor={id} size={size} isFloating={isFloating} isFloatable={floating}>
+        {label}
+      </Label>
+    );
 
     return (
       <Field>
-        {label && <Label size={size}>{label}</Label>}
+        {label && !floating && <Label size={size}>{label}</Label>}
         <SelectContainer value={value} size={size}>
+          {label && isFloating && FloatingLabel}
           <SelectInput
             {...props}
             size={size}
             ref={this.ref}
             name={name}
             value={value}
             onChange={this.handleChange}
+            isFloating={isFloating}
             onBlur={this.handleBlur}>
             <SelectOption value="">{placeholder || 'Select an option...'}</SelectOption>
             {options.map(option => (

src/Form/Select.stories.js

@@ -13,3 +13,5 @@ const defaultProps = {
 };
 
 export const Basic = () => <Select {...defaultProps} />;
+
+export const FloatingLabel = () => <Select {...defaultProps} floating />;