diff --git a/packages/neos-ui-editors/src/SelectBox/DataSourceBasedSelectBoxEditor.js b/packages/neos-ui-editors/src/SelectBox/DataSourceBasedSelectBoxEditor.js index 8cb7405d9b..59ba3aaba5 100644 --- 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 index 08ca75c56e..72e8a5f664 100644 --- 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 index ab69f76ece..17172531c3 100644 --- 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 index 844f59c89c..2d131667a1 100644 --- 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 ? - : - null - } - { label } + + { + icon ? + : + null + } + + { label } + { 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 index df78b05a95..4cfbf76116 100644 --- 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 index 807a56ae39..18601628bc 100644 --- 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'} ];