[FIX JENKINS-42598] - spacing issue with numeric inputs (#34)

* JENKINS-42598 - spacing issue with numeric inputs * JENKINS-43009 - Fix styling issue with hack for table action buttons affecting input
jenkinsci · Mar 22, 2017 · bdefbef · bdefbef
1 parent 43c1913
commit bdefbef
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 8 deletions.
diff --git a/src/main/js/components/properties/DecimalPropertyInput.jsx b/src/main/js/components/properties/DecimalPropertyInput.jsx
@@ -1,15 +1,17 @@
 import React from 'react';
+import { FormElement } from '@jenkins-cd/design-language';
 
 export default class DecimalPropertyInput extends React.Component {
     render() {
+        const { type: p, step } = this.props;
         return (
-            <div>
-                <label className="form-label">{this.props.type.capitalizedName + (this.props.type.isRequired ? '*' : '')}</label>
+            <FormElement title={p.capitalizedName + (p.isRequired ? '*' : '')}
+                errorMessage={!step.pristine && p.isRequired && !step.data[p.name] && (p.capitalizedName + ' is required')}>
                 <div className="TextInput">
                     <input type="number" className="TextInput-control" defaultValue={this.props.step.data[this.props.propName]}
                         onChange={e => { this.props.step.data[this.props.propName] = parseFloat(e.target.value); this.props.onChange(this.props.step); }}/>
                 </div>
-            </div>
+            </FormElement>
         );
     }
 }

diff --git a/src/main/js/components/properties/IntegerPropertyInput.jsx b/src/main/js/components/properties/IntegerPropertyInput.jsx
@@ -1,15 +1,17 @@
 import React from 'react';
+import { FormElement } from '@jenkins-cd/design-language';
 
 export default class IntegerPropertyInput extends React.Component {
     render() {
+        const { type: p, step } = this.props;
         return (
-            <div>
-                <label className="form-label">{this.props.type.capitalizedName + (this.props.type.isRequired ? '*' : '')}</label>
+            <FormElement title={p.capitalizedName + (p.isRequired ? '*' : '')}
+                errorMessage={!step.pristine && p.isRequired && !step.data[p.name] && (p.capitalizedName + ' is required')}>
                 <div className="TextInput">
                     <input type="number" className="TextInput-control" defaultValue={this.props.step.data[this.props.propName]}
-                        onChange={e => { this.props.step.data[this.props.propName] = parseInt(e.target.value); this.props.onChange(this.props.step); }}/>
+                        onChange={e => { step.data[this.props.propName] = parseInt(e.target.value); this.props.onChange(step); }}/>
                 </div>
-            </div>
+            </FormElement>
         );
     }
 }

diff --git a/src/main/less/header-buttons.less b/src/main/less/header-buttons.less
@@ -58,7 +58,7 @@
 
 .actions { // for table actions
     overflow: visible !important;
-    div {
+    > div > div {
         display: inline-block;
     }
 }