Skip to content

Migrate project tabs styles from .nav-tabs class

What does this MR do?

This change migrates the navigation tabs from Bootstrap .nav-tabs and .nav-links to GitLab UI class and updates the appearance so it is compliant with Pajamas.

Depends on a gitlab-ui update: gitlab-ui!2376 (closed)

Screenshots or Screencasts (strongly suggested)

Tabs changed:

Screen_Shot_2021-08-31_at_4.27.18_PM

Comparison side-by-side (new on top):

Screen_Shot_2021-08-31_at_4.26.32_PM

Browser specific rules kept

This component makes use of ::-webkit-scrollbar which prevents some users (e.g. Win + Chrome) from seeing a horizontal scrollbar. For the purposes of this MR, this rule has been moved:

Screen_Shot_2021-09-15_at_2.23.52_PM

The following behavior is prevented:

Screen_Shot_2021-09-15_at_2.23.39_PM

How to setup and validate locally (strongly suggested)

  1. Visit the admin projects page at http://gdk.test:3000/admin/projects
  2. Click on different tabs

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Security

Does this MR contain changes to processing or storing of credentials or tokens, authorization and authentication methods or other items described in the security review guidelines? If not, then delete this Security section.

  • Label as security and @ mention @gitlab-com/gl-security/appsec
  • The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
  • Security reports checked/validated by a reviewer from the AppSec team

Related to #230740 (closed)

Edited by Miguel Rincon

Merge request reports