Bug/69693 adjust the workspace badge icon style to primer

[dombesz]

Ticket

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

What are you trying to accomplish?

Adapt the workspace badge style to be closer to Primer ActionList item with description:

• Label in small text 0.75 REM
• Icon in xsmall
• More space between the project name and the icon everywhere

Screenshots

What approach did you choose and why?

Merge checklist

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

[github-actions]

Caution

The provided work package version does not match the core version

Details:

• Work package URL: https://community.openproject.org/wp/69693
• Work package version: 17.1.0
• Core version: 17.0.0

Please make sure that:

• The work package version OR your pull request target branch is correct

[EinLama]

The changes themselves look good, but two specs are legitimately red:

• spec/features/projects/persisted_lists_spec.rb
• spec/features/projects/lists/filters_spec.rb

[EinLama]

I think this import can be removed. It should happen implicitly.

[dombesz]

Unfortunately it is not the case. Alternatively I could add the import to the frontend/src/assets/sass/_helpers.sass, but it's not really a helper class. It would also mean the _autocomplete.sass would be duplicated for every component importing the helper.

[EinLama]

Where does it raise an error? I removed the line and clicked through a couple of pages. Could not find an issue.

[dombesz]

The asset compiler raises the error:

✘ [ERROR] The target selector was not found.
Use "@extend %autocomplete-description !optional" to avoid this error.
    ╷
108 │           @extend %autocomplete-description
    │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  src/app/spot/styles/sass/components/list.sass 108:11  root stylesheet [plugin angular-sass]

    angular:styles/global:spot:1:8:
      1 │ @import 'src/spot.scss';
        ╵         ~~~~~~~~~~~~~~~

[EinLama]

I had that too when I removed the line, but a page reload removed the issue and the app still worked afterwards. I suspected this error was a false-positive due to me removing the import line while the server is running. But maybe that was wrong and a server restart would have left the page unusable.

[dombesz]

@EinLama thank you for the review. I addressed the failing specs.

[EinLama]

👍 looks nicer than before 🙂