@gitlab/ui 32.48.0 → 32.51.1

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## [32.51.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.51.0...v32.51.1) (2022-01-05)
+
+
+### Bug Fixes
+
+* **Avatar:** Add support for multiple-character emojis ([f3fcb2f](https://gitlab.com/gitlab-org/gitlab-ui/commit/f3fcb2ff5a2e74f77b3a96dc8922a3821c86e2fa))
+
+# [32.51.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.50.0...v32.51.0) (2021-12-29)
+
+
+### Features
+
+* **css:** Added gl-max-w-26 and gl-max-w-62 classes ([69a6829](https://gitlab.com/gitlab-org/gitlab-ui/commit/69a6829bbcaa5dc821a4fa29c4f3ec79e4b7aa5e))
+
+# [32.50.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.49.0...v32.50.0) (2021-12-16)
+
+
+### Features
+
+* Add support for @gitlab/svgs@2 peer dependency ([77076b7](https://gitlab.com/gitlab-org/gitlab-ui/commit/77076b7d717f4245a29df115113c96d72b002540))
+
+# [32.49.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.48.0...v32.49.0) (2021-12-15)
+
+
+### Features
+
+* **GlKeysetPagination:** Migrate storybook story ([b78abe6](https://gitlab.com/gitlab-org/gitlab-ui/commit/b78abe68d2c86c973af50ee20754e5b2be163f25))
+
 # [32.48.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.47.0...v32.48.0) (2021-12-13)
 
 

package/dist/components/base/form/form.documentation.js

@@ -1,11 +1,7 @@
-import examples from './examples';
-
 var description = "A wrapper element for `gl-form-*` input elements. Supports `@submit` and `@reset` events, as well as\ncontrolling validation settings for form inputs.\n";
 
 var form_documentation = {
-  description,
-  examples,
-  bootstrapComponent: 'b-form'
+  description
 };
 
 export default form_documentation;

package/dist/components/base/form/form_radio/form_radio.documentation.js

@@ -1,39 +1,8 @@
-import examples from './examples';
-
-var description = "# GlFormRadio\n\nA radio button typically represents a single option in a group of related\nchoices. Each radio button is boolean and only one can be selected at a time.\n\n## Usage\n\n`GlFormRadio` components can be used directly, or via a `GlFormRadioGroup`.\n\nBelow is an example which demonstrates the direct approach. For examples using\n`GlFormRadioGroup`, see the documentation for that component.\n\n```html\n<script>\nexport default {\n  data() {\n    return {\n      selected: 'yes',\n    };\n  },\n};\n</script>\n\n<template>\n  <div>\n    <gl-form-radio v-model=\"selected\" value=\"yes\">Yes</gl-form-radio>\n    <gl-form-radio v-model=\"selected\" value=\"no\">No</gl-form-radio>\n  </div>\n</template>\n```\n";
+var description = "`GlFormRadio` components can be used directly, or via a `GlFormRadioGroup`.\n\nBelow is an example which demonstrates the direct approach. For examples using\n`GlFormRadioGroup`, see the documentation for that component.\n\n```html\n<script>\n  export default {\n    data() {\n      return {\n        selected: 'yes',\n      };\n    },\n  };\n</script>\n\n<template>\n  <div>\n    <gl-form-radio v-model=\"selected\" value=\"yes\">Yes</gl-form-radio>\n    <gl-form-radio v-model=\"selected\" value=\"no\">No</gl-form-radio>\n  </div>\n</template>\n```\n";
 
 var form_radio_documentation = {
   description,
-  examples,
-  followsDesignSystem: true,
-  bootstrapComponent: 'b-form-radio',
-  propsInfo: {
-    checked: {
-      additionalInfo: 'The current value of the radio(s)'
-    }
-  },
-  events: [{
-    event: 'input',
-    args: [{
-      arg: 'checked',
-      description: 'current selected value of radio group'
-    }],
-    description: 'Emitted when the selected value is changed'
-  }, {
-    event: 'change',
-    args: [{
-      arg: 'checked',
-      description: 'current selected value of radio group'
-    }],
-    description: 'Emitted when the selected value is changed due to user interaction'
-  }],
-  slots: [{
-    name: 'help',
-    description: 'Content provided here will be shown beneath the radio. Typically used for help or descriptive text.'
-  }, {
-    name: 'default',
-    description: 'Content to use for the label'
-  }]
+  followsDesignSystem: true
 };
 
 export default form_radio_documentation;

package/dist/components/base/form/form_radio/form_radio.js

@@ -10,14 +10,27 @@ var script = {
     BFormRadio
   },
   inheritAttrs: false,
-  model
+  model: {
+    prop: model.prop,
+    event: model.event
+  },
+  props: {
+    /**
+     * Whether the radio is checked
+     */
+    checked: {
+      type: [String, Number, Boolean, Object],
+      required: false,
+      default: false
+    }
+  }
 };
 
 /* 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-form-radio',_vm._g(_vm._b({staticClass:"gl-form-radio",on:{"input":function($event){return _vm.$emit('input', $event)},"change":function($event){return _vm.$emit('change', $event)}}},'b-form-radio',_vm.$attrs,false),_vm.$listeners),[_vm._t("default"),_vm._v(" "),(_vm.$scopedSlots.help)?_c('p',{staticClass:"help-text"},[_vm._t("help")],2):_vm._e()],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form-radio',_vm._g(_vm._b({staticClass:"gl-form-radio",attrs:{"checked":_vm.checked},on:{"input":function($event){return _vm.$emit('input', $event)},"change":function($event){return _vm.$emit('change', $event)}}},'b-form-radio',_vm.$attrs,false),_vm.$listeners),[_vm._t("default"),_vm._v(" "),(_vm.$scopedSlots.help)?_c('p',{staticClass:"help-text"},[_vm._t("help")],2):_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/form/form_select/form_select.documentation.js

@@ -1,23 +1,8 @@
-import examples from './examples';
-
-var description = "# Form Select\n\nForm select component used to select from group of options in a form.\n";
+var description = "Form select component used to select from group of options in a form.\n";
 
 var form_select_documentation = {
   description,
-  examples,
-  followDesignSystem: true,
-  bootstrapComponent: 'b-form-select',
-  events: [{
-    event: 'change',
-    description: 'Emitted with the select value changes via user interaction.'
-  }, {
-    event: 'input',
-    description: 'Emitted with the select value changes.'
-  }],
-  slots: [{
-    name: 'first',
-    description: 'Slot to place option tags above options provided via options prop'
-  }]
+  followDesignSystem: true
 };
 
 export default form_select_documentation;

package/dist/components/base/keyset_pagination/keyset_pagination.documentation.js

@@ -1,6 +1,4 @@
-import examples from './examples';
-
-var keyset_pagination = "# Keyset Pagination\n\nPagination is used to help users parse a large number of items on a page,\nwhenever there are too many results to show at once. Pagination breaks up\nresults into several pages with controls for navigating forward and backward, or\nto a specific page.\n\n## Usage\n\nThe simplest way to use `GlKeysetPagination` with a paginated GraphQL response\nis to `v-bind` to the\n[`PageInfo`](https://docs.gitlab.com/ee/api/graphql/reference/#pageinfo) type\nreturned by the endpoint:\n\n```html\n<gl-keyset-pagination v-bind=\"pageInfo\" />\n```\n\nThis is possible because the default field names of the `PageInfo` type align\nwith the `props` of this component.\n\n## Dos and don'ts\n\n**✅ Do** provide the `prevText` and `nextText` props with translatable strings.\nThe default strings (\"Prev\" and \"Next\") are hardcoded in this component and\ncan't be translated.\n\nExample:\n\n```html\n<gl-keyset-pagination v-bind=\"pageInfo\" :prev-text=\"__('Prev')\" :next-text=\"__('Next')\" />\n```\n\n**✅ Do** use this component for paginating GraphQL requests<sup>1</sup> (or any\nendpoint that uses keyset pagination).\n\n**❌ Don't** use this component for paginating REST requests<sup>1</sup> (or any\nendpoint that uses offset pagination).\n\nFor offset pagination, use the [`GlPagination`\ncomponent](/?path=/story/base-pagination--default) instead.\n\nFor more information on the difference between offset and keyset pagination see\n[our documentation on GraphQL\npagination](https://docs.gitlab.com/ee/development/graphql_guide/pagination.html).\n\n<small><sup>1</sup>There's no intrinsic reason why GraphQL endpoints can't\nsupport offset pagination (in fact, [the official\ndocumentation](https://graphql.org/learn/pagination/#pagination-and-edges) shows\nan example offset pagination implementation) or why REST endpoints can't support\nkeyset pagination. This is simply how we've chosen to implement our REST and\nGraphQL endpoints at GitLab.</small>\n\n## Pajamas reference\n\n<https://design.gitlab.com/components/pagination>\n";
+var keyset_pagination = "Pagination is used to help users parse a large number of items on a page,\nwhenever there are too many results to show at once. Pagination breaks up\nresults into several pages with controls for navigating forward and backward, or\nto a specific page.\n\n## Usage\n\nThe simplest way to use `GlKeysetPagination` with a paginated GraphQL response\nis to `v-bind` to the\n[`PageInfo`](https://docs.gitlab.com/ee/api/graphql/reference/#pageinfo) type\nreturned by the endpoint:\n\n```html\n<gl-keyset-pagination v-bind=\"pageInfo\" />\n```\n\nThis is possible because the default field names of the `PageInfo` type align\nwith the `props` of this component.\n\n## Dos and don'ts\n\n**✅ Do** provide the `prevText` and `nextText` props with translatable strings.\nThe default strings (\"Prev\" and \"Next\") are hardcoded in this component and\ncan't be translated.\n\nExample:\n\n```html\n<gl-keyset-pagination v-bind=\"pageInfo\" :prev-text=\"__('Prev')\" :next-text=\"__('Next')\" />\n```\n\n**✅ Do** use this component for paginating GraphQL requests<sup>1</sup> (or any\nendpoint that uses keyset pagination).\n\n**❌ Don't** use this component for paginating REST requests<sup>1</sup> (or any\nendpoint that uses offset pagination).\n\nFor offset pagination, use the [`GlPagination`\ncomponent](/?path=/story/base-pagination--default) instead.\n\nFor more information on the difference between offset and keyset pagination see\n[our documentation on GraphQL\npagination](https://docs.gitlab.com/ee/development/graphql_guide/pagination.html).\n\n<small><sup>1</sup>There's no intrinsic reason why GraphQL endpoints can't\nsupport offset pagination (in fact, [the official\ndocumentation](https://graphql.org/learn/pagination/#pagination-and-edges) shows\nan example offset pagination implementation) or why REST endpoints can't support\nkeyset pagination. This is simply how we've chosen to implement our REST and\nGraphQL endpoints at GitLab.</small>\n\n## Pajamas reference\n\n<https://design.gitlab.com/components/pagination>\n";
 
 var description = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -9,87 +7,7 @@ var description = /*#__PURE__*/Object.freeze({
 
 var keyset_pagination_documentation = {
   description,
-  followsDesignSystem: true,
-  bootstrapComponent: false,
-  examples,
-  propsInfo: {
-    hasPreviousPage: {
-      type: Boolean,
-      required: false,
-      default: false,
-      additionalInfo: 'Whether or not the "Prev" button should be enabled'
-    },
-    hasNextPage: {
-      type: Boolean,
-      required: false,
-      default: false,
-      additionalInfo: 'Whether or not the "Next" button should be enabled'
-    },
-    startCursor: {
-      type: String,
-      required: false,
-      default: null,
-      additionalInfo: 'A cursor that points to the first item in the current page. Will be passed as an event parameter when the "prev" event is fired.'
-    },
-    endCursor: {
-      type: String,
-      required: false,
-      default: null,
-      additionalInfo: 'A cursor that points to the last item in the current page. Will be passed as an event parameter when the "next" event is fired.'
-    },
-    prevText: {
-      type: String,
-      required: false,
-      default: 'Prev',
-      additionalInfo: 'The text that will be rendered inside the "Prev" button. It\'s important to provide this parameter since the default text is not translatable.'
-    },
-    prevButtonLink: {
-      type: String,
-      required: false,
-      default: null,
-      additionalInfo: 'A link that will be used as the "Prev" button\'s "href" attribute. If provided, the "Prev" button renders as a link button; otherwise, it is rendered as a regular button.'
-    },
-    nextText: {
-      type: String,
-      required: false,
-      default: 'Next',
-      additionalInfo: 'The text that will be rendered inside the "Next" button. It\'s important to provide this parameter since the default text is not translatable.'
-    },
-    nextButtonLink: {
-      type: String,
-      required: false,
-      default: null,
-      additionalInfo: 'A link that will be used as the "Next" button\'s "href" attribute. If provided, the "Next" button renders as a link button; otherwise, it is rendered as a regular button.'
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-      additionalInfo: 'Whether or not both buttons should be disabled (regardless of the "hasPreviousPage" and "hasNextPage" values).'
-    }
-  },
-  events: [{
-    event: 'prev',
-    description: 'Emitted when the "Prev" button is clicked',
-    args: [{
-      arg: 'startCursor',
-      description: 'A cursor that points to the first item in the current page.'
-    }]
-  }, {
-    event: 'next',
-    description: 'Emitted when the "Next" button is clicked',
-    args: [{
-      arg: 'endCursor',
-      description: 'A cursor that points to the last item in the current page'
-    }]
-  }],
-  slots: [{
-    name: 'previous-button-content',
-    description: 'Used to customize the appearance of the "Prev" button'
-  }, {
-    name: 'next-button-content',
-    description: 'Used to customize the appearance of the "Next" button'
-  }]
+  followsDesignSystem: true
 };
 
 export default keyset_pagination_documentation;

package/dist/components/base/keyset_pagination/keyset_pagination.js

@@ -16,46 +16,88 @@ var script = {
     // GraphQL type, allowing the returned `pageInfo` object to
     // be bound directly to this component:
     // `<gl-keyset-pagination v-bind="pageInfo">`
+
+    /**
+     * Whether or not the "Prev" button should be enabled
+     */
     hasPreviousPage: {
       type: Boolean,
       required: false,
       default: false
     },
+
+    /**
+     * Whether or not the "Next" button should be enabled
+     */
     hasNextPage: {
       type: Boolean,
       required: false,
       default: false
     },
+
+    /**
+     * A cursor that points to the first item in the current page.
+     * Will be passed as an event parameter when the "prev" event is fired.
+     */
     startCursor: {
       type: String,
       required: false,
       default: null
     },
+
+    /**
+     * A cursor that points to the last item in the current page.
+     * Will be passed as an event parameter when the "next" event is fired.
+     */
     endCursor: {
       type: String,
       required: false,
       default: null
     },
+
+    /**
+     * The text that will be rendered inside the "Prev" button.
+     * It\'s important to provide this parameter since the default text is not translatable.
+     */
     prevText: {
       type: String,
       required: false,
       default: 'Prev'
     },
+
+    /**
+     * A link that will be used as the "Prev" button\'s "href" attribute.
+     * If provided, the "Prev" button renders as a link button; otherwise, it is rendered as a regular button.
+     */
     prevButtonLink: {
       type: String,
       required: false,
       default: null
     },
+
+    /**
+     * The text that will be rendered inside the "Next" button.
+     * It\'s important to provide this parameter since the default text is not translatable.
+     */
     nextText: {
       type: String,
       required: false,
       default: 'Next'
     },
+
+    /**
+     * A link that will be used as the "Next" button\'s "href" attribute.
+     * If provided, the "Next" button renders as a link button; otherwise, it is rendered as a regular button.
+     */
     nextButtonLink: {
       type: String,
       required: false,
       default: null
     },
+
+    /**
+     * Whether or not both buttons should be disabled (regardless of the "hasPreviousPage" and "hasNextPage" values).
+     */
     disabled: {
       type: Boolean,
       required: false,

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

@@ -1,38 +1,8 @@
-import examples from './examples';
-
-var description = "# Modal\n\n<!-- STORY -->\n## Usage\n\nModals are used to reveal critical information, show information without losing context, or when the\nsystem requires a user response. Modals can also fragment a complex workflow into simpler steps and\nshould serve a single purpose dedicated to completing the user’s task.\n\n## VModel\n\nYou can use the `v-model` directive to control the modal’s visibility. The `v-model`\ndirective interfaces with the `visible` property and the `@change` event.\n\n## Deprecation Warning\n\nWe are deprecating the `modal-ok` and `modal-cancel` slots. We are also changing the way the\n`modal-footer` slot content is populated. This is in order to align this component with the design\nsystem.\n\nThe `modal-footer` slot should only be populated via props: `action-primary`, `action-secondary` and\n`action-cancel`. These props allow you to handle how a primary, secondary and cancel button will\nbehave in the modals footer. The props receive an object as such:\n\n~~~js\n{\n  text: 'Save Changes',\n  attributes: [\n    { variant: 'confirm' },\n    { disabled: this.someState },\n    { class: 'some-class' },\n    ...\n  ]\n}\n~~~\n";
+var description = "Modals are used to reveal critical information, show information without losing context, or when the\nsystem requires a user response. Modals can also fragment a complex workflow into simpler steps and\nshould serve a single purpose dedicated to completing the user’s task.\n\n## VModel\n\nYou can use the `v-model` directive to control the modal’s visibility. The `v-model`\ndirective interfaces with the `visible` property and the `@change` event.\n\n## Deprecation Warning\n\nWe are deprecating the `modal-ok` and `modal-cancel` slots. We are also changing the way the\n`modal-footer` slot content is populated. This is in order to align this component with the design\nsystem.\n\nThe `modal-footer` slot should only be populated via props: `action-primary`, `action-secondary` and\n`action-cancel`. These props allow you to handle how a primary, secondary and cancel button will\nbehave in the modals footer. The props receive an object as such:\n\n```js\n{\n  text: 'Save Changes',\n  attributes: [\n    { variant: 'confirm' },\n    { disabled: this.someState },\n    { class: 'some-class' },\n    ...\n  ]\n}\n```\n";
 
 var modal_documentation = {
-  bootstrapComponent: 'b-modal',
   followsDesignSystem: true,
-  description,
-  examples,
-  slots: [{
-    name: 'modal-header',
-    description: 'Entire modal header container contents (including the close button on the top right corner)'
-  }, {
-    name: 'modal-title',
-    description: 'Modal title. If modal-header slot is used, this slot will not be shown.'
-  }, {
-    name: 'modal-header-close',
-    description: 'Content of Modal header close button. If modal-header slot is used, this slot will not be shown.'
-  }, {
-    name: 'modal-footer',
-    description: 'Populated via props: modal-action-primary, modal-action-cancel and modal-action-secondary.'
-  }],
-  events: [{
-    event: '@primary',
-    description: 'Emitted when clicked on modal-action-primary'
-  }, {
-    event: '@secondary',
-    description: 'Emitted when clicked on modal-action-secondary'
-  }, {
-    event: '@canceled',
-    description: 'Emitted when clicked on modal-action-cancel'
-  }, {
-    event: '@change',
-    description: 'Emitted when the modal visibility changes'
-  }]
+  description
 };
 
 export default modal_documentation;

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

@@ -75,6 +75,20 @@ var script = {
       default: false
     }
   },
+  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']);
+    }
+
+  },
   methods: {
     show() {
       this.$refs.modal.show();
@@ -151,7 +165,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,"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:"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}],null,true)},'b-modal',_vm.$attrs,false),_vm.$listeners),[_vm._t("default"),_vm._v(" "),_vm._v(" "),_vm._t("modal-ok",null,{"slot":"modal-ok"}),_vm._v(" "),_vm._t("modal-cancel",null,{"slot":"modal-cancel"}),_vm._v(" "),_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()],{"slot":"modal-footer"})],2)};
+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,"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 */