[GitLab CSS Removal] 1/4 - Remove application.css import & add GitLab integration test
As discussed in the working group meeting, we're going to stop importing GitLab's CSS into GitLab UI.
Plan
- 1/4 - Remove application.css import & add GitLab integration test
- 2/4 - Update snapshots
- 3/4 - Fix GitLab integration issues
- 4/4 - Remove "allowed to fail" flag on GitLab integration CI test
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 thevisual
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 totrue
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.
- In order to check wether GitLab's styles override some of GitLab UI's own styles,
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 ingitlab-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