feat: Components styles
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 byrollup-plugin-replace
when building the lib for production
-
rollup-plugin-css-porter
has been dropped in favor ofrollup-plugin-postcss
for Sass support -
mixins.scss
andvariables.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 localvariables.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:
-
GlPopover
!606 (closed) -
GlAvatar
!607 (merged) -
GlDropdown
!608 (merged) -
GlToast
!609 (closed)
Closes #300 (closed)
Edited by Paul Gascou-Vaillancourt