Bug/69450 complete specs for autocompleter changes

[dombesz]

Ticket

https://community.openproject.org/wp/69450

What are you trying to accomplish?

Screenshots

What approach did you choose and why?

• [X] Add specs for workspace badges in header dropdown, project settings, and WP table inline edit.

  • Add spec helper classes for the select inputs. The ProjectEditField is for the project selectors, InlineProjectEditField is for project selectors for the work package table inline editing.

• [X] Refactor icon rendering.

  • Imperatively add the icon in the template instead of programatically rendering it from the component.
  • Use the angular @switch block in templates instead of a component method.

• [X] Selected value now shows badges.

  • Fix badge rendering of selected values in multi select mode.

  • Fix filter list expanding over the viewport when the selected project name is long enough to leave the viewport.

    Before and after of ellipsis not working due to the container list expanding over the viewport.

    Before

    

    After

    

• [X] Fix accesibility of the remove icon on the selected options in multi select mode.

  • Close icon (×) now functions as a button, can be focused and triggered by pressing enter.

• [X] Primer rspec selector fixes, :octicon selector now uses CSS instead of XPath, :primer_text handles nil text and color combination.

Merge checklist

• [x] Added/updated tests
• [ ] Added/updated documentation in Lookbook (patterns, previews, etc)
• [x] Tested major browsers (Chrome, Firefox, Edge, ...)

[dombesz]

Sorry for chiming in quite late on this particular functionality. However I think it might make sense to try to align styling closer to Primer - in particular, we should look at the ActionList component:

Action List inline descriptions would probably be the closest mapping. The missing CSS properties are as follows:

line-height: 16px;
font-size: var(--text-body-size-small, .75rem);
font-weight: var(--base-text-weight-normal, 400);

Alternatively there could be an argument for styling as trailing content. However it's probably worth going through the guidelines first.

Thank you for the thorough review @myabc ! I addressed all your comments, except the one for aligning the label more to primer. I would like to do that separately as that involves the product team as well.

[dombesz]

Thanks @myabc , I addressed your comments, except the following:

In the Header Project selector, we are showing both the project name and project type in bold when filtered. IMO we should only show the project name in bold.

This one is already addressed in a follow up PR, which also applies the smaller text size for the badge as you suggested in a previous comment.

As per the Primer label, I agree that it should be discussed first.