Merge gl-button with gl-new-button and make sure gitlab is updated with the new button component that conforms to the design system
This issue describes a plan to deprecate the obsolete <gl-button> implementation and migrate all instances of that component to the new <gl-button> implementation.
Approach (preferred): Organize a button and dropdown migration effort
Goals
- Merge button and dropdown components without introducing new abstractions.
- Migrate all
<gl-button>and<gl-dropdown>instances incrementally.
Why
- It is a boring and predictable solution.
- We can break down the effort into multiple developers.
- It is a proven approach. It worked pretty well with the BootstrapVue upgrade. It’s also worked well with the Jestsodus and lodash projects.
How
-
Rename the current GlButtoncomponent to something likeGlDeprecatedButton. !1223 (merged) -
When the change is released, migrate GlButtontoGlDeprecatedButtonin consuming projects:-
GitLab: gitlab!27835 (merged) -
Customer Portal: https://gitlab.com/gitlab-org/customers-gitlab-com/-/merge_requests/1189 -
Status Page: N/A (not using deprecated button component)
-
-
Rename GlNewButtontoGlButton. !1291 (merged) -
Update all GitLab UI components that rely on either GlButtonorGlNewButtonby replacing instances of<gl-buttonto<gl-deprecated-buttonand<gl-new-buttonto<gl-button. !1291 (merged) -
When the change is released, migrate GlNewButtontoGlButtonin consuming projects:-
GitLab: gitlab!29343 (merged) -
Customer Portal: https://gitlab.com/gitlab-org/customers-gitlab-com/-/merge_requests/1238 -
Status Page: status-page!67 (merged)
-
-
Document all <gl-deprecated-button>instances and how to replace them with the new component. For example:
#### `app/assets/javascripts/monitoring/components/dashboard.vue`
- Replace `<gl-deprecated-button variant="primary" />` with `<gl-button />`
- Replace `<gl-deprecated-button variant="outline-success" />` with `<gl-button variant="success" category="secondary" />`
-
Indicate that each file should be migrated in a separate Merge Request. The Merge Request should contain before/after screenshots of each button migration for easier UX review. -
Create an issue for each file and collect those issues in an epic. Creating these issues is something we can likely automate. -
Request in the #frontend channel, help on closing those issues. -
Once all the issues are closed, delete the <gl-deprecated-button>component. !1908 (merged)
Follow the same strategy with the dropdown component.
Good to have
- Provide a list of codemod expressions to facilitate the migration effort.
- Implement an ESLint rule that warns about the usage of the deprecated button component in a Vue file.
Done
Edited by Paul Gascou-Vaillancourt