@gitlab/ui 32.46.0 → 32.50.0

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# [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)
+
+
+### Features
+
+* **GlInputGroupText:** Migrate storybook story ([3fb2328](https://gitlab.com/gitlab-org/gitlab-ui/commit/3fb2328829b002480149bf5654c6026ff26fd670))
+
 # [32.46.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.45.1...v32.46.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_combobox/form_combobox.documentation.js

@@ -1,6 +1,4 @@
-import examples from './examples';
-
-var form_combobox = "# GlFormCombobox\n\nUse this component to add a [`FormInput`](/?path=/story/base-form-form-input--default) component\nwith synchronous autocomplete dropdown. It behaves as follows:\n\n- Typing matches tokens; dropdown disappears when there is no match  \n- Up and down arrows navigate the dropdown  \n- Enter selects keyboard-highlighted item; clicking overrides this  \n- Esc closes dropdown when it is open, clears field when it is not  \n- Browser/native autocomplete dropdown hidden when ours is open, shows when it is not  \n- Tab selects current entered text and moves to next field  \n\nThis behavior based on\n[this w3c pattern](https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html)\nand [this accessible combobox example](https://alligator.io/vuejs/vue-a11y-autocomplete/).\n\n## Usage\n\nThe combobox accepts an array of string tokens, a `v-model`, and label text. Internally, it generates\nunique element IDs so multiple can be used on one page without clashing.\n\nOn selection it sets the input value to the selected string and emits a `value-selected` event for\nconsumption by parent components.\n\n```html\n<gl-form-combobox\n  v-model=\"inputVal\"\n  :token-list=\"tokens\"\n  label-text=\"Combobox Label\"\n/>\n```\n\nIt does not have a loading state nor does it accept tokens other than strings. It allows for one\nselected value.\n\n### What if I need to load the options asynchronously?\n\nYou may want to look at [`GlSearchBoxByType`] or [`GlSearchBoxByClick`].\n\n### What if I need multiple options?\n\nThe [`GlTokenSelector`] may be what you need. Alternately, [`GlFilteredSearch`] will let you search\nand include tokens.\n\n## Edge cases\n\nThe algorithm to match tokens with the input is very naive. If you need to use the component with a\nvery large list of matches, you may want to update the implementation or use one of the search\ninputs, like [`GlSearchBoxByType`], [`GlSearchBoxByClick`], or [`GlFilteredSearch`].\n\n[`GlSearchBoxByType`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-search-box-by-type--default\n[`GlSearchBoxByClick`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-search-box-by-click--default\n[`GlTokenSelector`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-token-selector--default\n[`GlFilteredSearch`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-filtered-search--default\n";
+var form_combobox = "Use this component to add a [`FormInput`](/?path=/story/base-form-form-input--default) component\nwith synchronous autocomplete dropdown. It behaves as follows:\n\n- Typing matches tokens; dropdown disappears when there is no match  \n- Up and down arrows navigate the dropdown  \n- Enter selects keyboard-highlighted item; clicking overrides this  \n- Esc closes dropdown when it is open, clears field when it is not  \n- Browser/native autocomplete dropdown hidden when ours is open, shows when it is not  \n- Tab selects current entered text and moves to next field  \n\nThis behavior based on\n[this w3c pattern](https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html)\nand [this accessible combobox example](https://alligator.io/vuejs/vue-a11y-autocomplete/).\n\n## Usage\n\nThe combobox accepts an array of string tokens, a `v-model`, and label text. Internally, it generates\nunique element IDs so multiple can be used on one page without clashing.\n\nOn selection it sets the input value to the selected string and emits a `value-selected` event for\nconsumption by parent components.\n\n```html\n<gl-form-combobox\n  v-model=\"inputVal\"\n  :token-list=\"tokens\"\n  label-text=\"Combobox Label\"\n/>\n```\n\nIt does not have a loading state nor does it accept tokens other than strings. It allows for one\nselected value.\n\n### What if I need to load the options asynchronously?\n\nYou may want to look at [`GlSearchBoxByType`] or [`GlSearchBoxByClick`].\n\n### What if I need multiple options?\n\nThe [`GlTokenSelector`] may be what you need. Alternately, [`GlFilteredSearch`] will let you search\nand include tokens.\n\n## Edge cases\n\nThe algorithm to match tokens with the input is very naive. If you need to use the component with a\nvery large list of matches, you may want to update the implementation or use one of the search\ninputs, like [`GlSearchBoxByType`], [`GlSearchBoxByClick`], or [`GlFilteredSearch`].\n\n[`GlSearchBoxByType`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-search-box-by-type--default\n[`GlSearchBoxByClick`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-search-box-by-click--default\n[`GlTokenSelector`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-token-selector--default\n[`GlFilteredSearch`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-filtered-search--default\n";
 
 var description = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -9,12 +7,7 @@ var description = /*#__PURE__*/Object.freeze({
 
 var form_combobox_documentation = {
   followsDesignSystem: true,
-  description,
-  examples,
-  events: [{
-    event: 'value-selected',
-    description: 'Emitted when a value is selected.'
-  }]
+  description
 };
 
 export default form_combobox_documentation;

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

@@ -141,6 +141,11 @@ var script = {
     selectToken(value) {
       this.$emit('input', value);
       this.closeSuggestions();
+      /**
+       * Emitted when a value is selected.
+       * @event value-selected
+       */
+
       this.$emit('value-selected', value);
     }
 

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/input_group_text/input_group_text.documentation.js

@@ -1,5 +1,3 @@
-import examples from './examples';
-
 var input_group_text = "### Under the hood\n\nUses [`BInputGroupText`](https://bootstrap-vue.org/docs/components/input-group#comp-ref-b-input-group-text)\nfrom Vue Boostrap\n";
 
 var description = /*#__PURE__*/Object.freeze({
@@ -8,9 +6,7 @@ var description = /*#__PURE__*/Object.freeze({
 });
 
 var input_group_text_documentation = {
-  description,
-  examples,
-  propsInfo: {}
+  description
 };
 
 export default input_group_text_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

@@ -151,7 +151,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:"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_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/charts/tooltip/tooltip.documentation.js

@@ -1,12 +1,8 @@
-import examples from './examples';
-
 var description = "### ECharts custom tooltip\n\nUses GitLab UI's `popover` component in lieu of echart's tooltip.\n";
 
 var tooltip_documentation = {
   followsDesignSystem: false,
-  description,
-  examples,
-  bootstrapComponent: 'b-popover'
+  description
 };
 
 export default tooltip_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;

package/documentation/documented_stories.js

@@ -60,6 +60,7 @@ export const setupStorybookReadme = () =>
         'GlTableLite',
         'GlAlert',
         'GlSparklineChart',
+        'GlAvatarsInline',
         'GlSprintf',
         'GlLink',
         'GlChart',
@@ -88,7 +89,9 @@ export const setupStorybookReadme = () =>
         'GlFormCheckbox',
         'GlAccordion',
         'GlAccordionItem',
+        'GlIntersperse',
         'GlDaterangePicker',
+        'GlAvatarLabeled',
         'GlBarChart',
         'GlCarousel',
         'GlMarkdown',
@@ -104,6 +107,13 @@ export const setupStorybookReadme = () =>
         'GlLabel',
         'GlStackedColumnChart',
         'GlDiscreteScatterChart',
+        'GlFormCombobox',
+        'GlChartTooltip',
+        'GlInputGroupText',
+        'GlGaugeChart',
+        'GlFormRadio',
+        'GlModal',
+        'GlKeysetPagination',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.46.0",
+  "version": "32.50.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -71,7 +71,7 @@
     "vue-runtime-helpers": "^1.1.2"
   },
   "peerDependencies": {
-    "@gitlab/svgs": "^1.116.0",
+    "@gitlab/svgs": "^1.116.0 || ^2.0.0",
     "bootstrap": "4.5.3",
     "pikaday": "^1.8.0",
     "vue": "^2.6.10"
@@ -85,7 +85,7 @@
     "@babel/preset-env": "^7.10.2",
     "@gitlab/eslint-plugin": "10.0.0",
     "@gitlab/stylelint-config": "2.6.0",
-    "@gitlab/svgs": "1.226.0",
+    "@gitlab/svgs": "2.0.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

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

@@ -1,15 +1,6 @@
 import description from './avatar_labeled.md';
-import examples from './examples';
 
 export default {
   followsDesignSystem: true,
   description,
-  examples,
-  slots: [
-    {
-      name: 'meta',
-      description:
-        'Meta data to add to the avatar. Generally used for badges or user status emoji.',
-    },
-  ],
 };

package/src/components/base/avatar_labeled/avatar_labeled.md

@@ -1,6 +1,3 @@
-# Avatar labeled
-
-<!-- STORY -->
 ## Usage
 
 Avatars may also be adjacent to a text alternative, such as a user or project name. In these cases,
@@ -12,7 +9,7 @@ properties as the avatar component to modify the avatar’s shape and size.
 
 ## Using the component
 
-~~~js
+```js
 <gl-avatar-labeled
   :shape="shape"
   :size="size"
@@ -20,4 +17,4 @@ properties as the avatar component to modify the avatar’s shape and size.
   :label="label"
   :sub-label="subLabel"
 />
-~~~
+```