@gitlab/ui 66.13.1 → 66.15.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [66.15.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.14.0...v66.15.0) (2023-09-26)
+
+
+### Features
+
+* **GLFilteredSearch:** Allow commas in multiSelect values ([160781a](https://gitlab.com/gitlab-org/gitlab-ui/commit/160781ad70105069163bc56631fb333a75764163))
+
+# [66.14.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.13.1...v66.14.0) (2023-09-25)
+
+
+### Features
+
+* **GlExperimentBadge:** Implement component ([de360ee](https://gitlab.com/gitlab-org/gitlab-ui/commit/de360eec00fb772cb3c10258f246975832d68f34))
+
 ## [66.13.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.13.0...v66.13.1) (2023-09-25)
 
 

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

@@ -1,5 +1,5 @@
 import cloneDeep from 'lodash/cloneDeep';
-import { COMMA } from '../../../utils/constants';
+import isEqual from 'lodash/isEqual';
 import GlToken from '../token/token';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment';
 import { tokenToOption, createTerm, TOKEN_CLOSE_SELECTOR } from './filtered_search_utils';
@@ -99,8 +99,13 @@ var script = {
     operators() {
       return this.config.operators || DEFAULT_OPERATORS;
     },
+    tokenEmpty() {
+      var _this$tokenValue$data;
+      return ((_this$tokenValue$data = this.tokenValue.data) === null || _this$tokenValue$data === void 0 ? void 0 : _this$tokenValue$data.length) === 0;
+    },
     hasDataOrDataSegmentIsCurrentlyActive() {
-      return this.tokenValue.data !== '' || this.isSegmentActive(SEGMENT_DATA);
+      const hasData = !this.tokenEmpty;
+      return hasData || this.isSegmentActive(SEGMENT_DATA);
     },
     availableTokensWithSelf() {
       return [this.config, ...this.availableTokens.filter(token => token !== this.config)].map(tokenToOption);
@@ -135,7 +140,7 @@ var script = {
     },
     value: {
       handler(newValue, oldValue) {
-        if ((newValue === null || newValue === void 0 ? void 0 : newValue.data) === (oldValue === null || oldValue === void 0 ? void 0 : oldValue.data) && (newValue === null || newValue === void 0 ? void 0 : newValue.operator) === (oldValue === null || oldValue === void 0 ? void 0 : oldValue.operator)) {
+        if (isEqual(newValue === null || newValue === void 0 ? void 0 : newValue.data, oldValue === null || oldValue === void 0 ? void 0 : oldValue.data) && (newValue === null || newValue === void 0 ? void 0 : newValue.operator) === (oldValue === null || oldValue === void 0 ? void 0 : oldValue.operator)) {
           return;
         }
         this.tokenValue = cloneDeep(newValue);
@@ -143,20 +148,31 @@ var script = {
     },
     active: {
       immediate: true,
-      handler(newValue) {
-        if (newValue) {
+      handler(tokenIsActive) {
+        if (tokenIsActive) {
           this.intendedCursorPosition = this.cursorPosition;
           if (!this.activeSegment) {
-            this.activateSegment(this.tokenValue.data !== '' ? SEGMENT_DATA : SEGMENT_OPERATOR);
+            this.activateSegment(this.tokenEmpty ? SEGMENT_OPERATOR : SEGMENT_DATA);
           }
-        } else if (this.tokenValue.data === '') {
+        } else {
           this.activeSegment = null;
-          /**
-           * Emitted when token is about to be destroyed.
-           *
-           * @event destroy
-           */
-          this.$emit('destroy');
+
+          // restore multi select values if we have them
+          // otherwise destroy the token
+          if (this.config.multiSelect) {
+            this.$emit('input', {
+              ...this.tokenValue,
+              data: this.multiSelectValues || ''
+            });
+          }
+          if (this.tokenEmpty && this.multiSelectValues.length === 0) {
+            /**
+             * Emitted when token is about to be destroyed.
+             *
+             * @event destroy
+             */
+            this.$emit('destroy');
+          }
         }
       }
     }
@@ -203,7 +219,7 @@ var script = {
       return this.active && this.activeSegment === segment;
     },
     replaceWithTermIfEmpty() {
-      if (this.tokenValue.operator === '' && this.tokenValue.data === '') {
+      if (this.tokenValue.operator === '' && this.tokenEmpty) {
         /**
          * Emitted when this token is converted to another type
          * @property {object} token Replacement token configuration
@@ -259,7 +275,7 @@ var script = {
         } = _ref3;
         return value.startsWith(potentialValue);
       })) {
-        if (this.tokenValue.data === '') {
+        if (this.tokenEmpty) {
           applySuggestion(suggestedValue);
         } else {
           evt.preventDefault();
@@ -292,12 +308,6 @@ var script = {
       this.intendedCursorPosition = 'start';
     },
     handleComplete() {
-      if (this.config.multiSelect) {
-        this.$emit('input', {
-          ...this.tokenValue,
-          data: this.multiSelectValues.join(COMMA)
-        });
-      }
       /**
        * Emitted when the token entry has been completed.
        *

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

@@ -1,6 +1,6 @@
 import last from 'lodash/last';
 import { Portal } from 'portal-vue';
-import { COMMA, LEFT_MOUSE_BUTTON } from '../../../utils/constants';
+import { LEFT_MOUSE_BUTTON } from '../../../utils/constants';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion';
 import GlFilteredSearchSuggestionList from './filtered_search_suggestion_list';
 import { TERM_TOKEN_TYPE, splitOnQuotes, match, wrapTokenInQuotes } from './filtered_search_utils';
@@ -151,7 +151,7 @@ var script = {
       return (_this$options = this.options) === null || _this$options === void 0 ? void 0 : _this$options.find(o => o.value === this.value);
     },
     nonMultipleValue() {
-      return this.multiSelect ? last(this.value.split(COMMA)) : this.value;
+      return Array.isArray(this.value) ? last(this.value) : this.value;
     },
     inputValue: {
       get() {
@@ -210,6 +210,7 @@ var script = {
     },
     inputValue(newValue) {
       if (this.termsAsTokens()) return;
+      if (this.multiSelect) return;
       const hasUnclosedQuote = newValue.split('"').length % 2 === 0;
       if (newValue.indexOf(' ') === -1 || hasUnclosedQuote) {
         return;

package/dist/components/experimental/experiment_badge/experiment_badge.js

@@ -0,0 +1,83 @@
+import uniqueId from 'lodash/uniqueId';
+import { GlBadge, GlPopover, GlLink } from '../../../index';
+import GlSprintf from '../../utilities/sprintf/sprintf';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const i18n = {
+  EXPERIMENT_BADGE: 'Experiment',
+  EXPERIMENT_POPOVER_TITLE: "What's an Experiment?",
+  EXPERIMENT_POPOVER_CONTENT: "An %{linkStart}Experiment%{linkEnd} is a feature that's in the process of being developed. It's not production-ready. We encourage users to try Experimental features and provide feedback. An Experiment: %{bullets}",
+  EXPERIMENT_POPOVER_BULLETS: ['May be unstable', 'Has no support and might not be documented', 'Can be removed at any time']
+};
+var script = {
+  name: 'GlExperimentBadge',
+  i18n,
+  components: {
+    GlBadge,
+    GlPopover,
+    GlSprintf,
+    GlLink
+  },
+  props: {
+    /**
+     * The URL of a page to provide more explanations on the experiment.
+     */
+    experimentHelpPageUrl: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * The placement of the popover in relation to the button.
+     */
+    popoverPlacement: {
+      type: String,
+      required: false,
+      default: 'bottom'
+    }
+  },
+  created() {
+    this.triggerId = uniqueId('experiment-badge-');
+  }
+};
+
+/* 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('gl-badge',{staticClass:"gl-mx-4 gl-hover-cursor-pointer",attrs:{"id":_vm.triggerId,"variant":"neutral","size":"md"}},[_c('span',[_vm._v(_vm._s(_vm.$options.i18n.EXPERIMENT_BADGE))]),_vm._v(" "),_c('gl-popover',{attrs:{"triggers":"click","show-close-button":"","placement":_vm.popoverPlacement,"target":_vm.triggerId,"css-classes":['gl-z-index-9999!'],"title":_vm.$options.i18n.EXPERIMENT_POPOVER_TITLE}},[_c('gl-sprintf',{attrs:{"message":_vm.$options.i18n.EXPERIMENT_POPOVER_CONTENT},scopedSlots:_vm._u([{key:"link",fn:function(ref){
+var content = ref.content;
+return [(_vm.experimentHelpPageUrl)?_c('gl-link',{staticClass:"gl-font-sm!",attrs:{"href":_vm.experimentHelpPageUrl,"target":"_blank"}},[_vm._v("\n          "+_vm._s(content)+"\n        ")]):_c('span',[_vm._v(_vm._s(content))])]}},{key:"bullets",fn:function(){return [_c('ul',{staticClass:"gl-mb-0 gl-pl-5"},_vm._l((_vm.$options.i18n.EXPERIMENT_POPOVER_BULLETS),function(item,i){return _c('li',{key:("li-" + i)},[_vm._v("\n            "+_vm._s(item)+"\n          ")])}),0)]},proxy:true}])})],1)],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
+export { i18n };

package/dist/index.js

@@ -86,6 +86,7 @@ export { default as GlAccordion } from './components/base/accordion/accordion';
 export { default as GlAccordionItem } from './components/base/accordion/accordion_item';
 export { default as GlCarousel } from './components/base/carousel/carousel';
 export { default as GlCarouselSlide } from './components/base/carousel/carousel_slide';
+export { default as GlExperimentBadge } from './components/experimental/experiment_badge/experiment_badge';
 export { default as GlAnimatedNumber } from './components/utilities/animated_number/animated_number';
 export { default as GlFriendlyWrap } from './components/utilities/friendly_wrap/friendly_wrap';
 export { default as GlIntersperse } from './components/utilities/intersperse/intersperse';

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 25 Sep 2023 19:08:19 GMT
+ * Generated on Tue, 26 Sep 2023 11:34:10 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 25 Sep 2023 19:08:19 GMT
+ * Generated on Tue, 26 Sep 2023 11:34:10 GMT
  */
 
 :root {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 25 Sep 2023 19:08:19 GMT
+ * Generated on Tue, 26 Sep 2023 11:34:10 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 25 Sep 2023 19:08:19 GMT
+ * Generated on Tue, 26 Sep 2023 11:34:10 GMT
  */
 
 export const BLACK = "#000";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 25 Sep 2023 19:08:19 GMT
+// Generated on Tue, 26 Sep 2023 11:34:10 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 25 Sep 2023 19:08:19 GMT
+// Generated on Tue, 26 Sep 2023 11:34:10 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "66.13.1",
+  "version": "66.15.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -126,7 +126,7 @@
     "cypress-axe": "^1.4.0",
     "dompurify": "^3.0.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.49.0",
+    "eslint": "8.50.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.15.1",
     "eslint-plugin-storybook": "0.6.14",

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

@@ -1,3 +1,4 @@
+import last from 'lodash/last';
 import GlLoadingIcon from '../loading_icon/loading_icon.vue';
 import GlIcon from '../icon/icon.vue';
 import GlToken from '../token/token.vue';
@@ -525,13 +526,19 @@ export const WithMultiSelect = () => {
     data() {
       return {
         users: fakeUsers,
-        selectedUsernames: this.value.data ? this.value.data.split(',') : [],
+        selectedUsernames: this.value.data || [],
         activeUser: null,
       };
     },
     computed: {
       filteredUsers() {
-        return this.users.filter((user) => user.username.includes(this.value.data));
+        let term = this.value.data;
+
+        if (Array.isArray(this.value.data) && this.value.data.length > 1) {
+          term = last(this.value.data);
+        }
+
+        return this.users.filter((user) => user.username.includes(term));
       },
       selectedUsers() {
         return this.config.multiSelect
@@ -593,7 +600,7 @@ export const WithMultiSelect = () => {
       <template v-for="(user, index) in selectedUsers">
         <gl-avatar :size="16" :entity-name="user.username" shape="circle" />
         {{ user.name }}
-        <span v-if="!isLastUser(index)" class="gl-mx-2">,&nbsp;</span>
+        <span v-if="!isLastUser(index)">,&nbsp;</span>
       </template>
     </template>
     <template #suggestions>
@@ -635,7 +642,7 @@ export const WithMultiSelect = () => {
             multiSelect: true,
           },
         ],
-        value: [{ type: 'assignee', value: { data: 'alpha,beta', operator: '=' } }],
+        value: [{ type: 'assignee', value: { data: ['alpha', 'beta'], operator: '=' } }],
       };
     },
     template: `

package/src/components/base/filtered_search/filtered_search_token.spec.js

@@ -334,14 +334,32 @@ describe('Filtered search token', () => {
         active: true,
         config: { multiSelect: true },
         multiSelectValues: ['alpha', 'beta'],
-        value: { operator: '=', data: 'alpha' },
+        value: { operator: '=', data: ['alpha', 'beta'] },
       });
     });
 
-    it('emits input event when data segment is completed', () => {
-      findDataSegment().vm.$emit('complete');
+    it('emits input event when active is false', async () => {
+      wrapper.setProps({ value: { data: 'user', operator: '=' } });
+      wrapper.setProps({ active: false });
 
-      expect(wrapper.emitted('input')).toEqual([[{ data: 'alpha,beta', operator: '=' }]]);
+      await nextTick();
+
+      expect(wrapper.emitted('input')).toEqual([
+        [{ data: 'user', operator: '=' }],
+        [{ data: ['alpha', 'beta'], operator: '=' }],
+      ]);
+    });
+
+    it('emits input event when active is false and search term empty', async () => {
+      wrapper.setProps({ value: { data: '', operator: '=' } });
+      wrapper.setProps({ active: false });
+
+      await nextTick();
+
+      expect(wrapper.emitted('input')).toEqual([
+        [{ data: '', operator: '=' }],
+        [{ data: ['alpha', 'beta'], operator: '=' }],
+      ]);
     });
 
     it('emits empty input event when data segment is activated, so blank text input shows all suggestions', () => {
@@ -352,14 +370,14 @@ describe('Filtered search token', () => {
 
     it('passes down the value prop to the data segment if it changes', async () => {
       createComponent({
-        value: { operator: '=', data: 'alpha' },
+        value: { operator: '=', data: ['alpha'] },
       });
 
       await wrapper.setProps({
-        value: { operator: '=', data: 'gamma' },
+        value: { operator: '=', data: ['gamma'] },
       });
 
-      expect(findDataSegment().props('value')).toEqual('gamma');
+      expect(findDataSegment().props('value')).toEqual(['gamma']);
     });
   });
 

package/src/components/base/filtered_search/filtered_search_token.vue

@@ -1,6 +1,6 @@
 <script>
 import cloneDeep from 'lodash/cloneDeep';
-import { COMMA } from '../../../utils/constants';
+import isEqual from 'lodash/isEqual';
 import GlToken from '../token/token.vue';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment.vue';
 import { createTerm, tokenToOption, TOKEN_CLOSE_SELECTOR } from './filtered_search_utils';
@@ -97,8 +97,13 @@ export default {
       return this.config.operators || DEFAULT_OPERATORS;
     },
 
+    tokenEmpty() {
+      return this.tokenValue.data?.length === 0;
+    },
+
     hasDataOrDataSegmentIsCurrentlyActive() {
-      return this.tokenValue.data !== '' || this.isSegmentActive(SEGMENT_DATA);
+      const hasData = !this.tokenEmpty;
+      return hasData || this.isSegmentActive(SEGMENT_DATA);
     },
 
     availableTokensWithSelf() {
@@ -137,7 +142,7 @@ export default {
 
     value: {
       handler(newValue, oldValue) {
-        if (newValue?.data === oldValue?.data && newValue?.operator === oldValue?.operator) {
+        if (isEqual(newValue?.data, oldValue?.data) && newValue?.operator === oldValue?.operator) {
           return;
         }
 
@@ -147,20 +152,29 @@ export default {
 
     active: {
       immediate: true,
-      handler(newValue) {
-        if (newValue) {
+      handler(tokenIsActive) {
+        if (tokenIsActive) {
           this.intendedCursorPosition = this.cursorPosition;
           if (!this.activeSegment) {
-            this.activateSegment(this.tokenValue.data !== '' ? SEGMENT_DATA : SEGMENT_OPERATOR);
+            this.activateSegment(this.tokenEmpty ? SEGMENT_OPERATOR : SEGMENT_DATA);
           }
-        } else if (this.tokenValue.data === '') {
+        } else {
           this.activeSegment = null;
-          /**
-           * Emitted when token is about to be destroyed.
-           *
-           * @event destroy
-           */
-          this.$emit('destroy');
+
+          // restore multi select values if we have them
+          // otherwise destroy the token
+          if (this.config.multiSelect) {
+            this.$emit('input', { ...this.tokenValue, data: this.multiSelectValues || '' });
+          }
+
+          if (this.tokenEmpty && this.multiSelectValues.length === 0) {
+            /**
+             * Emitted when token is about to be destroyed.
+             *
+             * @event destroy
+             */
+            this.$emit('destroy');
+          }
         }
       },
     },
@@ -206,7 +220,7 @@ export default {
     },
 
     replaceWithTermIfEmpty() {
-      if (this.tokenValue.operator === '' && this.tokenValue.data === '') {
+      if (this.tokenValue.operator === '' && this.tokenEmpty) {
         /**
          * Emitted when this token is converted to another type
          * @property {object} token Replacement token configuration
@@ -252,7 +266,7 @@ export default {
         key.length === 1 &&
         !this.operators.find(({ value }) => value.startsWith(potentialValue))
       ) {
-        if (this.tokenValue.data === '') {
+        if (this.tokenEmpty) {
           applySuggestion(suggestedValue);
         } else {
           evt.preventDefault();
@@ -288,9 +302,6 @@ export default {
     },
 
     handleComplete() {
-      if (this.config.multiSelect) {
-        this.$emit('input', { ...this.tokenValue, data: this.multiSelectValues.join(COMMA) });
-      }
       /**
        * Emitted when the token entry has been completed.
        *

package/src/components/base/filtered_search/filtered_search_token_segment.spec.js

@@ -275,7 +275,7 @@ describe('Filtered search token segment', () => {
       createComponent({
         active: true,
         multiSelect: true,
-        value: 'beta',
+        value: ['alpha', 'beta'],
       });
     });
 

package/src/components/base/filtered_search/filtered_search_token_segment.vue

@@ -1,7 +1,7 @@
 <script>
 import last from 'lodash/last';
 import { Portal } from 'portal-vue';
-import { COMMA, LEFT_MOUSE_BUTTON } from '../../../utils/constants';
+import { LEFT_MOUSE_BUTTON } from '../../../utils/constants';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
 import GlFilteredSearchSuggestionList from './filtered_search_suggestion_list.vue';
 import { splitOnQuotes, wrapTokenInQuotes, match, TERM_TOKEN_TYPE } from './filtered_search_utils';
@@ -152,7 +152,7 @@ export default {
     },
 
     nonMultipleValue() {
-      return this.multiSelect ? last(this.value.split(COMMA)) : this.value;
+      return Array.isArray(this.value) ? last(this.value) : this.value;
     },
 
     inputValue: {
@@ -228,6 +228,8 @@ export default {
     inputValue(newValue) {
       if (this.termsAsTokens()) return;
 
+      if (this.multiSelect) return;
+
       const hasUnclosedQuote = newValue.split('"').length % 2 === 0;
       if (newValue.indexOf(' ') === -1 || hasUnclosedQuote) {
         return;

package/src/components/experimental/experiment_badge/experiment_badge.md

@@ -0,0 +1,9 @@
+The component is representing a badge, marking the experimental features.
+It is supposed to be used with the AI experiments, and comes with a popover explaining
+what experiment means.
+
+## Usage
+
+```html
+<gl-experiment-badge experiment-help-page-url="https://gitlab.com" popover-placement="bottom" />
+```

package/src/components/experimental/experiment_badge/experiment_badge.spec.js

@@ -0,0 +1,66 @@
+import { shallowMount } from '@vue/test-utils';
+import GlBadge from '../../base/badge/badge.vue';
+import GlPopover from '../../base/popover/popover.vue';
+import GlLink from '../../base/link/link.vue';
+import GlSprintf from '../../utilities/sprintf/sprintf.vue';
+import GlExperimentBadge, { i18n } from './experiment_badge.vue';
+
+jest.mock('lodash/uniqueId', () => () => 'fakeUniqueId');
+
+describe('GlExperimentBadge', () => {
+  let wrapper;
+
+  const findBadge = () => wrapper.findComponent(GlBadge);
+  const findPopover = () => wrapper.findComponent(GlPopover);
+  const findHelpLink = () => wrapper.findComponent(GlLink);
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(GlExperimentBadge, {
+      propsData: {
+        ...props,
+      },
+      stubs: {
+        GlSprintf,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  it('renders main components', () => {
+    expect(findBadge().exists()).toBe(true);
+    expect(findPopover().exists()).toBe(true);
+  });
+
+  it('sets correct props on the badge', () => {
+    const badgeType = 'neutral';
+    const badgeSize = 'md';
+    expect(findBadge().props('variant')).toBe(badgeType);
+    expect(findBadge().props('size')).toBe(badgeSize);
+    expect(findBadge().find('span').text()).toBe(i18n.EXPERIMENT_BADGE);
+  });
+
+  it('sets correct props on the popover', () => {
+    expect(findPopover().props('triggers')).toBe('click');
+    expect(findPopover().props('title')).toBe(i18n.EXPERIMENT_POPOVER_TITLE);
+  });
+
+  it('correctly sets the placement of the popover', () => {
+    const popoverPlacement = 'right';
+    createComponent({ popoverPlacement });
+    expect(findPopover().props('placement')).toBe(popoverPlacement);
+  });
+
+  it('sets the link to the help page if passed', () => {
+    const experimentHelpPageUrl = 'https://gitlab.com';
+    createComponent({ experimentHelpPageUrl });
+    expect(findHelpLink().attributes('href')).toBe(experimentHelpPageUrl);
+  });
+
+  it('generates the unique ID to connect the button and the popover', () => {
+    expect(findBadge().attributes('id')).toBe('fakeUniqueId');
+    expect(findPopover().attributes('target')).toBe('fakeUniqueId');
+  });
+});

package/src/components/experimental/experiment_badge/experiment_badge.stories.js

@@ -0,0 +1,56 @@
+import GlExperimentBadge from './experiment_badge.vue';
+import readme from './experiment_badge.md';
+
+const defaultValue = (prop) => GlExperimentBadge.props[prop].default;
+
+const generateProps = ({
+  experimentHelpPageUrl = defaultValue('experimentHelpPageUrl'),
+  popoverPlacement = defaultValue('popoverPlacement'),
+} = {}) => ({
+  experimentHelpPageUrl,
+  popoverPlacement,
+});
+
+const Template = (args, { argTypes }) => ({
+  components: { GlExperimentBadge },
+  props: Object.keys(argTypes),
+  template: `
+    <div class='gl-h-13'>
+      <gl-experiment-badge
+        :experiment-help-page-url='experimentHelpPageUrl'
+        :popover-placement='popoverPlacement' />
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export const WithHelpPageUrl = Template.bind({});
+WithHelpPageUrl.args = {
+  ...generateProps({
+    experimentHelpPageUrl:
+      'https://docs.gitlab.com/ee/policy/experiment-beta-support.html#experiment',
+  }),
+};
+
+export const CustomPlacement = Template.bind({});
+CustomPlacement.args = {
+  ...generateProps({
+    popoverPlacement: 'right',
+  }),
+};
+
+export default {
+  title: 'experimental/experiment_badge',
+  component: GlExperimentBadge,
+  parameters: {
+    storyshots: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {},
+};

package/src/components/experimental/experiment_badge/experiment_badge.vue

@@ -0,0 +1,84 @@
+<script>
+import uniqueId from 'lodash/uniqueId';
+import { GlBadge, GlLink, GlPopover } from '../../../index';
+import GlSprintf from '../../utilities/sprintf/sprintf.vue';
+
+export const i18n = {
+  EXPERIMENT_BADGE: 'Experiment',
+  EXPERIMENT_POPOVER_TITLE: "What's an Experiment?",
+  EXPERIMENT_POPOVER_CONTENT:
+    "An %{linkStart}Experiment%{linkEnd} is a feature that's in the process of being developed. It's not production-ready. We encourage users to try Experimental features and provide feedback. An Experiment: %{bullets}",
+  EXPERIMENT_POPOVER_BULLETS: [
+    'May be unstable',
+    'Has no support and might not be documented',
+    'Can be removed at any time',
+  ],
+};
+
+export default {
+  name: 'GlExperimentBadge',
+  i18n,
+  components: {
+    GlBadge,
+    GlPopover,
+    GlSprintf,
+    GlLink,
+  },
+  props: {
+    /**
+     * The URL of a page to provide more explanations on the experiment.
+     */
+    experimentHelpPageUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    /**
+     * The placement of the popover in relation to the button.
+     */
+    popoverPlacement: {
+      type: String,
+      required: false,
+      default: 'bottom',
+    },
+  },
+  created() {
+    this.triggerId = uniqueId('experiment-badge-');
+  },
+};
+</script>
+
+<template>
+  <gl-badge :id="triggerId" class="gl-mx-4 gl-hover-cursor-pointer" variant="neutral" size="md">
+    <span>{{ $options.i18n.EXPERIMENT_BADGE }}</span>
+    <gl-popover
+      triggers="click"
+      show-close-button
+      :placement="popoverPlacement"
+      :target="triggerId"
+      :css-classes="['gl-z-index-9999!']"
+      :title="$options.i18n.EXPERIMENT_POPOVER_TITLE"
+    >
+      <gl-sprintf :message="$options.i18n.EXPERIMENT_POPOVER_CONTENT">
+        <template #link="{ content }">
+          <gl-link
+            v-if="experimentHelpPageUrl"
+            :href="experimentHelpPageUrl"
+            target="_blank"
+            class="gl-font-sm!"
+          >
+            {{ content }}
+          </gl-link>
+          <span v-else>{{ content }}</span>
+        </template>
+        <template #bullets>
+          <ul class="gl-mb-0 gl-pl-5">
+            <li v-for="(item, i) in $options.i18n.EXPERIMENT_POPOVER_BULLETS" :key="`li-${i}`">
+              {{ item }}
+            </li>
+          </ul>
+        </template>
+      </gl-sprintf>
+    </gl-popover>
+  </gl-badge>
+</template>

package/src/index.js

@@ -96,6 +96,9 @@ export { default as GlAccordionItem } from './components/base/accordion/accordio
 export { default as GlCarousel } from './components/base/carousel/carousel.vue';
 export { default as GlCarouselSlide } from './components/base/carousel/carousel_slide.vue';
 
+// Experimental
+export { default as GlExperimentBadge } from './components/experimental/experiment_badge/experiment_badge.vue';
+
 // Utilities
 export { default as GlAnimatedNumber } from './components/utilities/animated_number/animated_number.vue';
 export { default as GlFriendlyWrap } from './components/utilities/friendly_wrap/friendly_wrap.vue';