@gitlab/ui 123.2.0 → 123.3.1

package/src/components/base/button/button.vue

@@ -214,13 +214,29 @@ export default {
       // so we must set it as `null` here to be a true tri-state prop
       default: null,
     },
+    /**
+     * Display a count badge next to the button text.
+     */
+    count: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+    /**
+     * Screen reader text to provide context for the count value.
+     */
+    countSrText: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   computed: {
     hasIcon() {
       return this.icon !== '';
     },
     hasIconOnly() {
-      return isSlotEmpty(this, 'default') && this.hasIcon;
+      return isSlotEmpty(this, 'default') && this.hasIcon && this.count == null;
     },
     isButtonDisabled() {
       return this.disabled || this.loading;
@@ -329,6 +345,9 @@ export default {
 
       return this.tag;
     },
+    hasCount() {
+      return this.count != null && this.count >= 0;
+    },
   },
   mounted() {
     // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
@@ -373,6 +392,12 @@ export default {
     <gl-loading-icon v-if="loading" inline class="gl-button-icon gl-button-loading-indicator" />
     <gl-icon v-if="hasIcon && !(hasIconOnly && loading)" class="gl-button-icon" :name="icon" />
     <slot name="emoji"></slot>
-    <span v-if="!hasIconOnly" :class="buttonTextClasses" class="gl-button-text"><slot></slot></span>
+    <span v-if="!hasIconOnly" :class="buttonTextClasses" class="gl-button-text">
+      <slot></slot>
+      <span v-if="hasCount" class="gl-button-count">
+        {{ count }}
+        <span v-if="countSrText" class="gl-sr-only">{{ countSrText }}</span>
+      </span>
+    </span>
   </component>
 </template>

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

@@ -347,7 +347,14 @@ export default {
       if (
         this.autoClose &&
         e.target.closest(ITEM_SELECTOR) &&
-        this.$refs.baseDropdown.containsElement(e.target)
+        // The optional chaining here is to accommodate specs that use shallow mounting.
+        // Ideally, those specs would either:
+        //  - stub out the `BaseDropdown` component to include a stub `containsElement` method, or
+        //  - use a full mount.
+        //
+        // Unfortunately, GitLab has many specs which do neither of these. So the simpler thing to do
+        // is to optionally chain the method call here.
+        this.$refs.baseDropdown.containsElement?.(e.target)
       ) {
         this.closeAndFocus();
       }

package/src/tokens/build/css/tokens.css

@@ -774,6 +774,7 @@
   --gl-button-disabled-foreground-color: var(--gl-color-neutral-500); /** Used for the foreground of a disabled button. */
   --gl-button-disabled-background-color: var(--gl-color-neutral-10); /** Used for the background of a disabled button. */
   --gl-button-disabled-border-color: var(--gl-color-neutral-100); /** Used for the border of a disabled button. */
+  --gl-button-count-background-color: var(--gl-color-alpha-dark-8); /** Used for the background of a button count element. */
   --gl-chart-axis-line-color: var(--gl-color-neutral-200); /** Used in charts for axis line color. */
   --gl-chart-threshold-line-color: var(--gl-color-red-500); /** Used in charts to divide a threshold area in a chart from other data. */
   --gl-chart-zoom-filler-color: var(--gl-color-alpha-dark-8); /** Used in charts for the overlay color when zooming in on a specific area of data. */

package/src/tokens/build/css/tokens.dark.css

@@ -774,6 +774,7 @@
   --gl-button-disabled-foreground-color: var(--gl-color-neutral-400); /** Used for the foreground of a disabled button. */
   --gl-button-disabled-background-color: rgba(137, 136, 141, 0.16); /** Used for the background of a disabled button. */
   --gl-button-disabled-border-color: var(--gl-color-alpha-0); /** Used for the border of a disabled button. */
+  --gl-button-count-background-color: var(--gl-color-alpha-light-16); /** Used for the background of a button count element. */
   --gl-chart-axis-line-color: var(--gl-color-neutral-700); /** Used in charts for axis line color. */
   --gl-chart-threshold-line-color: var(--gl-color-red-600); /** Used in charts to divide a threshold area in a chart from other data. */
   --gl-chart-zoom-filler-color: var(--gl-color-alpha-light-16); /** Used in charts for the overlay color when zooming in on a specific area of data. */

package/src/tokens/build/figma/contextual.tokens.json

@@ -4129,6 +4129,24 @@
         }
       }
     },
+    "count": {
+      "background": {
+        "color": {
+          "$value": {
+            "default": "{color.alpha.dark.8}",
+            "dark": "{color.alpha.light.16}"
+          },
+          "$type": "color",
+          "$description": "Used for the background of a button count element.",
+          "$extensions": {
+            "com.figma.scope": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ]
+          }
+        }
+      }
+    },
     "$extensions": {
       "com.gitlab.locked": true
     }

package/src/tokens/build/js/tokens.dark.js

@@ -678,6 +678,7 @@ export const GL_BUTTON_SELECTED_BORDER_COLOR_ACTIVE = 'transparent';
 export const GL_BUTTON_DISABLED_FOREGROUND_COLOR = '#89888d';
 export const GL_BUTTON_DISABLED_BACKGROUND_COLOR = 'rgba(137, 136, 141, 0.16)';
 export const GL_BUTTON_DISABLED_BORDER_COLOR = 'transparent';
+export const GL_BUTTON_COUNT_BACKGROUND_COLOR = 'rgba(255, 255, 255, 0.16)';
 export const GL_CARD_BORDER_RADIUS = '0.25rem';
 export const GL_CHART_AXIS_POINTER_COLOR = '#bfbfc3';
 export const GL_CHART_AXIS_LINE_COLOR = '#4c4b51';

package/src/tokens/build/js/tokens.js

@@ -678,6 +678,7 @@ export const GL_BUTTON_SELECTED_BORDER_COLOR_ACTIVE = '#626168';
 export const GL_BUTTON_DISABLED_FOREGROUND_COLOR = '#737278';
 export const GL_BUTTON_DISABLED_BACKGROUND_COLOR = '#fbfafd';
 export const GL_BUTTON_DISABLED_BORDER_COLOR = '#dcdcde';
+export const GL_BUTTON_COUNT_BACKGROUND_COLOR = 'rgba(05, 05, 06, 0.08)';
 export const GL_CARD_BORDER_RADIUS = '0.25rem';
 export const GL_CHART_AXIS_POINTER_COLOR = '#626168';
 export const GL_CHART_AXIS_LINE_COLOR = '#bfbfc3';

package/src/tokens/build/json/tokens.dark.json

@@ -19404,6 +19404,47 @@
           ]
         }
       }
+    },
+    "count": {
+      "background": {
+        "color": {
+          "key": "{button.count.background.color}",
+          "$value": "rgba(255, 255, 255, 0.16)",
+          "$type": "color",
+          "$description": "Used for the background of a button count element.",
+          "$extensions": {
+            "com.figma.scope": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ]
+          },
+          "filePath": "src/tokens/contextual/button.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": {
+              "default": "{color.alpha.dark.8}",
+              "dark": "{color.alpha.light.16}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of a button count element.",
+            "$extensions": {
+              "com.figma.scope": [
+                "FRAME_FILL",
+                "SHAPE_FILL"
+              ]
+            },
+            "key": "{button.count.background.color}"
+          },
+          "name": "BUTTON_COUNT_BACKGROUND_COLOR",
+          "attributes": {},
+          "path": [
+            "button",
+            "count",
+            "background",
+            "color"
+          ]
+        }
+      }
     }
   },
   "card": {

package/src/tokens/build/json/tokens.json

@@ -19404,6 +19404,47 @@
           ]
         }
       }
+    },
+    "count": {
+      "background": {
+        "color": {
+          "key": "{button.count.background.color}",
+          "$value": "rgba(05, 05, 06, 0.08)",
+          "$type": "color",
+          "$description": "Used for the background of a button count element.",
+          "$extensions": {
+            "com.figma.scope": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ]
+          },
+          "filePath": "src/tokens/contextual/button.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": {
+              "default": "{color.alpha.dark.8}",
+              "dark": "{color.alpha.light.16}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of a button count element.",
+            "$extensions": {
+              "com.figma.scope": [
+                "FRAME_FILL",
+                "SHAPE_FILL"
+              ]
+            },
+            "key": "{button.count.background.color}"
+          },
+          "name": "BUTTON_COUNT_BACKGROUND_COLOR",
+          "attributes": {},
+          "path": [
+            "button",
+            "count",
+            "background",
+            "color"
+          ]
+        }
+      }
     }
   },
   "card": {

package/src/tokens/build/scss/_tokens.dark.scss

@@ -772,6 +772,7 @@ $gl-button-selected-border-color-active: $gl-color-alpha-0; // Used for the bord
 $gl-button-disabled-foreground-color: $gl-color-neutral-400; // Used for the foreground of a disabled button.
 $gl-button-disabled-background-color: rgba(137, 136, 141, 0.16); // Used for the background of a disabled button.
 $gl-button-disabled-border-color: $gl-color-alpha-0; // Used for the border of a disabled button.
+$gl-button-count-background-color: $gl-color-alpha-light-16; // Used for the background of a button count element.
 $gl-chart-axis-line-color: $gl-color-neutral-700; // Used in charts for axis line color.
 $gl-chart-threshold-line-color: $gl-color-red-600; // Used in charts to divide a threshold area in a chart from other data.
 $gl-chart-zoom-filler-color: $gl-color-alpha-light-16; // Used in charts for the overlay color when zooming in on a specific area of data.

package/src/tokens/build/scss/_tokens.scss

@@ -772,6 +772,7 @@ $gl-button-selected-border-color-active: $gl-color-neutral-600; // Used for the
 $gl-button-disabled-foreground-color: $gl-color-neutral-500; // Used for the foreground of a disabled button.
 $gl-button-disabled-background-color: $gl-color-neutral-10; // Used for the background of a disabled button.
 $gl-button-disabled-border-color: $gl-color-neutral-100; // Used for the border of a disabled button.
+$gl-button-count-background-color: $gl-color-alpha-dark-8; // Used for the background of a button count element.
 $gl-chart-axis-line-color: $gl-color-neutral-200; // Used in charts for axis line color.
 $gl-chart-threshold-line-color: $gl-color-red-500; // Used in charts to divide a threshold area in a chart from other data.
 $gl-chart-zoom-filler-color: $gl-color-alpha-dark-8; // Used in charts for the overlay color when zooming in on a specific area of data.

package/src/tokens/build/scss/_tokens_custom_properties.scss

@@ -619,6 +619,7 @@ $gl-button-selected-border-color-active: var(--gl-button-selected-border-color-a
 $gl-button-disabled-foreground-color: var(--gl-button-disabled-foreground-color);
 $gl-button-disabled-background-color: var(--gl-button-disabled-background-color);
 $gl-button-disabled-border-color: var(--gl-button-disabled-border-color);
+$gl-button-count-background-color: var(--gl-button-count-background-color);
 $gl-card-border-radius: var(--gl-card-border-radius);
 $gl-chart-axis-pointer-color: var(--gl-chart-axis-pointer-color);
 $gl-chart-axis-line-color: var(--gl-chart-axis-line-color);

package/src/tokens/contextual/button.tokens.json

@@ -1591,6 +1591,24 @@
           }
         }
       }
+    },
+    "count": {
+      "background": {
+        "color": {
+          "$value": {
+            "default": "{color.alpha.dark.8}",
+            "dark": "{color.alpha.light.16}"
+          },
+          "$type": "color",
+          "$description": "Used for the background of a button count element.",
+          "$extensions": {
+            "com.figma.scope": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ]
+          }
+        }
+      }
     }
   }
 }