@gitlab/ui 55.0.1 → 55.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "55.0.1",
+  "version": "55.2.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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/listbox/listbox.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
-import { clamp, uniqueId } from 'lodash';
+import { clamp, uniqueId, isNil } from 'lodash';
 import { stopEvent } from '../../../../utils/utils';
 import {
   GL_DROPDOWN_SHOWN,
@@ -358,7 +358,7 @@ export default {
           }
           this.selectedValues = [...newSelected];
         } else {
-          this.selectedValues = [newSelected];
+          this.selectedValues = isNil(newSelected) ? [] : [newSelected];
         }
       },
     },

package/src/components/base/toggle/toggle.scss

@@ -24,11 +24,28 @@
   @include gl-display-inline-flex;
 
   &.is-disabled {
-    @include gl-opacity-4;
     @include gl-cursor-not-allowed;
 
     .gl-toggle {
       @include gl-cursor-not-allowed;
+      @include gl-bg-gray-200;
+
+      .toggle-icon > svg {
+        @include gl-fill-gray-200;
+      }
+    }
+
+    .gl-toggle.is-checked {
+      @include gl-bg-blue-200;
+
+      .toggle-icon > svg {
+        @include gl-fill-blue-200;
+      }
+    }
+
+    .gl-toggle-label,
+    .gl-help-label {
+      @include gl-text-gray-500;
     }
   }
 }
@@ -66,7 +83,7 @@
   @include gl-justify-content-center;
   @include gl-border-0;
   @include gl-cursor-pointer;
-  @include gl-bg-gray-400;
+  @include gl-bg-gray-600;
   @include gl-p-1;
   @include gl-relative;
   @include gl-w-9;
@@ -83,6 +100,13 @@
     @include gl-bg-none;
   }
 
+  &:hover,
+  &:active,
+  &:focus,
+  &:focus:active {
+    @include gl-bg-gray-700;
+  }
+
   &:active,
   &:focus,
   &:focus:active {
@@ -116,6 +140,13 @@
   &.is-checked {
     @include gl-bg-blue-500;
 
+    &:hover,
+    &:active,
+    &:focus,
+    &:focus:active {
+      @include gl-bg-blue-600;
+    }
+
     .toggle-icon {
       transform: translateX($gl-spacing-scale-6);
 

package/src/scss/utilities.scss

@@ -7336,6 +7336,14 @@
   fill: currentColor !important
 }
 
+.gl-fill-blue-200 {
+  fill: $blue-200
+}
+
+.gl-fill-blue-200\! {
+  fill: $blue-200 !important
+}
+
 .gl-fill-blue-500 {
   fill: $blue-500
 }
@@ -7400,6 +7408,14 @@
   stroke: transparent !important
 }
 
+.gl-fill-gray-200 {
+  fill: $gray-200
+}
+
+.gl-fill-gray-200\! {
+  fill: $gray-200 !important
+}
+
 .gl-fill-gray-400 {
   fill: $gray-400
 }

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

@@ -10,6 +10,10 @@
   fill: currentColor;
 }
 
+@mixin gl-fill-blue-200 {
+  fill: $blue-200;
+}
+
 @mixin gl-fill-blue-500 {
   fill: $blue-500;
 }
@@ -42,6 +46,10 @@
   stroke: transparent;
 }
 
+@mixin gl-fill-gray-200 {
+  fill: $gray-200;
+}
+
 @mixin gl-fill-gray-400 {
   fill: $gray-400;
 }