Skip to content

[GitLab CSS Removal] 1/4 - Remove application.css import & add GitLab integration test

Paul Gascou-Vaillancourt requested to merge remove-ce-css into master

As discussed in the working group meeting, we're going to stop importing GitLab's CSS into GitLab UI.

Plan

What are we doing at this step?

  • We will stop including application.css in GitLab UI to decouple Pajamas component's styles from GitLab's styles
  • To validate that components integrate properly in GitLab, we've added a new visual test that runs in a new CI job visual_gitlab_integration. This new job runs snapshot tests with storyshots, like the visual job does but with a few differences:
    • In order to check wether GitLab's styles override some of GitLab UI's own styles, application.css IS imported in those tests
    • Only the components that have the followsDesignSystem set to true are tested, this is to make sure we only test completed components since those are the ones we expect to be fully functional in GitLab.

Disclaimer

This MR breaks almost every visual test. This is due to the fact that many components relied on application.css to be styled properly. After discussing this issue with @ealcantara, we concluded that:

  • We are not introducing any risk by removing the inclusion of application.css. This change only affects how things look in gitlab-ui’s storybook, not in GitLab itself.
  • By removing application.css, we are bringing an important benefit to the FE development department. Developers are implementing components under the false assumption that those components are styled correctly when that is not the truth.

Thus, we'll update the snapshots once this MR is merged. Any component that lost its styles in the process will have to be fixed in follow up MRs.

/cc @ealcantara

Edited by Paul Gascou-Vaillancourt

Merge request reports

Loading