@gitlab/ui 43.4.0 → 43.5.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [43.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v43.4.0...v43.5.0) (2022-08-11)
+
+
+### Features
+
+* **GlModal:** Allow no autofocus on show ([1caa729](https://gitlab.com/gitlab-org/gitlab-ui/commit/1caa729965e4479d6341e00c4607928bc5c371ee))
+
 # [43.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v43.3.0...v43.4.0) (2022-08-11)
 
 

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

@@ -80,6 +80,11 @@ var script = {
       type: String,
       required: false,
       default: ''
+    },
+    noFocusOnShow: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   computed: {
@@ -157,6 +162,7 @@ var script = {
     },
 
     setFocus() {
+      if (this.noFocusOnShow) return;
       const btnElts = [...this.$refs.modal.$refs.modal.querySelectorAll('button')];
       const modalElts = [...this.$refs.modal.$refs.body.querySelectorAll(focusableTags.join(COMMA))]; // Iterate over the array and if you find the close button,
       // move it to the end
@@ -182,7 +188,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},(_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_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": "43.4.0",
+  "version": "43.5.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/modal/modal.stories.js

@@ -27,6 +27,7 @@ const generateTemplate = ({ props = {}, slots = {} } = {}) => {
         :action-cancel="{text: 'Cancel'}"
         :visible="$options.viewMode !== 'docs'"
         :scrollable="scrollable"
+        :no-focus-on-show="noFocusOnShow"
         modal-id="test-modal-id"
         title="Example title"
         no-fade
@@ -54,6 +55,7 @@ const generateProps = ({
   variant = variantOptionsWithNoDefault.default,
   contentPagraphs = 1,
   scrollable = false,
+  noFocusOnShow = false,
 } = {}) => ({
   headerBgVariant: variant,
   headerBorderVariant: variant,
@@ -65,6 +67,7 @@ const generateProps = ({
   footerTextVariant: variant,
   contentParagraphs: contentPagraphs,
   scrollable,
+  noFocusOnShow,
 });
 
 export const Default = Template.bind({});
@@ -100,6 +103,11 @@ export const WithoutAFooter = (args, { argTypes, viewMode }) => ({
 });
 WithoutAFooter.args = generateProps();
 
+export const WithoutFocus = Template.bind({});
+WithoutFocus.args = generateProps({
+  noFocusOnShow: true,
+});
+
 export default {
   title: 'base/modal',
   component: GlModal,

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

@@ -85,6 +85,11 @@ export default {
       required: false,
       default: '',
     },
+    noFocusOnShow: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     shouldRenderModalOk() {
@@ -151,6 +156,8 @@ export default {
       return prop.attributes;
     },
     setFocus() {
+      if (this.noFocusOnShow) return;
+
       const btnElts = [...this.$refs.modal.$refs.modal.querySelectorAll('button')];
       const modalElts = [
         ...this.$refs.modal.$refs.body.querySelectorAll(focusableTags.join(COMMA)),
@@ -171,10 +178,10 @@ export default {
 </script>
 
 <template>
-  <!-- 
+  <!--
   Emitted when the modal visibility changes
   @event change
- -->
+  -->
   <b-modal
     :id="modalId"
     ref="modal"
@@ -217,7 +224,7 @@ export default {
         <!--
         Emitted when clicked on modal-action-cancel
         @event canceled
-       -->
+        -->
         <gl-button
           v-if="actionCancel"
           class="js-modal-action-cancel"
@@ -229,7 +236,7 @@ export default {
         <!--
         Emitted when clicked on modal-action-secondary
         @event secondary
-       -->
+        -->
         <gl-button
           v-if="actionSecondary"
           class="js-modal-action-secondary"
@@ -241,7 +248,7 @@ export default {
         <!--
         Emitted when clicked on modal-action-primary
         @event primary
-       -->
+        -->
         <gl-button
           v-if="actionPrimary"
           class="js-modal-action-primary"