@gitlab/ui 126.2.0 → 126.3.1

package/src/components/base/search_box_by_type/search_box_by_type.vue

@@ -27,11 +27,17 @@ export default {
       required: false,
       default: '',
     },
+    /**
+     * Whether to render the search box without borders
+     */
     borderless: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Title text for the clear button
+     */
     clearButtonTitle: {
       type: String,
       required: false,
@@ -104,6 +110,10 @@ export default {
       this.$refs.input.$el.focus();
     },
     onInput(value) {
+      /**
+       * Emitted when the input value changes or gets cleared.
+       * @event input
+       */
       this.$emit('input', value);
     },
     onFocusout(event) {
@@ -113,6 +123,10 @@ export default {
         return;
       }
 
+      /**
+       * Emitted when focus leaves the search box (input and clear button).
+       * @event focusout
+       */
       this.$emit('focusout', event);
     },
     onFocusin(event) {
@@ -122,6 +136,10 @@ export default {
         return;
       }
 
+      /**
+       * Emitted when focus enters the search box (input or clear button).
+       * @event focusin
+       */
       this.$emit('focusin', event);
     },
   },

package/src/components/base/tabs/tab/tab.vue

@@ -2,6 +2,7 @@
 <script>
 import isPlainObject from 'lodash/isPlainObject';
 import { BTab } from '../../../../vendor/bootstrap-vue/src/components/tabs/tab';
+import GlBadge from '../../badge/badge.vue';
 
 import { DEFAULT_TAB_TITLE_LINK_CLASS } from '../constants';
 
@@ -9,6 +10,7 @@ export default {
   name: 'GlTab',
   components: {
     BTab,
+    GlBadge,
   },
   inheritAttrs: false,
   props: {
@@ -25,6 +27,24 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * Display a count badge next to the tab title.
+     */
+    tabCount: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+    /**
+     * Screen reader text to provide context for the tab count value.
+     * Should be the result of calling n__() with the count.
+     * Example: :tab-count-sr-text="n__('%d changed file', '%d changed files', count)"
+     */
+    tabCountSrText: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   computed: {
     linkClass() {
@@ -38,19 +58,43 @@ export default {
       }
       return `${titleLinkClass} ${DEFAULT_TAB_TITLE_LINK_CLASS}`.trim();
     },
+    hasTabCount() {
+      return this.tabCount != null && this.tabCount >= 0;
+    },
+  },
+  created() {
+    if (process.env.NODE_ENV !== 'production' && this.hasTabCount && !this.tabCountSrText) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        '[GlTab] When using "tab-count", you should also provide "tab-count-sr-text" for screen reader accessibility. Example: :tab-count-sr-text="n__(\'%d item\', \'%d items\', count)"',
+      );
+    }
   },
 };
 </script>
 
 <template>
   <b-tab
+    :title="hasTabCount ? null : $attrs.title"
     :title-link-class="linkClass"
     :query-param-value="queryParamValue"
     v-bind="$attrs"
     v-on="$listeners"
   >
-    <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
-    <template v-for="slot in Object.keys($slots)" #[slot]>
+    <template v-if="hasTabCount" #title>
+      <slot name="title">{{ $attrs.title }}</slot>
+      <gl-badge
+        class="gl-ml-2"
+        variant="neutral"
+        aria-hidden="true"
+        data-testid="tab-counter-badge"
+      >
+        {{ tabCount }}
+      </gl-badge>
+      <span v-if="tabCountSrText" class="gl-sr-only">{{ tabCountSrText }}</span>
+    </template>
+
+    <template v-for="slot in Object.keys($scopedSlots)" #[slot]>
       <slot :name="slot"></slot>
     </template>
   </b-tab>

package/src/components/base/token/token.vue

@@ -10,6 +10,9 @@ export default {
     CloseButton,
   },
   props: {
+    /**
+     * When true, hides the close button and makes the token non-removable.
+     */
     viewOnly: {
       type: Boolean,
       required: false,
@@ -60,6 +63,7 @@ export default {
 <template>
   <span :class="['gl-token', variantClass, viewOnlyClass]" v-on="$listeners">
     <span class="gl-token-content">
+      <!-- @slot Content to display inside the token -->
       <slot></slot>
       <close-button v-if="!viewOnly" class="gl-token-close" :label="removeLabel" @click="close" />
     </span>

package/src/components/dashboards/dashboard_layout/dashboard_layout.vue

@@ -35,6 +35,33 @@ export default {
       required: false,
       default: true,
     },
+    /**
+     * Adjusts the cell height of the grid. Setting this too high can leave unwanted whitespace
+     * between grid panels. Reduce the number to allow for a more compact grid.
+     * For more information, see:
+     * https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/3051
+     */
+    cellHeight: {
+      type: Number,
+      required: false,
+
+      /* Magic number:
+       * After allowing for padding, and the panel title row, this leaves us with minimum 48px height for the cell content.
+       * This means text/content with our spacing scale can fit up to 49px without scrolling.
+       */
+      default: 137,
+      validator: (value) => value > 0,
+    },
+    /**
+     * Sets a default minimum height for grid panels. This can still be overriden on a per-panel
+     * basis by setting `value.panels[].gridAttributes.minHeight`
+     */
+    minCellHeight: {
+      type: Number,
+      required: false,
+      default: 1,
+      validator: (value) => value > 0,
+    },
   },
   computed: {
     dashboardHasPanels() {
@@ -104,6 +131,8 @@ export default {
           v-if="dashboardHasPanels"
           :value="config"
           :is-static-grid="isStaticGrid"
+          :cell-height="cellHeight"
+          :min-cell-height="minCellHeight"
           class="-gl-mx-3"
           @input="emitChanges"
         >

package/src/components/dashboards/dashboard_layout/grid_layout/grid_layout.vue

@@ -35,6 +35,33 @@ export default {
       required: false,
       default: true,
     },
+    /**
+     * Adjusts the cell height of the grid. Setting this too high can leave unwanted whitespace
+     * between grid panels. Reduce the number to allow for a more compact grid.
+     * For more information, see:
+     * https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/3051
+     */
+    cellHeight: {
+      type: Number,
+      required: false,
+
+      /* Magic number:
+       * After allowing for padding, and the panel title row, this leaves us with minimum 48px height for the cell content.
+       * This means text/content with our spacing scale can fit up to 49px without scrolling.
+       */
+      default: 137,
+      validator: (value) => value > 0,
+    },
+    /**
+     * Sets a default minimum height for grid panels. This can still be overriden on a per-panel
+     * basis by setting `value.panels[].gridAttributes.minHeight`
+     */
+    minCellHeight: {
+      type: Number,
+      required: false,
+      default: 1,
+      validator: (value) => value > 0,
+    },
   },
   data() {
     return {
@@ -143,15 +170,11 @@ export default {
           margin: '8px',
           // CSS Selector for finding the drag handle element
           handle: '.grid-stack-item-handle',
-          /* Magic number:
-           * After allowing for padding, and the panel title row, this leaves us with minimum 48px height for the cell content.
-           * This means text/content with our spacing scale can fit up to 49px without scrolling.
-           */
-          cellHeight: '137px',
           // Setting 1 in minRow prevents the grid collapsing when all panels are removed
           minRow: 1,
           // Define the number of columns for anything below a set width, defaults to fill the available space
           columnOpts: { breakpoints: [{ w: breakpoints.md, c: 1 }] },
+          cellHeight: this.cellHeight,
           alwaysShowResizeHandle: true,
           animate: true,
           float: true,
@@ -194,7 +217,7 @@ export default {
         y: yPos,
         w: width,
         h: height,
-        minH: minHeight,
+        minH: minHeight || this.minCellHeight,
         minW: minWidth,
         maxH: maxHeight,
         maxW: maxWidth,

package/translations.js

@@ -29,8 +29,6 @@ export default {
   'GlPagination.labelPage': 'Go to page %{page}',
   'GlPagination.labelPrevPage': 'Go to previous page',
   'GlPagination.nav': 'Pagination',
-  'GlPagination.nextText': 'Next',
-  'GlPagination.prevText': 'Previous',
   'GlProgressBar.ariaLabel': 'Progress bar',
   'GlSearchBoxByType.clearButtonTitle': 'Clear',
   'GlSearchBoxByType.input.placeholder': 'Search',