Integrate @gitlab/ui kebab-case event rename
What does this MR do and why?
This MR renames 12 @gitlab/ui event names from camelCase to kebab-case. It also points @gitlab/ui to v137.
The upstream rename (design.gitlab.com!6271) is a breaking change. It ships as a new major version.
| Component | Old name | New name |
|---|---|---|
GlAlert |
primaryAction |
primary-action |
GlAlert |
secondaryAction |
secondary-action |
GlDatepicker |
monthChange |
month-change |
GlInfiniteScroll |
topReached |
top-reached |
GlInfiniteScroll |
bottomReached |
bottom-reached |
Dropdowns (GL_DROPDOWN_BEFORE_CLOSE) |
beforeClose |
before-close |
GlSorting |
sortDirectionChange |
sort-direction-change |
GlSorting |
sortByChange |
sort-by-change |
| Charts | chartItemClicked |
chart-item-clicked |
| Sparkline | chartCreated |
chart-created |
GlDashboardPanel |
dropdownOpen |
dropdown-open |
GlDashboardPanel |
dropdownClosed |
dropdown-closed |
GitLab runs Vue 2. Vue 2 matches event names exactly. Vue 3 camelizes a kebab-case listener at compile time. Vue 2 does not. If the rename and the dependency bump land apart, some listeners bind to an event name that no longer exists. The handler never runs. No error appears. So both changes must land in one MR.
This MR touches 94 files. It renames 73 template listeners. It renames 96 event-name strings in specs. It updates 2 it.each table entries and 6 spec titles. It also removes 23 inline eslint-disable vue/v-on-event-hyphenation comments. It removes 27 matching entries from .eslint_todo/vue-v-on-event-hyphenation.mjs. These suppressions covered only the 12 renamed events. Four to-do entries and three inline comments stay. They cover other camelCase events that this MR does not touch.
References
- Upstream merge request: gitlab-org/gitlab-services/design.gitlab.com!6271 (merged)
How to set up and validate locally
- Run
yarn installto fetch the branch build. - Search
node_modules/@gitlab/ui/distfor the old camelCase event names. Confirm you find none. - Run the affected Jest specs.
- Open a page that uses a renamed event. Confirm it still works. Examples: the Releases page sort control (
GlSorting), and a dashboard panel dropdown (GlDashboardPanel).
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.