@gitlab/ui 123.1.0 → 123.3.0

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/popover/popover.vue

@@ -17,9 +17,9 @@ export default {
   inheritAttrs: false,
   props: {
     cssClasses: {
-      type: Array,
+      type: [Array, String, Object],
       required: false,
-      default: () => [],
+      default: '',
     },
     /**
      * Space-separated triggers for the popover.
@@ -61,7 +61,7 @@ export default {
         'gl-popover',
         this.hasTitle && 'has-title',
         this.showCloseButton && 'has-close-button',
-        ...this.cssClasses,
+        ...this.normalizedCssClasses(this.cssClasses),
       ]
         .filter(Boolean)
         .join(' ');
@@ -71,6 +71,24 @@ export default {
     },
   },
   methods: {
+    /**
+     * `cssClasses can be a string, an array, or an object. This method normalizes it to an array
+     */
+    normalizedCssClasses(cssClasses) {
+      if (Array.isArray(cssClasses)) {
+        return cssClasses;
+      }
+
+      if (typeof cssClasses === 'string') {
+        return cssClasses.trim() ? cssClasses.trim().split(/\s+/) : [];
+      }
+
+      if (cssClasses && typeof cssClasses === 'object') {
+        return Object.keys(cssClasses).filter((key) => cssClasses[key]);
+      }
+
+      return [];
+    },
     close(e) {
       this.$refs[popoverRefName].doClose();
       /**

package/src/components/dashboards/dashboard_panel/dashboard_panel.vue

@@ -90,9 +90,9 @@ export default {
      * CSS classes to apply to the title popover (gets passed to the `css-classes` prop of the `GlPopover` component).
      */
     titlePopoverClasses: {
-      type: Array,
+      type: [Array, String, Object],
       required: false,
-      default: () => [],
+      default: '',
     },
     /**
      * Set to `true` to show the loading state.

package/src/components/experimental/experiment_badge/experiment_badge.vue

@@ -85,7 +85,7 @@ export default {
       show-close-button
       :placement="popoverPlacement"
       :target="triggerId"
-      :css-classes="['!gl-z-9999']"
+      css-classes="!gl-z-9999"
       :title="activeType.POPOVER_TITLE"
     >
       <gl-sprintf :message="activeType.POPOVER_CONTENT">

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"
+            ]
+          }
+        }
+      }
     }
   }
 }