@gitlab/ui 64.8.0 → 64.10.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [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)
+
+
+### Features
+
+* **css:** Added gl-md-justify-content-end mixin ([4fa88fa](https://gitlab.com/gitlab-org/gitlab-ui/commit/4fa88fac40b2bc34eca9058a406b1d649bb67ba4))
+
 # [64.8.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.7.0...v64.8.0) (2023-06-13)
 
 

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 };