@gitlab/ui 137.3.0 → 137.3.1

package/package.json

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

package/src/components/base/alert/alert.scss

@@ -26,20 +26,24 @@ $gl-alert-padding-x: var(--gl-alert-padding-x, 0px);
 }
 
 .gl-alert {
-  @apply gl-py-5;
+  @apply gl-py-3;
   @apply gl-text-base;
   border-radius: var(--gl-alert-border-radius);
-  padding-inline: calc(#{$gl-spacing-scale-9} + #{$gl-alert-padding-x});
+  padding-inline: calc(#{$gl-spacing-scale-7} + #{$gl-alert-padding-x});
   position: relative;
   border: 1px solid;
 
   &-not-dismissible {
-    padding-right: calc(#{$gl-spacing-scale-5} + #{$gl-alert-padding-x});
+    padding-right: calc(#{$gl-spacing-scale-4} + #{$gl-alert-padding-x});
   }
 
   .gl-link:not(.gl-label-link) {
     @apply gl-underline;
   }
+
+  &.gl-alert-has-actions {
+    @apply gl-pb-4;
+  }
 }
 
 .gl-alert-sticky {
@@ -48,20 +52,19 @@ $gl-alert-padding-x: var(--gl-alert-padding-x, 0px);
 }
 
 .gl-alert-title {
-  @apply gl-heading-scale-400 -gl-mt-1 gl-mb-2;
+  @apply gl-heading-scale-300;
+  @apply gl-mb-2;
+  @apply gl-leading-20;
 }
 
 .gl-alert-icon-container {
-  position: absolute;
-  top: #{$gl-spacing-scale-4 + $gl-spacing-scale-1};
-  left: calc(#{$gl-spacing-scale-5} + #{$gl-alert-padding-x});
+  @apply gl-absolute;
+  @apply gl-top-3;
+  left: calc(#{$gl-spacing-scale-3} + #{$gl-alert-padding-x});
   @apply gl-flex;
   @apply gl-items-center;
-  height: $gl-line-height-24;
-
-  .gl-alert-has-title & {
-    top: $gl-spacing-scale-4;
-  }
+  // Match line-height on first line of title or slot text content
+  height: $gl-line-height-20;
 }
 
 .gl-alert-body {
@@ -89,12 +92,9 @@ $gl-alert-padding-x: var(--gl-alert-padding-x, 0px);
 // This is the replacement for .gl-alert-dismiss
 .gl-dismiss-btn {
   position: absolute;
-  top: $gl-spacing-scale-4;
-  right: calc(#{$gl-spacing-scale-4} + #{$gl-alert-padding-x});
-
-  .gl-alert-has-title & {
-    top: $gl-spacing-scale-4;
-  }
+  // Pull the button up by half its overhang so it aligns with first line title or slot text content
+  top: calc(#{$gl-spacing-scale-3} - (#{$gl-button-small-size} - #{$gl-line-height-20}) / 2);
+  right: calc(#{$gl-spacing-scale-2} + #{$gl-alert-padding-x});
 }
 
 /* Variants */

package/src/components/base/alert/alert.vue

@@ -239,6 +239,7 @@ export default {
       { 'gl-alert-sticky': sticky },
       { 'gl-alert-not-dismissible': !dismissible },
       { 'gl-alert-has-title': !!title },
+      { 'gl-alert-has-actions': shouldRenderActions },
       { 'gl-focus': hasProgrammaticFocus },
       variantClass,
     ]"
@@ -263,6 +264,7 @@ export default {
             v-for="(actionButton, index) in actionButtons"
             :key="index"
             class="gl-alert-action"
+            size="small"
             v-bind="actionButton.attrs"
             v-on="actionButton.listeners"
           >

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.scss

@@ -6,7 +6,8 @@
 
     .gl-new-dropdown-item-content {
       &:disabled,
-      &[disabled] {
+      &[disabled],
+      &.disabled {
         color: var(--gl-dropdown-option-text-color-disabled);
         cursor: not-allowed;
         background: none;

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue

@@ -378,6 +378,9 @@ export default {
         this.closeAndFocus();
       }
     },
+    isDisabled(item) {
+      return item.disabled;
+    },
     uniqueItemId() {
       return uniqueId(`disclosure-item-`);
     },
@@ -443,6 +446,7 @@ export default {
               :key="uniqueItemId()"
               :siblings-have-icons="siblingsHaveIcons"
               :item="item"
+              :disabled="isDisabled(item)"
               @action="handleAction"
             >
               <template v-if="'list-item' in $scopedSlots" #list-item>

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.vue

@@ -50,6 +50,15 @@ export default {
       default: false,
       required: false,
     },
+
+    /**
+     * Is the item able to be selected
+     */
+    disabled: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
   },
   computed: {
     isLink() {
@@ -108,6 +117,7 @@ export default {
           ? // eslint-disable-next-line @gitlab/tailwind-no-interpolation
             `gl-new-dropdown-item-${this.itemVariant}`
           : '',
+        this.disabled ? 'disabled' : '',
       ];
     },
     iconName() {
@@ -125,22 +135,24 @@ export default {
   },
   methods: {
     onKeydown(event) {
-      const { code } = event;
+      if (!this.disabled) {
+        const { code } = event;
 
-      if (code === ENTER || code === SPACE) {
-        if (this.isCustomContent) {
-          this.action();
-        } else {
-          stopEvent(event);
-          /** Instead of simply navigating or calling the action, we want
-           * the `a/button` to be the target of the event as it might have additional attributes.
-           * E.g. `a` might have `target` attribute.
-           */
-          const e = new MouseEvent('click', { bubbles: true, cancelable: true });
-          if (this.isLink) {
-            this.$refs.item.$el.dispatchEvent(e);
+        if (code === ENTER || code === SPACE) {
+          if (this.isCustomContent) {
+            this.action();
           } else {
-            this.$refs.item?.dispatchEvent(e);
+            stopEvent(event);
+            /** Instead of simply navigating or calling the action, we want
+             * the `a/button` to be the target of the event as it might have additional attributes.
+             * E.g. `a` might have `target` attribute.
+             */
+            const e = new MouseEvent('click', { bubbles: true, cancelable: true });
+            if (this.isLink) {
+              this.$refs.item.$el.dispatchEvent(e);
+            } else {
+              this.$refs.item?.dispatchEvent(e);
+            }
           }
         }
       }
@@ -148,6 +160,11 @@ export default {
     action() {
       this.$emit('action', this.item);
     },
+    handleClick(event) {
+      if (this.disabled) {
+        stopEvent(event);
+      }
+    },
   },
 };
 </script>
@@ -157,6 +174,7 @@ export default {
     :tabindex="listIndex"
     :class="classes"
     data-testid="disclosure-dropdown-item"
+    :aria-disabled="disabled"
     v-on="wrapperListeners"
   >
     <slot>
@@ -167,6 +185,7 @@ export default {
         class="gl-new-dropdown-item-content"
         :tabindex="componentIndex"
         v-on="itemComponent.listeners"
+        @click="handleClick"
       >
         <span class="gl-new-dropdown-item-text-wrapper">
           <slot name="list-item">