[Course Search] Refinements to search modal UX

[bradenmacdonald]

Fixes to Paragon:

1. The focus state of the button outline has a rounded edge when it should have a square edge (to match the button shape).
   

Fixes to our content search modal:

2. Please increase the spacing between the search keywords field and "This Course" so that there are a few pixels between them when the button is focused.
   
3. For each result, the course/library name should only appear in the breadcrumbs when “all courses” is selected. (Currently, it shows for the results in “this course” too.)
4. If I enter a search term that yields no results, I am unable to open the “type” filter. Change it to behave like the "Tags" filter and display a message like "No types in current results" in that case.
5. When the search modal opens, focus on the search keywords field so the user can start typing right away.
6. NEW the number is not visible next to longer filter names (see “Open Response Assessmen...” below. Is it possible to ensure the number is always displayed (if necessary by making the menu wider, or wrapping the text to the next line)?
   
7. NEW Please order the options in the type filter by hierarchy:
   • Section
   • Subsection
   • Unit
   • and then the components in whichever order (perhaps alphabetical)

Other fixes if possible:

8. After selecting a search result, the page zooms to the result in the course outline, but it seems to be “pinned” to the bottom of the page, rather than the top. It should appear closer to the top of the page.
   

[yusuf-musleh]

@bradenmacdonald Just had a few questions about this:

1. The focus state of the button outline has a rounded edge when it should have a square edge (to match the button shape).

For this one we want to make the changes in the paragon repo rather than styling in the course authoring mfe right?

3. For each result, the course/library name should only appear in the breadcrumbs when “all courses” is selected. (Currently, it shows for the results in “this course” too.)

I wasn't able to reproduce this. I only get the Section onwards in the breadcrumbs when searching in "This course". It only shows the course name in the breadcrumb when searching "All courses".

This course

All courses

Was this a specific case/condition where this occurs?

4. If I enter a search term that yields no results, I am unable to open the “type” filter. Change it to behave like the "Tags" filter and display a message like "No types in current results" in that case.

I wasn't able to reproduce this as well. I can still open the "Type" filter when there are no results found, and shows me a similar message to the "Tags" filter:

I tried it for both searching "This course" and "All courses". Was there also a special condition where this happens?

[bradenmacdonald]

@yusuf-musleh

For this one we want to make the changes in the paragon repo rather than styling in the course authoring mfe right?

That's right, it should be fixed as generally as possible. You can see the bug on https://paragon-openedx.netlify.app/components/searchfield/#with-the-submit-button-outside-the-input .

For the others, hmm, maybe the latest version wasn't on the sandbox. Let's check again in a few days after all the current PRs are merged. Perhaps it's already done.

[yusuf-musleh]

@bradenmacdonald Got it 👍 , thanks!

[yusuf-musleh]

@bradenmacdonald Regarding the paragon bug, after looking into it I just wanted to confirm I understood the issue properly. In both cases, in our keyword search field and in the searchfield in the paragon docs you linked, the border radius in both is being set in the styles to be 0 (making it a square/rectangle), but the focus state remains on the original border radius.

The original border radius is being set/calculated here, from what I understand from the code, that should be automatically handling border radius overrides but the bug is that it currently isn't?

[bradenmacdonald]

@yusuf-musleh Ah, I see. I forgot how it worked. I guess it would be enough to just fix the CSS in course-authoring, where it makes the border square to also make the focus rectangle square. But we should open an issue on Paragon saying that the current Open edX theme doesn't provide a way to "force" buttons to be square easily, and show that the "SearchField"'s default submit button's focus rect doesn't match its border shape.

[yusuf-musleh]

@bradenmacdonald Make sense, thanks for the clarification. I'll make the style change in course authoring and create a issue in paragon mentioning the above.

[yusuf-musleh]

@bradenmacdonald Opened the issue on Paragon: openedx/paragon#3038

[bradenmacdonald]

@yusuf-musleh Based on some feedback from @ali-hugo, I added two items above in the description (6 and 7) - please take a look.