Follow-up: Implement component styling on gitlab-ui

Styling strategy

• Decide on a strategy to implement component styling for gitlab-ui. Alternatives:
  • Scoped CSS
  • CSS Modules
  • Non scoped/isolated CSS living on SASS files
  • Shadow DOM/Web Components wrapper around Vue components
  • Strict utility-classes approach
• Investigate how cascading of styles implemented on gitlab-CE affect gitlab-UI isolated component styles. Find strategies to mitigate the potential impact.
• Implement support for chosen strategy.

Move component styles implementation from gitlab-ce to gitlab-ui if necessary

Proposed criteria to decide whether it is necessary/useful to move styles:

• Component styles in gitlab-ce conform with design system specifications.
• The component does not have styling provided by an external library (i.e. bootstrap buttons).
• The component heavily depends on style implementation located in gitlab-ce.

Distribution

• Create gitlab-ui styles distribution bundle. Much in the same way, gitlab-ui JS is bundled.

Detach gitlab-ui from gitlab-ce

• Include bootstrap styles on storybook page.
• Do not include gitlab app CSS on gitlab-ui.

Further Gitlab-CE changes

• Include gitlab-ui styles distribution bundle in gitlab-ce assets pipeline.

UPDATE 1: Include shadow dom and strict utility classes strategies