COMPASS-522: Validation style pass

src/internal-packages/validation/lib/components/common/option-selector.jsx

@@ -14,7 +14,7 @@ class OptionSelector extends React.Component {
    * @returns {React.Component} The component.
    */
   render() {
-    const title = this.props.options[this.props.value] || '';
+    const title = this.props.options[this.props.value] || 'Select rule category';
 
     const menuItems = _.map(this.props.options, (label, key) => {
       return <MenuItem key={key} eventKey={key} href="#">{label}</MenuItem>;

src/internal-packages/validation/lib/components/common/range-input.jsx

@@ -150,7 +150,7 @@ class RangeInput extends React.Component {
    */
   render() {
     const boundString = `${this.props.upperBound ?
-        'upper' : 'lower'} bound`.toUpperCase();
+        'Upper' : 'Lower'} bound`;
 
     // hidden, only show dropdown
     if (this.state.hidden) {
@@ -168,12 +168,13 @@ class RangeInput extends React.Component {
       );
     }
     // not hidden, render input group with value input and operator dropdown
-    const placeholder = `${boundString}`.toLowerCase();
+    const placeholder = `${boundString}`;
     const validationState = this.state.isValid ? null : 'error';
     return (
       <FormGroup validationState={this.props.validationState || validationState}>
         <InputGroup style={{width: this.props.width}}>
           <DropdownButton
+            className="range-dropdown"
             id={`range-input-${this.props.upperBound ? 'upper' : 'lower'}`}
             componentClass={InputGroup.Button}
             title={this.state.operator}

src/internal-packages/validation/lib/components/rule-categories/regex.jsx

@@ -139,7 +139,8 @@ class RuleCategoryRegex extends React.Component {
           disabled={!this.props.isWritable}
         />
         <DropdownButton id="regex-options"
-          title="options"
+          title="Options"
+          className="regex-dropdown"
           onClose={this.onDropdownClosed.bind(this)}
         >
           <MenuItem header>

src/internal-packages/validation/lib/components/rule-field-selector.jsx

@@ -76,6 +76,7 @@ class RuleFieldSelector extends React.Component {
       <FormGroup validationState={validationState}>
         <FormControl
           type="text"
+          placeholder="Enter field name"
           id={this.props.id}
           value={this.state.value}
           onChange={this.onFieldChanged.bind(this)}

src/internal-packages/validation/styles/editable.less

@@ -8,9 +8,7 @@
 
   &-is-modified, &-is-updating, &-is-success, &-is-error {
     .editable-wrapper {
-      -webkit-box-shadow: -10px 10px 50px -20px rgba(0,0,0,0.75);
-      -moz-box-shadow: -10px 10px 50px -20px rgba(0,0,0,0.75);
-      box-shadow: -10px 10px 50px -20px rgba(0,0,0,0.75);
+      box-shadow: 2px 5px 8px rgba(0, 0, 0, 0.2);
     }
   }
 
@@ -47,6 +45,9 @@
     }
     .editable-statusbar {
       background-color: #ef4c4c;
+      .btn-link {
+        color: white;
+       }
     }
   }
 
@@ -63,12 +64,28 @@
 }
 
 .editable-statusbar {
-  padding: 0 5px;
+  padding: 0 15px;
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: space-between;
 
   min-height: 26px;
   color: white;
+
+  span {
+    height: 16px;
+    font-style: italic;
+  }
+
+  .btn-link {
+    color: #a06c29;
+    font-weight: bold;
+    height: 20px;
+  }
+
+  .btn-default {
+    color: #a06c29;
+    border-color: #a06c29;
+  }
 }

src/internal-packages/validation/styles/rule-builder.less

@@ -1,9 +1,5 @@
 .rule-builder {
   padding-top: 20px;
-
-  .delete-button {
-    color: red;
-  }
 }
 
 .rule-builder-table {
@@ -20,6 +16,42 @@
     width: 10%;
   }
 
+  .form-group { 
+    margin-bottom: 0;
+  }
+
+  .form-control, .dropdown-toggle { 
+    height: 28px;
+  }
+
+  .regex-dropdown {
+    border-left: none;
+    border-radius: 0 3px 3px 0;
+
+    &:focus {
+      border-left: solid 1px #8c8c8c;
+    }
+  }
+
+  .range-dropdown {
+    border-right: none;
+  }
+
+  .input-group {
+    margin-right: 5px;
+  }
+
+  .dropdown-header {
+    font-size: inherit;
+    color: inherit;
+  }
+
+  .dropdown-toggle {
+    text-transform: none;
+    padding-top: 5px;
+    line-height: 15px;
+  }
+
   .dropdown-header {
     input {
       margin-right: 5px;
@@ -30,3 +62,7 @@
     }
   }
 }
+
+.table > tbody > tr > td { 
+  vertical-align: middle;
+}

test/validation.range.test.js

@@ -22,7 +22,7 @@ describe('<RangeInput />', () => {
     it('has placeholder text of `lower bound`', () => {
       const component = shallow(<RangeInput />);
       const placeholderText = component.find(FormControl).props().placeholder;
-      expect(placeholderText).to.be.equal('lower bound');
+      expect(placeholderText.toLowerCase()).to.be.equal('lower bound');
     });
     it('accepts a scientific decimal -9.001e+2', function() {
       const value = '-9.0001e+2';
@@ -49,7 +49,7 @@ describe('<RangeInput />', () => {
     it('has placeholder text of `upper bound`', () => {
       const component = shallow(<RangeInput upperBound />);
       const placeholderText = component.find(FormControl).props().placeholder;
-      expect(placeholderText).to.be.equal('upper bound');
+      expect(placeholderText.toLowerCase()).to.be.equal('upper bound');
     });
   });
 });