@gitlab/ui 55.0.0 → 55.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "55.0.0",
+  "version": "55.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -87,7 +87,7 @@
     "@gitlab/eslint-plugin": "18.1.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.18.0",
+    "@gitlab/svgs": "3.19.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

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

@@ -33,9 +33,10 @@ describe('Filtered search token', () => {
     cursorPosition: 'end',
   };
 
-  const createComponent = (props) => {
+  const createComponent = (props, options = {}) => {
     wrapper = shallowMount(GlFilteredSearchToken, {
       propsData: { ...defaultProps, ...props },
+      ...options,
     });
   };
 
@@ -372,4 +373,22 @@ describe('Filtered search token', () => {
       }
     );
   });
+
+  it('renders title options passed via slot', async () => {
+    createComponent(
+      {},
+      {
+        slots: {
+          'title-option': '<div>new title</div>',
+        },
+        stubs: {
+          GlFilteredSearchTokenSegment: {
+            template: `<div><slot name="option" v-bind='{ option: { value: "default title"} }'></slot></div>`,
+          },
+        },
+      }
+    );
+
+    expect(findTitleSegment().text()).toBe('new title');
+  });
 });

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

@@ -303,6 +303,10 @@ export default {
         this.$emit('destroy');
       }
     },
+
+    hasTitleOptionSlot() {
+      return Boolean(this.$scopedSlots['title-option']);
+    },
   },
 };
 </script>
@@ -346,6 +350,9 @@ export default {
           {{ inputValue }}
         </gl-token>
       </template>
+      <template v-if="hasTitleOptionSlot()" #option>
+        <slot name="title-option"></slot>
+      </template>
     </gl-filtered-search-token-segment>
 
     <gl-filtered-search-token-segment

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.stories.js

@@ -36,7 +36,7 @@ const generateProps = ({
   loading = defaultValue('loading'),
   noCaret = defaultValue('noCaret'),
   placement = defaultValue('placement'),
-  toggleId = defaultValue('toggleId'),
+  toggleId = defaultValue('toggleId')(),
   toggleText,
   textSrOnly = defaultValue('textSrOnly'),
   icon = '',

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

@@ -111,12 +111,12 @@ export default {
     },
     /**
      * Custom toggle id.
-     * Fot instance, it can be referenced by tooltip or popover
+     * For instance, it can be referenced by tooltip or popover
      */
     toggleId: {
       type: String,
       required: false,
-      default: uniqueId('dropdown-toggle-btn-'),
+      default: () => uniqueId('dropdown-toggle-btn-'),
     },
     /**
      * Additional CSS classes to customize toggle appearance

package/src/scss/utilities.scss

@@ -219,11 +219,11 @@
 }
 
 .gl-bg-gray-500 {
-  background-color: $gray-600
+  background-color: $gray-500
 }
 
 .gl-bg-gray-500\! {
-  background-color: $gray-600 !important
+  background-color: $gray-500 !important
 }
 
 .gl-bg-gray-600 {

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

@@ -51,7 +51,7 @@
 }
 
 @mixin gl-bg-gray-500 {
-  background-color: $gray-600;
+  background-color: $gray-500;
 }
 
 @mixin gl-bg-gray-600 {