@gitlab/ui 71.6.0 → 71.7.0

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 05 Dec 2023 15:34:24 GMT
+ * Generated on Thu, 07 Dec 2023 15:01:35 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 05 Dec 2023 15:34:24 GMT
+ * Generated on Thu, 07 Dec 2023 15:01:35 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 05 Dec 2023 15:34:24 GMT
+ * Generated on Thu, 07 Dec 2023 15:01:35 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 05 Dec 2023 15:34:24 GMT
+ * Generated on Thu, 07 Dec 2023 15:01:35 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 05 Dec 2023 15:34:24 GMT
+// Generated on Thu, 07 Dec 2023 15:01:35 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 05 Dec 2023 15:34:24 GMT
+// Generated on Thu, 07 Dec 2023 15:01:35 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

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

package/src/components/base/avatar_labeled/avatar_labeled.scss

@@ -25,5 +25,6 @@
 
   &-sublabel {
     @include gl-text-gray-500;
+    overflow-wrap: anywhere;
   }
 }

package/src/components/base/badge/badge.scss

@@ -66,38 +66,23 @@
 .gl-badge {
   @include gl-display-inline-flex;
   @include gl-align-items-center;
-  @include gl-justify-content-center;
+  @include gl-font-sm;
   @include gl-font-weight-normal;
   @include gl-line-height-normal;
+  @include gl-py-2;
+  @include gl-px-3;
 
   &.sm {
     @include gl-py-0;
-    @include gl-px-3;
-    @include gl-gap-2;
-    @include gl-font-sm;
-
-    min-height: 1rem;
-    min-width: 1rem;
   }
 
   &.md {
     @include gl-py-2;
-    @include gl-px-3;
-    @include gl-gap-2;
-    @include gl-font-sm;
-
-    min-height: 1.5rem;
-    min-width: 1.5rem;
   }
 
   &.lg {
     @include gl-py-3;
-    @include gl-px-4;
-    @include gl-gap-2;
     @include gl-font-base;
-
-    min-height: 2rem;
-    min-width: 2rem;
   }
 
   .gl-badge-icon {
@@ -106,28 +91,6 @@
     @include gl-flex-shrink-0;
     @include gl-top-auto;
   }
-
-  &.gl-badge-round-icon.gl-badge-icon-only {
-    @include gl-px-0;
-  }
-
-  &.sm.gl-badge-round-icon:not(.gl-badge-icon-only) {
-    @include gl-pl-1;
-  }
-
-  &.md.gl-badge-round-icon:not(.gl-badge-icon-only) {
-    .gl-badge-icon.s12 {
-      @include gl-ml-n1;
-    }
-
-    .gl-badge-icon.s16 {
-      @include gl-ml-n2;
-    }
-  }
-
-  &.lg.gl-badge-round-icon:not(.gl-badge-icon-only) {
-    @include gl-pl-3;
-  }
 }
 
 /* Variants */

package/src/components/base/badge/badge.spec.js

@@ -39,7 +39,9 @@ describe('badge', () => {
         });
 
         it('with correct class', () => {
-          expect(wrapper.classes('gl-badge-icon-only')).toBe(!hasSlot);
+          const icon = findIcon();
+
+          expect(icon.classes('gl-mr-2')).toBe(hasSlot);
         });
 
         it('with correct size', () => {
@@ -49,16 +51,6 @@ describe('badge', () => {
     });
   });
 
-  describe('with "roundIcon" prop', () => {
-    beforeEach(() => {
-      createComponent({ propsData: { icon: 'warning', roundIcon: true } });
-    });
-
-    it('has `gl-badge-round-icon` class', () => {
-      expect(wrapper.classes()).toContain('gl-badge-round-icon');
-    });
-  });
-
   describe('without "icon" prop', () => {
     const mockSlotContent = 'slot-content';
     beforeEach(() => {

package/src/components/base/badge/badge.stories.js

@@ -27,7 +27,6 @@ const generateProps = ({
   content = 'TestBadge',
   icon = '',
   iconSize = defaultValue('iconSize'),
-  roundIcon = false,
 } = {}) => ({
   variant,
   size,
@@ -35,7 +34,6 @@ const generateProps = ({
   content,
   icon,
   iconSize,
-  roundIcon,
 });
 
 const Template = (args, { argTypes }) => ({
@@ -158,52 +156,6 @@ IconOnly.args = generateProps({
   icon: 'calendar',
 });
 
-export const AllVariantsAndCategories = (args, { argTypes }) => ({
-  components: { GlBadge },
-  props: Object.keys(argTypes),
-  template: `
-  <div>
-    <div class="gl-display-flex gl-gap-3">
-      <gl-badge variant="info" size="sm" icon="terminal" iconSize="sm" />
-      <gl-badge variant="info" size="sm" icon="cancel" :roundIcon="true" iconSize="sm" />
-      <gl-badge variant="info" size="sm" icon="terminal" iconSize="sm">Small</gl-badge>
-      <gl-badge variant="info" size="sm" icon="cancel" :roundIcon="true" iconSize="sm">Small</gl-badge>
-      <gl-badge variant="info" size="sm">Small</gl-badge>
-      <gl-badge variant="info" size="sm">5</gl-badge>
-    </div>
-    <div class="gl-display-flex gl-gap-3 gl-mt-6">
-      <gl-badge variant="info" size="md" icon="terminal" iconSize="sm" />
-      <gl-badge variant="info" size="md" icon="cancel" :roundIcon="true" iconSize="sm" />
-      <gl-badge variant="info" size="md" icon="terminal" iconSize="sm">Medium</gl-badge>
-      <gl-badge variant="info" size="md" icon="cancel" :roundIcon="true" iconSize="sm">Medium</gl-badge>
-      <gl-badge variant="info" size="md">Medium</gl-badge>
-    </div>
-    <div class="gl-display-flex gl-gap-3 gl-mt-3">
-      <gl-badge variant="info" size="md" icon="terminal" iconSize="md" />
-      <gl-badge variant="info" size="md" icon="cancel" :roundIcon="true" iconSize="md" />
-      <gl-badge variant="info" size="md" icon="terminal" iconSize="md">Medium</gl-badge>
-      <gl-badge variant="info" size="md" icon="cancel" :roundIcon="true" iconSize="md">Medium</gl-badge>
-      <gl-badge variant="info" size="md">5</gl-badge>
-    </div>
-    <div class="gl-display-flex gl-gap-3 gl-mt-6">
-      <gl-badge variant="info" size="lg" icon="terminal" iconSize="md" />
-      <gl-badge variant="info" size="lg" icon="cancel" :roundIcon="true" iconSize="md" />
-      <gl-badge variant="info" size="lg" icon="terminal" iconSize="md">Large</gl-badge>
-      <gl-badge variant="info" size="lg" icon="cancel" :roundIcon="true" iconSize="md">Large</gl-badge>
-      <gl-badge variant="info" size="lg">5</gl-badge>
-      <gl-badge variant="info" size="lg">Large</gl-badge>
-    </div>
-  </div>
-  `,
-});
-AllVariantsAndCategories.argTypes = disableControls([
-  'iconSize',
-  'icon',
-  'variant',
-  'size',
-  'roundIcon',
-]);
-
 export default {
   title: 'base/badge',
   component: GlBadge,

package/src/components/base/badge/badge.vue

@@ -55,14 +55,6 @@ export default {
       validator: (value) => Object.keys(badgeIconSizeOptions).includes(value),
       required: false,
     },
-    /**
-     * Whether the `icon` is round. Affects padding around the icon.
-     */
-    roundIcon: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
   },
   computed: {
     hasIconOnly() {
@@ -80,18 +72,14 @@ export default {
 </script>
 
 <template>
-  <b-badge
-    v-bind="$attrs"
-    :variant="variant"
-    :class="[
-      'gl-badge',
-      size,
-      { 'gl-badge-icon-only': hasIconOnly, 'gl-badge-round-icon': roundIcon },
-    ]"
-    :role="role"
-    pill
-  >
-    <gl-icon v-if="icon" class="gl-badge-icon" :size="iconSizeComputed" :name="icon" />
+  <b-badge v-bind="$attrs" :variant="variant" :class="['gl-badge', size]" :role="role" pill>
+    <gl-icon
+      v-if="icon"
+      class="gl-badge-icon"
+      :size="iconSizeComputed"
+      :class="{ 'gl-mr-2': !hasIconOnly }"
+      :name="icon"
+    />
     <!-- @slot The badge content to display. -->
     <slot></slot>
   </b-badge>

package/src/components/base/loading_icon/loading_icon.spec.js

@@ -16,10 +16,10 @@ describe('loading icon component', () => {
   const getDotsLoaderClasses = () => findDotsLoaderEl().classes();
 
   describe.each`
-    variant      | baseCssClass              | findLoaderEl        | getLoaderClasses
-    ${'spinner'} | ${spinnerBaseCssClass}    | ${findSpinnerEl}    | ${getSpinnerClasses}
-    ${'dots'}    | ${dotsLoaderBaseCssClass} | ${findDotsLoaderEl} | ${getDotsLoaderClasses}
-  `('variant $variant', ({ variant, baseCssClass, findLoaderEl, getLoaderClasses }) => {
+    variant      | baseCssClass              | getLoaderClasses
+    ${'spinner'} | ${spinnerBaseCssClass}    | ${getSpinnerClasses}
+    ${'dots'}    | ${dotsLoaderBaseCssClass} | ${getDotsLoaderClasses}
+  `('variant $variant', ({ variant, baseCssClass, getLoaderClasses }) => {
     describe('display', () => {
       it('should render as a block by default', () => {
         createComponent({ variant });
@@ -79,17 +79,15 @@ describe('loading icon component', () => {
     describe('aria label', () => {
       it('should default to loading', () => {
         createComponent({ variant });
-        const loaderEl = findLoaderEl();
 
-        expect(loaderEl.attributes('aria-label')).toBe('Loading');
+        expect(wrapper.attributes('aria-label')).toBe('Loading');
       });
 
       it('should change using prop', () => {
         const label = 'label';
         createComponent({ variant, label });
-        const loaderEl = findLoaderEl();
 
-        expect(loaderEl.attributes('aria-label')).toBe(label);
+        expect(wrapper.attributes('aria-label')).toBe(label);
       });
     });
 

package/src/components/base/loading_icon/loading_icon.vue

@@ -84,14 +84,11 @@ export default {
   <component
     :is="rootElementType"
     v-if="variant === 'spinner'"
+    :aria-label="label"
     class="gl-spinner-container"
     role="status"
   >
-    <span
-      class="gl-vertical-align-text-bottom!"
-      :class="spinnerCssClasses"
-      :aria-label="label"
-    ></span>
+    <span class="gl-vertical-align-text-bottom!" :class="spinnerCssClasses"></span>
   </component>
   <component :is="rootElementType" v-else :class="dotsCssClasses" role="status" :aria-label="label">
     <span></span>

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.spec.js

@@ -231,9 +231,9 @@ describe('base dropdown', () => {
     props                                                            | toggleClasses
     ${{}}                                                            | ${[]}
     ${{ toggleText: 'toggleText' }}                                  | ${[]}
-    ${{ icon: 'close' }}                                             | ${['gl-new-dropdown-icon-only']}
-    ${{ icon: 'close', toggleText: 'toggleText', textSrOnly: true }} | ${['gl-new-dropdown-icon-only']}
-    ${{ icon: 'close', textSrOnly: true }}                           | ${['gl-new-dropdown-icon-only']}
+    ${{ icon: 'close' }}                                             | ${['gl-new-dropdown-icon-only', 'btn-icon']}
+    ${{ icon: 'close', toggleText: 'toggleText', textSrOnly: true }} | ${['gl-new-dropdown-icon-only', 'btn-icon']}
+    ${{ icon: 'close', textSrOnly: true }}                           | ${['gl-new-dropdown-icon-only', 'btn-icon']}
     ${{ toggleText: 'toggleText', noCaret: true }}                   | ${['gl-new-dropdown-toggle-no-caret']}
   `('dropdown with props $props', ({ props, toggleClasses }) => {
     beforeEach(async () => {

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.vue

@@ -176,7 +176,7 @@ export default {
         this.toggleClass,
         {
           'gl-new-dropdown-toggle': true,
-          'gl-new-dropdown-icon-only': this.isIconOnly,
+          'gl-new-dropdown-icon-only btn-icon': this.isIconOnly,
           'gl-new-dropdown-toggle-no-caret': this.noCaret,
         },
       ];

package/src/components/base/new_dropdowns/dropdown.scss

@@ -48,7 +48,8 @@
   }
 
   .gl-new-dropdown-toggle {
-    &.gl-button {
+    // optically align the caret
+    &.gl-button:not(.gl-new-dropdown-toggle-no-caret) {
       @include gl-pr-3;
 
       &.btn-sm {
@@ -56,17 +57,10 @@
       }
     }
 
-    &.gl-new-dropdown-toggle-no-caret {
-      @include gl-p-3;
-
-      .gl-new-dropdown-chevron {
-        @include gl-display-none;
-      }
+    &.gl-new-dropdown-toggle-no-caret .gl-new-dropdown-chevron {
+      @include gl-display-none;
     }
 
-    &.gl-new-dropdown-toggle-no-caret.btn-sm {
-      @include gl-p-2;
-    }
   }
 
   .gl-new-dropdown-toggle {
@@ -96,6 +90,15 @@
   }
 
   .gl-new-dropdown-icon-only {
+    // optically align the caret
+    &.gl-button:not(.gl-new-dropdown-toggle-no-caret) {
+      @include gl-pr-2;
+
+      &.btn-sm {
+        @include gl-pr-0;
+      }
+    }
+
     .gl-button-icon.gl-button-icon {
       @include gl-mr-0;
     }
@@ -103,6 +106,7 @@
     &.btn-sm .gl-new-dropdown-chevron {
       @include gl-mx-0;
     }
+    
   }
 
   $dropdown-content-padding: 0.25rem;