@gitlab/ui 64.8.0 → 64.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "64.8.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;

package/src/scss/functions.scss

@@ -21,6 +21,9 @@
     @return $value;
   }
 
+  // Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0
+  // We can't update this yet since GitLab uses SassC, which doesn't support math.div
+  // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1954#note_1078281533
   $converted: $value / $font-size-base;
 
   @return strip-unit($converted) * 1rem;
@@ -54,6 +57,9 @@
   $min-width: px-to-rem($min-width);
   $max-width: px-to-rem($max-width);
 
+  // Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0
+  // We can't update this yet since GitLab uses SassC, which doesn't support math.div
+  // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1954#note_1078281533
   $slope: ($max - $min) / ($max-width - $min-width);
   $intersection: (-$min-width * $slope) + $min;
 

package/src/scss/utilities.scss

@@ -3639,6 +3639,18 @@
   flex-basis: 33% !important;
 }
 
+.gl-md-flex-basis-third {
+  @include gl-media-breakpoint-up(md) {
+  flex-basis: 33%;
+  }
+}
+
+.gl-md-flex-basis-third\! {
+  @include gl-media-breakpoint-up(md) {
+  flex-basis: 33% !important;
+  }
+}
+
 .gl-flex-basis-two-thirds {
   flex-basis: 66%;
 }

package/src/scss/utility-mixins/flex.scss

@@ -225,6 +225,12 @@
   flex-basis: 33%;
 }
 
+@mixin gl-md-flex-basis-third {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-flex-basis-third;
+  }
+}
+
 @mixin gl-flex-basis-two-thirds {
   flex-basis: 66%;
 }