Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui-select,ui-simple-select): add support for rendering selected … #1838

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

ToMESSKa
Copy link
Contributor

@ToMESSKa ToMESSKa commented Dec 20, 2024

…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

@ToMESSKa ToMESSKa self-assigned this Dec 20, 2024
Copy link

github-actions bot commented Dec 20, 2024

PR Preview Action v1.6.0

🚀 View preview at
https://instructure.github.io/instructure-ui/pr-preview/pr-1838/

Built to branch gh-pages at 2025-01-16 15:30 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

@ToMESSKa ToMESSKa force-pushed the INSTUI-4225_support_for_icon_rendering_in_select_simple_select_input_and_automatic_label_content_propagation branch 5 times, most recently from acd7b4f to 5be2cc4 Compare January 16, 2025 15:12
…option's before and after content in Select and SimpleSelect input

Closes: INSTUI-4225
@ToMESSKa ToMESSKa force-pushed the INSTUI-4225_support_for_icon_rendering_in_select_simple_select_input_and_automatic_label_content_propagation branch from 5be2cc4 to a2725ad Compare January 16, 2025 15:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant