@gitlab/ui 32.47.0 → 32.51.0

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# [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)
+
+
+### Features
+
+* **GlAvatarsInline:** Migrate storybook story ([0720510](https://gitlab.com/gitlab-org/gitlab-ui/commit/07205105cb98e8493cfe3f8b70191707175ca8a9))
+
 # [32.47.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.46.0...v32.47.0) (2021-12-13)
 
 

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

@@ -1,15 +1,8 @@
-import examples from './examples';
-
-var description = "# Avatar labeled\n\n<!-- STORY -->\n## Usage\n\nAvatars may also be adjacent to a text alternative, such as a user or project name. In these cases,\na null `alt` text should be used so that they can be ignored by assistive technologies.\n\nUse the `avatar-labeled` component in those scenarios. It will set a null `alt` text by default.\nIt allows to display a `label` and/or a `sub-label` next to the avatar image. It accepts the same\nproperties as the avatar component to modify the avatar’s shape and size.\n\n## Using the component\n\n~~~js\n<gl-avatar-labeled\n  :shape=\"shape\"\n  :size=\"size\"\n  :src=\"src\"\n  :label=\"label\"\n  :sub-label=\"subLabel\"\n/>\n~~~\n";
+var description = "## Usage\n\nAvatars may also be adjacent to a text alternative, such as a user or project name. In these cases,\na null `alt` text should be used so that they can be ignored by assistive technologies.\n\nUse the `avatar-labeled` component in those scenarios. It will set a null `alt` text by default.\nIt allows to display a `label` and/or a `sub-label` next to the avatar image. It accepts the same\nproperties as the avatar component to modify the avatar’s shape and size.\n\n## Using the component\n\n```js\n<gl-avatar-labeled\n  :shape=\"shape\"\n  :size=\"size\"\n  :src=\"src\"\n  :label=\"label\"\n  :sub-label=\"subLabel\"\n/>\n```\n";
 
 var avatar_labeled_documentation = {
   followsDesignSystem: true,
-  description,
-  examples,
-  slots: [{
-    name: 'meta',
-    description: 'Meta data to add to the avatar. Generally used for badges or user status emoji.'
-  }]
+  description
 };
 
 export default avatar_labeled_documentation;

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

@@ -1,6 +1,4 @@
-import examples from './examples';
-
-var avatars_inline = "## Avatars inline\n\nUse `<avatars-inline />` to display multiple avatars organized in a single row.\n\n### Basic usage\n\nThe `avatars` property accepts an array of objects that contains the avatar properties. By default,\n`<avatars-inline />` expects each object contained in the array to have the same shape as the\nproperties of the  `<avatar />` component. You can customize the display of each avatar by\noverriding the default slot:\n\n```html\n<gl-avatars-inline :avatars=\"avatars\">\n  <template #avatar=\"{ avatar }\">\n    <gl-avatar-link v-gl-tooltip target=\"blank\" :href=\"avatar.href\" :title=\"avatar.tooltip\">\n      <gl-avatar :src=\"avatar.src\" :size=\"32\" />\n    </gl-avatar-link>\n  </template>\n</gl-avatars-inline>\n```\n\nIn the example above, the avatars displayed inside `<avatars-inline />` are links pointing to a URL\nstored in each avatar object. Each avatar also displays a tooltip. If you override\n`<inline-avatars />` default display, you can pass an array of objects with any desired shape to\nthe `avatars` property.\n\n### Collapsing\n\nWhen the `collapse` property value is `true` and the `maxVisible` property value is a number less\nthan the length of the `avatars` property array, `<avatars-inline>` will hide the overflown avatars\nand display a badge instead.\n\n### Supported sizes\n\n`<avatars-inline>` only supports avatars with `24` or `32` size.\n";
+var avatars_inline = "Use `<avatars-inline />` to display multiple avatars organized in a single row.\n\n### Basic usage\n\nThe `avatars` property accepts an array of objects that contains the avatar properties. By default,\n`<avatars-inline />` expects each object contained in the array to have the same shape as the\nproperties of the `<avatar />` component. You can customize the display of each avatar by\noverriding the default slot:\n\n```html\n<gl-avatars-inline :avatars=\"avatars\">\n  <template #avatar=\"{ avatar }\">\n    <gl-avatar-link v-gl-tooltip target=\"blank\" :href=\"avatar.href\" :title=\"avatar.tooltip\">\n      <gl-avatar :src=\"avatar.src\" :size=\"32\" />\n    </gl-avatar-link>\n  </template>\n</gl-avatars-inline>\n```\n\nIn the example above, the avatars displayed inside `<avatars-inline />` are links pointing to a URL\nstored in each avatar object. Each avatar also displays a tooltip. If you override\n`<inline-avatars />` default display, you can pass an array of objects with any desired shape to\nthe `avatars` property.\n\n### Collapsing\n\nWhen the `collapse` property value is `true` and the `maxVisible` property value is a number less\nthan the length of the `avatars` property array, `<avatars-inline>` will hide the overflown avatars\nand display a badge instead.\n\n### Supported sizes\n\n`<avatars-inline>` only supports avatars with `24` or `32` size.\n";
 
 var description = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -9,8 +7,7 @@ var description = /*#__PURE__*/Object.freeze({
 
 var avatars_inline_documentation = {
   followsDesignSystem: true,
-  description,
-  examples
+  description
 };
 
 export default avatars_inline_documentation;

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 */

package/dist/components/charts/gauge/gauge.documentation.js

@@ -1,6 +1,4 @@
-import examples from './examples';
-
-var gauge = "### Gauge Chart\n\nSome layout problems can be encountered with this component. Specifically, when the gauge chart's\naxis labels or detail text have larger widths, they can overlap with the chart elements.\n\nAlso, when the containing element of the gauge chart has either of a small calculated `width` and\n`height`, its axis width could become bulkier in relation to other chart elements. This is because\nat this time [eCharts only allows for setting the axis line width in absolute units](https://echarts.apache.org/en/option.html#series-gauge.axisLine.lineStyle.width).\n\nThis issue is to be addressed by [https://gitlab.com/gitlab-org/gitlab-ui/-/issues/916](https://gitlab.com/gitlab-org/gitlab-ui/-/issues/916).\n";
+var gauge = "Some layout problems can be encountered with this component. Specifically, when the gauge chart's\naxis labels or detail text have larger widths, they can overlap with the chart elements.\n\nAlso, when the containing element of the gauge chart has either of a small calculated `width` and\n`height`, its axis width could become bulkier in relation to other chart elements. This is because\nat this time [eCharts only allows for setting the axis line width in absolute units](https://echarts.apache.org/en/option.html#series-gauge.axisLine.lineStyle.width).\n\nThis issue is to be addressed by [https://gitlab.com/gitlab-org/gitlab-ui/-/issues/916](https://gitlab.com/gitlab-org/gitlab-ui/-/issues/916).\n";
 
 var description = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -8,9 +6,7 @@ var description = /*#__PURE__*/Object.freeze({
 });
 
 var gauge_documentation = {
-  description,
-  examples,
-  propsInfo: {}
+  description
 };
 
 export default gauge_documentation;

package/dist/components/utilities/intersperse/intersperse.documentation.js

@@ -1,11 +1,8 @@
-import examples from './examples';
-
-var description = "## Intersperse\n\nThe intersperse component separates a list of elements\nby a given character (the default is `, `).\n\nIt takes all direct descendants of its default slot and inserts\nthe given separator between each item:\n\n`item 1, item 2, item 3`\n\nOptionally the character used for separating each item and the last separator can be set\nindependently:\n\n* `separator=\"/\"`  renders `item 1/item 2/item 3`\n* `lastSeparator=\" and \"` will render `item 1, item 2, and item 3`\n* `lastSeparator=\" and \"` and given two items will render `item 1 and item 2`\n\n**Note**:\n\nThe component provides an inline context since the result is wrapped in a `span`.\n\nAlso, whitespace elements that are direct children of the default-slot get removed to ensure\nconsistent formatting.\n\n## Usage\n\n### Default\n\n```html\n<gl-intersperse>\n    <span>Item 1</span>\n    <span>Item 2</span>\n    <span>Item 3</span>\n</gl-intersperse>\n```\n\nThis renders to the following HTML:\n\n```html\n<span><span>Item 1</span>, <span>Item 2</span>, <span>Item 3</span></span>\n```\n\n### Custom Separator\n\nA custom separator can be defined via the `separator` prop:\n\n```html\n<gl-intersperse separator=\"/\">\n    <span>Item 1</span>\n    <span>Item 2</span>\n    <span>Item 3</span>\n</gl-intersperse>\n```\n\nThis renders to the following HTML:\n\n```html\n<span><span>Item 1</span>/<span>Item 2</span>/<span>Item 3</span></span>\n```\n\n### Custom Last Separator\n\nA custom last separator can be defined via the `lastSeparator` prop:\n\n```html\n<gl-intersperse last-separator=\" and \">\n    <span>Item 1</span>\n    <span>Item 2</span>\n    <span>Item 3</span>\n</gl-intersperse>\n```\n\nThis renders to the following HTML:\n\n```html\n<span><span>Item 1</span>, <span>Item 2</span>, and <span>Item 3</span></span>\n```\n\nA custom last separator used on two items will only place `lastSeparator` between them:\n\n```html\n<gl-intersperse last-separator=\" and \">\n    <span>Item 1</span>\n    <span>Item 2</span>\n</gl-intersperse>\n```\n\nThis renders to the following HTML:\n\n```html\n<span><span>Item 1</span> and <span>Item 2</span></span>\n```\n";
+var description = "The intersperse component separates a list of elements\nby a given character (the default is `, `).\n\nIt takes all direct descendants of its default slot and inserts\nthe given separator between each item:\n\n`item 1, item 2, item 3`\n\nOptionally the character used for separating each item and the last separator can be set\nindependently:\n\n* `separator=\"/\"`  renders `item 1/item 2/item 3`\n* `lastSeparator=\" and \"` will render `item 1, item 2, and item 3`\n* `lastSeparator=\" and \"` and given two items will render `item 1 and item 2`\n\n**Note**:\n\nThe component provides an inline context since the result is wrapped in a `span`.\n\nAlso, whitespace elements that are direct children of the default-slot get removed to ensure\nconsistent formatting.\n\n## Usage\n\n### Default\n\n```html\n<gl-intersperse>\n    <span>Item 1</span>\n    <span>Item 2</span>\n    <span>Item 3</span>\n</gl-intersperse>\n```\n\nThis renders to the following HTML:\n\n```html\n<span><span>Item 1</span>, <span>Item 2</span>, <span>Item 3</span></span>\n```\n\n### Custom Separator\n\nA custom separator can be defined via the `separator` prop:\n\n```html\n<gl-intersperse separator=\"/\">\n    <span>Item 1</span>\n    <span>Item 2</span>\n    <span>Item 3</span>\n</gl-intersperse>\n```\n\nThis renders to the following HTML:\n\n```html\n<span><span>Item 1</span>/<span>Item 2</span>/<span>Item 3</span></span>\n```\n\n### Custom Last Separator\n\nA custom last separator can be defined via the `lastSeparator` prop:\n\n```html\n<gl-intersperse last-separator=\" and \">\n    <span>Item 1</span>\n    <span>Item 2</span>\n    <span>Item 3</span>\n</gl-intersperse>\n```\n\nThis renders to the following HTML:\n\n```html\n<span><span>Item 1</span>, <span>Item 2</span>, and <span>Item 3</span></span>\n```\n\nA custom last separator used on two items will only place `lastSeparator` between them:\n\n```html\n<gl-intersperse last-separator=\" and \">\n    <span>Item 1</span>\n    <span>Item 2</span>\n</gl-intersperse>\n```\n\nThis renders to the following HTML:\n\n```html\n<span><span>Item 1</span> and <span>Item 2</span></span>\n```\n";
 
 var intersperse_documentation = {
   followsDesignSystem: false,
-  description,
-  examples
+  description
 };
 
 export default intersperse_documentation;