[73968, 73089] Extend and improve design of WorkPackageCardComponent

[HDinger]

Ticket

https://community.openproject.org/wp/73968
https://community.openproject.org/wp/73089

What are you trying to accomplish?

Layout & Structure

• Card uses a consistent 3-row layout: metadata row, subject row, optional footer row
  • Footer row is only rendered when it has content (parent link or bottom line slot)
  • Drag handle became optional

Metadata Row (Row 1)

• Always shows: type, work package ID, status, and actions menu
• Optional: assignee avatar + name (show_assignee)
• Optional: priority badge (show_priority)
• Optional: numeric metric e.g. story points (with_metric slot)
• Optional: custom actions menu replacing the default (with_menu slot)

Status Display

• Default scheme renders status as a color-highlighted badge
• Secondary scheme renders status as a neutral label

Footer Row (Row 3)

• Optional link to the parent work package (show_parent_link) - only rendered when a parent exists
• Optional arbitrary content via with_bottom_line slot (e.g. time tracking, custom metadata)
• Both can coexist in the same footer row

Lookbook Documentation

• Documentation page and previews added

Mobile behaviour

• The card reacts to different container sizes
  • Priority and assignee hide their text labels

Screenshots

[Copilot]

Pull request overview

This PR extends the shared work package card component with richer metadata, footer support, status styling variants, and Lookbook documentation/previews, then applies the enhanced card presentation to Backlogs.

Changes:

• Adds card options for assignee, priority, drag handle, parent footer link, bottom-line slot, custom metric/menu placement, and status scheme.
• Updates Backlogs to render the enhanced card with assignee, priority, parent link, and secondary status style.
• Adds Lookbook documentation/previews and supporting locale/style updates.

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
app/components/open_project/common/work_package_card_component.rb	Adds new card options and bottom-line slot.
app/components/open_project/common/work_package_card_component.html.erb	Renders the new metadata/action/footer layout.
app/components/open_project/common/work_package_card_component.sass	Updates grid layout, responsive behavior, and action/footer styling.
app/components/open_project/common/work_package_card_component/menu.html.erb	Makes the menu button small.
app/components/work_packages/info_line_component.rb	Adds a status scheme option.
app/components/work_packages/info_line_component.html.erb	Passes the status scheme to the status badge.
app/components/work_packages/status_badge_component.rb	Adjusts highlight-class behavior when a Primer label scheme is provided.
modules/backlogs/app/components/backlogs/work_package_card_component.rb	Enables enhanced card metadata/footer options for Backlogs.
frontend/src/global_styles/layout/_colors.sass	Adds a small inline highlight dot variant.
config/locales/en.yml	Adds card labels for drag handle and parent.
lookbook/docs/components/work-packages/card.md.erb	Adds WorkPackageCard documentation.
lookbook/previews/open_project/common/work_package_card_component_preview.rb	Adds and updates component previews.
lookbook/previews/open_project/common/work_package_card_component_preview/playground.html.erb	Adds interactive playground rendering.
lookbook/previews/open_project/common/work_package_card_component_preview/with_bottom_line.html.erb	Adds bottom-line slot preview rendering.

[myabc]

We will need to discuss implications in Agile stream - @ulferts and @dombesz have been particularly diligent about avoiding n+1 queries.

[HDinger]

I made an attempt to avoid that here

[myabc]

This looks good overall. It's definitely a massive improvement on the Backlogs page. 💯

I've left lots of comments in line. Most important things IMO to address before merging:

• menu sizes
• CSS and slot naming: I'm still working on better suggestions. additional_details might be better than bottom_line however.
• making subject linking optional

"Nice to haves" would be:

• a PriorityBadgeComponent rather than inline styling.
• Lookbook or Yarddocs for InfoLineComponent itself.

[myabc]

I'm not against doing this in principle, but this will break alignment with BorderBoxListComponent headers.. so we should discuss and/or allow callers to customise size.

[myabc]

[HDinger]

The reason I did this was that the default button blows up the height of the first row (givent that it is 32px heigh). However due to the invisible style, this looks like a larger gap between the first two rows.
Keeping the spaces consistent becomes cumbersome very quickly. I found a way to circumvent this, but it is far from ideal. I guess, it makes sense to talk about it.

[myabc]

We will need to discuss implications in Agile stream - @ulferts and @dombesz have been particularly diligent about avoiding n+1 queries.

[HDinger]

Hi @myabc I adressed all of your commits, I guess two things require a deeper look from you

• the n+1 queries I tried to avoid.
• the "solution" (hack) to allow the larger sized menu again while remaining the spacings between the rows. The size is still not configurable yet but I guess that can also be done separately later.

[myabc]

Looks great! 💯 Good to merge.

One small nitpick: Long parent subjects will overflow the container:

The top padding of the menu looks a bit different. However since I am counting on us having to make some visual alignment changes in #23215 / OP 72945, it can be dealt with then.

[myabc]

I'm not sure if it makes sense to call includes from a scope method like this, or leave it up to the caller? / @dombesz