Integrate a wrapped bootstrap vue component into GitLab CE
We have the goal of wrapping bootstrap vue components with our existing styles so that other frontend engineers can easily import the correct components and not have to worry about styling.
In order to make these components usable now, they need to be able to leverage our existing styles, imo, the simplest solution is to publish our application.css in gitlab-ce nightly and re-use our existing css class names in our wrapped components. We don't need to bundle that css file for our published components but we can use it for testing.
Why have an abstraction layer in front of bootstrap-vue components?
Pro's
- Easily extend - We can extend the components easily, for example add an attribute
icon
to a button which then injects automatically our Icon control - Easy defaults - Set different defaults than those which are defined in Bootstrap Vue
- One framework - Developers only interact with one library which will be documented in one place
- No lock in with Bootstrap Vue - We still would be able to exchange it in the case of having another framework
- Step-by-Step release/Limit release - The UI team can release step-by-step only the components which are styled based on design.gitlab.com and which are ready
- Exchange single components - If we think that one component can be replaced with another one that is better suited its easily doable, also smoothly to prevent a future dropdown situation
Con's
- Overhead of abstraction - But we should be able to limit this to a minimum
- Integrate documentation - We really need to get our workflowas automated and right so we don't have any overhead on documentation
gitlab-org/frontend&1 (closed))
Proof of concept steps (Also see steps in- Setup script to publish application.css to npm
- Create a branch on this repo to wrap a component (Breadcrumb is a good candidate since it's only used in job artifacts AFAIK - https://bootstrap-vue.js.org/docs/components/breadcrumb)
- Add our existing css class into the wrapped component
- Publish frontend-ui
- Import frontend-ui to gitlab-ce
- Replace breadcrumb in job artifacts with the component imported from frontend-ui
Codepen illustrating the concept: https://codepen.io/anon/pen/eKyqmV?editors=1011
Edited by Tim Zallmann