feat(ui-select,ui-simple-select): add support for rendering selected … #1838
+823
−7
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
ToMESSKa
force-pushed
the
INSTUI-4225_support_for_icon_rendering_in_select_simple_select_input_and_automatic_label_content_propagation
branch
6 times, most recently
from
5be2cc4 to
a2725ad
Compare
matyasf
requested changes
Jan 24, 2025
Comment on lines
82
to
95
| * Whether or not the before and after content of the selected option appear in the input field. | ||
| * | ||
| * If the selected option has both before and after content, both will be displayed in the input field. | ||
| * | ||
| * One of the Select.Options isSelected prop should be true in order to display the content in the input field. | ||
| * | ||
| * Before and after content will not be displayed, if Select's inputValue is an empty value. | ||
| * | ||
| * If true and the selected option has a renderAfterInput value, it will replace the default arrow icon. | ||
| * | ||
| * If true and Select's own renderBeforeInput or renderAfterInput prop is set, it will display the selected option's content instead of Select's renderBeforeInput or renderAfterInput value. | ||
| * | ||
| * If the selected option's renderAfterInput value is empty, default arrow icon will be rendered. | ||
| */ |
There was a problem hiding this comment.
Please use Markdown here, e.g. code blocks (backticks)
There was a problem hiding this comment.
@matyasf I placed the backticks where needed.
…option's before and after content in Select and SimpleSelect input Closes: INSTUI-4225
ToMESSKa
force-pushed
the
INSTUI-4225_support_for_icon_rendering_in_select_simple_select_input_and_automatic_label_content_propagation
branch
from
a2725ad to
73c40b2
Compare
ToMESSKa
deleted the
INSTUI-4225_support_for_icon_rendering_in_select_simple_select_input_and_automatic_label_content_propagation
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 also when user selects 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