@gitlab/ui 66.26.0 → 66.28.0

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 10 Oct 2023 19:49:13 GMT
+ * Generated on Thu, 12 Oct 2023 06:30:08 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 10 Oct 2023 19:49:14 GMT
+ * Generated on Thu, 12 Oct 2023 06:30:09 GMT
  */
 
 :root {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 10 Oct 2023 19:49:14 GMT
+ * Generated on Thu, 12 Oct 2023 06:30:09 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 10 Oct 2023 19:49:13 GMT
+ * Generated on Thu, 12 Oct 2023 06:30:08 GMT
  */
 
 export const BLACK = "#000";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 10 Oct 2023 19:49:14 GMT
+// Generated on Thu, 12 Oct 2023 06:30:09 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 10 Oct 2023 19:49:14 GMT
+// Generated on Thu, 12 Oct 2023 06:30:09 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "66.26.0",
+  "version": "66.28.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -129,7 +129,7 @@
     "eslint": "8.51.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.15.1",
-    "eslint-plugin-storybook": "0.6.14",
+    "eslint-plugin-storybook": "0.6.15",
     "glob": "10.3.3",
     "identity-obj-proxy": "^3.0.0",
     "inquirer-select-directory": "^1.2.0",

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

@@ -28,24 +28,26 @@
 }
 
 .gl-alert-title {
-  @include gl-font-base;
-  @include gl-font-weight-bold;
-  @include gl-line-height-normal;
-  @include gl-mt-0;
+  @include gl-heading-scale-500;
   @include gl-mb-3;
 }
 
-.gl-alert-icon {
+.gl-alert-icon-container {
   @include gl-absolute;
   @include gl-top-5;
   @include gl-left-5;
-  @include gl-w-5;
-  @include gl-h-5;
-  @include gl-fill-current-color;
+  @include gl-display-flex;
+  @include gl-align-items-center;
+  height: $gl-line-height-20;
+
+  .gl-alert-has-title & {
+    @include gl-heading-scale-500; // get dynamic font-size
+    height: $gl-line-height-heading * 1em; // give unit to unitless relative line-height (1.25) 
+  }
 }
 
-.gl-alert-icon-no-title {
-  @include gl-mt-1;
+.gl-alert-icon {
+  @include gl-fill-current-color;
 }
 
 .gl-alert-body {

package/src/components/base/alert/alert.spec.js

@@ -190,6 +190,22 @@ describe('Alert component', () => {
         expect(wrapper.classes()).not.toContain(cssClass);
       });
     });
+
+    it('adds the `gl-alert-has-title` class if there is a title', () => {
+      createComponent({
+        propsData: {
+          title: 'title',
+        },
+      });
+
+      expect(wrapper.classes()).toContain('gl-alert-has-title');
+    });
+
+    it('does not add the `gl-alert-has-title` class if there is no title', () => {
+      createComponent();
+
+      expect(wrapper.classes()).not.toContain('gl-alert-has-title');
+    });
   });
 
   describe('role and aria-live', () => {

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

@@ -197,15 +197,13 @@ export default {
       { 'gl-alert-sticky': sticky },
       { 'gl-alert-not-dismissible': !dismissible },
       { 'gl-alert-no-icon': !showIcon },
+      { 'gl-alert-has-title': !!title },
       variantClass,
     ]"
   >
-    <gl-icon
-      v-if="showIcon"
-      :name="iconName"
-      :class="{ 'gl-alert-icon': true, 'gl-alert-icon-no-title': !title }"
-    />
-
+    <div v-if="showIcon" class="gl-alert-icon-container">
+      <gl-icon :name="iconName" class="gl-alert-icon" />
+    </div>
     <div class="gl-alert-content" :role="role" :aria-live="ariaLive">
       <h2 v-if="title" class="gl-alert-title">{{ title }}</h2>
 

package/src/components/charts/discrete_scatter/discrete_scatter.spec.js

@@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import { createMockChartInstance } from '~helpers/chart_stubs';
 import { expectHeightAutoClasses } from '~helpers/chart_height';
 import Chart from '../chart/chart.vue';
+import ChartTooltip from '../tooltip/tooltip.vue';
 import DiscreteScatterChart from './discrete_scatter.vue';
 
 let mockChartInstance;
@@ -38,4 +39,20 @@ describe('column chart component', () => {
       findChart,
     });
   });
+
+  describe('disable-tooltip', () => {
+    it('is set to false by default', async () => {
+      createComponent();
+
+      await findChart().vm.$emit('created', mockChartInstance);
+
+      expect(wrapper.findComponent(ChartTooltip).exists()).toBe(true);
+    });
+
+    it('disables the tooltip', () => {
+      createComponent({ disableTooltip: true });
+
+      expect(wrapper.findComponent(ChartTooltip).exists()).toBe(false);
+    });
+  });
 });

package/src/components/charts/discrete_scatter/discrete_scatter.stories.js

@@ -11,6 +11,7 @@ const Template = (args, { argTypes }) => ({
     :x-axis-title="xAxisTitle"
     data-testid="discrete-scatter-chart"
     :height="height"
+    :disableTooltip="disableTooltip"
   />
 `,
 });

package/src/components/charts/discrete_scatter/discrete_scatter.vue

@@ -49,6 +49,11 @@ export default {
       required: false,
       default: null,
     },
+    disableTooltip: {
+      type: Boolean,
+      required: false,
+      default: () => false,
+    },
     /**
      * Sets the chart's height in pixels. Set to `"auto"` to use the height of the container.
      */
@@ -187,7 +192,7 @@ export default {
       @created="onCreated"
     />
     <chart-tooltip
-      v-if="chart"
+      v-if="!disableTooltip && chart"
       :show="showTooltip"
       :chart="chart"
       :top="tooltipPosition.top"