@gitlab/ui 32.10.2 → 32.11.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [32.11.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.10.2...v32.11.0) (2021-09-16)
+
+
+### Features
+
+* **GlDropdown:** Adds highlighted items slot ([3ac35ed](https://gitlab.com/gitlab-org/gitlab-ui/commit/3ac35edcc307963a2695602567027b6c9019c7d5))
+
 ## [32.10.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.10.1...v32.10.2) (2021-09-15)
 
 

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

@@ -5,6 +5,7 @@ import ButtonMixin from '../../mixins/button_mixin';
 import GlButton from '../button/button';
 import GlIcon from '../icon/icon';
 import GlLoadingIcon from '../loading_icon/loading_icon';
+import GlDropdownDivider from './dropdown_divider';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 function filterVisible(els) {
@@ -28,6 +29,7 @@ var script = {
   components: {
     BDropdown: ExtendedBDropdown,
     GlButton,
+    GlDropdownDivider,
     GlIcon,
     GlLoadingIcon
   },
@@ -58,6 +60,21 @@ var script = {
       required: false,
       default: ''
     },
+    showHighlightedItemsTitle: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    highlightedItemsTitle: {
+      type: String,
+      required: false,
+      default: 'Selected'
+    },
+    highlightedItemsTitleClass: {
+      type: String,
+      required: false,
+      default: 'gl-px-5'
+    },
     textSrOnly: {
       type: Boolean,
       required: false,
@@ -156,6 +173,14 @@ var script = {
 
     buttonText() {
       return this.split && this.icon ? null : this.text;
+    },
+
+    hasHighlightedItemsContent() {
+      return this.hasSlotContents('highlighted-items');
+    },
+
+    hasHighlightedItemsOrClearAll() {
+      return this.showHighlightedItemsTitle || this.showClearAll;
     }
 
   },
@@ -179,7 +204,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-dropdown',_vm._g(_vm._b({ref:"dropdown",staticClass:"gl-new-dropdown",attrs:{"split":_vm.split,"variant":_vm.variant,"size":_vm.buttonSize,"toggle-class":[_vm.toggleButtonClasses],"split-class":_vm.splitButtonClasses,"block":_vm.block,"disabled":_vm.disabled || _vm.loading,"right":_vm.right},scopedSlots:_vm._u([{key:"button-content",fn:function(){return [_vm._t("button-content",[(_vm.loading)?_c('gl-loading-icon',{staticClass:"gl-mr-2"}):_vm._e(),_vm._v(" "),(_vm.icon)?_c('gl-icon',{staticClass:"dropdown-icon",attrs:{"name":_vm.icon}}):_vm._e(),_vm._v(" "),_c('span',{staticClass:"gl-new-dropdown-button-text",class:{ 'gl-sr-only': _vm.textSrOnly }},[_vm._t("button-text",[_vm._v(_vm._s(_vm.buttonText))])],2),_vm._v(" "),(_vm.renderCaret)?_c('gl-icon',{staticClass:"gl-button-icon dropdown-chevron",attrs:{"name":"chevron-down"}}):_vm._e()])]},proxy:true}],null,true)},'b-dropdown',_vm.$attrs,false),_vm.$listeners),[_c('div',{staticClass:"gl-new-dropdown-inner"},[(_vm.hasSlotContents('header') || _vm.headerText)?_c('div',{staticClass:"gl-new-dropdown-header",class:{ 'gl-border-b-0!': _vm.hideHeaderBorder }},[(_vm.headerText)?_c('p',{staticClass:"gl-new-dropdown-header-top"},[_vm._v("\n        "+_vm._s(_vm.headerText)+"\n      ")]):_vm._e(),_vm._v(" "),_vm._t("header")],2):_vm._e(),_vm._v(" "),(_vm.showClearAll)?_c('div',{staticClass:"gl-text-right gl-px-5"},[_c('gl-button',{attrs:{"size":"small","category":"tertiary","variant":"link","data-testid":"clear-all-button"},on:{"click":function($event){return _vm.$emit('clear-all')}}},[_vm._v(_vm._s(_vm.clearAllText))])],1):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-new-dropdown-contents"},[_vm._t("default")],2),_vm._v(" "),(_vm.hasSlotContents('footer'))?_c('div',{staticClass:"gl-new-dropdown-footer"},[_vm._t("footer")],2):_vm._e()])])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-dropdown',_vm._g(_vm._b({ref:"dropdown",staticClass:"gl-new-dropdown",attrs:{"split":_vm.split,"variant":_vm.variant,"size":_vm.buttonSize,"toggle-class":[_vm.toggleButtonClasses],"split-class":_vm.splitButtonClasses,"block":_vm.block,"disabled":_vm.disabled || _vm.loading,"right":_vm.right},scopedSlots:_vm._u([{key:"button-content",fn:function(){return [_vm._t("button-content",[(_vm.loading)?_c('gl-loading-icon',{staticClass:"gl-mr-2"}):_vm._e(),_vm._v(" "),(_vm.icon)?_c('gl-icon',{staticClass:"dropdown-icon",attrs:{"name":_vm.icon}}):_vm._e(),_vm._v(" "),_c('span',{staticClass:"gl-new-dropdown-button-text",class:{ 'gl-sr-only': _vm.textSrOnly }},[_vm._t("button-text",[_vm._v(_vm._s(_vm.buttonText))])],2),_vm._v(" "),(_vm.renderCaret)?_c('gl-icon',{staticClass:"gl-button-icon dropdown-chevron",attrs:{"name":"chevron-down"}}):_vm._e()])]},proxy:true}],null,true)},'b-dropdown',_vm.$attrs,false),_vm.$listeners),[_c('div',{staticClass:"gl-new-dropdown-inner"},[(_vm.hasSlotContents('header') || _vm.headerText)?_c('div',{staticClass:"gl-new-dropdown-header",class:{ 'gl-border-b-0!': _vm.hideHeaderBorder }},[(_vm.headerText)?_c('p',{staticClass:"gl-new-dropdown-header-top"},[_vm._v("\n        "+_vm._s(_vm.headerText)+"\n      ")]):_vm._e(),_vm._v(" "),_vm._t("header")],2):_vm._e(),_vm._v(" "),(_vm.hasHighlightedItemsOrClearAll)?_c('div',{staticClass:"gl-display-flex gl-flex-direction-row gl-justify-content-space-between gl-align-items-center",class:_vm.highlightedItemsTitleClass},[_c('div',{staticClass:"gl-display-flex"},[(_vm.hasHighlightedItemsContent && _vm.showHighlightedItemsTitle)?_c('span',{staticClass:"gl-font-weight-bold",attrs:{"data-testid":"highlighted-items-title"}},[_vm._v(_vm._s(_vm.highlightedItemsTitle))]):_vm._e()]),_vm._v(" "),_c('div',{staticClass:"gl-display-flex"},[(_vm.showClearAll)?_c('gl-button',{attrs:{"size":"small","category":"tertiary","variant":"link","data-testid":"clear-all-button"},on:{"click":function($event){return _vm.$emit('clear-all')}}},[_vm._v(_vm._s(_vm.clearAllText))]):_vm._e()],1)]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-new-dropdown-contents"},[(_vm.hasHighlightedItemsContent)?_c('div',{staticClass:"gl-overflow-visible",attrs:{"data-testid":"highlighted-items"}},[_vm._t("highlighted-items"),_vm._v(" "),_c('gl-dropdown-divider')],2):_vm._e(),_vm._v(" "),_vm._t("default")],2),_vm._v(" "),(_vm.hasSlotContents('footer'))?_c('div',{staticClass:"gl-new-dropdown-footer"},[_vm._t("footer")],2):_vm._e()])])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/dropdown/examples/dropdown.with_highlighted_items.example.js

@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-dropdown',{attrs:{"text":"Some dropdown"},scopedSlots:_vm._u([{key:"highlighted-items",fn:function(){return [_c('gl-dropdown-item',[_vm._v("First item")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Second item")])]},proxy:true}])},[_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Last item")])],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_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;

package/dist/components/base/dropdown/examples/index.js

@@ -6,6 +6,7 @@ import DropdownClearAllExample from './dropdown.with_clear_all.example';
 import DropdownWithDividerExample from './dropdown.with_divider.example';
 import DropdownWithFormExample from './dropdown.with_form.example';
 import DropdownWithHeaderExample from './dropdown.with_header.example';
+import DropdownWithHighlightedItemsExample from './dropdown.with_highlighted_items.example';
 import DropdownWithIcons from './dropdown.with_icons.example';
 import DropdownWithRightAlignExample from './dropdown.with_right_align.example';
 import DropdownWithSearchExample from './dropdown.with_search.example';
@@ -33,6 +34,11 @@ var index = [{
     name: 'With Header',
     description: 'Dropdown with section header',
     component: DropdownWithHeaderExample
+  }, {
+    id: 'new-dropdown-with-highlighted-items',
+    name: 'With Highlighted items',
+    description: 'Dropdown with highlighted items',
+    component: DropdownWithHighlightedItemsExample
   }, {
     id: 'new-dropdown-with-section-headers',
     name: 'With Section Headers',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.10.2",
+  "version": "32.11.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -60,7 +60,7 @@
     "@babel/standalone": "^7.0.0",
     "bootstrap-vue": "2.18.1",
     "copy-to-clipboard": "^3.0.8",
-    "dompurify": "^2.3.1",
+    "dompurify": "^2.3.2",
     "echarts": "^4.9.0",
     "highlight.js": "^10.6.0",
     "js-beautify": "^1.8.8",

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

@@ -26,11 +26,16 @@ describe('new dropdown', () => {
 
   afterEach(() => wrapper.destroy());
 
+  const findByTestId = (testId) => wrapper.find(`[data-testid="${testId}"]`);
+
   const findSplitButton = () => wrapper.find('.btn:not(.gl-dropdown-toggle)');
   const findDropdownToggle = () => wrapper.find('.btn.gl-dropdown-toggle');
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findIcon = () => wrapper.find('.dropdown-icon');
   const findCaret = () => wrapper.find('.dropdown-chevron');
+  const findClearAll = () => findByTestId('clear-all-button');
+  const findHighlightedItemsTitle = () => findByTestId('highlighted-items-title');
+  const findHighlightedItems = () => findByTestId('highlighted-items');
 
   it('renders when text is null', () => {
     buildWrapper({ text: null });
@@ -225,6 +230,84 @@ describe('new dropdown', () => {
     });
   });
 
+  describe('Highlighted items', () => {
+    describe('with slot content', () => {
+      const slotContent = '<li>Highlighted items Content</li>';
+      const slots = { 'highlighted-items': slotContent };
+
+      beforeEach(() => {
+        buildWrapper({}, slots);
+      });
+
+      it('renders the highlighted items', () => {
+        expect(findHighlightedItems().exists()).toBe(true);
+        expect(findHighlightedItems().html()).toContain(slotContent);
+      });
+
+      it('renders the default highlighted items title', () => {
+        expect(findHighlightedItemsTitle().exists()).toBe(true);
+        expect(findHighlightedItemsTitle().html()).toContain('Selected');
+      });
+
+      describe('with showHighlightedItemsTitle=false', () => {
+        beforeEach(() => {
+          buildWrapper({ showHighlightedItemsTitle: false }, slots);
+        });
+
+        it('does not render the highlighted items header', () => {
+          expect(findHighlightedItemsTitle().exists()).toBe(false);
+        });
+      });
+
+      describe('with showClearAll=true and showHighlightedItemsTitle=false', () => {
+        beforeEach(() => {
+          buildWrapper({ showHighlightedItemsTitle: false, showClearAll: true }, slots);
+        });
+
+        it('renders the clear all button and does not render the highlighted items title', () => {
+          expect(findClearAll().exists()).toBe(true);
+          expect(findHighlightedItemsTitle().exists()).toBe(false);
+        });
+      });
+
+      describe('with showClearAll=true and showHighlightedItemsTitle=true', () => {
+        beforeEach(() => {
+          buildWrapper({ showHighlightedItemsTitle: true, showClearAll: true }, slots);
+        });
+
+        it('renders the clear all button and the highlighted items title', () => {
+          expect(findClearAll().exists()).toBe(true);
+          expect(findHighlightedItemsTitle().exists()).toBe(true);
+        });
+      });
+
+      describe('with highlightedItemsTitle set', () => {
+        const highlightedItemsTitle = 'Cool heading';
+        beforeEach(() => {
+          buildWrapper({ highlightedItemsTitle }, slots);
+        });
+
+        it('sets the highlighted items title', () => {
+          expect(findHighlightedItemsTitle().exists()).toBe(true);
+          expect(findHighlightedItemsTitle().text()).not.toContain('Selected');
+          expect(findHighlightedItemsTitle().text()).toContain(highlightedItemsTitle);
+        });
+      });
+    });
+
+    describe('with no slot content', () => {
+      beforeEach(() => {
+        buildWrapper();
+      });
+      it('does not render the highlighted items content', () => {
+        expect(findHighlightedItems().exists()).toBe(false);
+      });
+      it('does not render the highlighted items title', () => {
+        expect(findHighlightedItemsTitle().exists()).toBe(false);
+      });
+    });
+  });
+
   describe('button content templates', () => {
     const mockComponent = {
       template: '<span>mock</span>',
@@ -250,7 +333,6 @@ describe('new dropdown', () => {
   });
 
   describe('Clear all button', () => {
-    const findClearAll = () => wrapper.find('[data-testid="clear-all-button"]');
     it('is not visible by default', () => {
       buildWrapper({});
 

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

@@ -45,6 +45,9 @@ function generateProps({
   hideHeaderBorder = true,
   showClearAll = false,
   clearAllText = '',
+  showHighlightedItemsTitle = false,
+  highlightedItemsTitle = '',
+  highlightedItemsTitleClass = '',
 } = {}) {
   const props = {
     category: {
@@ -107,6 +110,18 @@ function generateProps({
       type: String,
       default: textKnob('clear all text', clearAllText),
     },
+    showHighlightedItemsTitle: {
+      type: Boolean,
+      default: boolean('show highlighted items title', showHighlightedItemsTitle),
+    },
+    highlightedItemsTitle: {
+      type: String,
+      default: textKnob('highlighted items title', highlightedItemsTitle),
+    },
+    highlightedItemsTitleClass: {
+      type: String,
+      default: textKnob('highlighted items title class', highlightedItemsTitleClass),
+    },
     right: {
       type: Boolean,
       default: boolean('right', false),
@@ -134,6 +149,9 @@ function wrap([template]) {
       :hide-header-border="hideHeaderBorder"
       :show-clear-all="showClearAll"
       :clear-all-text="clearAllText"
+      :show-highlighted-items-title="showHighlightedItemsTitle"
+      :highlighted-items-title="highlightedItemsTitle"
+      :highlighted-items-title-class="highlightedItemsTitleClass"
       :loading="loading"
       :right="right"
     >
@@ -445,6 +463,7 @@ documentedStoriesOf('base/dropdown', readme)
       text: 'Some dropdown',
       showClearAll: true,
       clearAllText: 'Clear all',
+      highlightedItemsTitleClass: 'gl-px-5',
     }),
     components,
     template: wrap`
@@ -457,4 +476,27 @@ documentedStoriesOf('base/dropdown', readme)
     updated() {
       addClass(this);
     },
+  }))
+  .add('with highlighted items', () => ({
+    props: generateProps({
+      text: 'Some dropdown',
+      showHighlightedItemsTitle: true,
+      highlightedItemsTitle: 'Highlights',
+      highlightedItemsTitleClass: 'gl-px-5',
+    }),
+    components,
+    template: wrap`
+      <template #highlighted-items>
+        <gl-dropdown-item :is-check-item="true" :is-checked="true">First item</gl-dropdown-item>
+        <gl-dropdown-item :is-check-item="true" :is-checked="true">Second item</gl-dropdown-item>
+      </template>
+      <gl-dropdown-item>Third item</gl-dropdown-item>
+      <gl-dropdown-item>Fourth item</gl-dropdown-item>
+      `,
+    mounted() {
+      clickDropdown(this);
+    },
+    updated() {
+      addClass(this);
+    },
   }));

package/src/components/base/dropdown/dropdown.vue

@@ -10,6 +10,7 @@ import ButtonMixin from '../../mixins/button_mixin';
 import GlButton from '../button/button.vue';
 import GlIcon from '../icon/icon.vue';
 import GlLoadingIcon from '../loading_icon/loading_icon.vue';
+import GlDropdownDivider from './dropdown_divider.vue';
 
 // Return an Array of visible items
 function filterVisible(els) {
@@ -35,6 +36,7 @@ export default {
   components: {
     BDropdown: ExtendedBDropdown,
     GlButton,
+    GlDropdownDivider,
     GlIcon,
     GlLoadingIcon,
   },
@@ -65,6 +67,21 @@ export default {
       required: false,
       default: '',
     },
+    showHighlightedItemsTitle: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    highlightedItemsTitle: {
+      type: String,
+      required: false,
+      default: 'Selected',
+    },
+    highlightedItemsTitleClass: {
+      type: String,
+      required: false,
+      default: 'gl-px-5',
+    },
     textSrOnly: {
       type: Boolean,
       required: false,
@@ -166,6 +183,12 @@ export default {
     buttonText() {
       return this.split && this.icon ? null : this.text;
     },
+    hasHighlightedItemsContent() {
+      return this.hasSlotContents('highlighted-items');
+    },
+    hasHighlightedItemsOrClearAll() {
+      return this.showHighlightedItemsTitle || this.showClearAll;
+    },
   },
   methods: {
     hasSlotContents(slotName) {
@@ -180,7 +203,6 @@ export default {
   },
 };
 </script>
-
 <template>
   <b-dropdown
     ref="dropdown"
@@ -207,17 +229,40 @@ export default {
         </p>
         <slot name="header"></slot>
       </div>
-      <div v-if="showClearAll" class="gl-text-right gl-px-5">
-        <gl-button
-          size="small"
-          category="tertiary"
-          variant="link"
-          data-testid="clear-all-button"
-          @click="$emit('clear-all')"
-          >{{ clearAllText }}</gl-button
-        >
+      <div
+        v-if="hasHighlightedItemsOrClearAll"
+        class="gl-display-flex gl-flex-direction-row gl-justify-content-space-between gl-align-items-center"
+        :class="highlightedItemsTitleClass"
+      >
+        <div class="gl-display-flex">
+          <span
+            v-if="hasHighlightedItemsContent && showHighlightedItemsTitle"
+            class="gl-font-weight-bold"
+            data-testid="highlighted-items-title"
+            >{{ highlightedItemsTitle }}</span
+          >
+        </div>
+        <div class="gl-display-flex">
+          <gl-button
+            v-if="showClearAll"
+            size="small"
+            category="tertiary"
+            variant="link"
+            data-testid="clear-all-button"
+            @click="$emit('clear-all')"
+            >{{ clearAllText }}</gl-button
+          >
+        </div>
       </div>
       <div class="gl-new-dropdown-contents">
+        <div
+          v-if="hasHighlightedItemsContent"
+          class="gl-overflow-visible"
+          data-testid="highlighted-items"
+        >
+          <slot name="highlighted-items"></slot>
+          <gl-dropdown-divider />
+        </div>
         <slot></slot>
       </div>
       <div v-if="hasSlotContents('footer')" class="gl-new-dropdown-footer">

package/src/components/base/dropdown/examples/dropdown.with_highlighted_items.example.vue

@@ -0,0 +1,9 @@
+<template>
+  <gl-dropdown text="Some dropdown">
+    <template #highlighted-items>
+      <gl-dropdown-item>First item</gl-dropdown-item>
+      <gl-dropdown-item>Second item</gl-dropdown-item>
+    </template>
+    <gl-dropdown-item>Last item</gl-dropdown-item>
+  </gl-dropdown>
+</template>

package/src/components/base/dropdown/examples/index.js

@@ -6,6 +6,7 @@ import DropdownClearAllExample from './dropdown.with_clear_all.example.vue';
 import DropdownWithDividerExample from './dropdown.with_divider.example.vue';
 import DropdownWithFormExample from './dropdown.with_form.example.vue';
 import DropdownWithHeaderExample from './dropdown.with_header.example.vue';
+import DropdownWithHighlightedItemsExample from './dropdown.with_highlighted_items.example.vue';
 import DropdownWithIcons from './dropdown.with_icons.example.vue';
 import DropdownWithRightAlignExample from './dropdown.with_right_align.example.vue';
 import DropdownWithSearchExample from './dropdown.with_search.example.vue';
@@ -39,6 +40,12 @@ export default [
         description: 'Dropdown with section header',
         component: DropdownWithHeaderExample,
       },
+      {
+        id: 'new-dropdown-with-highlighted-items',
+        name: 'With Highlighted items',
+        description: 'Dropdown with highlighted items',
+        component: DropdownWithHighlightedItemsExample,
+      },
       {
         id: 'new-dropdown-with-section-headers',
         name: 'With Section Headers',