@gitlab/ui 64.9.0 → 64.10.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [64.10.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.9.0...v64.10.0) (2023-06-14)
+
+
+### Features
+
+* **DisclosureDropdown:** borderPosition property ([ea7822e](https://gitlab.com/gitlab-org/gitlab-ui/commit/ea7822e20992c6a0fc074f8ab3766b3145c09c00))
+* **GlKeysetPagination:** add navigation landmark ([3ffd2f7](https://gitlab.com/gitlab-org/gitlab-ui/commit/3ffd2f79b3029504a6e1b831df23904ca8473d06))
+
 # [64.9.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.8.0...v64.9.0) (2023-06-14)
 
 

package/dist/components/base/keyset_pagination/keyset_pagination.js

@@ -10,6 +10,7 @@ var script = {
     GlButton,
     GlIcon
   },
+  inheritAttrs: false,
   props: {
     // The following 4 properties match the default names of the
     // [PageInfo](https://docs.gitlab.com/ee/api/graphql/reference/index.html#pageinfo)
@@ -68,6 +69,15 @@ var script = {
       required: false,
       default: null
     },
+    /**
+     * The aria-label that needs to be set for the
+     * pagination landmark region.
+     */
+    navigationLabel: {
+      type: String,
+      required: false,
+      default: 'Pagination'
+    },
     /**
      * The text that will be rendered inside the "Next" button.
      * It\'s important to provide this parameter since the default text is not translatable.
@@ -101,7 +111,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('gl-button-group',_vm._g(_vm._b({staticClass:"gl-keyset-pagination"},'gl-button-group',_vm.$attrs,false),_vm.$listeners),[_c('gl-button',{attrs:{"href":_vm.prevButtonLink,"disabled":_vm.disabled || !_vm.hasPreviousPage,"data-testid":"prevButton"},on:{"click":function($event){return _vm.$emit('prev', _vm.startCursor)}}},[_vm._t("previous-button-content",function(){return [_c('div',{staticClass:"gl-display-flex gl-align-center"},[_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v("\n        "+_vm._s(_vm.prevText)+"\n      ")],1)]})],2),_vm._v(" "),_c('gl-button',{attrs:{"href":_vm.nextButtonLink,"disabled":_vm.disabled || !_vm.hasNextPage,"data-testid":"nextButton"},on:{"click":function($event){return _vm.$emit('next', _vm.endCursor)}}},[_vm._t("next-button-content",function(){return [_c('div',{staticClass:"gl-display-flex gl-align-center"},[_vm._v("\n        "+_vm._s(_vm.nextText)+"\n        "),_c('gl-icon',{attrs:{"name":"chevron-right"}})],1)]})],2)],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('nav',{staticClass:"gl-pagination",attrs:{"aria-label":_vm.navigationLabel}},[_c('gl-button-group',_vm._g(_vm._b({staticClass:"gl-keyset-pagination"},'gl-button-group',_vm.$attrs,false),_vm.$listeners),[_c('gl-button',{attrs:{"href":_vm.prevButtonLink,"disabled":_vm.disabled || !_vm.hasPreviousPage,"data-testid":"prevButton"},on:{"click":function($event){return _vm.$emit('prev', _vm.startCursor)}}},[_vm._t("previous-button-content",function(){return [_c('div',{staticClass:"gl-display-flex gl-align-center"},[_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v("\n          "+_vm._s(_vm.prevText)+"\n        ")],1)]})],2),_vm._v(" "),_c('gl-button',{attrs:{"href":_vm.nextButtonLink,"disabled":_vm.disabled || !_vm.hasNextPage,"data-testid":"nextButton"},on:{"click":function($event){return _vm.$emit('next', _vm.endCursor)}}},[_vm._t("next-button-content",function(){return [_c('div',{staticClass:"gl-display-flex gl-align-center"},[_vm._v("\n          "+_vm._s(_vm.nextText)+"\n          "),_c('gl-icon',{attrs:{"name":"chevron-right"}})],1)]})],2)],1)],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/new_dropdowns/disclosure/constants.js

@@ -1,4 +1,8 @@
 const DISCLOSURE_DROPDOWN_ITEM_NAME = 'GlDisclosureDropdownItem';
 const DISCLOSURE_DROPDOWN_GROUP_NAME = 'GlDisclosureDropdownGroup';
+const DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS = {
+  top: 'top',
+  bottom: 'bottom'
+};
 
-export { DISCLOSURE_DROPDOWN_GROUP_NAME, DISCLOSURE_DROPDOWN_ITEM_NAME };
+export { DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS, DISCLOSURE_DROPDOWN_GROUP_NAME, DISCLOSURE_DROPDOWN_ITEM_NAME };

package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.js

@@ -1,10 +1,13 @@
 import uniqueId from 'lodash/uniqueId';
 import GlDisclosureDropdownItem from './disclosure_dropdown_item';
 import { isGroup } from './utils';
-import { DISCLOSURE_DROPDOWN_GROUP_NAME } from './constants';
+import { DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS, DISCLOSURE_DROPDOWN_GROUP_NAME } from './constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-const GROUP_TOP_BORDER_CLASSES = 'gl-border-t gl-pt-2 gl-mt-2';
+const BORDER_CLASSES = {
+  [DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS.top]: 'gl-border-t gl-pt-2 gl-mt-2',
+  [DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS.bottom]: 'gl-border-b gl-pb-2 gl-mb-2'
+};
 var script = {
   name: DISCLOSURE_DROPDOWN_GROUP_NAME,
   components: {
@@ -22,17 +25,29 @@ var script = {
     },
     /**
      * If 'true', will set top border for the group
-     * to separate from other groups
+     * to separate from other groups. You can control
+     * the border position using the `borderPosition`
+     * property.
      */
     bordered: {
       type: Boolean,
       required: false,
       default: false
+    },
+    /**
+     * Controls the position of the group's border. Valid
+     * values are 'top' and 'bottom'.
+     */
+    borderPosition: {
+      type: String,
+      required: false,
+      default: DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS.top,
+      validator: value => Object.keys(DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS).includes(value)
     }
   },
   computed: {
     borderClass() {
-      return this.bordered ? GROUP_TOP_BORDER_CLASSES : null;
+      return this.bordered ? BORDER_CLASSES[this.borderPosition] : null;
     },
     showHeader() {
       var _this$group;
@@ -92,4 +107,4 @@ var __vue_staticRenderFns__ = [];
   );
 
 export default __vue_component__;
-export { GROUP_TOP_BORDER_CLASSES };
+export { BORDER_CLASSES };

package/package.json

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

package/src/components/base/keyset_pagination/keyset_pagination.vue

@@ -10,6 +10,7 @@ export default {
     GlButton,
     GlIcon,
   },
+  inheritAttrs: false,
   props: {
     // The following 4 properties match the default names of the
     // [PageInfo](https://docs.gitlab.com/ee/api/graphql/reference/index.html#pageinfo)
@@ -68,6 +69,15 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * The aria-label that needs to be set for the
+     * pagination landmark region.
+     */
+    navigationLabel: {
+      type: String,
+      required: false,
+      default: 'Pagination',
+    },
     /**
      * The text that will be rendered inside the "Next" button.
      * It\'s important to provide this parameter since the default text is not translatable.
@@ -99,34 +109,36 @@ export default {
 </script>
 
 <template>
-  <gl-button-group class="gl-keyset-pagination" v-bind="$attrs" v-on="$listeners">
-    <gl-button
-      :href="prevButtonLink"
-      :disabled="disabled || !hasPreviousPage"
-      data-testid="prevButton"
-      @click="$emit('prev', startCursor)"
-    >
-      <!-- @slot Used to customize the appearance of the "Prev" button -->
-      <slot name="previous-button-content">
-        <div class="gl-display-flex gl-align-center">
-          <gl-icon name="chevron-left" />
-          {{ prevText }}
-        </div>
-      </slot>
-    </gl-button>
-    <gl-button
-      :href="nextButtonLink"
-      :disabled="disabled || !hasNextPage"
-      data-testid="nextButton"
-      @click="$emit('next', endCursor)"
-    >
-      <!-- @slot Used to customize the appearance of the "Next" button -->
-      <slot name="next-button-content">
-        <div class="gl-display-flex gl-align-center">
-          {{ nextText }}
-          <gl-icon name="chevron-right" />
-        </div>
-      </slot>
-    </gl-button>
-  </gl-button-group>
+  <nav class="gl-pagination" :aria-label="navigationLabel">
+    <gl-button-group class="gl-keyset-pagination" v-bind="$attrs" v-on="$listeners">
+      <gl-button
+        :href="prevButtonLink"
+        :disabled="disabled || !hasPreviousPage"
+        data-testid="prevButton"
+        @click="$emit('prev', startCursor)"
+      >
+        <!-- @slot Used to customize the appearance of the "Prev" button -->
+        <slot name="previous-button-content">
+          <div class="gl-display-flex gl-align-center">
+            <gl-icon name="chevron-left" />
+            {{ prevText }}
+          </div>
+        </slot>
+      </gl-button>
+      <gl-button
+        :href="nextButtonLink"
+        :disabled="disabled || !hasNextPage"
+        data-testid="nextButton"
+        @click="$emit('next', endCursor)"
+      >
+        <!-- @slot Used to customize the appearance of the "Next" button -->
+        <slot name="next-button-content">
+          <div class="gl-display-flex gl-align-center">
+            {{ nextText }}
+            <gl-icon name="chevron-right" />
+          </div>
+        </slot>
+      </gl-button>
+    </gl-button-group>
+  </nav>
 </template>

package/src/components/base/new_dropdowns/disclosure/constants.js

@@ -1,2 +1,6 @@
 export const DISCLOSURE_DROPDOWN_ITEM_NAME = 'GlDisclosureDropdownItem';
 export const DISCLOSURE_DROPDOWN_GROUP_NAME = 'GlDisclosureDropdownGroup';
+export const DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS = {
+  top: 'top',
+  bottom: 'bottom',
+};

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.md

@@ -91,7 +91,7 @@ template. If you want to render a custom template for items, use the
   <template #list-item="{ item }">
     <span class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
       {{item.text}}
-      <gl-icon v-if="item.icon" :name="item.icon"/>
+      <gl-icon v-if="item.icon" :name="item.icon" />
     </span>
   </template>
 </gl-disclosure-dropdown>
@@ -117,6 +117,16 @@ To render custom group labels, use the `group-label` scoped slot:
 </gl-disclosure-dropdown>
 ```
 
+To draw a horizontal line that separates two groups, set the `bordered` property.
+By default, the border appears above the group. You can change the border position
+using the `border-position` property:
+
+```html
+<gl-disclosure-dropdown>
+  <gl-disclosure-dropdown-group bordered border-position="bottom" :group="group" />
+</gl-disclosure-dropdown>
+```
+
 #### Miscellaneous content
 
 Besides default components, disclosure dropdown can render miscellaneous content inside it.
@@ -125,7 +135,7 @@ In this case the user is responsible for handling all events and navigation insi
 #### Dealing with long option texts
 
 - Some options might have long non-wrapping text that would overflow the dropdown maximum width. In
-such cases, it's recommended to override the `#list-item` slot and to truncate the option text using
-`GlTruncate`.
+  such cases, it's recommended to override the `#list-item` slot and to truncate the option text using
+  `GlTruncate`.
 - If the toggle text reflects the selected option text, it might be necessary to truncate
-it too by overriding the `#toggle` slot.
+  it too by overriding the `#toggle` slot.

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.stories.js

@@ -14,6 +14,7 @@ import { makeContainer } from '../../../../utils/story_decorators/container';
 import GlDisclosureDropdown from './disclosure_dropdown.vue';
 import GlDisclosureDropdownItem from './disclosure_dropdown_item.vue';
 import GlDisclosureDropdownGroup from './disclosure_dropdown_group.vue';
+import { DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS } from './constants';
 import readme from './disclosure_dropdown.md';
 import {
   mockItems,
@@ -229,7 +230,7 @@ export const CustomGroupsItemsAndToggle = makeGroupedExample({
           </template>
         </gl-disclosure-dropdown-item>
       </gl-disclosure-dropdown-group>
-      <gl-disclosure-dropdown-group bordered :group="$options.groups[0]" @action="closeDropdown">
+      <gl-disclosure-dropdown-group :bordered="bordered" :border-position="borderPosition" :group="$options.groups[0]" @action="closeDropdown">
         <template #list-item="{ item }">
           <span class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
             {{item.text}}
@@ -237,7 +238,7 @@ export const CustomGroupsItemsAndToggle = makeGroupedExample({
           </span>
         </template>
       </gl-disclosure-dropdown-group>
-      <gl-disclosure-dropdown-group bordered>
+      <gl-disclosure-dropdown-group :bordered="bordered" :border-position="borderPosition">
         <template #group-label>
           <span class="gl-font-sm">Navigation redesign</span>
           <gl-badge size="sm" variant="info">Beta</gl-badge>
@@ -253,7 +254,7 @@ export const CustomGroupsItemsAndToggle = makeGroupedExample({
           <template #list-item>Provide feedback</template>
         </gl-disclosure-dropdown-item>
       </gl-disclosure-dropdown-group>
-      <gl-disclosure-dropdown-group bordered :group="$options.groups[1]" @action="closeDropdown"/>
+      <gl-disclosure-dropdown-group :bordered="bordered" :border-position="borderPosition" :group="$options.groups[1]" @action="closeDropdown"/>
     `,
     {
       after: `
@@ -292,7 +293,18 @@ CustomGroupsItemsAndToggle.args = {
   toggleText: 'User profile menu',
   textSrOnly: true,
   autoClose: false,
+  bordered: true,
+  borderPosition: DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS.top,
 };
+CustomGroupsItemsAndToggle.argTypes = {
+  borderPosition: {
+    options: DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS,
+    control: {
+      type: 'select',
+    },
+  },
+};
+
 CustomGroupsItemsAndToggle.decorators = [makeContainer({ height: '400px' })];
 
 export const MiscellaneousContent = (args, { argTypes }) => ({
@@ -334,26 +346,26 @@ export default {
     category: {
       control: {
         type: 'select',
-        options: buttonCategoryOptions,
       },
+      options: buttonCategoryOptions,
     },
     variant: {
       control: {
         type: 'select',
-        options: buttonVariantOptions,
       },
+      options: buttonVariantOptions,
     },
     size: {
       control: {
         type: 'select',
-        options: Object.keys(buttonSizeOptions),
       },
+      options: Object.keys(buttonSizeOptions),
     },
     placement: {
       control: {
         type: 'select',
-        options: Object.keys(dropdownPlacements),
       },
+      options: Object.keys(dropdownPlacements),
     },
   },
   args: {

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.spec.js

@@ -1,9 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
-import GlDisclosureDropdownGroup, {
-  GROUP_TOP_BORDER_CLASSES,
-} from './disclosure_dropdown_group.vue';
+import GlDisclosureDropdownGroup, { BORDER_CLASSES } from './disclosure_dropdown_group.vue';
 import GlDisclosureDropdownItem from './disclosure_dropdown_item.vue';
 import { mockGroups, mockProfileGroups } from './mock_data';
+import { DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS as borderPositions } from './constants';
 
 describe('GlDisclosureDropdownGroup', () => {
   let wrapper;
@@ -69,17 +68,17 @@ describe('GlDisclosureDropdownGroup', () => {
     });
   });
 
-  describe('separator', () => {
-    const topBorderClasses = GROUP_TOP_BORDER_CLASSES.split(' ');
-
-    it('should not add top border by default', () => {
-      buildWrapper();
-      expect(wrapper.classes()).not.toEqual(expect.arrayContaining(topBorderClasses));
-    });
-
-    it('should add top border classes when `bordered` props is set to `true`', () => {
-      buildWrapper({ propsData: { bordered: true } });
-      expect(wrapper.classes()).toEqual(expect.arrayContaining(topBorderClasses));
-    });
-  });
+  it.each`
+    bordered | borderPosition            | classes
+    ${true}  | ${borderPositions.top}    | ${BORDER_CLASSES[borderPositions.top].split(' ')}
+    ${true}  | ${borderPositions.bottom} | ${BORDER_CLASSES[borderPositions.bottom].split(' ')}
+    ${false} | ${borderPositions.top}    | ${[]}
+    ${false} | ${borderPositions.bottom} | ${[]}
+  `(
+    'adds border classes `$classes` when bordered=$bordered and borderPosition=$borderPosition',
+    ({ bordered, borderPosition, classes }) => {
+      buildWrapper({ propsData: { bordered, borderPosition } });
+      expect(wrapper.classes()).toEqual(classes);
+    }
+  );
 });

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.vue

@@ -2,9 +2,15 @@
 import uniqueId from 'lodash/uniqueId';
 import GlDisclosureDropdownItem from './disclosure_dropdown_item.vue';
 import { isGroup } from './utils';
-import { DISCLOSURE_DROPDOWN_GROUP_NAME } from './constants';
+import {
+  DISCLOSURE_DROPDOWN_GROUP_NAME,
+  DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS as borderPositions,
+} from './constants';
 
-export const GROUP_TOP_BORDER_CLASSES = 'gl-border-t gl-pt-2 gl-mt-2';
+export const BORDER_CLASSES = {
+  [borderPositions.top]: 'gl-border-t gl-pt-2 gl-mt-2',
+  [borderPositions.bottom]: 'gl-border-b gl-pb-2 gl-mb-2',
+};
 
 export default {
   name: DISCLOSURE_DROPDOWN_GROUP_NAME,
@@ -23,17 +29,30 @@ export default {
     },
     /**
      * If 'true', will set top border for the group
-     * to separate from other groups
+     * to separate from other groups. You can control
+     * the border position using the `borderPosition`
+     * property.
      */
     bordered: {
       type: Boolean,
       required: false,
       default: false,
     },
+
+    /**
+     * Controls the position of the group's border. Valid
+     * values are 'top' and 'bottom'.
+     */
+    borderPosition: {
+      type: String,
+      required: false,
+      default: borderPositions.top,
+      validator: (value) => Object.keys(borderPositions).includes(value),
+    },
   },
   computed: {
     borderClass() {
-      return this.bordered ? GROUP_TOP_BORDER_CLASSES : null;
+      return this.bordered ? BORDER_CLASSES[this.borderPosition] : null;
     },
     showHeader() {
       return this.$scopedSlots['group-label'] || this.group?.name;