form tweaks

* add small modifier for all form elements
* ditch bold font
* use small elements for edit mode

client/src/components/atoms/Form/Input.module.scss

@@ -39,7 +39,6 @@
 .input {
     font-size: $font-size-base;
     font-family: $font-family-base;
-    font-weight: $font-weight-bold;
     color: $brand-black;
     border: none;
     box-shadow: none;
@@ -62,7 +61,6 @@
         font-family: $font-family-base;
         font-size: $font-size-base;
         color: $brand-grey-light;
-        font-weight: $font-weight-base;
         transition: .2s ease-out;
         opacity: .7;
     }
@@ -86,6 +84,17 @@
     //     box-shadow: 0 0 0 1000px $brand-black inset;
     //     transition: background-color 5000s ease-in-out 0s;
     // }
+
+    // Size modifiers
+    &.small {
+        font-size: $font-size-small;
+        min-height: 33px;
+        padding: $spacer / 4;
+
+        &::placeholder {
+            font-size: $font-size-small;
+        }
+    }
 }
 
 .select {
@@ -114,6 +123,16 @@
         outline: 0;
         font-family: $font-family-base;
     }
+
+    &.small {
+        height: 32px;
+        padding-right: 2rem;
+
+        // custom arrow
+        background-position: calc(100% - 14px) 1rem, calc(100% - 9px) 1rem,
+            100% 0;
+        background-size: 5px 5px, 5px 5px, 2rem 3rem;
+    }
 }
 
 .radioGroup {
@@ -165,26 +184,3 @@
     display: flex;
     align-items: center;
 }
-
-// Size modifiers
-
-.inputSmall {
-    composes: input;
-    font-size: $font-size-small;
-    min-height: 32px;
-    padding: $spacer / 4;
-
-    &::placeholder {
-        font-size: $font-size-small;
-    }
-}
-
-.selectSmall {
-    composes: select;
-    height: 32px;
-    padding-right: 2rem;
-
-    // custom arrow
-    background-position: calc(100% - 14px) 1rem, calc(100% - 9px) 1rem, 100% 0;
-    background-size: 5px 5px, 5px 5px, 2rem 3rem;
-}

client/src/components/atoms/Form/Input.tsx

@@ -1,7 +1,7 @@
-import cx from 'classnames'
 import React, { PureComponent, FormEvent, ChangeEvent } from 'react'
 import slugify from 'slugify'
 import DatePicker from 'react-datepicker'
+import cx from 'classnames'
 import { ReactComponent as SearchIcon } from '../../../img/search.svg'
 import Help from './Help'
 import Label from './Label'
@@ -31,6 +31,7 @@ interface InputProps {
     group?: any
     multiple?: boolean
     disabled?: boolean
+    small?: boolean
 }
 
 interface InputState {
@@ -82,6 +83,7 @@ export default class Input extends PureComponent<InputProps, InputState> {
             onChange,
             value,
             disabled
+            small
         } = this.props
 
         const wrapClass = this.inputWrapClasses()
@@ -92,7 +94,7 @@ export default class Input extends PureComponent<InputProps, InputState> {
                     <div className={wrapClass}>
                         <select
                             id={name}
-                            className={styles.select}
+                            className={cx(styles.select, small && styles.small)}
                             name={name}
                             required={required}
                             onFocus={this.toggleFocus}
@@ -118,7 +120,7 @@ export default class Input extends PureComponent<InputProps, InputState> {
                     <div className={wrapClass}>
                         <textarea
                             id={name}
-                            className={styles.input}
+                            className={cx(styles.input, small && styles.small)}
                             onFocus={this.toggleFocus}
                             onBlur={this.toggleFocus}
                             {...this.props}
@@ -162,7 +164,7 @@ export default class Input extends PureComponent<InputProps, InputState> {
                         <DatePicker
                             selected={this.state.dateCreated}
                             onChange={this.handleDateChange}
-                            className={styles.input}
+                            className={cx(styles.input, small && styles.small)}
                             onFocus={this.toggleFocus}
                             onBlur={this.toggleFocus}
                             id={name}
@@ -179,7 +181,10 @@ export default class Input extends PureComponent<InputProps, InputState> {
                                 <input
                                     id={name}
                                     type={type || 'text'}
-                                    className={styles.input}
+                                    className={cx(
+                                        styles.input,
+                                        small && styles.small
+                                    )}
                                     onFocus={this.toggleFocus}
                                     onBlur={this.toggleFocus}
                                     {...this.props}
@@ -190,7 +195,10 @@ export default class Input extends PureComponent<InputProps, InputState> {
                             <input
                                 id={name}
                                 type={type || 'text'}
-                                className={styles.input}
+                                className={cx(
+                                    styles.input,
+                                    small && styles.small
+                                )}
                                 onFocus={this.toggleFocus}
                                 onBlur={this.toggleFocus}
                                 {...this.props}
@@ -210,12 +218,13 @@ export default class Input extends PureComponent<InputProps, InputState> {
             required,
             help,
             additionalComponent,
-            multiple
+            multiple,
+            small
         } = this.props
 
         return (
-            <Row>
+            <Row small={small}>
-                <Label htmlFor={name} required={required}>
+                <Label htmlFor={name} required={required} small={small}>
                     {label}
                 </Label>
 

client/src/components/atoms/Form/Label.module.scss

@@ -7,11 +7,13 @@
     line-height: 1.2;
     display: block;
     margin-bottom: $spacer / 6;
+
+    &.small {
+        font-size: $font-size-small;
+    }
 }
 
 .required {
-    composes: label;
-
     &:after {
         content: '*';
         font-size: $font-size-base;
@@ -19,4 +21,10 @@
         display: inline-block;
         margin-left: .1rem;
     }
+
+    &.small {
+        &:after {
+            font-size: $font-size-small;
+        }
+    }
 }

client/src/components/atoms/Form/Label.tsx

@@ -1,17 +1,24 @@
 import React from 'react'
+import cx from 'classnames'
 import styles from './Label.module.scss'
 
 const Label = ({
     required,
     children,
+    small,
     ...props
 }: {
     required?: boolean
     children: string
     htmlFor: string
+    small?: boolean
 }) => (
     <label
-        className={required ? styles.required : styles.label}
+        className={cx(
+            styles.label,
+            required && styles.required,
+            small && styles.small
+        )}
         title={required ? 'Required' : ''}
         {...props}
     >

client/src/components/atoms/Form/Row.module.scss

@@ -2,4 +2,8 @@
 
 .row {
     margin-bottom: $spacer;
+
+    &.small {
+        margin-bottom: $spacer / 2;
+    }
 }

client/src/components/atoms/Form/Row.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
+import cx from 'classnames'
 import styles from './Row.module.scss'
 
-const Row = ({ children }: { children: any }) => (
+const Row = ({ children, small }: { children: any; small?: boolean }) => (
-    <div className={styles.row}>{children}</div>
+    <div className={cx(styles.row, small && styles.small)}>{children}</div>
 )
 
 export default Row

client/src/data/form-styleguide.json

@@ -44,6 +44,21 @@
       "placeholder": "e.g. 2019-08-12",
       "type": "date",
       "required": true
+    },
+    "name2": {
+      "label": "Your name",
+      "placeholder": "e.g. Jelly McJellyfish",
+      "type": "text",
+      "required": true,
+      "small": true,
+      "help": "Help me"
+    },
+    "industry2": {
+      "label": "Industry",
+      "type": "select",
+      "required": true,
+      "small": true,
+      "options": ["Automotive", "Technology"]
     }
   }
 }

client/src/routes/Details/AssetDetails.tsx

@@ -152,6 +152,7 @@ export default class AssetDetails extends PureComponent<
                 onChange={this.inputChange}
                 value={value}
                 disabled={this.state.isLoading}
+                small
             />
         ) : (
             <Moment date={value} format="L" interval={0} />
@@ -169,6 +170,7 @@ export default class AssetDetails extends PureComponent<
                 options={steps[1].fields.categories.options}
                 value={value}
                 disabled={this.state.isLoading}
+                small
             />
         ) : (
             // TODO: Make this link to search for respective category

client/src/routes/Styleguide.tsx

@@ -18,6 +18,7 @@ class Styleguide extends Component {
                 type={value.type}
                 help={value.help}
                 options={value.options}
+                small={value.small}
             />
         ))