GlModal refactor introduces breaking changes

Summary

To better follow our design system our modal component has been changed a good bit in this gitlab-ui MR. This includes removing the modal-ok and modal-cancel slots, as well as not allowing any content to be placed in the modal-footer slot. The modal-footer slot can only be populated via props now.

This will introduce breaking changes anywhere the modal-footer, modal-ok and modal-cancel slots have been used throughout the codebase.

The gitlab-ui MR will need to be added as a dep for testing while fixing any issues. This way we can visualize how the refactored modal component will behave.

Improvements

Any instances of our modal will closely follow the design system.

Risks

An example of something that would break can be seen here. This will break because content is passed into the modal-footer slot. It will only be able to be populated via props now. And any previous actions triggered on content passed into the slot, will need to be moved over to the events that are emitted by the props that populate the modal-footer slot. We will need to change over any instances in the codebase like this.

Involved components

GlModal specifically the modal-footer, modal-cancel and modal-ok slots

  1. app/assets/javascripts/monitoring/components/dashboard.vue
  2. app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue
  3. app/assets/javascripts/registry/components/collapsible_container.vue
  4. app/assets/javascripts/registry/components/table_registry.vue
  5. ee/app/assets/javascripts/packages/components/app.vue
  6. ee/app/assets/javascripts/packages/list/components/packages_list.vue
  7. ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_auth.vue
  8. ee/app/assets/javascripts/vue_merge_request_widget/components/visual_review_app_link.vue

Optional: Intended side effects

Optional: Missing test coverage

Edited Dec 03, 2019 by Payton Burdette
Assignee Loading
Time tracking Loading