@gitlab/ui 33.0.1 → 33.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "33.0.1",
+  "version": "33.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/popover/popover.scss

@@ -67,11 +67,6 @@ $gl-popover-max-width: $grid-size * 35;
     @include gl-font-sm;
     @include gl-font-weight-bold;
     @include gl-m-0;
-
-    .gl-button.close {
-      margin-top: -$gl-spacing-scale-3;
-      margin-right: -$gl-spacing-scale-4;
-    }
   }
 
   .popover-body {

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

@@ -5,16 +5,18 @@ import GlPopover from './popover.vue';
 describe('GlPopover', () => {
   let wrapper;
 
-  const createWrapper = (props) => {
+  const createWrapper = (props, stubs = {}) => {
     wrapper = shallowMount(GlPopover, {
       propsData: {
         target: document.body,
         ...props,
       },
+      stubs,
     });
   };
 
   const findBVPopover = () => wrapper.findComponent({ ref: 'bPopover' });
+  const findCloseButton = () => findBVPopover().find('[data-testid="close-button"]');
 
   it.each(tooltipActionEvents)('passes through the %s event to the bvPopover instance', (event) => {
     createWrapper();
@@ -46,4 +48,43 @@ describe('GlPopover', () => {
       expect(findBVPopover().props('title')).toBe(title);
     });
   });
+
+  describe('close button', () => {
+    let doCloseMock;
+
+    beforeEach(() => {
+      doCloseMock = jest.fn();
+      createWrapper(
+        { showCloseButton: true },
+        {
+          BPopover: {
+            template: `
+              <div>
+                <slot name="title" />
+              </div>
+            `,
+            methods: {
+              doClose: doCloseMock,
+            },
+          },
+        }
+      );
+    });
+
+    it('renders a close button', () => {
+      expect(findCloseButton().exists()).toBe(true);
+    });
+
+    it("calls BPopover's doClose method when clicking on the close button", () => {
+      findCloseButton().vm.$emit('click');
+
+      expect(doCloseMock).toHaveBeenCalled();
+    });
+
+    it('emits close-button-clicked event when clicking on the close button', () => {
+      findCloseButton().vm.$emit('click');
+
+      expect(wrapper.emitted('close-button-clicked')).toHaveLength(1);
+    });
+  });
 });

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

@@ -60,6 +60,24 @@ documentedStoriesOf('base/popover', '')
     template,
     props: generateProps(),
   }))
+  .add('with close button', () => ({
+    template: `
+      <div class="gl-display-flex gl-justify-content-center gl-p-6">
+        <gl-button id="pop-with-close-button">{{placement}}</gl-button>
+        <gl-popover
+          target="pop-with-close-button"
+          data-testid="popover-with-close-button"
+          triggers="hover focus"
+          :title="title"
+          :placement="placement"
+          content="${contentString}"
+          show
+          show-close-button
+          />
+      </div>
+    `,
+    props: generateProps(),
+  }))
   .add(
     'on click',
     () => ({

package/src/components/base/popover/popover.vue

@@ -1,12 +1,14 @@
 <script>
 import { BPopover } from 'bootstrap-vue';
 import tooltipMixin from '../../mixins/tooltip_mixin';
+import CloseButton from '../../shared_components/close_button/close_button.vue';
 
 const popoverRefName = 'bPopover';
 
 export default {
   components: {
     BPopover,
+    CloseButton,
   },
   mixins: [tooltipMixin(popoverRefName)],
   inheritAttrs: false,
@@ -21,11 +23,30 @@ export default {
       required: false,
       default: 'hover focus',
     },
+    title: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    showCloseButton: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     customClass() {
       return ['gl-popover', ...this.cssClasses].join(' ');
     },
+    shouldShowTitle() {
+      return this.$scopedSlots.title || this.title || this.showCloseButton;
+    },
+  },
+  methods: {
+    close(e) {
+      this.$refs[popoverRefName].doClose();
+      this.$emit('close-button-clicked', e);
+    },
   },
   popoverRefName,
 };
@@ -36,11 +57,20 @@ export default {
     :ref="$options.popoverRefName"
     :custom-class="customClass"
     :triggers="triggers"
+    :title="title"
     v-bind="$attrs"
     v-on="$listeners"
   >
-    <template v-if="$scopedSlots.title" #title>
-      <slot name="title"></slot>
+    <template v-if="shouldShowTitle" #title>
+      <slot name="title">
+        {{ title }}
+      </slot>
+      <close-button
+        v-if="showCloseButton"
+        class="gl-float-right gl-mt-n2 gl-mr-n3"
+        data-testid="close-button"
+        @click="close"
+      />
     </template>
     <slot></slot>
   </b-popover>