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

How to set up and validate locally

  1. Run yarn install to fetch the branch build.
  2. Search node_modules/@gitlab/ui/dist for the old camelCase event names. Confirm you find none.
  3. Run the affected Jest specs.
  4. 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.

Edited by Miguel Rincon

Merge request reports

Loading
Loading