@gitlab/ui 108.0.1 → 108.1.0

package/dist/utils/constants.js

@@ -71,6 +71,10 @@ const formStateOptions = {
   valid: true,
   invalid: false
 };
+const breadCrumbSizeOptions = {
+  sm: 'sm',
+  md: 'md'
+};
 const buttonCategoryOptions = {
   primary: 'primary',
   secondary: 'secondary',
@@ -295,4 +299,4 @@ const loadingIconVariants = {
   dots: 'dots'
 };
 
-export { COMMA, CONTRAST_LEVELS, HEX_REGEX, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerWidthOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownItemVariantOptions, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputWidths, formStateOptions, iconSizeOptions, iconVariantOptions, keyboard, labelColorOptions, loadingIconSizes, loadingIconVariants, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, progressBarVariantOptions, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, viewModeOptions };
+export { COMMA, CONTRAST_LEVELS, HEX_REGEX, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, breadCrumbSizeOptions, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerWidthOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownItemVariantOptions, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputWidths, formStateOptions, iconSizeOptions, iconVariantOptions, keyboard, labelColorOptions, loadingIconSizes, loadingIconVariants, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, progressBarVariantOptions, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, viewModeOptions };

package/package.json

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

package/src/components/base/breadcrumb/breadcrumb.md

@@ -1,5 +1,7 @@
 ## Usage
 
+### `items` prop
+
 This component also allows for optional avatars on each item.
 
 `avatarPath` should passed along with `text` and `href` in `items`.
@@ -8,7 +10,7 @@ Here is an example of how an item with an avatar should look:
 **note:** the component supports passing the property `to` in the list items to enable navigation
 through `vue-router`
 
-### Example
+#### Example
 
 ```js
 items = [
@@ -21,3 +23,13 @@ items = [
 
 <gl-breadcrumb :items="items" />
 ```
+
+### `size` prop
+
+The size prop determines the size of the breadcrumb component. It accepts the following values:
+
+"sm" (default): Small size
+"md": Medium size
+
+Using the default 'sm' size for all page breadcrumbs is considered a best practice
+to ensure consistency across the application.

package/src/components/base/breadcrumb/breadcrumb.scss

@@ -17,7 +17,6 @@ $breadcrumb-max-width: $grid-size * 16;
 
 // bootstrap overrides
 .gl-breadcrumb-item {
-  @apply gl-text-sm;
   @apply gl-leading-normal;
   @apply gl-shrink-0;
 
@@ -60,3 +59,11 @@ $breadcrumb-max-width: $grid-size * 16;
   color: var(--gl-text-color-default);
   @apply gl-font-bold;
 }
+
+.gl-breadcrumb-item-sm {
+  @apply gl-text-sm;
+}
+
+.gl-breadcrumb-item-md {
+  @apply gl-text-base;
+}

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -5,6 +5,7 @@ import { translate } from '../../../utils/i18n';
 import GlAvatar from '../avatar/avatar.vue';
 import GlDisclosureDropdown from '../new_dropdowns/disclosure/disclosure_dropdown.vue';
 import { GlTooltipDirective } from '../../../directives/tooltip';
+import { breadCrumbSizeOptions } from '../../../utils/constants';
 import GlBreadcrumbItem from './breadcrumb_item.vue';
 
 export default {
@@ -54,13 +55,22 @@ export default {
       required: false,
       default: true,
     },
+    /**
+     * Size of the breadcrumb item. Use `sm` for page breadcrumbs.
+     */
+    size: {
+      type: String,
+      required: false,
+      default: breadCrumbSizeOptions.sm,
+      validator: (value) => Object.keys(breadCrumbSizeOptions).includes(value),
+    },
   },
   data() {
     return {
       fittingItems: [...this.items], // array of items that fit on the screen
       overflowingItems: [], // array of items that didn't fit and were put in a dropdown instead
       totalBreadcrumbsWidth: 0, // the total width of all breadcrumb items combined
-      widthPerItem: [], // array with the indivudal widths of each breadcrumb item
+      widthPerItem: [], // array with the individual widths of each breadcrumb item
       resizeDone: false, // to apply some CSS only during/after resizing
     };
   },
@@ -89,6 +99,12 @@ export default {
       }
       return {};
     },
+    dropdownSize() {
+      return this.size === 'sm' ? 'small' : 'medium';
+    },
+    avatarSize() {
+      return this.size === 'sm' ? 16 : 24;
+    },
   },
   watch: {
     items: {
@@ -191,7 +207,7 @@ export default {
 <template>
   <nav class="gl-breadcrumbs" :aria-label="ariaLabel" :style="breadcrumbStyle">
     <ol class="gl-breadcrumb-list breadcrumb" v-bind="$attrs" v-on="$listeners">
-      <li v-if="hasCollapsible" class="gl-breadcrumb-item">
+      <li v-if="hasCollapsible" :class="`gl-breadcrumb-item gl-breadcrumb-item-${size}`">
         <gl-disclosure-dropdown
           :items="overflowingItems"
           :toggle-text="showMoreLabel"
@@ -199,7 +215,7 @@ export default {
           text-sr-only
           no-caret
           icon="ellipsis_h"
-          size="small"
+          :size="dropdownSize"
         />
       </li>
 
@@ -211,11 +227,12 @@ export default {
         :href="item.href"
         :style="itemStyle"
         :to="item.to"
+        :size="size"
         :aria-current="getAriaCurrentAttr(index)"
         ><gl-avatar
           v-if="item.avatarPath"
           :src="item.avatarPath"
-          :size="16"
+          :size="avatarSize"
           aria-hidden="true"
           class="gl-breadcrumb-avatar-tile gl-border gl-mr-2 !gl-rounded-base"
           shape="rect"

package/src/components/base/breadcrumb/breadcrumb_item.vue

@@ -1,5 +1,6 @@
 <script>
 import { BLink } from '../../../vendor/bootstrap-vue/src/components/link/link';
+import { breadCrumbSizeOptions } from '../../../utils/constants';
 
 export default {
   name: 'GlBreadcrumbItem',
@@ -31,12 +32,18 @@ export default {
         return [false, 'page'].indexOf(value) !== -1;
       },
     },
+    size: {
+      type: String,
+      required: false,
+      default: breadCrumbSizeOptions.sm,
+      validator: (value) => Object.keys(breadCrumbSizeOptions).includes(value),
+    },
   },
 };
 </script>
 
 <template>
-  <li class="gl-breadcrumb-item">
+  <li :class="`gl-breadcrumb-item gl-breadcrumb-item-${size}`">
     <b-link :href="href" :to="to" :aria-current="ariaCurrent">
       <slot>{{ text }}</slot>
     </b-link>

package/src/utils/constants.js

@@ -92,6 +92,11 @@ export const formStateOptions = {
   invalid: false,
 };
 
+export const breadCrumbSizeOptions = {
+  sm: 'sm',
+  md: 'md',
+};
+
 export const buttonCategoryOptions = {
   primary: 'primary',
   secondary: 'secondary',