@gitlab/ui 41.7.0 → 41.7.1

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [41.7.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v41.7.0...v41.7.1) (2022-06-13)
+
+
+### Bug Fixes
+
+* **GlModal:** Re-add deprecated modal slots ([29b7ccf](https://gitlab.com/gitlab-org/gitlab-ui/commit/29b7ccf4623de391192bce75ad176d38e10de3f1))
+
+
+### Reverts
+
+* **GlModal:** Remove deprecated slots modal-ok and modal-cancel ([1d2cc9e](https://gitlab.com/gitlab-org/gitlab-ui/commit/1d2cc9e06b5011cd4c8155b5b37db570f8a6b581)), closes [/gitlab.com/gitlab-org/gitlab/-/merge_requests/88974#note_988604141](https://gitlab.com//gitlab.com/gitlab-org/gitlab/-/merge_requests/88974/issues/note_988604141)
+
 # [41.7.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v41.6.0...v41.7.0) (2022-06-13)
 
 

package/dist/components/base/modal/modal.js

@@ -82,6 +82,20 @@ var script = {
       default: ''
     }
   },
+  computed: {
+    shouldRenderModalOk() {
+      return Boolean(this.$slots['modal-ok']);
+    },
+
+    shouldRenderModalCancel() {
+      return Boolean(this.$slots['modal-cancel']);
+    },
+
+    shouldRenderModalFooter() {
+      return Boolean(this.actionCancel || this.actionSecondary || this.actionPrimary || this.$slots['modal-footer']);
+    }
+
+  },
 
   mounted() {
     if (!this.ariaLabel && !this.title) {
@@ -165,7 +179,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-modal',_vm._g(_vm._b({ref:"modal",attrs:{"id":_vm.modalId,"title-tag":_vm.titleTag,"size":_vm.size,"visible":_vm.visible,"aria-label":_vm.ariaLabel || _vm.title,"lazy":"","modal-class":['gl-modal', _vm.modalClass]},on:{"shown":_vm.setFocus,"ok":_vm.primary,"cancel":_vm.canceled,"change":function($event){return _vm.$emit('change', $event)}},scopedSlots:_vm._u([{key:"default",fn:function(){return [_vm._t("default")]},proxy:true},{key:"modal-header",fn:function(){return [_vm._t("modal-header",[_c('h4',{staticClass:"modal-title"},[_vm._t("modal-title",[_vm._v(_vm._s(_vm.title))])],2)]),_vm._v(" "),_c('close-button',{ref:"close-button",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.close}})]},proxy:true},{key:"modal-footer",fn:function(){return [_vm._t("modal-footer",[(_vm.actionCancel)?_c('gl-button',_vm._b({staticClass:"js-modal-action-cancel",on:{"click":_vm.cancel}},'gl-button',_vm.buttonBinding(_vm.actionCancel, 'actionCancel'),false),[_vm._v("\n         "+_vm._s(_vm.actionCancel.text)+"\n       ")]):_vm._e(),_vm._v(" "),(_vm.actionSecondary)?_c('gl-button',_vm._b({staticClass:"js-modal-action-secondary",on:{"click":_vm.secondary}},'gl-button',_vm.buttonBinding(_vm.actionSecondary, 'actionSecondary'),false),[_vm._v("\n         "+_vm._s(_vm.actionSecondary.text)+"\n       ")]):_vm._e(),_vm._v(" "),(_vm.actionPrimary)?_c('gl-button',_vm._b({staticClass:"js-modal-action-primary",on:{"click":_vm.ok}},'gl-button',_vm.buttonBinding(_vm.actionPrimary, 'actionPrimary'),false),[_vm._v("\n         "+_vm._s(_vm.actionPrimary.text)+"\n       ")]):_vm._e()])]},proxy:true}],null,true)},'b-modal',_vm.$attrs,false),_vm.$listeners))};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-modal',_vm._g(_vm._b({ref:"modal",attrs:{"id":_vm.modalId,"title-tag":_vm.titleTag,"size":_vm.size,"visible":_vm.visible,"aria-label":_vm.ariaLabel || _vm.title,"lazy":"","modal-class":['gl-modal', _vm.modalClass]},on:{"shown":_vm.setFocus,"ok":_vm.primary,"cancel":_vm.canceled,"change":function($event){return _vm.$emit('change', $event)}},scopedSlots:_vm._u([{key:"default",fn:function(){return [_vm._t("default")]},proxy:true},{key:"modal-header",fn:function(){return [_vm._t("modal-header",[_c('h4',{staticClass:"modal-title"},[_vm._t("modal-title",[_vm._v(_vm._s(_vm.title))])],2)]),_vm._v(" "),_c('close-button',{ref:"close-button",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.close}})]},proxy:true},(_vm.shouldRenderModalOk)?{key:"modal-ok",fn:function(){return [_vm._t("modal-ok")]},proxy:true}:null,(_vm.shouldRenderModalCancel)?{key:"modal-cancel",fn:function(){return [_vm._t("modal-cancel")]},proxy:true}:null,(_vm.shouldRenderModalFooter)?{key:"modal-footer",fn:function(){return [_vm._t("modal-footer",[(_vm.actionCancel)?_c('gl-button',_vm._b({staticClass:"js-modal-action-cancel",on:{"click":_vm.cancel}},'gl-button',_vm.buttonBinding(_vm.actionCancel, 'actionCancel'),false),[_vm._v("\n         "+_vm._s(_vm.actionCancel.text)+"\n       ")]):_vm._e(),_vm._v(" "),(_vm.actionSecondary)?_c('gl-button',_vm._b({staticClass:"js-modal-action-secondary",on:{"click":_vm.secondary}},'gl-button',_vm.buttonBinding(_vm.actionSecondary, 'actionSecondary'),false),[_vm._v("\n         "+_vm._s(_vm.actionSecondary.text)+"\n       ")]):_vm._e(),_vm._v(" "),(_vm.actionPrimary)?_c('gl-button',_vm._b({staticClass:"js-modal-action-primary",on:{"click":_vm.ok}},'gl-button',_vm.buttonBinding(_vm.actionPrimary, 'actionPrimary'),false),[_vm._v("\n         "+_vm._s(_vm.actionPrimary.text)+"\n       ")]):_vm._e()])]},proxy:true}:null],null,true)},'b-modal',_vm.$attrs,false),_vm.$listeners))};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "41.7.0",
+  "version": "41.7.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/modal/modal.md

@@ -7,7 +7,11 @@ should serve a single purpose dedicated to completing the user’s task.
 You can use the `v-model` directive to control the modal’s visibility. The `v-model`
 directive interfaces with the `visible` property and the `@change` event.
 
-## Modal footer
+## Deprecation Warning
+
+We are deprecating the `modal-ok` and `modal-cancel` slots. We are also changing the way the
+`modal-footer` slot content is populated. This is in order to align this component with the design
+system.
 
 The `modal-footer` slot should only be populated via props: `action-primary`, `action-secondary` and
 `action-cancel`. These props allow you to handle how a primary, secondary and cancel button will

package/src/components/base/modal/modal.vue

@@ -86,6 +86,22 @@ export default {
       default: '',
     },
   },
+  computed: {
+    shouldRenderModalOk() {
+      return Boolean(this.$slots['modal-ok']);
+    },
+    shouldRenderModalCancel() {
+      return Boolean(this.$slots['modal-cancel']);
+    },
+    shouldRenderModalFooter() {
+      return Boolean(
+        this.actionCancel ||
+          this.actionSecondary ||
+          this.actionPrimary ||
+          this.$slots['modal-footer']
+      );
+    },
+  },
   mounted() {
     if (!this.ariaLabel && !this.title) {
       logWarning(
@@ -152,7 +168,7 @@ export default {
 </script>
 
 <template>
-  <!--
+  <!-- 
   Emitted when the modal visibility changes
   @event change
  -->
@@ -186,8 +202,14 @@ export default {
       <!-- @slot Content of Modal header close button. If modal-header slot is used, this slot will not be shown. -->
       <close-button ref="close-button" :label="dismissLabel" @click="close" />
     </template>
+    <template v-if="shouldRenderModalOk" #modal-ok>
+      <slot name="modal-ok"></slot>
+    </template>
+    <template v-if="shouldRenderModalCancel" #modal-cancel>
+      <slot name="modal-cancel"></slot>
+    </template>
     <!-- @slot Populated via props: modal-action-primary, modal-action-cancel and modal-action-secondary. -->
-    <template #modal-footer>
+    <template v-if="shouldRenderModalFooter" #modal-footer>
       <slot name="modal-footer">
         <!--
         Emitted when clicked on modal-action-cancel