@gitlab/ui 52.2.1 → 52.3.1

package/dist/utils/charts/config.js

@@ -15,6 +15,7 @@ const defaultFontSize = 12;
 const defaultHeight = 400;
 const defaultWidth = 300;
 const validRenderers = ['canvas', 'svg'];
+const toolboxHeight = 14;
 const axes = {
   name: 'Value',
   type: 'value',
@@ -504,4 +505,4 @@ const getDefaultTooltipContent = function (params) {
   };
 };
 
-export { annotationsYAxisCoords, axes, dataZoomAdjustments, defaultAreaOpacity, defaultChartOptions, defaultFontSize, defaultHeight, defaultWidth, generateAnnotationSeries, generateBarSeries, generateLineSeries, getAnnotationsConfig, getDataZoomConfig, getDefaultTooltipContent, getThresholdConfig, grid, gridWithSecondaryYAxis, lineStyle, mergeAnnotationAxisToOptions, mergeSeriesToOptions, parseAnnotations, symbolSize, validRenderers, xAxis, yAxis };
+export { annotationsYAxisCoords, axes, dataZoomAdjustments, defaultAreaOpacity, defaultChartOptions, defaultFontSize, defaultHeight, defaultWidth, generateAnnotationSeries, generateBarSeries, generateLineSeries, getAnnotationsConfig, getDataZoomConfig, getDefaultTooltipContent, getThresholdConfig, grid, gridWithSecondaryYAxis, lineStyle, mergeAnnotationAxisToOptions, mergeSeriesToOptions, parseAnnotations, symbolSize, toolboxHeight, validRenderers, xAxis, yAxis };

package/dist/utils/charts/theme.js

@@ -1,6 +1,7 @@
 import { scrollHandleSvgPath } from '../svgs/svg_paths';
 import { hexToRgba } from '../utils';
 
+const white = '#fff';
 const whiteNormal = '#f0f0f0';
 const red500 = '#dd2b0e';
 const gray50 = '#ececef';
@@ -42,6 +43,7 @@ const dataVizOrange700 = '#92430a';
 const dataVizOrange800 = '#6f3500';
 const dataVizOrange900 = '#5e2f05';
 const dataVizOrange950 = '#4b2707';
+const glBorderRadiusBase = '0.25rem';
 
 const themeName = 'gitlab';
 const heatmapHues = [gray100, dataVizBlue200, dataVizBlue400, dataVizBlue600, dataVizBlue800];
@@ -163,7 +165,10 @@ const createTheme = function () {
       emphasis: {
         iconStyle: {
           borderWidth: 0,
-          color: gray900
+          color: gray900,
+          textBackgroundColor: white,
+          textBorderRadius: glBorderRadiusBase,
+          textPadding: [8, 12]
         }
       },
       iconStyle: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "52.2.1",
+  "version": "52.3.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -91,14 +91,14 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.5.13",
-    "@storybook/addon-docs": "6.5.13",
-    "@storybook/addon-essentials": "6.5.13",
-    "@storybook/addon-storyshots": "6.5.13",
-    "@storybook/addon-storyshots-puppeteer": "6.5.13",
-    "@storybook/addon-viewport": "6.5.13",
-    "@storybook/theming": "6.5.13",
-    "@storybook/vue": "6.5.13",
+    "@storybook/addon-a11y": "6.5.14",
+    "@storybook/addon-docs": "6.5.14",
+    "@storybook/addon-essentials": "6.5.14",
+    "@storybook/addon-storyshots": "6.5.14",
+    "@storybook/addon-storyshots-puppeteer": "6.5.14",
+    "@storybook/addon-viewport": "6.5.14",
+    "@storybook/theming": "6.5.14",
+    "@storybook/vue": "6.5.14",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",

package/src/components/base/new_dropdowns/listbox/listbox.scss

@@ -0,0 +1,48 @@
+$search-icon-size: 12px;
+$clear-button-size: 24px;
+
+.gl-listbox-search {
+  @include gl-relative;
+
+  .gl-listbox-search-input {
+    @include gl-w-full;
+    @include gl-line-height-normal;
+    @include gl-h-auto;
+    @include gl-border-none;
+    @include gl-pl-7;
+    padding-right: calc(#{$gl-spacing-scale-6} + #{$gl-spacing-scale-2});
+    @include gl-py-4;
+    @include gl-font-base;
+
+    &:focus {
+      @include gl-focus($inset: true);
+    }
+
+    &::placeholder {
+      @include gl-text-gray-400;
+    }
+
+    &::-webkit-search-cancel-button {
+      @include gl-display-none;
+    }
+  }
+
+  .gl-listbox-search-icon {
+    @include gl-absolute;
+    top: calc(50% - #{$search-icon-size} / 2);
+    left: $gl-spacing-scale-4;
+    @include gl-text-gray-500;
+  }
+
+  .gl-listbox-search-clear-button {
+    @include gl-absolute;
+    top: calc(50% - #{$clear-button-size} / 2);
+    right: $gl-spacing-scale-2;
+  }
+}
+
+.gl-listbox-item {
+  &:focus {
+    @include gl-focus($inset: true);
+  }
+}

package/src/components/base/new_dropdowns/listbox/listbox.spec.js

@@ -248,25 +248,25 @@ describe('GlListbox', () => {
     });
 
     describe('when `searchable` is enabled', () => {
-      let searchbox;
+      let searchboxInput;
 
       beforeEach(() => {
         buildWrapper({ items: mockOptions, searchable: true });
         findBaseDropdown().vm.$emit(GL_DROPDOWN_SHOWN);
         firstItem = findListItem(0);
-        searchbox = findSearchBox();
+        searchboxInput = findSearchBox().find('input');
       });
 
       it('should move focus to the first item on search input `ARROW_DOWN`', async () => {
-        expect(searchbox.element).toHaveFocus();
-        searchbox.trigger('keydown', { code: ARROW_DOWN });
+        expect(searchboxInput.element).toHaveFocus();
+        searchboxInput.trigger('keydown', { code: ARROW_DOWN });
         expect(firstItem.element).toHaveFocus();
       });
 
       it('should move focus to the search input on first item `ARROW_UP', async () => {
-        searchbox.trigger('keydown', { code: ARROW_DOWN });
+        searchboxInput.trigger('keydown', { code: ARROW_DOWN });
         firstItem.trigger('keydown', { code: ARROW_UP });
-        expect(searchbox.element).toHaveFocus();
+        expect(searchboxInput.element).toHaveFocus();
       });
     });
   });

package/src/components/base/new_dropdowns/listbox/listbox.stories.js

@@ -29,6 +29,7 @@ const generateProps = ({
   searchable = defaultValue('searchable'),
   searching = defaultValue('searching'),
   noResultsText = defaultValue('noResultsText'),
+  searchPlaceholder = defaultValue('searchPlaceholder'),
   noCaret = defaultValue('noCaret'),
   right = defaultValue('right'),
   toggleText,
@@ -51,6 +52,7 @@ const generateProps = ({
   searchable,
   searching,
   noResultsText,
+  searchPlaceholder,
   noCaret,
   right,
   toggleText,
@@ -76,6 +78,7 @@ const makeBindings = (overrides = {}) =>
     ':searchable': 'searchable',
     ':searching': 'searching',
     ':no-results-text': 'noResultsText',
+    ':search-placeholder': 'searchPlaceholder',
     ':no-caret': 'noCaret',
     ':right': 'right',
     ':toggle-text': 'toggleText',
@@ -437,7 +440,11 @@ export const Searchable = (args, { argTypes }) => ({
     }
   ),
 });
-Searchable.args = generateProps({ headerText: 'Assign to department', searchable: true });
+Searchable.args = generateProps({
+  headerText: 'Assign to department',
+  searchable: true,
+  searchPlaceholder: 'Find department',
+});
 Searchable.decorators = [makeContainer({ height: '370px' })];
 
 export const SearchableGroups = (args, { argTypes }) => ({

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -20,13 +20,14 @@ import GlLoadingIcon from '../../loading_icon/loading_icon.vue';
 import GlSearchBoxByType from '../../search_box_by_type/search_box_by_type.vue';
 import GlBaseDropdown from '../base_dropdown/base_dropdown.vue';
 import GlListboxItem from './listbox_item.vue';
+import GlListboxSearchInput from './listbox_search_input.vue';
 import GlListboxGroup from './listbox_group.vue';
 import { isOption, itemsValidator, flattenedOptions } from './utils';
 
 export const ITEM_SELECTOR = '[role="option"]';
 const HEADER_ITEMS_BORDER_CLASSES = ['gl-border-b-1', 'gl-border-b-solid', 'gl-border-b-gray-200'];
 const GROUP_TOP_BORDER_CLASSES = ['gl-border-t', 'gl-pt-3', 'gl-mt-3'];
-export const SEARCH_INPUT_SELECTOR = '.gl-search-box-by-type-input';
+export const SEARCH_INPUT_SELECTOR = '.gl-listbox-search-input';
 
 export default {
   HEADER_ITEMS_BORDER_CLASSES,
@@ -40,6 +41,7 @@ export default {
     GlListboxGroup,
     GlButton,
     GlSearchBoxByType,
+    GlListboxSearchInput,
     GlLoadingIcon,
   },
   model: {
@@ -57,7 +59,7 @@ export default {
       validator: itemsValidator,
     },
     /**
-     * array of selected items values for multi-select and selected item value for single-select
+     * Array of selected items values for multi-select and selected item value for single-select
      */
     selected: {
       type: [Array, String, Number],
@@ -221,6 +223,14 @@ export default {
       required: false,
       default: 'No results found',
     },
+    /**
+     * Search input placeholder text and aria-label
+     */
+    searchPlaceholder: {
+      type: String,
+      required: false,
+      default: 'Search',
+    },
     /**
      * The reset button's label, to be rendered in the header. If this is omitted, the button is not
      * rendered.
@@ -484,7 +494,7 @@ export default {
   >
     <div
       v-if="headerText"
-      class="gl-display-flex gl-align-items-center gl-px-3 gl-py-2! gl-min-h-8"
+      class="gl-display-flex gl-align-items-center gl-p-4! gl-min-h-8"
       :class="$options.HEADER_ITEMS_BORDER_CLASSES"
     >
       <div
@@ -506,11 +516,12 @@ export default {
     </div>
 
     <div v-if="searchable" :class="$options.HEADER_ITEMS_BORDER_CLASSES">
-      <gl-search-box-by-type
+      <gl-listbox-search-input
         ref="searchBox"
         v-model="searchStr"
         :aria-owns="listboxId"
         data-testid="listbox-search-input"
+        :placeholder="searchPlaceholder"
         @input="search"
         @keydown="onKeydown"
       />

package/src/components/base/new_dropdowns/listbox/listbox_item.vue

@@ -51,7 +51,7 @@ export default {
 
 <template>
   <li
-    class="gl-dropdown-item"
+    class="gl-dropdown-item gl-listbox-item"
     role="option"
     :tabindex="isFocused ? 0 : -1"
     :aria-selected="isSelected"

package/src/components/base/new_dropdowns/listbox/listbox_search_input.spec.js

@@ -0,0 +1,64 @@
+import { mount, shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import ClearIcon from '~/components/shared_components/clear_icon_button/clear_icon_button.vue';
+import ListboxSearchInput from './listbox_search_input.vue';
+
+const modelEvent = ListboxSearchInput.model.event;
+const newSearchValue = 'new value';
+
+describe('listbox search input component', () => {
+  let wrapper;
+  const searchValue = 'some value';
+
+  const createComponent = ({ listeners, ...propsData }, mountFn = shallowMount) => {
+    wrapper = mountFn(ListboxSearchInput, { propsData, listeners });
+  };
+
+  const findClearIcon = () => wrapper.findComponent(ClearIcon);
+  const findInput = () => wrapper.findComponent({ ref: 'input' });
+
+  describe('clear icon component', () => {
+    beforeEach(() => {
+      createComponent({ value: searchValue });
+    });
+
+    it('is not rendered when value is empty', () => {
+      createComponent({ value: '' });
+
+      expect(findClearIcon().exists()).toBe(false);
+    });
+
+    it('is rendered when value is provided', () => {
+      expect(findClearIcon().exists()).toBe(true);
+    });
+
+    it('emits empty value when clicked', () => {
+      findClearIcon().vm.$emit('click', { stopPropagation: jest.fn() });
+
+      expect(wrapper.emitted('input')).toEqual([['']]);
+    });
+  });
+
+  describe('v-model', () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+      createComponent({ value: searchValue }, mount);
+    });
+
+    it('syncs value prop to input value', async () => {
+      expect(findInput().element.value).toEqual(searchValue);
+      wrapper.setProps({ value: newSearchValue });
+      await nextTick();
+
+      expect(findInput().element.value).toEqual(newSearchValue);
+    });
+
+    it(`emits ${modelEvent} event when input value changes`, () => {
+      findInput().setValue(newSearchValue);
+      jest.advanceTimersByTime(199);
+      expect(wrapper.emitted('input')).toEqual(undefined);
+      jest.advanceTimersByTime(1);
+      expect(wrapper.emitted('input')).toEqual([[newSearchValue]]);
+    });
+  });
+});

package/src/components/base/new_dropdowns/listbox/listbox_search_input.vue

@@ -0,0 +1,76 @@
+<script>
+import debounce from 'lodash/debounce';
+import GlClearIconButton from '../../../shared_components/clear_icon_button/clear_icon_button.vue';
+import GlIcon from '../../icon/icon.vue';
+
+export default {
+  components: {
+    GlClearIconButton,
+    GlIcon,
+  },
+  model: {
+    prop: 'value',
+    event: 'input',
+  },
+  props: {
+    /**
+     * If provided, used as value of search input
+     */
+    value: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    /**
+     * Search input placeholder text and aria-label
+     */
+    placeholder: {
+      type: String,
+      required: false,
+      default: 'Search',
+    },
+  },
+  computed: {
+    hasValue() {
+      return Boolean(this.value.length);
+    },
+    inputListeners() {
+      return {
+        ...this.$listeners,
+        input: debounce((event) => {
+          this.$emit('input', event.target.value);
+        }, 200),
+      };
+    },
+  },
+  methods: {
+    clearInput() {
+      this.$emit('input', '');
+      this.focusInput();
+    },
+    focusInput() {
+      this.$refs.input.focus();
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-listbox-search">
+    <gl-icon name="search-sm" :size="12" class="gl-listbox-search-icon" />
+    <input
+      ref="input"
+      type="search"
+      :value="value"
+      class="gl-listbox-search-input"
+      :aria-label="placeholder"
+      :placeholder="placeholder"
+      v-on="inputListeners"
+    />
+    <gl-clear-icon-button
+      v-if="hasValue"
+      class="gl-listbox-search-clear-button"
+      @click.stop="clearInput"
+    />
+  </div>
+</template>

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

@@ -1,5 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import * as echarts from 'echarts';
+import { toolboxHeight } from '~/utils/charts/config';
 import { createTheme } from '~/utils/charts/theme';
 import { useMockResizeObserver } from '~helpers/mock_dom_observer';
 import Chart from './chart.vue';
@@ -118,8 +119,11 @@ describe('chart component', () => {
 
     describe('draw method', () => {
       it('sets chart options', () => {
+        expect(wrapper.vm.chart.setOption).toHaveBeenCalledTimes(1);
+
         wrapper.vm.draw();
 
+        expect(wrapper.vm.chart.setOption).toHaveBeenCalledTimes(2);
         expect(wrapper.vm.chart.setOption).toHaveBeenCalledWith(options);
       });
 
@@ -142,4 +146,17 @@ describe('chart component', () => {
       });
     });
   });
+
+  describe('with toolbox in options', () => {
+    it('increases grid top by `toolboxHeight`', async () => {
+      const optionsWithToolbox = { toolbox: {} };
+      wrapper = shallowMount(Chart, { propsData: { options: optionsWithToolbox } });
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.vm.chart.setOption).toHaveBeenCalledWith({
+        ...optionsWithToolbox,
+        grid: { top: toolboxHeight },
+      });
+    });
+  });
 });

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

@@ -1,7 +1,12 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import * as echarts from 'echarts';
-import { defaultHeight, defaultWidth, validRenderers } from '../../../utils/charts/config';
+import {
+  defaultHeight,
+  defaultWidth,
+  validRenderers,
+  toolboxHeight,
+} from '../../../utils/charts/config';
 import { createTheme, themeName } from '../../../utils/charts/theme';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 
@@ -11,6 +16,16 @@ import { GlResizeObserverDirective } from '../../../directives/resize_observer/r
  */
 const sizeValidator = (size) => Number.isFinite(size) || size === 'auto' || size == null;
 
+const isChartWithToolbox = (options) => options?.toolbox !== undefined;
+
+const increaseChartGridTop = (options, increaseBy) => ({
+  ...options,
+  grid: {
+    ...options.grid,
+    top: (options?.grid?.top || 0) + increaseBy,
+  },
+});
+
 export default {
   directives: {
     resizeObserver: GlResizeObserverDirective,
@@ -78,6 +93,13 @@ export default {
       chart: null,
     };
   },
+  computed: {
+    normalizedOptions() {
+      return isChartWithToolbox(this.options)
+        ? increaseChartGridTop(this.options, toolboxHeight)
+        : this.options;
+    },
+  },
   watch: {
     options() {
       if (this.chart) {
@@ -123,7 +145,7 @@ export default {
   },
   methods: {
     draw() {
-      this.chart.setOption(this.options);
+      this.chart.setOption(this.normalizedOptions);
       /**
        * Emitted after calling `echarts.setOption`
        */

package/src/scss/components.scss

@@ -74,3 +74,4 @@
 @import '../components/charts/tooltip/tooltip';
 @import '../components/shared_components/charts/tooltip_default_format';
 @import '../components/utilities/truncate/truncate';
+@import '../components/base/new_dropdowns/listbox/listbox';

package/src/utils/charts/config.js

@@ -14,6 +14,7 @@ export const defaultFontSize = 12;
 export const defaultHeight = 400;
 export const defaultWidth = 300;
 export const validRenderers = ['canvas', 'svg'];
+export const toolboxHeight = 14;
 
 export const axes = {
   name: 'Value',

package/src/utils/charts/theme.js

@@ -40,6 +40,8 @@ import {
   dataVizOrange800,
   dataVizOrange950,
   dataVizOrange900,
+  glBorderRadiusBase,
+  white,
 } from '../../../scss_to_js/scss_variables';
 import { scrollHandleSvgPath } from '../svgs/svg_paths';
 import { hexToRgba } from '../utils';
@@ -209,6 +211,9 @@ export const createTheme = (options = {}) => ({
       iconStyle: {
         borderWidth: 0,
         color: gray900,
+        textBackgroundColor: white,
+        textBorderRadius: glBorderRadiusBase,
+        textPadding: [8, 12],
       },
     },
     iconStyle: {