Loading
Rename camelCase component events to kebab-case
What does this MR do?
Renames every camelCase event in @gitlab/ui to kebab-case. The camelCase names are removed, not kept alongside, so this is a breaking change and needs a major version bump.
| Component | Old event | New event |
|---|---|---|
GlAlert |
primaryAction |
primary-action |
GlAlert |
secondaryAction |
secondary-action |
GlChart and every chart that wraps it |
chartItemClicked |
chart-item-clicked |
GlDashboardPanel |
dropdownOpen |
dropdown-open |
GlDashboardPanel |
dropdownClosed |
dropdown-closed |
GlDatepicker |
monthChange |
month-change |
GlDisclosureDropdown |
beforeClose |
before-close |
GlInfiniteScroll |
topReached |
top-reached |
GlInfiniteScroll |
bottomReached |
bottom-reached |
GlSorting |
sortByChange |
sort-by-change |
GlSorting |
sortDirectionChange |
sort-direction-change |
GlSparklineChart |
chartCreated |
chart-created |
The internal base dropdown also renames focusContent to focus-content. That component is not exported, so this affects no consumer.
Why
The vue/v-on-event-hyphenation ESLint rule wants every listener in kebab-case. About fifty files in gitlab-org/gitlab listen to one of these events, and every one of them is suppressed today, either through .eslint_todo/vue-v-on-event-hyphenation.mjs or an inline eslint-disable comment. You cannot rename a listener on its own, because on Vue 2 a kebab-case listener does not bind to a camelCase emit. The component must emit the kebab-case name first.
Newer components already follow this convention. GlCollapsibleListbox emits bottom-reached, while the older GlInfiniteScroll still emitted bottomReached for the same kind of event.
Scope note
The originating issue lists GlSorting, GlAlert, the chart components, GlInfiniteScroll, GlDashboardPanel, and GlDisclosureDropdown. This MR also renames GlDatepicker's monthChange and the internal focusContent. Both are the same class of problem, and leaving them means a second breaking major later.
Notes for the integration MR
On Vue 2 a listener that does not bind fails silently. There is no error, the feature just stops responding. So the version bump and the listener rename must land in the same merge request in gitlab-org/gitlab, and a green ESLint run does not prove the rename worked. Each renamed listener needs a behaviour check.
The integration MR also deletes the current suppressions. If that empties .eslint_todo/vue-v-on-event-hyphenation.mjs, delete the file and its export from index.mjs, because an empty files array crashes the ESLint flat config.
CustomersDot pins an exact version and gitlab-docs uses a caret range, so neither picks up a new major on its own. Neither needs coordinated work.
Screenshots or screen recordings
No visual changes.
Integrations
Does this MR meet the acceptance criteria?
Toggle the acceptance checklist
Conformity
- The “What does this MR do?” section in the MR description is filled out, explaining the reasons for and scope of the proposed changes, per “Say why not just what”.
- Relevant label(s) are applied to the MR.
- The MR is added to a milestone.
- Added the
~"component:*"label(s) if applicable. - A changeset is added when this MR will do a patch, minor, or major update.
Components
- GitLab UI's contributing guidelines.
- If the MR changes a component's API, integration MR(s) have been opened (see integrations above).
Documentation
- Content follows the GitLab Documentation Style Guide when appropriate.
Accessibility
No behaviour changes, so the accessibility of every affected component is unchanged.
Closes #3621
Edited by Justin Ho Tuan Duong