@gitlab/ui 39.3.0 → 39.3.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [39.3.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v39.3.0...v39.3.1) (2022-04-26)
+
+
+### Bug Fixes
+
+* **GlModal:** Ensure modal dialog has an accessible name ([5b35a67](https://gitlab.com/gitlab-org/gitlab-ui/commit/5b35a6757c510740191d336b14eeed71886a2066))
+
 # [39.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v39.2.1...v39.3.0) (2022-04-26)
 
 

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

@@ -1,6 +1,6 @@
 import { BModal } from 'bootstrap-vue/esm/index.js';
 import { modalSizeOptions, modalButtonDefaults, focusableTags, COMMA } from '../../../utils/constants';
-import { focusFirstFocusableElement } from '../../../utils/utils';
+import { logWarning, focusFirstFocusableElement } from '../../../utils/utils';
 import CloseButton from '../../shared_components/close_button/close_button';
 import GlButton from '../button/button';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -73,6 +73,11 @@ var script = {
       type: Boolean,
       required: false,
       default: false
+    },
+    ariaLabel: {
+      type: String,
+      required: false,
+      default: ''
     }
   },
   computed: {
@@ -89,6 +94,13 @@ var script = {
     }
 
   },
+
+  mounted() {
+    if (!this.ariaLabel && !this.title) {
+      logWarning('[gl-modal]: Accessible name for modal missing. Please add title prop or aria-label.');
+    }
+  },
+
   methods: {
     show() {
       this.$refs.modal.show();
@@ -165,7 +177,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:"default",fn:function(){return [_vm._t("default")]},proxy:true},{key:"modal-header",fn:function(){return [_vm._t("modal-header",[_c('h4',{staticClass:"modal-title"},[_vm._t("modal-title",[_vm._v(_vm._s(_vm.title))])],2)]),_vm._v(" "),_c('close-button',{ref:"close-button",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.close}})]},proxy:true},(_vm.shouldRenderModalOk)?{key:"modal-ok",fn:function(){return [_vm._t("modal-ok")]},proxy:true}:null,(_vm.shouldRenderModalCancel)?{key:"modal-cancel",fn:function(){return [_vm._t("modal-cancel")]},proxy:true}:null,(_vm.shouldRenderModalFooter)?{key:"modal-footer",fn:function(){return [_vm._t("modal-footer",[(_vm.actionCancel)?_c('gl-button',_vm._b({staticClass:"js-modal-action-cancel",on:{"click":_vm.cancel}},'gl-button',_vm.buttonBinding(_vm.actionCancel, 'actionCancel'),false),[_vm._v("\n         "+_vm._s(_vm.actionCancel.text)+"\n       ")]):_vm._e(),_vm._v(" "),(_vm.actionSecondary)?_c('gl-button',_vm._b({staticClass:"js-modal-action-secondary",on:{"click":_vm.secondary}},'gl-button',_vm.buttonBinding(_vm.actionSecondary, 'actionSecondary'),false),[_vm._v("\n         "+_vm._s(_vm.actionSecondary.text)+"\n       ")]):_vm._e(),_vm._v(" "),(_vm.actionPrimary)?_c('gl-button',_vm._b({staticClass:"js-modal-action-primary",on:{"click":_vm.ok}},'gl-button',_vm.buttonBinding(_vm.actionPrimary, 'actionPrimary'),false),[_vm._v("\n         "+_vm._s(_vm.actionPrimary.text)+"\n       ")]):_vm._e()])]},proxy:true}:null],null,true)},'b-modal',_vm.$attrs,false),_vm.$listeners))};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-modal',_vm._g(_vm._b({ref:"modal",attrs:{"id":_vm.modalId,"title-tag":_vm.titleTag,"size":_vm.size,"visible":_vm.visible,"aria-label":_vm.ariaLabel || _vm.title,"lazy":"","modal-class":['gl-modal', _vm.modalClass]},on:{"shown":_vm.setFocus,"ok":_vm.primary,"cancel":_vm.canceled,"change":function($event){return _vm.$emit('change', $event)}},scopedSlots:_vm._u([{key:"default",fn:function(){return [_vm._t("default")]},proxy:true},{key:"modal-header",fn:function(){return [_vm._t("modal-header",[_c('h4',{staticClass:"modal-title"},[_vm._t("modal-title",[_vm._v(_vm._s(_vm.title))])],2)]),_vm._v(" "),_c('close-button',{ref:"close-button",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.close}})]},proxy:true},(_vm.shouldRenderModalOk)?{key:"modal-ok",fn:function(){return [_vm._t("modal-ok")]},proxy:true}:null,(_vm.shouldRenderModalCancel)?{key:"modal-cancel",fn:function(){return [_vm._t("modal-cancel")]},proxy:true}:null,(_vm.shouldRenderModalFooter)?{key:"modal-footer",fn:function(){return [_vm._t("modal-footer",[(_vm.actionCancel)?_c('gl-button',_vm._b({staticClass:"js-modal-action-cancel",on:{"click":_vm.cancel}},'gl-button',_vm.buttonBinding(_vm.actionCancel, 'actionCancel'),false),[_vm._v("\n         "+_vm._s(_vm.actionCancel.text)+"\n       ")]):_vm._e(),_vm._v(" "),(_vm.actionSecondary)?_c('gl-button',_vm._b({staticClass:"js-modal-action-secondary",on:{"click":_vm.secondary}},'gl-button',_vm.buttonBinding(_vm.actionSecondary, 'actionSecondary'),false),[_vm._v("\n         "+_vm._s(_vm.actionSecondary.text)+"\n       ")]):_vm._e(),_vm._v(" "),(_vm.actionPrimary)?_c('gl-button',_vm._b({staticClass:"js-modal-action-primary",on:{"click":_vm.ok}},'gl-button',_vm.buttonBinding(_vm.actionPrimary, 'actionPrimary'),false),[_vm._v("\n         "+_vm._s(_vm.actionPrimary.text)+"\n       ")]):_vm._e()])]},proxy:true}:null],null,true)},'b-modal',_vm.$attrs,false),_vm.$listeners))};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "39.3.0",
+  "version": "39.3.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -17,8 +17,7 @@
   "files": [
     "src",
     "dist",
-    "scss_to_js",
-    "documentation"
+    "scss_to_js"
   ],
   "scripts": {
     "build": "NODE_ENV=production rollup -c",
@@ -56,17 +55,12 @@
     "generate:component": "plop"
   },
   "dependencies": {
-    "@babel/standalone": "^7.0.0",
     "bootstrap-vue": "2.20.1",
-    "copy-to-clipboard": "^3.0.8",
     "dompurify": "^2.3.6",
     "echarts": "^5.2.1",
-    "highlight.js": "^10.6.0",
     "iframe-resizer": "^4.3.2",
-    "js-beautify": "^1.8.8",
     "lodash": "^4.17.20",
     "portal-vue": "^2.1.6",
-    "url-search-params-polyfill": "^5.0.0",
     "vue-runtime-helpers": "^1.1.2"
   },
   "peerDependencies": {
@@ -132,7 +126,6 @@
     "postcss-loader": "^3.0.0",
     "postcss-scss": "^2.1.1",
     "prettier": "2.2.1",
-    "pug": "^2.0.3",
     "puppeteer": "11.0.0",
     "raw-loader": "^0.5.1",
     "rollup": "^2.53.1",
@@ -149,10 +142,10 @@
     "stylelint": "14.3.0",
     "stylelint-config-prettier": "9.0.3",
     "stylelint-prettier": "2.0.0",
-    "vue": "^2.6.11",
+    "vue": "2.6.11",
     "vue-jest": "4.0.0-rc.0",
     "vue-loader": "^15.8.3",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "2.6.11"
   },
   "release": {
     "branches": [

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

@@ -3,6 +3,7 @@ import { BModal } from 'bootstrap-vue';
 import { merge } from 'lodash';
 import CloseButton from '../../shared_components/close_button/close_button.vue';
 import Button from '../button/button.vue';
+import { logWarning } from '../../../utils/utils';
 import Modal from './modal.vue';
 import { modalButtonDefaults } from '~/utils/constants';
 
@@ -21,6 +22,10 @@ const BModalStub = merge({}, BModal.options, {
   },
 });
 
+jest.mock('../../../utils/utils', () => ({
+  logWarning: jest.fn(),
+}));
+
 describe('Modal component', () => {
   let wrapperListeners;
   let wrapper;
@@ -217,6 +222,21 @@ describe('Modal component', () => {
     });
   });
 
+  describe('accessible name warning', () => {
+    it.each`
+      description                                            | title            | ariaLabel        | showWarning
+      ${'is logged when there is no title or ariaLabel'}     | ${undefined}     | ${undefined}     | ${true}
+      ${'is not logged when there is a title'}               | ${'modal title'} | ${undefined}     | ${false}
+      ${'is not logged when there is an ariaLabel'}          | ${undefined}     | ${'modal title'} | ${false}
+      ${'is not logged when there is a title and ariaLabel'} | ${'modal title'} | ${'modal title'} | ${false}
+    `('$description', ({ title, ariaLabel, showWarning }) => {
+      createComponent({ props: { title, ariaLabel } });
+
+      const calledTimes = showWarning ? 1 : 0;
+      expect(logWarning).toHaveBeenCalledTimes(calledTimes);
+    });
+  });
+
   it('it binds visible property to the BModal visible property', async () => {
     createComponent({ stubModal: false });
 

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

@@ -6,7 +6,7 @@ import {
   modalButtonDefaults,
   modalSizeOptions,
 } from '../../../utils/constants';
-import { focusFirstFocusableElement } from '../../../utils/utils';
+import { focusFirstFocusableElement, logWarning } from '../../../utils/utils';
 import CloseButton from '../../shared_components/close_button/close_button.vue';
 import GlButton from '../button/button.vue';
 
@@ -79,6 +79,11 @@ export default {
       required: false,
       default: false,
     },
+    ariaLabel: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     shouldRenderModalOk() {
@@ -96,6 +101,13 @@ export default {
       );
     },
   },
+  mounted() {
+    if (!this.ariaLabel && !this.title) {
+      logWarning(
+        '[gl-modal]: Accessible name for modal missing. Please add title prop or aria-label.'
+      );
+    }
+  },
   methods: {
     show() {
       this.$refs.modal.show();
@@ -165,6 +177,7 @@ export default {
     :title-tag="titleTag"
     :size="size"
     :visible="visible"
+    :aria-label="ariaLabel || title"
     v-bind="$attrs"
     lazy
     :modal-class="['gl-modal', modalClass]"

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

@@ -1,8 +0,0 @@
-var description = "Accordions are used to group similar content and hide or show it depending on user needs or\npreferences. Accordions give users more granular control over the interface and help digest content\nin stages, rather than all at once.\n";
-
-var accordion_documentation = {
-  followsDesignSystem: true,
-  description
-};
-
-export default accordion_documentation;

package/dist/components/base/accordion/accordion_item.documentation.js

@@ -1,7 +0,0 @@
-var description = "## Usage\n\nUse `GlAccordionItem` to place the accordion item within your accordion.\n";
-
-var accordion_item_documentation = {
-  description
-};
-
-export default accordion_item_documentation;

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

@@ -1,13 +0,0 @@
-var alert = "Alerts allow the application to pass along relevant system information to the\nuser without impeding their journey. Alerts are system generated and may or may\nnot be derived by a user’s action.\n\n## Dismissible alerts\n\nAlerts don't handle their own visibility, so it's the parent component's\nresponsbility to listen for the `dismiss` event and hide the alert in some way.\nFor example:\n\n```html\n<script>\n  ...\n  computed: {\n    shouldShowAlert() {\n      return !this.isAlertDismissed && this.someOtherCondition();\n    },\n  },\n  ...\n</script>\n\n<template>\n  ...\n  <gl-alert v-if=\"shouldShowAlert\" @dismiss=\"isAlertDismissed = true\">\n    An important message\n  </gl-alert>\n  ...\n</template>\n```\n\n## Sticky alerts\n\nAny alert can use `position: sticky`, however it should be limited to critical alerts where keeping\nthe alert visually in context is necessary or when alerts are injected into a page and might\notherwise go unnoticed.\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': alert
-});
-
-var alert_documentation = {
-  description,
-  followsDesignSystem: true
-};
-
-export default alert_documentation;

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

@@ -1,8 +0,0 @@
-var description = "Avatars are used to represent a unique entity, be it a person, a group, or a project.\n";
-
-var avatar_documentation = {
-  followsDesignSystem: true,
-  description
-};
-
-export default avatar_documentation;

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

@@ -1,8 +0,0 @@
-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
-};
-
-export default avatar_labeled_documentation;

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

@@ -1,8 +0,0 @@
-var description = "`<gl-avatar-link>` decorates `<gl-avatar>` with hyperlink functionality. It accepts the same\nproperties as the `<gl-link>` component and it works in the same way too. The main purpose of this\ncomponent is to apply visual enhancements that makes evident that the user can interact with the\navatar.\n\n## Using the component\n\nWhen wrapping an `<gl-avatar>` component, `<gl-avatar-link>` darkens\nthe border that surrounds the avatar image or fallback text when hovering over it.\n\n```vue\n<gl-avatar-link target=\"blank\" href=\"https://gitlab.com/gitlab-org/gitlab\">\n  <gl-avatar\n    :size=\"32\"\n    :src=\"avatarUrl\"\n  />\n</gl-avatar-link>\n```\n\nWhen wrapping an `<avatar-labeled>` component, `<avatar-link>` underlines\nthe label and sub-label text when hovering over the avatar. It also applies the\nsame effects described in the first example.\n\n```vue\n<gl-avatar-link target=\"blank\" href=\"https://gitlab.com/gitlab-org/gitlab\">\n  <gl-avatar-labeled\n    :size=\"32\"\n    entity-name=\"GitLab\"\n    label=\"GitLab User\"\n    sub-label=\"@gitlab\"\n  />\n</gl-avatar-link>\n```\n";
-
-var avatar_link_documentation = {
-  followsDesignSystem: true,
-  description
-};
-
-export default avatar_link_documentation;

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

@@ -1,13 +0,0 @@
-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### Badge description in screen readers\n\nThe `badgeSrOnlyText` property provides a meaningful description of the badge that appears\nwhen avatars are collapsed for screen reader users.\n\n### Supported sizes\n\n`<avatars-inline>` only supports avatars with `24` or `32` size.\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': avatars_inline
-});
-
-var avatars_inline_documentation = {
-  followsDesignSystem: true,
-  description
-};
-
-export default avatars_inline_documentation;

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

@@ -1,8 +0,0 @@
-var description = "Badges highlight metadata of objects, the kind of information that always needs\nsome context and isn’t useful on its own. For example, they can be used to\nindicate an issue’s status, a member’s role, or if a branch is protected.\n\n## Usage\n\n```html\n<gl-badge>Hello, world!</gl-badge>\n```\n\n> Note: Native support for icons in badges will be added in a future version.\n\n### Using icon-only badges\n\nWhen a badge only has an icon and no slot content, be sure to set the `aria-label` attribute of the\nbadge for best accessibility.\n\n```html\n<!-- bad -->\n<gl-badge icon=\"eye\" />\n\n<!-- good -->\n<gl-badge icon=\"eye\" aria-label=\"Mark as confidential\" />\n```\n\n## Edge cases\n\nWhile this component is based on\n[`BBadge`](https://bootstrap-vue.org/docs/components/badge) from\n`bootstrap-vue`, it is not a drop-in replacement. Specifically, this component:\n\n- Has a different set of valid `variant`s. See the examples or props\n   documentation for those values.\n- Always sets the `pill` prop of the underlying `BBadge` to `true`. Any passed\n   in `pill` prop value is ignored.\n- Does _not_ scale itself to match the size of its immediate parent, like\n   `BBadge` does.\n";
-
-var badge_documentation = {
-  description,
-  followsDesignSystem: true
-};
-
-export default badge_documentation;

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

@@ -1,8 +0,0 @@
-var description = "## Dismiss\n\nUsers are able to permanently dismiss banners by default.\nBanners may also be dismissed temporarily, depending on the use case.\n\n### Permanent dismissal\n\nThe dismiss action is always represented by the `Close` icon and anchored\nto the top right of the banner.\n\nBanner dismissal should work as follows:\n\n* Banner dismissal must be associated with the user in the system database.\n  Dismissal must persist, even across version upgrades and clients.\n* Banners do not reappear by default. In rare circumstances, you may present the\n  banner again to a user after some time has passed.\n* Banners should only be shown to users who are logged in.\n\n**Implementation Notes:**\n\n* The dismissal of the banner is achieved using the `UserCallout` model on the backend and the\n  `PersistentUserCallout` JS file on the frontend. If both parameters are implemented correctly, the\n  banner will adhere to the dismissal guidelines above.\n\n### Temporary dismissal\n\nTo introduce temporary dismissal, include a secondary or tertiary button placed alongside\nthe primary action button. Follow the [button](https://design.gitlab.com/components/button#alignment)\nalignment and order guidelines.\n\nTemporary dismissals should work as follows:\n\n* Banners dismissed temporarily will reappear after **7 days**.\n* After a banner is dismissed temporarily, use a [toast](?path=/story/base-toast--default) message\n  to let the user know they will see the banner again in 7 days.\n";
-
-var banner_documentation = {
-  followsDesignSystem: true,
-  description
-};
-
-export default banner_documentation;

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

@@ -1,8 +0,0 @@
-var description = "## Usage\n\nThis component provides two `<slot>` elements for customization. The first is a `<slot #avatar>`\nso an avatar can appear before the first breadcrumb. The second is a `<slot #separator>` to\ncustomize the icon that appears between each breadcrumb.\n\n**note:** the component supports passing the property `to` in the list items to enable navigation\nthrough `vue-router`\n\n### Example\n\nYou can use any kind of separator you want in the slot, like below, which uses `<svg>`\nto draw a `/`\n\n```html\n<gl-breadcrumb :items=\"items\">\n  <template #avatar>\n    <img \n      alt=\"\"\n      class=\"gl-breadcrumb-avatar-tile\"\n      src=\"https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=16\"\n      width=\"16\"\n      height=\"16\"\n    />\n  </template>\n  <template #separator>\n    <svg height=\"16\">\n      <line x1=\"100%\" y1=\"0\" x2=\"0\" y2=\"100%\" stroke=\"gray\" />\n    </svg>\n  </template>\n</gl-breadcrumb>\n```\n";
-
-var breadcrumb_documentation = {
-  followsDesignSystem: true,
-  description
-};
-
-export default breadcrumb_documentation;

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

@@ -1,8 +0,0 @@
-var description = "Broadcast messages provide an efficient and prominent way to deliver critical messages at the\ninstance level to all users. For example, a broadcast message can be used when an admin wants to\nannounce that their platform will experience downtime during a specific period.\n\nIn comparison with an alert, broadcast messages are created by an admin and not triggered by the\nsystem.\n\nPlease refer to [Pajamas' documentation](https://design.gitlab.com/components/broadcast-message)\nfor more information on when to use this component.\n\n## Dismiss a broadcast message\n\nThe `GlBroadcastMessage` component deals with users dismissal the same way `GlAlert` does, meaning\nit does not handle its own visibility but emits a `dismiss` event that the parent component should\nlisten to in order to hide the message. Example:\n\n```html\n<template>\n  ...\n  <gl-broadcast-message v-if=\"!dismissed\" @dismiss=\"dismissed = true\">\n    An important message\n  </gl-broadcast-message>\n  ...\n</template>\n```\n";
-
-var broadcast_message_documentation = {
-  followsDesignSystem: false,
-  description
-};
-
-export default broadcast_message_documentation;

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

@@ -1,24 +0,0 @@
-var description = "Buttons execute an action, either in the background or foreground of an experience. Different button\ncategories help guide users through certain actions. Buttons express what action will occur when the\nuser clicks or touches it either by text, icon, or both. Additional meaning can be derived from the\nbutton variant.\n\n## Button link\n\nA button link is a link that is styled to look like a button, semantically speaking it's a `<a>` tag\nwith the necessary classes added to make it look like a button, it shares the same functionality as\n[`<gl-link>`]\n\n> Note: Setting a `target` attribute without a `href` attribute, will not create any side effects.\n> Without the presence of a `href` attribute, this component will render a `<button>`.\n\n[`<gl-link>`]: ./?path=/story/base-link--default-link\n\n## Icon-only button\n\nIcon-only buttons must have an accessible name.\nYou can provide one with the `aria-label` attribute, which is read out by screen readers.\n\n```html\n<gl-button icon=\"close\" aria-label=\"Close\" />\n```\n\n## Label button\n\nA label button renders a non-interactive `span` styled as a button. This can be especially useful\nwhen used in a button group to render text-only labels along with actionable buttons. To improve\naccessibility, and when applicable, consider using [`aria-describedby`] to establish a\nrelationship between the label button and the associated button.\n\n[`aria-describedby`]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute\n\n## Security\n\nThis component implements a few security measures to make it as safe as possible by default.\nSee [SafeLinkDirective docs] for more details.\n\n### Linking to an unsafe URL\n\nIf you're trying to link to a location considered unsafe by the `SafeLink` directive (when rendering\na download link with a [Data URL] for example), you'll need to bypass the `href` attribute's\nsanitization. This component exposes the `is-unsafe-link` prop for that purpose.\n\n> **Warning:** Only disable URL sanitization when absolutely necessary.\n\n```html\n<gl-button\n  is-unsafe-link\n  download=\"file.txt\"\n  href=\"data:text/plain;charset=utf-8,GitLab%20is%20awesome\">Download</gl-button>\n```\n\n[SafeLinkDirective docs]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/directives-safe-link-directive--default\n[Data URL]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs\n\n## vue-bootstrap component\n\nThis component uses [`BButton`](https://bootstrap-vue.org/docs/components/button) from vue-bootstrap\ninternally. So please take a look also there at their extensive documentation.\n";
-
-var button_documentation = {
-  description,
-  followsDesignSystem: true,
-  bootstrapComponent: 'b-button',
-  bootstrapPropsInfo: {
-    category: {
-      enum: 'buttonCategoryOptions'
-    },
-    variant: {
-      enum: 'buttonVariantOptions'
-    },
-    size: {
-      enum: 'buttonSizeOptions'
-    }
-  },
-  events: [{
-    event: 'click',
-    description: 'Emitted when clicked on button'
-  }]
-};
-
-export default button_documentation;

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

@@ -1,8 +0,0 @@
-var description = "Button groups are an easy way to group a series of buttons together.\n\n## vue-bootstrap component\n\nThis component uses [`BButtonGroup`](https://bootstrap-vue.org/docs/components/button-group) from vue-bootstrap\ninternally. So please take a look also there at their extensive documentation.\n";
-
-var button_group_documentation = {
-  description,
-  followsDesignSystem: true
-};
-
-export default button_group_documentation;

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

@@ -1,13 +0,0 @@
-var card = "Cards are a flexible component used to display content and actions in a variety of contexts.\nThey are generally restricted to a single topic and it should be easy for users to scan relevant and\nactionable information. Content, such as images and text, should be positioned within them in a\nmanner that demonstrates their intended hierarchy.\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': card
-});
-
-var card_documentation = {
-  followsDesignSystem: true,
-  description
-};
-
-export default card_documentation;

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

@@ -1,8 +0,0 @@
-var description = "The carousel is a slideshow for cycling through a series of content, built with CSS 3D\ntransforms. It works with a series of images, text, or custom markup. It also includes support\nfor previous/next controls and indicators.\n";
-
-var carousel_documentation = {
-  description,
-  bootstrapComponent: 'b-carousel'
-};
-
-export default carousel_documentation;

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

@@ -1,7 +0,0 @@
-var description = "Collapse is used to keep pages focused on the overview of what the user can do. Details and\nadditional actions are hidden in the fold, and can be opened if the user wants to interact with\nthose elements.\n";
-
-var collapse_documentation = {
-  description
-};
-
-export default collapse_documentation;

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

@@ -1,7 +0,0 @@
-var description = "Date picker allows users to choose and input a date by manually typing the date into the input field\nor by using a calendar-like dropdown.\n\n### Warning\n\nBe careful when binding a date value using `value` prop. `value` is a watched property and Date\npicker will emit `input` event on _initial load_. Alternatively, use `defaultDate` to set the\ninitial date then receive updated date values through `input` events.\n";
-
-var datepicker_documentation = {
-  description
-};
-
-export default datepicker_documentation;

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

@@ -1,8 +0,0 @@
-var description = "## Usage\n\nDaterange picker allows users to choose a date range by manually typing the start/end date\ninto the input fields or by using a calendar-like dropdown.\n\nA `maxDateRange` can be specified in order to limit the maximum number of days the component\nwill allow to be selected i.e. if the start date is `2020-08-01` and `maxDateRange` is set to `10`,\nthe highest selectable end date would be `2020-08-11`. This value will be offset by `1` if\n`sameDaySelection` is set to `true`. A `defaultMaxDate` will need to be\nprovided when making use of the `maxDateRange`.\n\nBy default, the component does not allow selection of the same start and end date.\nIn a scenario where this is required, the `sameDaySelection` property can be configured.\nThis is specifically useful when a single day selection is being defined as `2020-01-01 00:00:00`\nto `2020-01-01 23:59:59` instead of `2020-01-01 00:00:00` to `2020-01-02 00:00:00`.\n\nWhen `maxDateRange` is set it's a good idea to set the `tooltip` specifying the date range limit\nand to indicate the number of days currently selected using the default slot. For example:\n\n```vue\n<template #default=\"{ daysSelected }\">\n  <span v-if=\"daysSelected > -1\">{{ daysSelected }} days selected</span>\n  <span v-else>No days selected</span>\n</template>\n```\n\nThe `daysSelected` slot prop is the effective date range, thus the value is increased by one when\n`sameDaySelection` is set to `true`. When no date range has been selected the value is `-1`.\n\n### Note\n\nIf specifying a maxDateRange, it is good practice to include a date range indicator and toolip.\n";
-
-var daterange_picker_documentation = {
-  followsDesignSystem: true,
-  description
-};
-
-export default daterange_picker_documentation;

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

@@ -1,8 +0,0 @@
-var description = "The drawer is used to show more information about a certain resource in the UI and potentially\nhandle actions on the information.\n\n### By default\n\n```html\n<gl-drawer :open=\"open\" @close=\"close\">\n  <template #header>Your Title</template>\n  <template>\n   ...children\n  </template>\n</gl-drawer>\n```\n\n- `v-bind:open` will be a boolean you will pass to `gl-drawer` and `@close` is a listener that will\nbe a function that will toggle open to `false`.\n";
-
-var drawer_documentation = {
-  followsDesignSystem: true,
-  description
-};
-
-export default drawer_documentation;

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

@@ -1,8 +0,0 @@
-var description = "The dropdown component offers a user multiple items or actions to choose from which are initially\ncollapsed behind a button.\n\n### Icon-only dropdown\n\nIcon-only dropdowns must have an accessible name.\nYou can provide this with the combination of `text` and `text-sr-only` props.\n\nOptionally, you can use `no-caret` to remove the caret and `category=\"tertiary\"` to remove the border.\n\n```html\n<gl-dropdown\n  icon=\"ellipsis_v\"\n  text=\"More actions\"\n  :text-sr-only=\"true\"\n  category=\"tertiary\"\n  no-caret\n>\n```\n\n### Button Content\n\nThere are 3 ways to set the dropdown button's content.\n\n1. Use the `text` attribute. This will display the text with the loading spinner (shown with the\n`loading` attribute), icon (if provided by the `icon` attribute), and dropdown caret:\n\n    ```html\n    <gl-dropdown text=\"Button text\">\n    ```\n\n1. Use the `button-text` template. This allows custom content for the button's text, but keeps the\nloading spinner, icon, and dropdown caret:\n\n    ```html\n    <gl-dropdown>\n      <template #button-text>\n        <!-- Loading spinner shown here -->\n        <!-- Icon shown here -->\n        Custom <strong>Content</strong> with <em>HTML</em> via Slot\n        <gl-truncate position=\"middle\" text=\"Truncated button text\"/>\n        <!-- Dropdown arrow shown here -->\n      </template>\n    </gl-dropdown>\n    ```\n\n1. Use the `button-content` template. This will replace everything in the button with the template:\n\n    ```html\n    <gl-dropdown>\n      <template #button-content>\n        Custom <strong>Content</strong> with <em>HTML</em> via Slot\n      </template>\n    </gl-dropdown>\n    ```\n\n### GlDropdownForm\n\nUnlike `b-dropdown-form`, we do _not_ add any additional padding with the `gl-dropdown-form` component.\nThis is to prevent double padding with `gl-dropdown-item` and similar components, so in most cases\nshouldn't be needed. To add padding, either add a padding utility class to your form, or an inner\nelement with some padding.\n";
-
-var dropdown_documentation = {
-  description,
-  followsDesignSystem: false
-};
-
-export default dropdown_documentation;

package/dist/components/base/dropdown/dropdown_item.documentation.js

@@ -1,7 +0,0 @@
-var description = "The dropdown item component is meant to be used for clickable entries inside a dropdown component.\nIf you provide the `href` attribute, it renders a link instead of a button.\n";
-
-var dropdown_item_documentation = {
-  description
-};
-
-export default dropdown_item_documentation;

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

@@ -1,13 +0,0 @@
-var filtered_search = "The filtered search component is responsible for managing search with possible filters.\n\n## Usage\n\nEach filter option (named token) requires a separate Vue component. `GlFilteredSearchToken` is an\nexample of such a token.\n\nPrepare array of available token configurations with the following fields:\n\n- `type`: unique identifier of token type\n- `title`: human-readable title of the token\n- `icon`: token icon\n- `token`: (optional) the token Vue component to use (e.g. `AuthorToken`)\n- `dataType`: (optional) identifier of type (for example \"user\") for this filter. Tokens\n  of the same type could be switched without losing their values\n- `unique`: (optional) indicate this token could appear only once in the filter\n- `disabled`: (optional) indicate this token should be hidden from the dropdown\n- `operators`: (optional) an array of selectable operators.\n  Each array item is an object that must contain `value` and `description`, and optionally `default`\n  (e.g. `{ value: '=', description: 'is', default: 'true' }`)\n- `multiSelect`: (optional) when `true`, the suggestions list becomes multi-select instead of single-select.\n  It is discouraged to use this together with `unique`, as `unique` is intended for single-select.\n- `options`: (optional) an array of options which the user can pick after the operator has been selected.\n  The option object can have the following properties defined: `value`, `icon`, `text`, and `default`\n  all of which are expected be of type `string`. If the `default` is omitted, the `value` of the first\n  option will be displayed as a suggestion\n- any additional fields required to configure your component\n\nEach token for filtered search is a Vue component with the following props:\n\n- `value`: an object with a `data` property containing the current value, and optionally an\n`operator` value containing the operator value\n- `active`: indicates if the token is currently active. It's the token's responsibility\n  to render proper control for editing (for example input).\n- `current-value`: current tokens of the filtered search.\n- `index`: current token position in the filtered search.\n- `config`: additional configuration, supplied in filtered search config for this token.\n\nThe token should emit the following events:\n\n- `activate`: when the token requests activation (for example, when being clicked).\n- `deactivate`: when token requests deactivation (for example due to losing blur on input).\n- `destroy`: when token requests self-destruction (for instance for clicking \"X\" sign).\n- `replace`: token requests its replacement with another token.\n- `split`: token requests adding string values after the current token.\n- `complete`: token indicates its editing is completed.\n\n## Examples\n\nDefine a list of available tokens:\n\n```js\nconst availableTokens = [\n  { type: 'static', icon: 'label', title: 'static:token', token: staticToken },\n  { type: 'dynamic', icon: 'rocket', title: 'dynamic:~token', token: dynamicToken },\n];\n```\n\nPass the list of tokens to the search component. Optionally, you can use `v-model` to receive\nrealtime updates:\n\n```html\n\n<gl-filtered-search :available-tokens=\"tokens\" v-model=\"value\" />\n```\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': filtered_search
-});
-
-var filtered_search_documentation = {
-  description,
-  followsDesignSystem: true
-};
-
-export default filtered_search_documentation;

package/dist/components/base/filtered_search/filtered_search_suggestion.documentation.js

@@ -1,7 +0,0 @@
-var description = "The filtered search suggestion component is a wrapper around `GlDropdownItem`, which registers\nsuggestions in a top-level suggestion list:\n\n```html\n<gl-filtered-search-suggestion-list>\n  <gl-filtered-search-suggestion value=\"foo\">Example suggestion</gl-filtered-search-suggestion>\n  <gl-filtered-search-suggestion value=\"bar\">Example suggestion 2</gl-filtered-search-suggestion>\n</gl-filtered-search-suggestion-list>\n```\n";
-
-var filtered_search_suggestion_documentation = {
-  description
-};
-
-export default filtered_search_suggestion_documentation;

package/dist/components/base/filtered_search/filtered_search_suggestion_list.documentation.js

@@ -1,7 +0,0 @@
-var description = "The filtered search suggestion list component is responsible for managing underlying suggestion instances.\nYou obtain the ref for this component and manage suggestion selection via the component public API:\n\n- `getValue()` - Retrieves the current selected suggestion.\n- `nextItem()` - Selects the next suggestion. If last suggestion was selected, selection is cleared.\n- `prevItem()` - Selects the previous suggestion. If first suggestion was selected, selection is cleared.\n\n```html\n<gl-filtered-search-suggestion-list ref=\"suggestions\">\n  <gl-filtered-search-suggestion value=\"foo\">Example suggestion</gl-filtered-search-suggestion>\n  <gl-filtered-search-suggestion value=\"bar\">Example suggestion 2</gl-filtered-search-suggestion>\n</gl-filtered-search-suggestion-list>\n```\n";
-
-var filtered_search_suggestion_list_documentation = {
-  description
-};
-
-export default filtered_search_suggestion_list_documentation;

package/dist/components/base/filtered_search/filtered_search_term.documentation.js

@@ -1,12 +0,0 @@
-var filtered_search_term = "The filtered search term is a component for managing \"free input\" in the filtered search component.\nIt is responsible for autocompleting available tokens and \"converting\" to a relevant\ncomponent when an autocomplete item is selected.\n\n## Usage\n\nThis component is internal and is not intended to be used by `@gitlab/ui` users.\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': filtered_search_term
-});
-
-var filtered_search_term_documentation = {
-  description
-};
-
-export default filtered_search_term_documentation;

package/dist/components/base/filtered_search/filtered_search_token.documentation.js

@@ -1,12 +0,0 @@
-var filtered_search_token = "Filtered search token is a helper component, intended to\nsimplify the creation of filters tokens which consist of a title, operators\nand an editable value with autocomplete. This component abstracts token management\nlogic and allows you to focus on implementing autocomplete or view logic.\n\nThis component is not intended to be used outside of the `GlFilteredSearch` component.\n\n## Usage\n\nMake sure to pass `$listeners` to `gl-filtered-search-token`, or route events properly:\n\n```html\n<gl-filtered-search-token\n  title=\"Confidential\"\n  :active=\"active\"\n  :value=\"value\"\n  v-on=\"$listeners\"\n>\n  <template #suggestions>\n    <gl-filtered-search-suggestion value=\"Yes\"><gl-icon name=\"eye-slash\" :size=\"16\"/> Yes</gl-filtered-search-suggestion>\n    <gl-filtered-search-suggestion value=\"No\"><gl-icon name=\"eye\" :size=\"16\"/> No</gl-filtered-search-suggestion>\n  </template>\n</gl-filtered-search-token>\n```\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': filtered_search_token
-});
-
-var filtered_search_token_documentation = {
-  description
-};
-
-export default filtered_search_token_documentation;

package/dist/components/base/filtered_search/filtered_search_token_segment.documentation.js

@@ -1,12 +0,0 @@
-var filtered_search_token_segment = "The filtered search token segment is a component for managing token input either via free typing\nor by selecting item through dropdown list\n\n## Usage\n\nThis component is internal and is not intended to be used by `@gitlab/ui` users.\n\n## Internet Explorer 11\n\nThis component uses [`String.prototype.startsWith()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith)\nand [`String.prototype.endsWith()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith)\nunder the hood. Make sure those methods are polyfilled if you plan on using the component on IE11.\n\n> NOTE: These methods are already polyfilled in GitLab: [`app/assets/javascripts/commons/polyfills.js#L15-16`](https://gitlab.com/gitlab-org/gitlab/blob/dc60dee6ed6234dda9f032195577cd8fad9646d8/app/assets/javascripts/commons/polyfills.js#L15-16)\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': filtered_search_token_segment
-});
-
-var filtered_search_token_segment_documentation = {
-  description
-};
-
-export default filtered_search_token_segment_documentation;

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

@@ -1,7 +0,0 @@
-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
-};
-
-export default form_documentation;

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

@@ -1,8 +0,0 @@
-var description = "Form checkbox groups for general use inside forms.\n\n## Stacked\n\nBy default, the GitLab Design guide mandates the `<gl-form-checkbox-group>` be `stacked` and is\nnon-changeable at this time.\n";
-
-var form_checkbox_documentation = {
-  description,
-  followsDesignSystem: true
-};
-
-export default form_checkbox_documentation;

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

@@ -1,12 +0,0 @@
-var form_checkbox_tree = "`GlFormCheckboxTree` lets you display an options structure where any option can have n-level of\nchildren. It can be useful for creating a search filter that has nested facets.\n\n## Usage\n\n`GlFormCheckboxTree` accepts an `options` prop representing the available options in the form of\nan n-level deep tree. Each option should have a `value` and can have optional\n`label` and `children`. If `label` is omitted, `value` is used as the checkbox's label.\nHere's a simple `options` tree for example:\n\n```js\n[\n  {\n    label: 'Option #1',\n    value: 1,\n    children: [\n      {\n        label: 'Option #2',\n        value: 2,\n      },\n    ],\n  },\n  {\n    label: 'Option #3',\n    value: 3,\n  },\n]\n```\n\n`GlFormCheckboxTree` exposes the selected options via a `v-model` which is being kept in sync with\nthe `change` event.\n\n## Dos and don'ts\n\n### Don't\n\nWhen rendering a `GlFormCheckboxTree` with pre-selected options, all the selected values should be\npassed to the component via the `v-model`/`value` property. For example, with the options tree\nabove, if you wanted options `1` and `2` to be pre-selected, make sure that they are both included\nin the initial value, don't rely on the component to infer initially checked boxes by only passing\n`1` or `2`.\n\n```html\n<!-- Good -->\n<gl-form-checkbox-tree\n  :value=\"[1, 2]\"\n  :options=\"[\n    {\n      value: 1,\n      children: [\n        {\n          value: 2,\n        },\n      ],\n    },\n  ]\"\n/>\n\n<!-- Bad -->\n<gl-form-checkbox-tree\n  :value=\"[1]\"\n  :options=\"[\n    {\n      value: 1,\n      children: [\n        {\n          value: 2,\n        },\n      ],\n    },\n  ]\"\n/>\n```\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': form_checkbox_tree
-});
-
-var form_checkbox_tree_documentation = {
-  description
-};
-
-export default form_checkbox_tree_documentation;

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

@@ -1,13 +0,0 @@
-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,
-  'default': form_combobox
-});
-
-var form_combobox_documentation = {
-  followsDesignSystem: true,
-  description
-};
-
-export default form_combobox_documentation;

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

@@ -1,7 +0,0 @@
-var description = "Form group adds structure to forms.\n";
-
-var form_group_documentation = {
-  description
-};
-
-export default form_group_documentation;

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

@@ -1,8 +0,0 @@
-var description = "General user input to be used in forms.\n";
-
-var form_input_documentation = {
-  description,
-  followsDesignSystem: true
-};
-
-export default form_input_documentation;