@gitlab/ui 58.0.0 → 58.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "58.0.0",
+  "version": "58.2.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -117,7 +117,7 @@
     "bootstrap-vue-vue3": "npm:bootstrap-vue@2.23.1",
     "cypress": "^11.2.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.35.0",
+    "eslint": "8.36.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-storybook": "0.6.11",

package/src/components/base/filtered_search/filtered_search.md

@@ -29,7 +29,7 @@ Prepare array of available token configurations with the following fields:
 Each token for filtered search is a Vue component with the following props:
 
 - `value`: an object with a `data` property containing the current value, and optionally an
-`operator` value containing the operator value
+  `operator` value containing the operator value
 - `active`: indicates if the token is currently active. It's the token's responsibility
   to render proper control for editing (for example input).
 - `current-value`: current tokens of the filtered search.
@@ -60,6 +60,5 @@ Pass the list of tokens to the search component. Optionally, you can use `v-mode
 realtime updates:
 
 ```html
-
 <gl-filtered-search :available-tokens="tokens" v-model="value" />
 ```

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

@@ -346,6 +346,9 @@ export default {
        */
       this.$emit('submit', normalizeTokens(cloneDeep(this.tokens)));
     },
+    hasTitleSlot() {
+      return Boolean(this.$scopedSlots.title);
+    },
   },
 };
 </script>
@@ -402,7 +405,14 @@ export default {
           @split="createTokens(idx, $event)"
           @previous="activatePreviousToken"
           @next="activateNextToken"
-        />
+        >
+          <template
+            v-if="hasTitleSlot() && getTokenComponent(token.type).name === 'GlFilteredSearchTerm'"
+            #title="title"
+          >
+            <slot name="title" v-bind="title"></slot>
+          </template>
+        </component>
       </div>
       <portal-target
         ref="menu"

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

@@ -26,18 +26,36 @@ describe('Filtered search term', () => {
     props: ['searchInputAttributes', 'isLastToken', 'currentValue', 'viewOnly'],
   };
 
-  const createComponent = (props) => {
+  const createComponent = (props, options = {}) => {
     wrapper = shallowMount(FilteredSearchTerm, {
       propsData: { ...defaultProps, ...props },
       stubs: {
         'gl-filtered-search-token-segment': segmentStub,
       },
+      ...options,
     });
   };
 
   const findSearchInput = () => wrapper.find('input');
   const findTokenSegmentComponent = () => wrapper.findComponent(segmentStub);
 
+  it('renders title slot', async () => {
+    createComponent(
+      { availableTokens, active: true, value: { data: 'test1' } },
+      {
+        scopedSlots: {
+          title: '<div slot-scope="{ value }">New {{value}}</div>',
+        },
+      }
+    );
+
+    await nextTick();
+
+    expect(wrapper.findAllComponents(GlFilteredSearchSuggestion).at(0).text()).toBe(
+      'New test1-foo'
+    );
+  });
+
   it('renders value in inactive mode', () => {
     createComponent({ value: { data: 'test-value' } });
     expect(wrapper.html()).toMatchSnapshot();

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

@@ -167,7 +167,7 @@ export default {
           :value="item.type"
           :icon-name="item.icon"
         >
-          {{ item.title }}
+          <slot name="title" v-bind="{ value: item.title }"> {{ item.title }} </slot>
         </gl-filtered-search-suggestion>
       </template>
 

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

@@ -10,15 +10,14 @@ This component is not intended to be used outside of the `GlFilteredSearch` comp
 Make sure to pass `$listeners` to `gl-filtered-search-token`, or route events properly:
 
 ```html
-<gl-filtered-search-token
-  title="Confidential"
-  :active="active"
-  :value="value"
-  v-on="$listeners"
->
+<gl-filtered-search-token title="Confidential" :active="active" :value="value" v-on="$listeners">
   <template #suggestions>
-    <gl-filtered-search-suggestion value="Yes"><gl-icon name="eye-slash" :size="16"/> Yes</gl-filtered-search-suggestion>
-    <gl-filtered-search-suggestion value="No"><gl-icon name="eye" :size="16"/> No</gl-filtered-search-suggestion>
+    <gl-filtered-search-suggestion value="Yes"
+      ><gl-icon name="eye-slash" :size="16" /> Yes</gl-filtered-search-suggestion
+    >
+    <gl-filtered-search-suggestion value="No"
+      ><gl-icon name="eye" :size="16" /> No</gl-filtered-search-suggestion
+    >
   </template>
 </gl-filtered-search-token>
 ```

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.scss

@@ -1,3 +1,35 @@
+.btn-group {
+  .gl-disclosure-dropdown:not(:last-child) {
+    .gl-new-dropdown-toggle {
+      @include gl-rounded-top-right-none;
+      @include gl-rounded-bottom-right-none;
+    }
+  }
+
+  .gl-disclosure-dropdown:not(:first-child) {
+    .gl-new-dropdown-toggle {
+      @include gl-rounded-top-left-none;
+      @include gl-rounded-bottom-left-none;
+
+      // Prevent double borders when buttons are next to each other
+      margin-left: -1px;
+    }
+  }
+
+  .gl-disclosure-dropdown:hover {
+    .gl-new-dropdown-toggle {
+      @include gl-z-index-1;
+    }
+  }
+
+  .gl-disclosure-dropdown {
+    .gl-new-dropdown-toggle:focus,
+    .gl-new-dropdown-toggle:active {
+      @include gl-z-index-1;
+    }
+  }
+}
+
 .gl-disclosure-dropdown {
   &.gl-new-dropdown {
     .gl-new-dropdown-inner {