Document the use of modals
As part of https://gitlab.com/gitlab-org/gitlab-ce/issues/28849, we should add a section to the frontend guide showing example use of modals. We also need to clarify if and when modals should be implemented in Vue.
From our Vue guidelines:
When to use Vue.js
If you are starting a new feature or refactoring an old one that highly interacts with the DOM
Most modals get data from the button they are triggered by. Otherwise there is usually no DOM interaction.
For real time data updates
Real time data updates from the backend are probably not necessary for modals.
If you are creating a component that will be reused elsewhere
Modals are used at multiple places. A typical case would be that the modal for deleting a tag is shown on the overview page and an the individual tag page.
When not to use Vue.js
Adding or changing static information;
Some modals are static, some change based on where they are triggered.
Features that highly depend on jQuery will be hard to work with Vue.js
We use Bootstrap modals which depend on jQuery.
Features without reactive data
Modal content probably doesn't need to be reactive.
From https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/16229#note_55550227:
I'd say:
- If we absolutely need the bootstrap styling and structure, then let's use it as it is - in jquery.
- If it's not worth to use the bootstrap html & css - is it worth making our own vue modal component?
I would like to have either a single way to implement modals or clear criteria when to use which implementation.