[73968, 73089] Extend and improve design of WorkPackageCardComponent#23175
Open
HDinger wants to merge 1 commit into
Open
[73968, 73089] Extend and improve design of WorkPackageCardComponent#23175HDinger wants to merge 1 commit into
HDinger wants to merge 1 commit into
Conversation
HDinger
force-pushed
the
feature/73089-restyled-work-package-card-in-backlogs-and-sprints-view
branch
from
25d8a87 to
add05fb
Compare
HDinger
force-pushed
the
feature/73089-restyled-work-package-card-in-backlogs-and-sprints-view
branch
from
add05fb to
91de331
Compare
HDinger
changed the title
Contributor
There was a problem hiding this comment.
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. |
| if @show_status | ||
| flex.with_column(ml: 2) do | ||
| render WorkPackages::StatusBadgeComponent.new(status: @work_package.status) | ||
| render WorkPackages::StatusBadgeComponent.new(status: @work_package.status, scheme: @status_scheme) |
Comment on lines
+91
to
+101
| <% if show_parent_link && work_package.parent.present? %> | ||
| <% flex.with_row do %> | ||
| <%= render( | ||
| Primer::Beta::Link.new( | ||
| href: work_package_path(work_package.parent), | ||
| underline: false, | ||
| color: :default | ||
| ) | ||
| ) do %> | ||
| <%= render(Primer::Beta::Text.new(color: :subtle)) { "#{t('.parent')}: " } %> | ||
| <%= work_package.parent.subject %> |
Comment on lines
+60
to
+62
| show_assignee: true, | ||
| show_priority: true, | ||
| show_parent_link: true, |
myabc
reviewed
May 16, 2026
| ) do |grid| %> | ||
| <% if show_drag_handle %> | ||
| <% grid.with_area(:drag_handle) do %> | ||
| <%= render(Primer::Beta::Octicon.new(icon: :grabber, "aria-label": t(".drag_handle.label"))) %> |
Contributor
myabc
reviewed
May 16, 2026
|
|
||
| <% grid.with_area(:subject) do %> | ||
| <%= render(Primer::Beta::Text.new(font_weight: :semibold)) { work_package.subject } %> | ||
| <%= render(Primer::Beta::Link.new(href: work_package_path(work_package), font_weight: :semibold)) { work_package.subject } %> |
Contributor
There was a problem hiding this comment.
Can this link be optional?
Making this a link will make this work less well when the whole card is draggable.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Ticket
https://community.openproject.org/wp/73968
https://community.openproject.org/wp/73089
What are you trying to accomplish?
Layout & Structure
Metadata Row (Row 1)
show_assignee)show_priority)with_metricslot)with_menuslot)Status Display
Footer Row (Row 3)
show_parent_link) - only rendered when a parent existswith_bottom_lineslot (e.g. time tracking, custom metadata)Lookbook Documentation
Mobile behaviour
Screenshots