Address UX review

Author: PanSpagetka

package.json

@@ -97,6 +97,7 @@
     "patternfly-react": "^1.16.4",
     "prop-types": "^15.6.0",
     "react": "^16.2.0",
+    "react-bootstrap": "^0.32.1",
     "react-dom": "^16.2.0",
     "react-props": "0.0.3",
     "react-redux": "^5.0.6",

src/tagging/components/categoryModifier.jsx

@@ -24,7 +24,7 @@ CategoryModifier.propTypes = {
 };
 
 CategoryModifier.defaultProps = {
-  categoryLabel: 'Category:',
+  categoryLabel: 'Category',
 };
 
 export default CategoryModifier;

src/tagging/components/tag.jsx

@@ -7,7 +7,7 @@ import styles from './tag.scss';
 const Tag = ({
   onTagDeleteClick, tagCategory, tagValue,
 }) => (
-  <li key={tagValue.id}>
+  <li key={tagValue.id} className="tag">
     <Label
       key={tagValue.id}
       bsStyle="primary"

src/tagging/components/tag.scss

@@ -1,7 +1,16 @@
 @import '~patternfly/dist/sass/patternfly/variables';
 :export { defaultColor: $color-pf-white; }
 
-.remove-button {
-  color: $color-pf-black;
-  margin-left: 5px;
+.pf-remove-button {
+  color: $color-pf-white;
+  vertical-align: middle;
+}
+
+.tag {
+  font-size: 0.8em;
+  display: table-cell !important;
+  vertical-align:middle;
+  span {
+    background-color: $color-pf-blue-400;
+  }
 }

src/tagging/components/tagCategory.jsx

@@ -15,7 +15,7 @@ class TagCategory extends React.Component {
   render() {
     return (
       <ul className="tag-category list-inline">
-        {this.props.tagCategory.description}:
+        <div className="category-label">{this.props.tagCategory.description}</div>
         {this.props.tagValues.map(tagValue => this.generateTag(tagValue))}
       </ul>
     );

src/tagging/components/tagCategory.scss

@@ -1,14 +1,21 @@
 @import '~patternfly/dist/sass/patternfly/variables';
 
 ul.tag-category.list-inline {
-  display: inline-block;
   background-color: $color-pf-blue-500;
-  padding: 5px 5px 5px 5px !important;
+  padding: 3px 10px 3px 15px !important;
   color: $color-pf-white;
   margin-left: 5px;
   margin-right: 10px;
   margin-bottom: 5px;
+  font-size: 14px;
+  line-height: 24px;
+  display: table;
+  float: left;
   li a span {
     color: $color-pf-white;
   }
 }
+
+.category-label {
+  padding-right: 15px;
+}

src/tagging/components/tagSelector.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Select from 'react-select';
 import PropTypes from 'prop-types';
+import './tagSelector.scss';
 
 class TagSelector extends React.Component {
   handleChange = (selectedOption) => {
@@ -11,28 +12,50 @@ class TagSelector extends React.Component {
   }
 
 
-  tagCategories = this.props.tagCategories.map(category =>
-    ({ value: category.id, label: (category.description + (category.singleValue ? '*' : '')) }));
+  tagCategories = this.props.tagCategories.map(category => ((category.singleValue &&
+        {
+          value: category.id,
+          label:
+  <div>
+    <span>
+      {category.description}
+    </span>
+    <span
+      className="pull-right pficon pficon-info tag-icon"
+      aria-hidden="true"
+      title={this.props.infoText}
+    />
+    <span className="sr-only">{this.props.infoText}</span>
+  </div>,
+        }) ||
+        { value: category.id, label: category.description }));
 
   render() {
     const label = this.props.selectedOption.description;
     const value = this.props.selectedOption.id;
     return (
       <Select
+        className="selected-option"
         name="form-field-name"
         value={value}
         label={label}
         onChange={this.handleChange}
         options={this.tagCategories}
-        resetValue={{ label: '', value: '' }}
+        clearable={false}
       />
+
     );
   }
 }
 TagSelector.propTypes = {
   tagCategories: PropTypes.arrayOf(PropTypes.object),
   selectedOption: PropTypes.object.isRequired,
   onTagCategoryChange: PropTypes.func.isRequired,
+  infoText: PropTypes.string,
+};
+
+TagSelector.defaultProps = {
+  infoText: 'Only a single value can be assigned from these categories',
 };
 
 export default TagSelector;

src/tagging/components/tagSelector.scss

@@ -0,0 +1,17 @@
+.selected-option {
+  .Select-value {
+    width: calc(100% - 20px);
+    .pficon {
+      line-height: 34px !important;
+    }
+    .Select-value-label{
+      span:first-child {
+        float: left;
+      }
+    }
+  }
+}
+
+.tag-icon {
+  line-height: 18px;
+}

src/tagging/components/tagging.jsx

@@ -57,11 +57,6 @@ class Tagging extends React.Component {
             <TagView assignedTags={this.props.assignedTags} onTagDeleteClick={this.onTagDeleteClick} />
           </Col>
         </Row>
-        <Row>
-          <Col md={12}>
-            <div>{this.props.infoText}</div>
-          </Col>
-        </Row>
       </Grid>
     );
   }
@@ -76,12 +71,10 @@ Tagging.propTypes = {
   onTagCategoryChange: PropTypes.func.isRequired,
   onTagValueChange: PropTypes.func.isRequired,
   onTagMultiValueChange: PropTypes.func,
-  infoText: PropTypes.string,
 };
 
 Tagging.defaultProps = {
   onTagMultiValueChange: () => {},
-  infoText: '* Only a single value can be assigned from these categories',
 };
 
 export default Tagging;

src/tagging/components/taggingWithButtons.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Grid, Row, ButtonGroup, Button } from 'patternfly-react';
+import { ButtonToolbar } from 'react-bootstrap';
 import Tagging from './tagging';
 
 class TaggingWithButtons extends React.Component {
@@ -22,33 +23,39 @@ class TaggingWithButtons extends React.Component {
           selectedTagValue={this.props.selectedTagValue}
         />
         <Row className="pull-right">
-          <ButtonGroup>
-            <Button
-              onClick={this.props.cancelButton.onClick}
-              href={this.props.cancelButton.href}
-              disabled={this.props.cancelButton.disabled}
-              type={this.props.cancelButton.type}
-            >
-              {this.props.cancelButton.description}
-            </Button>
-            {this.props.showReset &&
+          <ButtonToolbar>
+            <ButtonGroup>
               <Button
-                onClick={this.props.resetButton.onClick}
-                href={this.props.resetButton.href}
-                disabled={this.props.resetButton.disabled}
-                type={this.props.resetButton.type}
+                onClick={this.props.saveButton.onClick}
+                href={this.props.saveButton.href}
+                disabled={this.props.saveButton.disabled}
+                type={this.props.saveButton.type}
               >
-                {this.props.resetButton.description}
-              </Button>}
-            <Button
-              onClick={this.props.saveButton.onClick}
-              href={this.props.saveButton.href}
-              disabled={this.props.saveButton.disabled}
-              type={this.props.saveButton.type}
-            >
-              {this.props.saveButton.description}
-            </Button>
-          </ButtonGroup>
+                {this.props.saveButton.description}
+              </Button>
+            </ButtonGroup>
+            <ButtonGroup>
+              {this.props.showReset &&
+                <Button
+                  onClick={this.props.resetButton.onClick}
+                  href={this.props.resetButton.href}
+                  disabled={this.props.resetButton.disabled}
+                  type={this.props.resetButton.type}
+                >
+                  {this.props.resetButton.description}
+                </Button>}
+            </ButtonGroup>
+            <ButtonGroup>
+              <Button
+                onClick={this.props.cancelButton.onClick}
+                href={this.props.cancelButton.href}
+                disabled={this.props.cancelButton.disabled}
+                type={this.props.cancelButton.type}
+              >
+                {this.props.cancelButton.description}
+              </Button>
+            </ButtonGroup>
+          </ButtonToolbar>
         </Row>
       </Grid>
     );