Added style for pf3 select multi value labels

Author: Hyperkid123

packages/pf3-component-mapper/demo/index.js

@@ -19,6 +19,7 @@ const selectSchema = {
     validateOnMount: true,
     menuIsOpen: true,
     isClearable: true,
+    multi: true,
     validate: [{
       type: 'required-validator'
     }],
@@ -28,6 +29,9 @@ const selectSchema = {
     }, {
       label: 'bar',
       value: 231
+    }, {
+      label: 'Super long option label, Super long option label, Super long option label, Super long option label, Super long option label, Super long option labelSuper long option label, Super long option labelSuper long option label, Super long option labelSuper long option label, Super long option labelSuper long option label, Super long option labelSuper long option label, Super long option labelSuper long option label, Super long option label',
+      value: 'x'
     }]
   }]
 }

packages/pf3-component-mapper/src/form-fields/select/react-select.scss

@@ -110,4 +110,36 @@ div.field-group {
     background: none;
     border: none;
   }
+
+  .ddorg__pf3-component-mapper__select__multi-value {
+    background: none;
+    margin: 0;
+    margin-right: 2px;
+    min-width: unset;
+    .ddorg__pf3-component-mapper__select__multi-value__label {
+      &::after {
+        content: ","
+      }
+    }
+    &:last-of-type {
+      .ddorg__pf3-component-mapper__select__multi-value__label {
+        &::after {
+          content: ""
+        }
+      }
+    }
+    .ddorg__pf3-component-mapper__select__multi-value__label {
+      padding: 0;
+      font-size: inherit;
+    }
+    .ddorg__pf3-component-mapper__select__multi-value__remove {
+      display: none
+    }
+  }
+  .ddorg__pf3-component-mapper__select__value-container--is-multi {
+    flex-wrap: nowrap;
+  }
+  .ddorg__pf3-component-mapper__select__value-container {
+    margin-right: 8px;
+  }
 }