Fix Comment and close button text for work items and merge requests
What does this MR do and why?
This MR fixes the close and reopen button text on work items so it follows GitLab's word list and Pajamas guidance. Buttons and modals used & instead of and, and used title case for the interpolated work item type name (for example Issue instead of issue).
Changes:
- Work item state toggle:
WorkItem|Comment & close %{workItemType}andWorkItem|Comment & reopen %{workItemType}becomeComment and closeandComment and reopen. - Notes comment form (
app/assets/javascripts/notes/i18n.js):%{actionText} & close %{noteable}and%{actionText} & reopen %{noteable}useandinstead of&. This path renders the buttons for merge requests, tickets, epics, and incidents, soComment & close merge requestbecomesComment and close merge request. - Sentence case for the interpolated work item type name in
work_item_state_toggle.vueandwork_item_close_confirm_modal.vue, via a newlowercaseWorkItemTypecomputed property.
Two components duplicate the same modal strings, so both were updated to stay consistent: the inline modals in work_item_state_toggle.vue (used by the header More actions dropdown) and work_item_close_confirm_modal.vue (used by the description and /close quick action paths).
The locale/gitlab.pot msgids were updated for the ampersand changes. The sentence case change needed no .pot update, because only the interpolated value changes, not the msgid.
Specs were updated across the frontend, feature, and shared example suites. Two QA page objects match on the button text, so they were updated too: qa/qa/page/project/work_item/show.rb and qa/qa/ee/page/group/work_item/epic/show.rb.
Out of scope: the error message WorkItem|Something went wrong while updating the %{workItemType}. Please try again. keeps title case, because it's shared with about a dozen sidebar widget components. Changing it only at this call site would create a new inconsistency.
A quarantined test block in ee/spec/features/work_items/issues/related_issues_spec.rb already expected the lowercase strings, so this change brings the app in line with it (quarantine issue linked below).
| Before | After |
|---|---|
Comment & close Issue |
Comment and close issue |
Comment & close merge request |
Comment and close merge request |
Close Issue |
Close issue |
References
- Issue: #611997 (closed)
- MR that originally introduced the title case: !226585 (merged)
- Pajamas, ampersands: https://design.gitlab.com/brand-messaging/style-formatting#ampersands
- Pajamas, capitalization: https://design.gitlab.com/content/ui-text#capitalization
- Quarantine issue: https://gitlab.com/gitlab-org/quality/test-failure-issues/-/issues/6924
Screenshots or screen recordings
| Before | After |
|---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
How to set up and validate locally
- Open an issue.
- Type a comment in the comment box and check that the button reads
Comment and close issue. - Clear the comment box and check that the button reads
Close issue. - Open the header
More actionsdropdown and check the same button text there. - Mark the issue as blocked by another open issue, then close it from the header
More actionsdropdown, and check the confirmation modal text.
Testing
yarn jest spec/frontend/work_items ee/spec/frontend/work_items passes (241 suites, 4931 tests). The Ruby :js feature specs were not run locally and rely on CI.
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.





