@gitlab/ui 56.2.1 → 56.4.0

package/dist/utils/charts/constants.js

@@ -64,4 +64,8 @@ const arrowSymbol = 'path://m5 229 5 8h-10z';
 const CHART_TYPE_BAR = 'bar';
 const CHART_TYPE_LINE = 'line';
 
-export { ANNOTATIONS_COMPONENT_TYPE, ANNOTATIONS_SERIES_NAME, ANNOTATION_TOOLTIP_TOP_OFFSET, CHART_TYPE_BAR, CHART_TYPE_LINE, DATA_TOOLTIP_LEFT_OFFSET, LEGEND_AVERAGE_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, TOOLTIP_LEFT_OFFSET, arrowSymbol };
+// Constants for height "auto"
+const HEIGHT_AUTO_CLASSES = 'gl-display-flex gl-flex-direction-column gl-h-full';
+const HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES = 'gl-display-flex gl-h-full';
+
+export { ANNOTATIONS_COMPONENT_TYPE, ANNOTATIONS_SERIES_NAME, ANNOTATION_TOOLTIP_TOP_OFFSET, CHART_TYPE_BAR, CHART_TYPE_LINE, DATA_TOOLTIP_LEFT_OFFSET, HEIGHT_AUTO_CLASSES, HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES, LEGEND_AVERAGE_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, TOOLTIP_LEFT_OFFSET, arrowSymbol };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "56.2.1",
+  "version": "56.4.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -61,7 +61,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.2",
-    "bootstrap-vue": "2.20.1",
+    "bootstrap-vue": "2.23.1",
     "dompurify": "^2.4.5",
     "echarts": "^5.3.2",
     "iframe-resizer": "^4.3.2",
@@ -88,7 +88,7 @@
     "@gitlab/eslint-plugin": "18.2.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.22.0",
+    "@gitlab/svgs": "3.24.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -113,7 +113,7 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-require-context-hook": "^1.0.0",
     "babel-preset-vue": "^2.0.2",
-    "bootstrap": "4.5.3",
+    "bootstrap": "4.6.2",
     "bootstrap-vue-vue3": "npm:bootstrap-vue@2.23.1",
     "cypress": "^11.2.0",
     "emoji-regex": "^10.0.0",
@@ -125,9 +125,9 @@
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",
     "inquirer-select-directory": "^1.2.0",
-    "jest": "^29.4.3",
-    "jest-circus": "29.4.3",
-    "jest-environment-jsdom": "29.4.3",
+    "jest": "^29.5.0",
+    "jest-circus": "29.5.0",
+    "jest-environment-jsdom": "29.5.0",
     "markdownlint-cli": "^0.29.0",
     "mockdate": "^2.0.5",
     "npm-run-all": "^4.1.5",

package/scss_to_js/scss_variables.js

@@ -341,6 +341,7 @@ export const modalTitleLineHeight = '1.25rem'
 export const modalBackdropBg = '#000'
 export const modalBackdropOpacity = '0.64'
 export const bodyColor = '#333238'
+export const enableValidationIcons = 'false'
 export const secondary = '#ececef'
 export const success = '#108548'
 export const info = '#1f75cb'

package/scss_to_js/scss_variables.json

@@ -1815,6 +1815,11 @@
       "value": "$gl-text-color",
       "compiledValue": "#333238"
     },
+    {
+      "name": "$enable-validation-icons",
+      "value": "false",
+      "compiledValue": "false"
+    },
     {
       "name": "$secondary",
       "value": "$gray-50",

package/src/components/base/form/form_checkbox/form_checkbox_group.vue

@@ -1,6 +1,6 @@
 <script>
 import { BFormCheckboxGroup } from 'bootstrap-vue';
-import formOptionsMixin from 'bootstrap-vue/src/mixins/form-options';
+import { formOptionsMixin } from 'bootstrap-vue/src/mixins/form-options';
 import { SafeHtmlDirective as SafeHtml } from '../../../../directives/safe_html/safe_html';
 import GlFormCheckbox from './form_checkbox.vue';
 

package/src/components/base/form/form_input/form_input.scss

@@ -31,17 +31,12 @@
 
   &.is-invalid {
     @include gl-inset-border-1-red-500;
-    background-image: none;
 
     &:focus {
       @include gl-focus($color: $red-500);
     }
   }
 
-  &.is-valid {
-    background-image: none;
-  }
-
   &::placeholder {
     @include gl-text-gray-400;
   }

package/src/components/base/form/form_radio_group/form_radio_group.vue

@@ -1,6 +1,6 @@
 <script>
 import { BFormRadioGroup } from 'bootstrap-vue';
-import formOptionsMixin from 'bootstrap-vue/src/mixins/form-options';
+import { formOptionsMixin } from 'bootstrap-vue/src/mixins/form-options';
 import { SafeHtmlDirective as SafeHtml } from '../../../../directives/safe_html/safe_html';
 import GlFormRadio from '../form_radio/form_radio.vue';
 

package/src/components/base/form/form_select/form_select.scss

@@ -16,6 +16,7 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
   @include gl-line-height-normal;
   @include gl-py-3;
   @include gl-pl-4;
+  padding-right: $gl-spacing-scale-2 + $gl-spacing-scale-6;
   @include gl-h-auto;
   @include gl-inset-border-1-gray-400;
   @include gl-border-none;
@@ -36,12 +37,6 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
     @include gl-cursor-not-allowed;
   }
 
-  &.is-valid,
-  &.is-invalid {
-    padding-right: $gl-spacing-scale-2 + $gl-spacing-scale-6;
-    background-image: url($gl-icon-select-chevron-down);
-  }
-
   &.is-invalid:not(:disabled) {
     @include gl-inset-border-1-red-400;
 

package/src/components/base/popover/popover.vue

@@ -45,6 +45,11 @@ export default {
       required: false,
       default: popoverPlacements.top,
     },
+    boundaryPadding: {
+      type: [Number, String],
+      required: false,
+      default: 5,
+    },
   },
   computed: {
     customClass() {
@@ -74,6 +79,7 @@ export default {
     :triggers="triggers"
     :title="title"
     :placement="placement"
+    :boundary-padding="boundaryPadding"
     v-bind="$attrs"
     v-on="$listeners"
   >

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

@@ -1,4 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
+import { BTable } from 'bootstrap-vue';
 import { logWarning } from '../../../utils/utils';
 import { waitForAnimationFrame } from '../../../utils/test_utils';
 import { glTableLiteWarning } from './constants';
@@ -10,18 +11,22 @@ jest.mock('../../../utils/utils', () => ({
 }));
 
 describe('GlTable', () => {
+  let wrapper;
+
   const slotsTemplate = {
     empty: `
       <p>Placeholder empty text</p>`,
   };
 
   const factory = ({ props = {}, scopedSlots = {} } = {}) => {
-    shallowMount(Table, {
+    wrapper = shallowMount(Table, {
       scopedSlots,
       propsData: props,
     });
   };
 
+  const findBTable = () => wrapper.findComponent(BTable);
+
   afterEach(() => {
     logWarning.mockClear();
   });
@@ -46,4 +51,10 @@ describe('GlTable', () => {
 
     expect(logWarning).not.toHaveBeenCalled();
   });
+
+  it('adds gl-table class to tableClass prop', () => {
+    factory({ props: { tableClass: 'test-class' } });
+
+    expect(findBTable().props().tableClass).toEqual(['gl-table', 'test-class']);
+  });
 });

package/src/components/base/table/table.vue

@@ -11,11 +11,21 @@ const shouldUseFullTable = ({ $attrs, $scopedSlots }) => {
   );
 };
 
+const { tableClass } = BTable.options.props;
+
 export default {
   components: {
     BTable,
   },
   inheritAttrs: false,
+  props: {
+    tableClass,
+  },
+  computed: {
+    localTableClass() {
+      return ['gl-table', this.tableClass];
+    },
+  },
   mounted() {
     // logWarning will call isDev before logging any message
     // this additional call to isDev is being made to exit the condition early when run in production
@@ -27,7 +37,7 @@ export default {
 </script>
 
 <template>
-  <b-table class="gl-table" v-bind="$attrs" v-on="$listeners">
+  <b-table :table-class="localTableClass" v-bind="$attrs" v-on="$listeners">
     <template v-for="slot in Object.keys($scopedSlots)" #[slot]="scope">
       <slot :name="slot" v-bind="scope"></slot>
     </template>

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

@@ -0,0 +1,21 @@
+import { shallowMount } from '@vue/test-utils';
+import { BTableLite } from 'bootstrap-vue';
+import GlTableLite from './table_lite.vue';
+
+describe('GlTableLite', () => {
+  let wrapper;
+
+  const factory = (propsData) => {
+    wrapper = shallowMount(GlTableLite, {
+      propsData,
+    });
+  };
+
+  const findBTableLite = () => wrapper.findComponent(BTableLite);
+
+  it('adds gl-table class to tableClass prop', () => {
+    factory({ tableClass: 'test-class' });
+
+    expect(findBTableLite().props().tableClass).toEqual(['gl-table', 'test-class']);
+  });
+});

package/src/components/base/table_lite/table_lite.vue

@@ -1,16 +1,24 @@
 <script>
 import { BTableLite } from 'bootstrap-vue';
 
+const { tableClass } = BTableLite.options.props;
+
 export default {
   components: {
     BTableLite,
   },
   inheritAttrs: false,
+  props: { tableClass },
+  computed: {
+    localTableClass() {
+      return ['gl-table', this.tableClass];
+    },
+  },
 };
 </script>
 
 <template>
-  <b-table-lite class="gl-table" v-bind="$attrs" v-on="$listeners">
+  <b-table-lite :table-class="localTableClass" v-bind="$attrs" v-on="$listeners">
     <template v-for="slot in Object.keys($scopedSlots)" #[slot]="scope">
       <!-- @slot See https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-lite-slots for available slots. -->
       <slot :name="slot" v-bind="scope"></slot>

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

@@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 
 import { LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '~/utils/charts/constants';
 import { createMockChartInstance, ChartTooltipStub } from '~helpers/chart_stubs';
+import { expectHeightAutoClasses } from '~helpers/chart_height';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';
 import AreaChart from './area.vue';
@@ -183,4 +184,12 @@ describe('area component', () => {
       expect(findLegend().props('layout')).toBe(LEGEND_LAYOUT_TABLE);
     });
   });
+
+  describe('height', () => {
+    expectHeightAutoClasses({
+      createComponent: createShallowWrapper,
+      findContainer: () => wrapper,
+      findChart,
+    });
+  });
 });

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

@@ -34,6 +34,7 @@ const template = `<gl-area-chart
   :thresholds="thresholds"
   :annotations="annotations"
   :includeLegendAvgMax="includeLegendAvgMax"
+  :height="height"
 />`;
 
 const generateProps = ({
@@ -42,12 +43,14 @@ const generateProps = ({
   thresholds = [],
   annotations = [],
   includeLegendAvgMax = true,
+  height = null,
 } = {}) => ({
   data,
   option,
   thresholds,
   annotations,
   includeLegendAvgMax,
+  height,
 });
 
 const Template = (args, { argTypes }) => ({

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

@@ -38,6 +38,7 @@ import {
   LEGEND_CURRENT_TEXT,
   LEGEND_MIN_TEXT,
   LEGEND_MAX_TEXT,
+  HEIGHT_AUTO_CLASSES,
 } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { seriesHasAnnotations, isDataPointAnnotation } from '../../../utils/charts/utils';
@@ -118,6 +119,14 @@ export default {
         return [LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE].indexOf(layout) !== -1;
       },
     },
+    /**
+     * Sets the chart's height in pixels. Set to `"auto"` to use the height of the container.
+     */
+    height: {
+      type: [Number, String],
+      required: false,
+      default: null,
+    },
   },
   data() {
     // Part of the tooltip related data can be
@@ -247,6 +256,9 @@ export default {
         return acc;
       }, []);
     },
+    autoHeight() {
+      return this.height === 'auto';
+    },
   },
   beforeDestroy() {
     this.chart.getDom().removeEventListener('mousemove', this.debouncedShowHideTooltip);
@@ -328,12 +340,20 @@ export default {
       this.selectedFormatTooltipText(params);
     },
   },
+  HEIGHT_AUTO_CLASSES,
 };
 </script>
 
 <template>
-  <div class="position-relative">
-    <chart v-bind="$attrs" :options="options" v-on="$listeners" @created="onCreated" />
+  <div class="position-relative" :class="{ [$options.HEIGHT_AUTO_CLASSES]: autoHeight }">
+    <chart
+      v-bind="$attrs"
+      :class="{ 'gl-flex-grow-1': autoHeight }"
+      :height="height"
+      :options="options"
+      v-on="$listeners"
+      @created="onCreated"
+    />
     <chart-tooltip
       v-if="shouldShowAnnotationsTooltip"
       id="annotationsTooltip"

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

@@ -1,6 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import TooltipDefaultFormat from '~/components/shared_components/charts/tooltip_default_format.vue';
 import { createMockChartInstance } from '~helpers/chart_stubs';
+import { expectHeightAutoClasses } from '~helpers/chart_height';
 import Chart from '../chart/chart.vue';
 import BarChart from './bar.vue';
 
@@ -29,9 +30,9 @@ describe('Bar chart component', () => {
   const getOptions = () => findChart().props('options');
   const emitChartCreated = () => findChart().vm.$emit('created', mockChartInstance);
 
-  const createComponent = () => {
+  const createComponent = (props = {}) => {
     wrapper = shallowMount(BarChart, {
-      propsData: defaultChartProps,
+      propsData: { ...defaultChartProps, ...props },
       stubs: {
         'tooltip-default-format': TooltipDefaultFormat,
       },
@@ -116,4 +117,12 @@ describe('Bar chart component', () => {
       });
     });
   });
+
+  describe('height', () => {
+    expectHeightAutoClasses({
+      createComponent,
+      findContainer: () => wrapper,
+      findChart,
+    });
+  });
 });

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

@@ -1,16 +1,20 @@
 import { GlBarChart } from '../../../charts';
+import { makeContainer } from '../../../utils/story_decorators/container';
 import readme from './bar.md';
 
 const Template = (args, { argTypes }) => ({
   components: { GlBarChart },
   props: Object.keys(argTypes),
-  template: `<gl-bar-chart
-  :data="data"
-  :option="option"
-  :y-axis-title="yAxisTitle"
-  :x-axis-title="xAxisTitle"
-  :x-axis-type="xAxisType"
-/>`,
+  template: `
+    <gl-bar-chart
+      :data="data"
+      :option="option"
+      :y-axis-title="yAxisTitle"
+      :x-axis-title="xAxisTitle"
+      :x-axis-type="xAxisType"
+      :height="height"
+    />
+  `,
 });
 
 const mockData = {
@@ -34,17 +38,27 @@ const generateProps = ({
   xAxisTitle = 'Pushes per day',
   yAxisTitle = 'User',
   xAxisType = 'value',
+  height = null,
 } = {}) => ({
   data,
   option,
   xAxisTitle,
   yAxisTitle,
   xAxisType,
+  height,
 });
 
 export const Default = Template.bind({});
 Default.args = generateProps();
 
+export const AutoHeight = Template.bind({});
+Object.assign(AutoHeight, {
+  args: generateProps({
+    height: 'auto',
+  }),
+  decorators: [makeContainer({ height: '600px' })],
+});
+
 export default {
   title: 'charts/bar-chart',
   component: GlBarChart,

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

@@ -3,7 +3,7 @@
 import merge from 'lodash/merge';
 import truncate from 'lodash/truncate';
 import { grid, dataZoomAdjustments, mergeSeriesToOptions } from '../../../utils/charts/config';
-import { TOOLTIP_LEFT_OFFSET } from '../../../utils/charts/constants';
+import { TOOLTIP_LEFT_OFFSET, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { engineeringNotation } from '../../../utils/number_utils';
 import { hexToRgba, debounceByAnimationFrame } from '../../../utils/utils';
@@ -85,6 +85,14 @@ export default {
       required: false,
       default: 'value',
     },
+    /**
+     * Sets the chart's height in pixels. Set to `"auto"` to use the height of the container.
+     */
+    height: {
+      type: [Number, String],
+      required: false,
+      default: null,
+    },
   },
   data() {
     return {
@@ -160,6 +168,9 @@ export default {
       // needs to be handled specially
       return mergeSeriesToOptions(mergedOptions, this.series);
     },
+    autoHeight() {
+      return this.height === 'auto';
+    },
   },
   beforeDestroy() {
     if (this.chart) {
@@ -223,12 +234,20 @@ export default {
       return { yLabels, tooltipContent };
     },
   },
+  HEIGHT_AUTO_CLASSES,
 };
 </script>
 
 <template>
-  <div class="position-relative">
-    <chart v-bind="$attrs" :options="options" v-on="$listeners" @created="onCreated" />
+  <div class="position-relative" :class="{ [$options.HEIGHT_AUTO_CLASSES]: autoHeight }">
+    <chart
+      v-bind="$attrs"
+      :class="{ 'gl-flex-grow-1': autoHeight }"
+      :height="height"
+      :options="options"
+      v-on="$listeners"
+      @created="onCreated"
+    />
     <chart-tooltip
       v-if="chart"
       :show="showTooltip"

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

@@ -55,6 +55,9 @@ export default {
       default: null,
       validator: sizeValidator,
     },
+    /**
+     * Sets the chart's height in pixels. Set to `"auto"` to use the height of the container.
+     */
     height: {
       type: [Number, String],
       required: false,

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

@@ -17,6 +17,7 @@ const template = `
     :secondary-data-title="secondaryDataTitle"
     :x-axis-title="xAxisTitle"
     :x-axis-type="xAxisType"
+    :height="height"
   />
   `;
 
@@ -29,6 +30,7 @@ const generateProps = ({
   xAxisType = 'category',
   secondaryData = [],
   secondaryDataTitle = '',
+  height = null,
 } = {}) => ({
   bars,
   lines,
@@ -38,6 +40,7 @@ const generateProps = ({
   xAxisType,
   secondaryData,
   secondaryDataTitle,
+  height,
 });
 
 const Template = (args, { argTypes }) => ({

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

@@ -12,7 +12,11 @@ import {
   generateBarSeries,
   generateLineSeries,
 } from '../../../utils/charts/config';
-import { TOOLTIP_LEFT_OFFSET, CHART_TYPE_LINE } from '../../../utils/charts/constants';
+import {
+  TOOLTIP_LEFT_OFFSET,
+  CHART_TYPE_LINE,
+  HEIGHT_AUTO_CLASSES,
+} from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { columnOptions } from '../../../utils/constants';
 import { debounceByAnimationFrame } from '../../../utils/utils';
@@ -74,6 +78,14 @@ export default {
       required: true,
       validator: (value) => ['value', 'category', 'time', 'log'].indexOf(value) !== -1,
     },
+    /**
+     * Sets the chart's height in pixels. Set to `"auto"` to use the height of the container.
+     */
+    height: {
+      type: [Number, String],
+      required: false,
+      default: null,
+    },
   },
   data() {
     return {
@@ -168,6 +180,9 @@ export default {
       // needs to be handled specially
       return mergeSeriesToOptions(mergedOptions, this.series);
     },
+    autoHeight() {
+      return this.height === 'auto';
+    },
   },
   beforeDestroy() {
     this.chart.getDom().removeEventListener('mousemove', this.debouncedMoveShowTooltip);
@@ -194,11 +209,19 @@ export default {
       this.tooltipTitle = xLabels.join(', ');
     },
   },
+  HEIGHT_AUTO_CLASSES,
 };
 </script>
 <template>
-  <div class="position-relative">
-    <chart v-bind="$attrs" :options="options" v-on="$listeners" @created="onCreated" />
+  <div class="position-relative" :class="{ [$options.HEIGHT_AUTO_CLASSES]: autoHeight }">
+    <chart
+      v-bind="$attrs"
+      :class="{ 'gl-flex-grow-1': autoHeight }"
+      :height="height"
+      :options="options"
+      v-on="$listeners"
+      @created="onCreated"
+    />
     <chart-tooltip
       v-if="chart"
       :show="showTooltip"

package/src/components/charts/column/column_chart.spec.js

@@ -1,5 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import { createMockChartInstance, ChartTooltipStub } from '~helpers/chart_stubs';
+import { expectHeightAutoClasses } from '~helpers/chart_height';
 import {
   mockDefaultLineData,
   mockDefaultBarData,
@@ -120,4 +121,12 @@ describe('column chart component', () => {
       expect(findTooltip().text()).toContain(expectedTooltipTitle);
     });
   });
+
+  describe('height', () => {
+    expectHeightAutoClasses({
+      createComponent: (props) => factory({ ...defaultChartProps, ...props }),
+      findContainer: () => wrapper,
+      findChart,
+    });
+  });
 });