@gitlab/ui 130.0.0 → 130.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "130.0.0",
+  "version": "130.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -105,19 +105,19 @@
     "@rollup/plugin-commonjs": "^28.0.9",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.3",
-    "@storybook/addon-a11y": "^7.6.20",
-    "@storybook/addon-docs": "^7.6.20",
-    "@storybook/addon-essentials": "^7.6.20",
-    "@storybook/addon-interactions": "^7.6.20",
-    "@storybook/addon-viewport": "^7.6.20",
-    "@storybook/builder-webpack5": "^7.6.20",
-    "@storybook/test": "^7.6.20",
+    "@storybook/addon-a11y": "^7.6.24",
+    "@storybook/addon-docs": "^7.6.24",
+    "@storybook/addon-essentials": "^7.6.24",
+    "@storybook/addon-interactions": "^7.6.24",
+    "@storybook/addon-viewport": "^7.6.24",
+    "@storybook/builder-webpack5": "^7.6.24",
+    "@storybook/test": "^7.6.24",
     "@storybook/test-runner": "0.19.1",
-    "@storybook/theming": "^7.6.20",
-    "@storybook/vue": "^7.6.17",
-    "@storybook/vue-webpack5": "^7.6.17",
-    "@storybook/vue3": "^7.6.20",
-    "@storybook/vue3-webpack5": "^7.6.20",
+    "@storybook/theming": "^7.6.24",
+    "@storybook/vue": "^7.6.24",
+    "@storybook/vue-webpack5": "^7.6.24",
+    "@storybook/vue3": "^7.6.24",
+    "@storybook/vue3-webpack5": "^7.6.24",
     "@types/jest-image-snapshot": "^6.4.1",
     "@vue/compat": "3.5.30",
     "@vue/compiler-sfc": "3.5.30",
@@ -164,9 +164,9 @@
     "sass-loader": "^10.5.2",
     "sass-true": "^9",
     "start-server-and-test": "^2.1.5",
-    "storybook": "^7.6.20",
+    "storybook": "^7.6.24",
     "storybook-dark-mode": "4.0.2",
-    "style-dictionary": "^5.3.3",
+    "style-dictionary": "^5.4.0",
     "style-loader": "^4",
     "tailwindcss": "3.4.19",
     "vue": "2.7.16",

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

@@ -8,7 +8,7 @@ $breadcrumb-max-width: $grid-size * 16;
 .gl-breadcrumb-list {
   @apply gl-bg-transparent;
   @apply gl-p-0;
-  @apply gl-items-center;
+  @apply gl-items-start;
   @apply gl-leading-normal;
   @apply gl-m-0;
   @apply gl-flex-nowrap;
@@ -17,6 +17,8 @@ $breadcrumb-max-width: $grid-size * 16;
 
 // bootstrap overrides
 .gl-breadcrumb-item {
+  @apply gl-inline-flex;
+  @apply gl-items-center;
   @apply gl-leading-normal;
   @apply gl-shrink-0;
 
@@ -56,10 +58,12 @@ $breadcrumb-max-width: $grid-size * 16;
 
 .gl-breadcrumb-item-sm {
   @apply gl-text-sm;
+  @apply gl-h-6;
 }
 
 .gl-breadcrumb-item-md {
   @apply gl-text-base;
+  @apply gl-h-7;
 }
 
 .gl-breadcrumb-item {

package/src/components/charts/stacked_column/stacked_column.vue

@@ -157,6 +157,14 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * Controls whether the tooltip should be pinned when clicked.
+     */
+    clickToPinTooltip: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -344,7 +352,12 @@ export default {
       @created="onCreated"
       @updated="onUpdated"
     />
-    <chart-tooltip v-if="chart" :chart="chart" :use-default-tooltip-formatter="!formatTooltipText">
+    <chart-tooltip
+      v-if="chart"
+      :chart="chart"
+      :use-default-tooltip-formatter="!formatTooltipText"
+      :click-to-pin="clickToPinTooltip"
+    >
       <template #title="scope">
         <slot name="tooltip-title" v-bind="scope">{{ getTooltipTitle(scope) }}</slot>
       </template>

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

@@ -1055,9 +1055,9 @@
   --gl-border-color-section: var(--gl-border-color-default); /** Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page. */
   --gl-border-radius-default: var(--gl-border-radius-md);
   --gl-font-size-base: var(--gl-font-size-md);
-  --gl-shadow-sm: 0 0 2px var(--gl-shadow-color-default), 0 1px 4px var(--gl-shadow-color-default); /** Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board. */
-  --gl-shadow-md: 0 0 1px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 2px 8px var(--gl-shadow-color-default); /** Used for surfaces that need boundary definition and appear on hover. For example, popovers. */
-  --gl-shadow-lg: 0 0 2px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 4px 12px var(--gl-shadow-color-default); /** Used for large surfaces that present additional context to the user. */
+  --gl-shadow-sm: 0 0 2px 0 var(--gl-shadow-color-default), 0 1px 4px 0 var(--gl-shadow-color-default); /** Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board. */
+  --gl-shadow-md: 0 0 1px 0 var(--gl-shadow-color-default), 0 0 2px 0 var(--gl-shadow-color-default), 0 2px 8px 0 var(--gl-shadow-color-default); /** Used for surfaces that need boundary definition and appear on hover. For example, popovers. */
+  --gl-shadow-lg: 0 0 2px 0 var(--gl-shadow-color-default), 0 0 2px 0 var(--gl-shadow-color-default), 0 4px 12px 0 var(--gl-shadow-color-default); /** Used for large surfaces that present additional context to the user. */
   --gl-alert-border-radius: var(--gl-border-radius-lg); /** Used for alert border radius. */
   --gl-alert-neutral-title-color: var(--gl-text-color-heading); /** Used for the title color of a neutral alert. */
   --gl-alert-neutral-background-color: var(--gl-feedback-neutral-background-color); /** Used for the background color of a neutral alert. */

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

@@ -1072,9 +1072,9 @@
   --gl-border-color-section: var(--gl-background-color-default); /** Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page. */
   --gl-border-radius-default: var(--gl-border-radius-md);
   --gl-font-size-base: var(--gl-font-size-md);
-  --gl-shadow-sm: 0 0 2px var(--gl-shadow-color-default), 0 1px 4px var(--gl-shadow-color-default); /** Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board. */
-  --gl-shadow-md: 0 0 1px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 2px 8px var(--gl-shadow-color-default); /** Used for surfaces that need boundary definition and appear on hover. For example, popovers. */
-  --gl-shadow-lg: 0 0 2px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 4px 12px var(--gl-shadow-color-default); /** Used for large surfaces that present additional context to the user. */
+  --gl-shadow-sm: 0 0 2px 0 var(--gl-shadow-color-default), 0 1px 4px 0 var(--gl-shadow-color-default); /** Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board. */
+  --gl-shadow-md: 0 0 1px 0 var(--gl-shadow-color-default), 0 0 2px 0 var(--gl-shadow-color-default), 0 2px 8px 0 var(--gl-shadow-color-default); /** Used for surfaces that need boundary definition and appear on hover. For example, popovers. */
+  --gl-shadow-lg: 0 0 2px 0 var(--gl-shadow-color-default), 0 0 2px 0 var(--gl-shadow-color-default), 0 4px 12px 0 var(--gl-shadow-color-default); /** Used for large surfaces that present additional context to the user. */
   --gl-alert-border-radius: var(--gl-border-radius-lg); /** Used for alert border radius. */
   --gl-alert-neutral-title-color: var(--gl-text-color-heading); /** Used for the title color of a neutral alert. */
   --gl-alert-neutral-background-color: var(--gl-background-color-subtle); /** Used for the background color of a neutral alert. */

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

@@ -1070,9 +1070,9 @@ $gl-heading-6-fixed-line-height: $gl-line-height-heading;
 $gl-border-color-section: $gl-background-color-default; // Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.
 $gl-border-radius-default: $gl-border-radius-md;
 $gl-font-size-base: $gl-font-size-md;
-$gl-shadow-sm: 0 0 2px $gl-shadow-color-default, 0 1px 4px $gl-shadow-color-default; // Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board.
-$gl-shadow-md: 0 0 1px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 2px 8px $gl-shadow-color-default; // Used for surfaces that need boundary definition and appear on hover. For example, popovers.
-$gl-shadow-lg: 0 0 2px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 4px 12px $gl-shadow-color-default; // Used for large surfaces that present additional context to the user.
+$gl-shadow-sm: 0 0 2px 0 $gl-shadow-color-default, 0 1px 4px 0 $gl-shadow-color-default; // Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board.
+$gl-shadow-md: 0 0 1px 0 $gl-shadow-color-default, 0 0 2px 0 $gl-shadow-color-default, 0 2px 8px 0 $gl-shadow-color-default; // Used for surfaces that need boundary definition and appear on hover. For example, popovers.
+$gl-shadow-lg: 0 0 2px 0 $gl-shadow-color-default, 0 0 2px 0 $gl-shadow-color-default, 0 4px 12px 0 $gl-shadow-color-default; // Used for large surfaces that present additional context to the user.
 $gl-alert-border-radius: $gl-border-radius-lg; // Used for alert border radius.
 $gl-alert-neutral-title-color: $gl-text-color-heading; // Used for the title color of a neutral alert.
 $gl-alert-neutral-background-color: $gl-background-color-subtle; // Used for the background color of a neutral alert.

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

@@ -1053,9 +1053,9 @@ $gl-heading-6-fixed-line-height: $gl-line-height-heading;
 $gl-border-color-section: $gl-border-color-default; // Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.
 $gl-border-radius-default: $gl-border-radius-md;
 $gl-font-size-base: $gl-font-size-md;
-$gl-shadow-sm: 0 0 2px $gl-shadow-color-default, 0 1px 4px $gl-shadow-color-default; // Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board.
-$gl-shadow-md: 0 0 1px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 2px 8px $gl-shadow-color-default; // Used for surfaces that need boundary definition and appear on hover. For example, popovers.
-$gl-shadow-lg: 0 0 2px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 4px 12px $gl-shadow-color-default; // Used for large surfaces that present additional context to the user.
+$gl-shadow-sm: 0 0 2px 0 $gl-shadow-color-default, 0 1px 4px 0 $gl-shadow-color-default; // Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board.
+$gl-shadow-md: 0 0 1px 0 $gl-shadow-color-default, 0 0 2px 0 $gl-shadow-color-default, 0 2px 8px 0 $gl-shadow-color-default; // Used for surfaces that need boundary definition and appear on hover. For example, popovers.
+$gl-shadow-lg: 0 0 2px 0 $gl-shadow-color-default, 0 0 2px 0 $gl-shadow-color-default, 0 4px 12px 0 $gl-shadow-color-default; // Used for large surfaces that present additional context to the user.
 $gl-alert-border-radius: $gl-border-radius-lg; // Used for alert border radius.
 $gl-alert-neutral-title-color: $gl-text-color-heading; // Used for the title color of a neutral alert.
 $gl-alert-neutral-background-color: $gl-feedback-neutral-background-color; // Used for the background color of a neutral alert.