feat(ui-select,ui-simple-select): add support for rendering selected … #1838
+779
−7
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
…option's before and after content in Select and SimpleSelect input
Closes: INSTUI-4225
TEST PLAN:
test the case with icons before the options:
1. open the last example in Select (Icons)
2. set isOptionContentAppliedToInput to true on Select
3. the selected option's icon's should appear now in the beginning the input field and when selecting a new option from the dropdown,
test the case with icons after the options:
1. set isOptionContentAppliedToInput to true on Select in the last example
2. in SingleSelectExample's options props, rewrite renderBeforeLabel to renderBeforeLabel
3. in Select.Option replace renderBeforeLabel={option.renderBeforeLabel} with renderAfterLabel=. {option.renderAfterLabel}
4. now the arrow icon should be replaced with the selected option's icon
test the case when options have both before and after icons, both should be rendered
test the case when options are grouped: see the group example in Select (Composing option groups), it should render the selected option's before or after icon or both
test the case when none of the Select.Options' isSelected prop is true, the icon should not be rendered and a there should be a warning
test the case when Select's inputValue is empty, the icon should not be rendered
test the case when Select's own renderBeforeInput or renderAfterInput prop is set, it should display the selected option's content (icon) instead of Select's renderBeforeInput or renderAfterInput value
test the case when one of option has an empty renderAfterInput value, the default arrow icon should be rendered, but if another option with a non-empty renderAfterInput is selected, that option's icon should be rendered
test all the cases above in SimpleSelect
review the updated documentation and the new tests