@gitlab/ui 109.2.1 → 110.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "109.2.1",
+  "version": "110.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -155,7 +155,7 @@
     "eslint-formatter-gitlab": "^5.1.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "3.6.0",
-    "eslint-plugin-storybook": "0.11.3",
+    "eslint-plugin-storybook": "0.11.4",
     "fuse.js": "^7.0.0",
     "gitlab-api-async-iterator": "^1.3.1",
     "glob": "10.3.3",

package/src/charts.js

@@ -5,7 +5,6 @@ export { default as GlGaugeChart } from './components/charts/gauge/gauge.vue';
 export { default as GlLineChart } from './components/charts/line/line.vue';
 export { default as GlChartLegend } from './components/charts/legend/legend.vue';
 export { default as GlChartSeriesLabel } from './components/charts/series_label/series_label.vue';
-export { default as GlChartTooltip } from './components/charts/tooltip/tooltip.vue';
 export { default as GlHeatmap } from './components/charts/heatmap';
 export { default as GlColumnChart } from './components/charts/column/column.vue';
 export { default as GlStackedColumnChart } from './components/charts/stacked_column/stacked_column.vue';

package/src/components/charts/area/area.vue

@@ -41,7 +41,7 @@ import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { seriesHasAnnotations, isDataPointAnnotation } from '../../../utils/charts/utils';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';
-import ChartTooltip from '../tooltip/tooltip.vue';
+import ChartTooltip from '../shared/tooltip/tooltip.vue';
 
 export default {
   name: 'GlAreaChart',

package/src/components/charts/bar/bar.vue

@@ -7,9 +7,9 @@ import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { engineeringNotation } from '../../../utils/number_utils';
 import { hexToRgba } from '../../../utils/utils';
-import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
+import TooltipDefaultFormat from '../shared/tooltip/tooltip_default_format/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
-import ChartTooltip from '../tooltip/tooltip.vue';
+import ChartTooltip from '../shared/tooltip/tooltip.vue';
 
 /**
  * `nameGap` in charts/config is set to 50 but it is not

package/src/components/charts/column/column.vue

@@ -15,7 +15,7 @@ import { CHART_TYPE_LINE, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/cons
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { columnOptions } from '../../../utils/constants';
 import Chart from '../chart/chart.vue';
-import ChartTooltip from '../tooltip/tooltip.vue';
+import ChartTooltip from '../shared/tooltip/tooltip.vue';
 
 const yAxisDefaults = {
   ...yAxis,

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

@@ -8,9 +8,9 @@ import {
 } from '../../../utils/charts/config';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
-import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
+import TooltipDefaultFormat from '../shared/tooltip/tooltip_default_format/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
-import ChartTooltip from '../tooltip/tooltip.vue';
+import ChartTooltip from '../shared/tooltip/tooltip.vue';
 
 export default {
   name: 'GlDiscreteScatterChart',

package/src/components/charts/heatmap/heatmap.vue

@@ -6,10 +6,10 @@ import { getTooltipTitle, getTooltipContent } from '../../../utils/charts/config
 import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { heatmapHues } from '../../../utils/charts/theme';
 import { engineeringNotation } from '../../../utils/number_utils';
-import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
+import TooltipDefaultFormat from '../shared/tooltip/tooltip_default_format/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';
-import ChartTooltip from '../tooltip/tooltip.vue';
+import ChartTooltip from '../shared/tooltip/tooltip.vue';
 
 const defaultOptions = {
   visualMap: {

package/src/components/charts/line/line.vue

@@ -44,7 +44,7 @@ import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { seriesHasAnnotations, isDataPointAnnotation } from '../../../utils/charts/utils';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';
-import ChartTooltip from '../tooltip/tooltip.vue';
+import ChartTooltip from '../shared/tooltip/tooltip.vue';
 
 export default {
   name: 'GlLineChart',

package/src/components/charts/{tooltip → shared/tooltip}/tooltip.vue

@@ -1,12 +1,13 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import * as echarts from 'echarts';
-import { uid, debounceByAnimationFrame } from '../../../utils/utils';
-import GlPopover from '../../base/popover/popover.vue';
-import { popoverPlacements } from '../../../utils/constants';
-import { TOOLTIP_LEFT_OFFSET, TOOLTIP_TOP_OFFSET } from '../../../utils/charts/constants';
-import { getTooltipTitle, getTooltipContent } from '../../../utils/charts/config';
-import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
+import { uid, debounceByAnimationFrame } from '../../../../utils/utils';
+import GlPopover from '../../../base/popover/popover.vue';
+import { popoverPlacements } from '../../../../utils/constants';
+import { TOOLTIP_LEFT_OFFSET, TOOLTIP_TOP_OFFSET } from '../../../../utils/charts/constants';
+import { getTooltipTitle, getTooltipContent } from '../../../../utils/charts/config';
+
+import TooltipDefaultFormat from './tooltip_default_format/tooltip_default_format.vue';
 
 export default {
   name: 'GlChartTooltip',

package/src/components/{shared_components/charts → charts/shared/tooltip/tooltip_default_format}/tooltip_default_format.vue

@@ -1,5 +1,5 @@
 <script>
-import SeriesLabel from '../../charts/series_label/series_label.vue';
+import SeriesLabel from '../../../series_label/series_label.vue';
 
 export default {
   name: 'TooltipDefaultFormat',

package/src/components/charts/sparkline/sparkline.vue

@@ -11,7 +11,7 @@ import {
 } from '../../../utils/charts/config';
 import { HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES } from '../../../utils/charts/constants';
 import Chart from '../chart/chart.vue';
-import ChartTooltip from '../tooltip/tooltip.vue';
+import ChartTooltip from '../shared/tooltip/tooltip.vue';
 
 // the padding is needed so the mark points don't overflow when visible
 const gridPadding = symbolSize / 2;

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

@@ -22,10 +22,10 @@ import {
 } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { columnOptions } from '../../../utils/constants';
+import TooltipDefaultFormat from '../shared/tooltip/tooltip_default_format/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';
-import ChartTooltip from '../tooltip/tooltip.vue';
-import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
+import ChartTooltip from '../shared/tooltip/tooltip.vue';
 
 const yAxisDefaults = {
   ...yAxis,

package/src/scss/components.scss

@@ -69,8 +69,8 @@
 @import '../components/charts/legend/legend';
 @import '../components/charts/series_label/series_label';
 @import '../components/charts/single_stat/single_stat';
-@import '../components/charts/tooltip/tooltip';
-@import '../components/shared_components/charts/tooltip_default_format';
+@import '../components/charts/shared/tooltip/tooltip';
+@import '../components/charts/shared/tooltip/tooltip_default_format/tooltip_default_format';
 @import '../components/utilities/truncate/truncate';
 @import '../components/utilities/truncate_text/truncate_text';
 @import '../components/base/new_dropdowns/dropdown';

package/src/scss/typography.scss

@@ -19,3 +19,20 @@ a:not([href]):not([class]) {
 caption {
   @apply gl-text-subtle;
 }
+
+.table {
+  @apply gl-w-full gl-mb-3 gl-text-default gl-bg-transparent;
+
+  th,
+  td {
+    @apply gl-p-4 gl-align-top gl-border-t;
+  }
+
+  thead th {
+    @apply gl-align-bottom gl-border-b gl-border-b-2;
+  }
+
+  tbody + tbody {
+    @apply gl-border-t gl-border-t-2;
+  }
+}

package/src/vendor/bootstrap/scss/_tables.scss

@@ -1,31 +1,3 @@
-//
-// Basic Bootstrap table
-//
-
-.table {
-  width: 100%;
-  margin-bottom: $spacer;
-  color: $table-color;
-  background-color: $table-bg; // Reset for nesting within parents with `background-color`.
-
-  th,
-  td {
-    padding: $table-cell-padding;
-    vertical-align: top;
-    border-top: $table-border-width solid $table-border-color;
-  }
-
-  thead th {
-    vertical-align: bottom;
-    border-bottom: (2 * $table-border-width) solid $table-border-color;
-  }
-
-  tbody + tbody {
-    border-top: (2 * $table-border-width) solid $table-border-color;
-  }
-}
-
-
 //
 // Condensed table w/ half padding
 //