@gitlab/ui 64.18.3 → 64.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "64.18.3",
+  "version": "64.20.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -85,28 +85,28 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.22.5",
-    "@babel/preset-env": "^7.22.5",
+    "@babel/core": "^7.22.8",
+    "@babel/preset-env": "^7.22.7",
     "@babel/preset-react": "^7.22.5",
     "@gitlab/eslint-plugin": "19.0.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.53.0",
+    "@gitlab/svgs": "3.54.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "7.0.24",
-    "@storybook/addon-docs": "7.0.24",
-    "@storybook/addon-essentials": "7.0.24",
-    "@storybook/addon-storyshots": "7.0.24",
-    "@storybook/addon-storyshots-puppeteer": "7.0.24",
-    "@storybook/addon-viewport": "7.0.24",
-    "@storybook/builder-webpack5": "7.0.24",
-    "@storybook/theming": "7.0.24",
-    "@storybook/vue": "7.0.24",
-    "@storybook/vue-webpack5": "7.0.24",
-    "@storybook/vue3": "7.0.24",
-    "@storybook/vue3-webpack5": "7.0.24",
+    "@storybook/addon-a11y": "7.0.26",
+    "@storybook/addon-docs": "7.0.26",
+    "@storybook/addon-essentials": "7.0.26",
+    "@storybook/addon-storyshots": "7.0.26",
+    "@storybook/addon-storyshots-puppeteer": "7.0.26",
+    "@storybook/addon-viewport": "7.0.26",
+    "@storybook/builder-webpack5": "7.0.26",
+    "@storybook/theming": "7.0.26",
+    "@storybook/vue": "7.0.26",
+    "@storybook/vue-webpack5": "7.0.26",
+    "@storybook/vue3": "7.0.26",
+    "@storybook/vue3-webpack5": "7.0.26",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
@@ -118,7 +118,7 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-require-context-hook": "^1.0.0",
     "bootstrap": "4.6.2",
-    "cypress": "12.16.0",
+    "cypress": "12.17.0",
     "emoji-regex": "^10.0.0",
     "eslint": "8.44.0",
     "eslint-import-resolver-jest": "3.0.2",
@@ -127,9 +127,9 @@
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",
     "inquirer-select-directory": "^1.2.0",
-    "jest": "^29.5.0",
-    "jest-circus": "29.5.0",
-    "jest-environment-jsdom": "29.5.0",
+    "jest": "^29.6.1",
+    "jest-circus": "29.6.1",
+    "jest-environment-jsdom": "29.6.1",
     "markdownlint-cli": "^0.29.0",
     "mockdate": "^2.0.5",
     "module-alias": "^2.2.2",
@@ -154,7 +154,7 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "7.0.24",
+    "storybook": "7.0.26",
     "storybook-dark-mode": "3.0.0",
     "style-dictionary": "^3.8.0",
     "stylelint": "14.9.1",

package/src/components/base/filtered_search/filtered_search.stories.js

@@ -2,6 +2,7 @@ import GlLoadingIcon from '../loading_icon/loading_icon.vue';
 import GlIcon from '../icon/icon.vue';
 import GlToken from '../token/token.vue';
 import GlAvatar from '../avatar/avatar.vue';
+import GlDatepicker from '../datepicker/datepicker.vue';
 import GlDropdownDivider from '../dropdown/dropdown_divider.vue';
 import { setStoryTimeout } from '../../../utils/test_utils';
 import { makeContainer } from '../../../utils/story_decorators/container';
@@ -284,6 +285,58 @@ const LabelToken = {
   `,
 };
 
+const DateToken = {
+  name: 'DateToken',
+  __v_skip: true /* temporary workaround for @vue/compat */,
+  components: {
+    GlIcon,
+    GlDatepicker,
+    GlFilteredSearchToken,
+  },
+  props: ['value', 'active', 'viewOnly'],
+  inheritAttrs: false,
+  data() {
+    return {
+      dataSegmentInputAttributes: {
+        id: 'this-id',
+        placeholder: 'YYYY-MM-DD',
+        style: 'padding-left: 23px;',
+      },
+    };
+  },
+  methods: {
+    selectValue(value, submitValue) {
+      const date = new Date(value);
+      const offset = date.getTimezoneOffset();
+      const offsetDdate = new Date(date.getTime() - offset * 60 * 1000);
+      const dateString = offsetDdate.toISOString().split('T')[0];
+      submitValue(dateString);
+    },
+  },
+  template: `
+    <div>
+      <gl-filtered-search-token
+        :data-segment-input-attributes="dataSegmentInputAttributes"
+        v-bind="{ ...this.$props, ...this.$attrs }"
+        v-on="$listeners"
+      >
+        <template #before-data-segment-input="{ submitValue }">
+          <gl-icon
+            class="gl-text-gray-500"
+            name="calendar"
+            style="margin-right: -20px; z-index: 1; pointer-events: none;"
+          />
+          <gl-datepicker
+            class="gl-display-none!"
+            target='#this-id'
+            :container="null"
+            @input="selectValue($event, submitValue)" />
+        </template>
+      </gl-filtered-search-token>
+    </div>
+  `,
+};
+
 const tokens = [
   {
     type: 'author',
@@ -308,6 +361,16 @@ const tokens = [
       { icon: 'eye', value: 'false', title: 'No' },
     ],
   },
+  {
+    type: 'date',
+    icon: 'history',
+    title: 'Created',
+    token: DateToken,
+    operators: [
+      { value: '<', description: 'before' },
+      { value: '>', description: 'after' },
+    ],
+  },
 ];
 
 const components = {

package/src/components/base/filtered_search/filtered_search_token.spec.js

@@ -1,8 +1,12 @@
+import * as Vue from 'vue';
 import { shallowMount, mount } from '@vue/test-utils';
-import { observable, nextTick } from 'vue';
+import { observable, nextTick, h } from 'vue';
 import GlFilteredSearchToken from './filtered_search_token.vue';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment.vue';
 
+const TEST_ID_BEFORE_DATA_SEGMENT_INPUT_BUTTON = 'before-data-input-button';
+const TEST_APPLY_VALUE = 'Lorem-ipsum-apply';
+
 describe('Filtered search token', () => {
   let wrapper;
 
@@ -39,6 +43,23 @@ describe('Filtered search token', () => {
     });
   };
 
+  const createSlot = (testId, onClick) => {
+    // why: Vue3 has a different format for creating VNodes
+    return Vue.version.startsWith('3')
+      ? h('button', {
+          'data-testid': testId,
+          onClick,
+        })
+      : h('button', {
+          attrs: {
+            'data-testid': testId,
+          },
+          on: {
+            click: onClick,
+          },
+        });
+  };
+
   const mountComponent = (props) => {
     wrapper = mount(GlFilteredSearchToken, {
       provide: {
@@ -58,6 +79,10 @@ describe('Filtered search token', () => {
         },
       },
       propsData: { ...defaultProps, ...props },
+      scopedSlots: {
+        'before-data-segment-input': ({ submitValue }) =>
+          createSlot(TEST_ID_BEFORE_DATA_SEGMENT_INPUT_BUTTON, () => submitValue(TEST_APPLY_VALUE)),
+      },
     });
   };
 
@@ -282,6 +307,25 @@ describe('Filtered search token', () => {
 
       expect(value).toEqual(originalValue());
     });
+
+    it('renders before-data-segment-input scoped slot which can submitValue', async () => {
+      mountComponent({ active: true, value: observable({ operator: '=', data: '' }) });
+
+      // what: Activate data segment
+      await wrapper.find('input').trigger('keydown', { key: ' ' });
+
+      expect(wrapper.emitted()).toEqual({});
+
+      const beforeDataInputButton = wrapper.find(
+        `[data-testid="${TEST_ID_BEFORE_DATA_SEGMENT_INPUT_BUTTON}"]`
+      );
+      beforeDataInputButton.trigger('click');
+
+      expect(wrapper.emitted()).toEqual({
+        complete: [[]],
+        select: [[TEST_APPLY_VALUE]],
+      });
+    });
   });
 
   describe('when multi select', () => {

package/src/components/base/filtered_search/filtered_search_token.vue

@@ -421,6 +421,9 @@ export default {
       @previous="activatePreviousOperatorSegment"
       @next="$emit('next')"
     >
+      <template #before-input="scope">
+        <slot name="before-data-segment-input" v-bind="scope"></slot>
+      </template>
       <template #suggestions>
         <!-- @slot The suggestions (implemented with GlFilteredSearchSuggestion). -->
 

package/src/components/base/filtered_search/filtered_search_token_segment.vue

@@ -416,6 +416,7 @@ export default {
     v-on="viewOnly ? {} : { mousedown: emitIfInactive }"
   >
     <template v-if="active">
+      <slot name="before-input" v-bind="{ submitValue: applySuggestion }"></slot>
       <input
         ref="input"
         v-bind="searchInputAttributes"
@@ -427,7 +428,6 @@ export default {
         @keydown="handleInputKeydown"
         @blur="handleBlur"
       />
-
       <portal :key="`operator-${_uid}`" :to="portalName">
         <gl-filtered-search-suggestion-list
           v-if="hasOptionsOrSuggestions"

package/src/scss/utilities.scss

@@ -1301,6 +1301,14 @@
   border-color: $blue-700 !important;
 }
 
+.gl-border-purple-300 {
+  border-color: $purple-300;
+}
+
+.gl-border-purple-300\! {
+  border-color: $purple-300 !important;
+}
+
 .gl-border-purple-700 {
   border-color: $purple-700;
 }

package/src/scss/utility-mixins/border.scss

@@ -179,6 +179,10 @@
   border-color: $blue-700;
 }
 
+@mixin gl-border-purple-300 {
+  border-color: $purple-300;
+}
+
 @mixin gl-border-purple-700 {
   border-color: $purple-700;
 }