@gitlab/ui 86.11.0 → 86.12.0

package/dist/utils/charts/story_config.js

@@ -1,25 +1,7 @@
 import times from 'lodash/times';
 import { SERIES_NAME, SERIES_NAME_SHORT } from '../stories_constants';
-import { marqueeSelectionSvgPath, redoSvgPath, clearAllSvgPath, downloadSvgPath } from '../svgs/svg_paths';
 import { colorFromDefaultPalette } from './theme';
 
-const toolbox = {
-  feature: {
-    dataZoom: {
-      icon: {
-        zoom: marqueeSelectionSvgPath,
-        back: redoSvgPath
-      }
-    },
-    restore: {
-      icon: clearAllSvgPath
-    },
-    saveAsImage: {
-      icon: downloadSvgPath
-    }
-  }
-};
-
 /**
  * Generates series data for usage in chart examples
  *
@@ -39,4 +21,4 @@ const generateSeriesData = function () {
   }));
 };
 
-export { generateSeriesData, toolbox };
+export { generateSeriesData };

package/dist/utils/charts/theme.js

@@ -1,5 +1,5 @@
 import { GRAY_600, GRAY_200, GRAY_50, GRAY_300, GRAY_100, DATA_VIZ_BLUE_200, DATA_VIZ_BLUE_400, DATA_VIZ_BLUE_600, DATA_VIZ_BLUE_800, GRAY_900, GRAY_500, DATA_VIZ_BLUE_500, DATA_VIZ_BLUE_900, DATA_VIZ_ORANGE_500, DATA_VIZ_ORANGE_600, DATA_VIZ_AQUA_500, DATA_VIZ_GREEN_600, DATA_VIZ_MAGENTA_500, DATA_VIZ_BLUE_700, DATA_VIZ_ORANGE_800, DATA_VIZ_AQUA_700, DATA_VIZ_GREEN_800, DATA_VIZ_MAGENTA_700, DATA_VIZ_ORANGE_950, DATA_VIZ_AQUA_900, DATA_VIZ_GREEN_950, DATA_VIZ_MAGENTA_900, DATA_VIZ_ORANGE_700, DATA_VIZ_AQUA_600, DATA_VIZ_GREEN_700, DATA_VIZ_MAGENTA_600, DATA_VIZ_ORANGE_900, DATA_VIZ_AQUA_800, DATA_VIZ_GREEN_900, DATA_VIZ_MAGENTA_800, DATA_VIZ_BLUE_950, DATA_VIZ_AQUA_950, DATA_VIZ_GREEN_500, DATA_VIZ_MAGENTA_950, DATA_VIZ_ORANGE_400, DATA_VIZ_GREEN_400, DATA_VIZ_BLUE_300, DATA_VIZ_ORANGE_200, DATA_VIZ_AQUA_300, DATA_VIZ_GREEN_200, DATA_VIZ_MAGENTA_300, DATA_VIZ_BLUE_100, DATA_VIZ_ORANGE_50, DATA_VIZ_AQUA_100, DATA_VIZ_GREEN_50, DATA_VIZ_MAGENTA_100, DATA_VIZ_ORANGE_300, DATA_VIZ_AQUA_400, DATA_VIZ_GREEN_300, DATA_VIZ_MAGENTA_400, DATA_VIZ_ORANGE_100, DATA_VIZ_AQUA_200, DATA_VIZ_GREEN_100, DATA_VIZ_MAGENTA_200, DATA_VIZ_BLUE_50, DATA_VIZ_AQUA_50, DATA_VIZ_MAGENTA_50, RED_500, WHITE } from '../../tokens/build/js/tokens';
-import { scrollHandleSvgPath } from '../svgs/svg_paths';
+import { scrollHandleSvgPath, marqueeSelectionSvgPath, redoSvgPath, clearAllSvgPath, downloadSvgPath } from '../svgs/svg_paths';
 import { hexToRgba } from '../utils';
 
 const GL_BORDER_RADIUS_BASE = '0.25rem';
@@ -141,14 +141,20 @@ const createTheme = function () {
           title: {
             zoom: 'Click to zoom in on a portion of the graph',
             back: 'Remove selection'
+          },
+          icon: {
+            zoom: marqueeSelectionSvgPath,
+            back: redoSvgPath
           }
         },
         restore: {
-          title: 'Remove all selections and return chart to default state'
+          title: 'Remove all selections and return chart to default state',
+          icon: clearAllSvgPath
         },
         saveAsImage: {
           title: 'Save chart as an image',
-          name: 'graph'
+          name: 'graph',
+          icon: downloadSvgPath
         }
       }
     },

package/package.json

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

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

@@ -76,14 +76,15 @@ $badge-min-width: $gl-spacing-scale-3;
       * Content inside the badge should shrink when gl-text-truncate class is used on the contents
       * Badge should have a minimal width of 20 pixels (for example when `1` is passed inside the slot)
    */
-  display: inline-grid;
-  grid-auto-flow: column;
-  grid-template-columns: minmax($badge-min-width, auto);
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: $gl-spacing-scale-2;
   padding: $gl-spacing-scale-1 $badge-padding-horizontal;
-  min-width: fit-content;
+  // Enable support for gl-text-truncate
+  width: 100%;
+  // Mitigate the effect of width: 100%
+  max-width: max-content;
 
   @media (forced-colors: active) {
     border: 1px solid;
@@ -95,6 +96,12 @@ $badge-min-width: $gl-spacing-scale-3;
     @include gl-flex-shrink-0;
     top: auto;
   }
+
+  .gl-badge-content {
+    display: flex;
+    justify-content: center;
+    min-width: $badge-min-width;
+  }
 }
 
 /* Variants */

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

@@ -83,6 +83,9 @@ export default {
       :class="{ '-gl-ml-2 gl-ml-n2': isCircularIcon }"
       :name="icon"
     />
-    <slot></slot>
+    <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
+    <span v-if="$slots.default" class="gl-badge-content">
+      <slot></slot>
+    </span>
   </b-badge>
 </template>

package/src/components/charts/chart/chart.vue

@@ -17,7 +17,7 @@ import { debounceByAnimationFrame } from '../../../utils/utils';
  */
 const sizeValidator = (size) => Number.isFinite(size) || size === 'auto' || size == null;
 
-const isChartWithToolbox = (options) => options?.toolbox !== undefined;
+const isChartWithToolbox = (options) => Boolean(options?.toolbox?.show);
 
 const increaseChartGridTop = (options, increaseBy) => ({
   ...options,

package/src/utils/charts/story_config.js

@@ -1,31 +1,7 @@
 import times from 'lodash/times';
 import { SERIES_NAME, SERIES_NAME_SHORT } from '../stories_constants';
-
-import {
-  marqueeSelectionSvgPath,
-  redoSvgPath,
-  clearAllSvgPath,
-  downloadSvgPath,
-} from '../svgs/svg_paths';
 import { colorFromDefaultPalette } from './theme';
 
-export const toolbox = {
-  feature: {
-    dataZoom: {
-      icon: {
-        zoom: marqueeSelectionSvgPath,
-        back: redoSvgPath,
-      },
-    },
-    restore: {
-      icon: clearAllSvgPath,
-    },
-    saveAsImage: {
-      icon: downloadSvgPath,
-    },
-  },
-};
-
 /**
  * Generates series data for usage in chart examples
  *

package/src/utils/charts/theme.js

@@ -64,7 +64,13 @@ import {
   DATA_VIZ_ORANGE_950,
   DATA_VIZ_ORANGE_900,
 } from '../../tokens/build/js/tokens';
-import { scrollHandleSvgPath } from '../svgs/svg_paths';
+import {
+  scrollHandleSvgPath,
+  marqueeSelectionSvgPath,
+  redoSvgPath,
+  clearAllSvgPath,
+  downloadSvgPath,
+} from '../svgs/svg_paths';
 import { hexToRgba } from '../utils';
 
 const GL_BORDER_RADIUS_BASE = '0.25rem';
@@ -285,13 +291,19 @@ export const createTheme = (options = {}) => ({
           zoom: 'Click to zoom in on a portion of the graph',
           back: 'Remove selection',
         },
+        icon: {
+          zoom: marqueeSelectionSvgPath,
+          back: redoSvgPath,
+        },
       },
       restore: {
         title: 'Remove all selections and return chart to default state',
+        icon: clearAllSvgPath,
       },
       saveAsImage: {
         title: 'Save chart as an image',
         name: 'graph',
+        icon: downloadSvgPath,
       },
     },
   },