Scrolling by clicking in arrow (horizontal tabs)
What does this MR do and why?
When horizontal tabs don't fit the viewport, a left and a right arrow is shown. We converted these two arrows into buttons and attach a left and right scrolling event when clicked.
Changelog: changed
Relates to https://gitlab.com/gitlab-jh/gitlab-jh-enablement/-/issues/293+
Relates to Implement scrollable tabs in GlTabs (gitlab-ui#1940)
Also relates to https://gitlab.com/gitlab-com/account-management/emea/telekom/collaboration-project/-/issues/142+
Screenshots or screen recordings
Screen_Recording_2023-03-15_at_16.50.12
How to set up and validate locally
These are the pages that are affected:
- Admin > Jobs: https://gdk.test:3443/admin/jobs
- Admin > Projects: https://gdk.test:3443/admin/projects
- Admin > Users: https://gdk.test:3443/admin/users
- Landing page (projects): https://gdk.test:3443/
- New merge request: https://gdk.test:3443/flightjs/Flight/-/merge_requests/new?merge_request%5Bsource_branch%5D=remove-from
- Project activity: https://gdk.test:3443/flightjs/Flight/activity
- Milestone details: https://gdk.test:3443/flightjs/Flight/-/milestones/6#tab-issues
- User profile: https://gdk.test:3443/root
- Admin > Credentials: https://gdk.test:3443/admin/credentials
From the above, #3 is the one that it is more noticeable under all screen sizes. Some of the above tabs are broken for other reasons.
Other uses of the horizontal tabs that are currently broken, because NavTabs
, a Vue component that uses initScrollingTabs
, is not working properly:
app/assets/javascripts/environments/mixins/environments_mixin.js
10:import tabs from '~/vue_shared/components/navigation_tabs.vue';
app/assets/javascripts/deploy_keys/components/app.vue
5:import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue';
app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue
8:import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue';
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.