Document contribution steps on how to create wrapped components
Document contribution steps on how to create wrapped components
Steps
- Select a component
- Determine the scenarios (different types of implementations) in which this component is used in gitlab-ce/ee
- Document those scenarios in an issue
- Select a scenario that is implemented in gitlab-ce/ee that you will replace with your component
- Create a MR to gitlab-ui implementing your new component
- Be sure to name your MR
feat: <commit message>
as that is needed for our npm release CI job - Create
component.vue
incomponents/
directory - Create a story
component.js
instories/
directory - Run
yarn test --updateSnapshot
to generate your image snapshots for diffing
- Be sure to name your MR
- Create a MR to gitlab-ce/ee to replace the scenario implementation that you previously selected
- Update your
package.json
dependency reference of@gitlab-org/gitlab-ui
to the URL output of theupload_artifacts
ci job in your gitlab-ui MR - Run
yarn install
to make sure that thegitlab-ui
contents are installed - Add a new component import to
app/assets/javascripts/commons/gitlab_ui.js
so that your component is globally registered
- Update your
- Once you've verified that your integration MR to gitlab-ce/ee is working, assign a maintainer to review both gitlab-ui and gitlab-ce/ee MRs
- Maintainer will merge the gitlab-ui MR, run the manual CI job on
master
to make a new release onto NPM - (You or maintainer) will update your integration MR
package.json
dependency reference to the newly releasedgitlab-ui
version - Maintainer will merge the integration MR
Methods to streamline steps
- Create CLI (eg. yeoman) to create templates for gitlab-ui MR #14 (closed)
- Auto generate
component.vue
in components directory - Auto generate
component.js
in stories directory
- Auto generate
- Create system for checking commit messages and MR titles so that they fit the semantic release format
Edited by Clement Ho