Skip to content

feat: Components styles

Paul Gascou-Vaillancourt requested to merge components-styles into master

This MR's primary purpose is to test a solution for styling components in gitlab-ui, without relying on styles in GitLab CE/EE. It's not necessarily meant to be merged but rather to serve as a proof of concept for our new RFC: gitlab-org/frontend/rfcs#2 (closed)

What's been done here?

  • sass-loader has been added to Webpack config
  • scss/storybook.scss has been created, it contains global and components styles, it is imported in
    • Storybook config to provide styling in development
    • index.js where it's automatically injected by rollup-plugin-replace when building the lib for production
  • rollup-plugin-css-porter has been dropped in favor of rollup-plugin-postcss for Sass support
  • mixins.scss and variables.scss have been copied over from CE and cleaned up to keep only the parts needed in gitlab-ui
  • get_scss.sh has been updated to export variables from local variables.scss

What's the plan for moving forward?

After discussing with @ealcantara, we suggest that this MR introduces the MVC to make it possible to style components within gitlab-ui. We're going to keep the dependency on GitLab CE's CSS for now, which will let us migrate components styles one by one in follow up MRs.

To summarize, we will:

  • Keep including CE's application.css in Storybook.
  • Not include Bootstrap SCSS in Storybook, this way we don’t override the parts of application.css we don’t want to override. Custom component styles will still be included.
  • Once we've moved all component styles to gitlab-ui, remove application.css dependency and include Bootstrap SCSS in Storybook.

Migrated components

A few components are being migrated to the new styling method in separate MRs:

Closes #300 (closed)

Edited by Paul Gascou-Vaillancourt

Merge request reports