From e68239b3ee22079c76c198228dfbf014f0a21d17 Mon Sep 17 00:00:00 2001
From: Eric Schultz <eric@wwahammy.com>
Date: Thu, 18 Apr 2019 13:53:11 -0500
Subject: [PATCH] Add style support to labels and inputs

---
 .../common/LabeledFieldComponent.tsx          |  3 ++-
 javascripts/src/components/common/fields.tsx  | 20 ++++++++++---------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/javascripts/src/components/common/LabeledFieldComponent.tsx b/javascripts/src/components/common/LabeledFieldComponent.tsx
index 7ee200ab..fd6b0815 100644
--- a/javascripts/src/components/common/LabeledFieldComponent.tsx
+++ b/javascripts/src/components/common/LabeledFieldComponent.tsx
@@ -14,6 +14,7 @@ export interface LabeledFieldComponentProps
     inStickyError?:boolean
     stickyError?:string
     className?:string
+    style?:React.CSSProperties
 }
 
 @observer
@@ -31,7 +32,7 @@ export default class LabeledFieldComponent extends React.Component<LabeledFieldC
        classNames.push("has-error")
     }
 
-    return <fieldset className={classNames.join(" ")}><label htmlFor={this.props.inputId} className="control-label">{this.props.labelText}</label>
+    return <fieldset className={classNames.join(" ")} style={this.props.style}><label htmlFor={this.props.inputId} className="control-label">{this.props.labelText}</label>
        <StandardFieldComponent inError={inError} error={this.props.error} inStickyError={inStickyError} stickyError={this.props.stickyError}>{this.props.children}</StandardFieldComponent>
     </fieldset>;
   }
diff --git a/javascripts/src/components/common/fields.tsx b/javascripts/src/components/common/fields.tsx
index 5bbee8a8..fa8be668 100644
--- a/javascripts/src/components/common/fields.tsx
+++ b/javascripts/src/components/common/fields.tsx
@@ -41,7 +41,9 @@ interface FieldProps extends ClassNameable {
   field: Field,
   placeholder?: string,
   label?: string
-  inputClassNames?: string
+  inputClassNames?: string,
+  style?: React.CSSProperties
+  inputStyle?: React.CSSProperties
 }
 
 interface BasicFieldProps extends FieldProps {
@@ -54,8 +56,8 @@ export const BasicField = observer((props: BasicFieldProps) => {
   return <LabeledFieldComponent
     inputId={props.field.id} labelText={field.label} inError={field.hasError} error={field.error}
     inStickyError={field.hasServerError} stickyError={field.serverError}
-    className={props.className} >
-    {wrapInInputGroupWhenNeeded({ input: <ReactInput field={field} label={props.label} placeholder={props.placeholder} className={`form-control ${props.inputClassNames || ''}`} />, prefixInputAddon: props.prefixInputAddon, postfixInputAddon: props.postfixInputAddon })}
+    className={props.className} style={props.style}>
+    {wrapInInputGroupWhenNeeded({ input: <ReactInput field={field} label={props.label} placeholder={props.placeholder} className={`form-control ${props.inputClassNames || ''}`} style={props.inputStyle}/>, prefixInputAddon: props.prefixInputAddon, postfixInputAddon: props.postfixInputAddon })}
   </LabeledFieldComponent>
 })
 
@@ -68,9 +70,9 @@ export const SelectField = observer((props: SelectFieldProps) => {
   return <LabeledFieldComponent
     inputId={props.field.id} labelText={field.label} inError={field.hasError} error={field.error}
     inStickyError={field.hasServerError} stickyError={field.serverError}
-    className={props.className} >
+    className={props.className} style={props.style}>
 
-    <ReactSelect field={field} label={props.label} placeholder={props.placeholder} className={`form-control ${props.inputClassNames}`} options={props.options} />
+    <ReactSelect field={field} label={props.label} placeholder={props.placeholder} className={`form-control ${props.inputClassNames}`} options={props.options} style={props.inputStyle}/>
 
   </LabeledFieldComponent>
 })
@@ -84,9 +86,9 @@ export const TextareaField = observer((props: TextareaFieldProps) => {
   return <LabeledFieldComponent
     inputId={props.field.id} labelText={field.label} inError={field.hasError} error={field.error}
     inStickyError={field.hasServerError} stickyError={field.serverError}
-    className={props.className} >
+    className={props.className} style={props.style}>
 
-    <ReactTextarea field={field} label={props.label} placeholder={props.placeholder} className={`form-control ${props.inputClassNames}`} rows={props.rows} />
+    <ReactTextarea field={field} label={props.label} placeholder={props.placeholder} className={`form-control ${props.inputClassNames}`} rows={props.rows} style={props.inputStyle}/>
 
   </LabeledFieldComponent>
 })
@@ -105,7 +107,7 @@ export const CurrencyField = observer((props: CurrencyFieldProps) => {
   return <LabeledFieldComponent
     inputId={props.field.id} labelText={field.label} inError={field.hasError} error={field.error}
     inStickyError={field.hasServerError} stickyError={field.serverError}
-    className={props.className}>
+    className={props.className} style={props.style}>
 
       <ReactMaskedInput field={field} label={props.label} placeholder={props.placeholder}
                         className={`form-control ${props.inputClassNames}`} guide={true}
@@ -115,7 +117,7 @@ export const CurrencyField = observer((props: CurrencyFieldProps) => {
                           allowNegative:allowNegative,
                           fixedDecimalScale:true
                         })}
-                        showMask={true} placeholderChar={'0'}
+                        showMask={true} placeholderChar={'0'} style={props.inputStyle}
       />
 
   </LabeledFieldComponent>