BUGFIX: fix icons in MultiSelectBox

neos · Sep 6, 2017 · 135d428 · 135d428
1 parent f36ca0e
commit 135d428
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 10 deletions.
diff --git a/packages/neos-ui-editors/src/SelectBox/DataSourceBasedSelectBoxEditor.js b/packages/neos-ui-editors/src/SelectBox/DataSourceBasedSelectBoxEditor.js
@@ -37,7 +37,7 @@ export default class DataSourceBasedSelectBoxEditor extends PureComponent {
             values: PropTypes.objectOf(
                 PropTypes.shape({
                     label: PropTypes.string,
-                    icon: PropTypes.string, // TODO test
+                    icon: PropTypes.string,
 
                     // TODO
                     group: PropTypes.string

diff --git a/packages/neos-ui-editors/src/SelectBox/SimpleSelectBoxEditor.js b/packages/neos-ui-editors/src/SelectBox/SimpleSelectBoxEditor.js
@@ -23,7 +23,7 @@ export default class SimpleSelectBoxEditor extends PureComponent {
             values: PropTypes.objectOf(
                 PropTypes.shape({
                     label: PropTypes.string,
-                    icon: PropTypes.string, // TODO test
+                    icon: PropTypes.string,
 
                     // TODO
                     group: PropTypes.string

diff --git a/packages/react-ui-components/src/MultiSelectBox/index.story.js b/packages/react-ui-components/src/MultiSelectBox/index.story.js
@@ -6,7 +6,7 @@ import MultiSelectBox from './index.js';
 
 const options = [
     {value: 'opt1', label: 'Option 1'},
-    {value: 'opt2', label: 'Option 2'},
+    {value: 'opt2', label: 'Option 2', icon: 'bookmark'},
     {value: 'opt3', label: 'Option 3'}
 ];
 

diff --git a/packages/react-ui-components/src/MultiSelectBox/multiSelectBox.js b/packages/react-ui-components/src/MultiSelectBox/multiSelectBox.js
@@ -167,12 +167,15 @@ export default class MultiSelectBox extends PureComponent {
                 key={index}
                 className={theme.selectedOptions__item}
                 >
-                {
-                    icon ?
-                        <IconComponent className={theme.dropDown__itemIcon} icon={icon}/> :
-                        null
-                }
-                <span>{ label }</span>
+                <span>
+                    {
+                        icon ?
+                            <IconComponent className={theme.selectedOptions__itemIcon} icon={icon}/> :
+                            null
+                    }
+
+                    { label }
+                </span>
                 {
                     values && values.length == 1 && !allowEmpty ?
                     null:

diff --git a/packages/react-ui-components/src/MultiSelectBox/style.css b/packages/react-ui-components/src/MultiSelectBox/style.css
@@ -31,3 +31,7 @@
         vertical-align: middle;
     }
 }
+
+.selectedOptions__itemIcon {
+    margin-right: .5em;
+}
diff --git a/packages/react-ui-components/src/SelectBox/index.story.js b/packages/react-ui-components/src/SelectBox/index.story.js
@@ -6,7 +6,7 @@ import SelectBox from './index.js';
 import DropDown from './../DropDown/index.js';
 
 const options = [
-    {value: 'opt1', label: 'Option 1'},
+    {value: 'opt1', label: 'Option 1', icon: 'bookmark'},
     {value: 'opt2', label: 'Option 2'},
     {value: 'opt3', label: 'Option 3'}
 ];