@gitlab/ui 43.17.0 → 43.18.0

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

@@ -1,7 +1,7 @@
 <script>
 import { last } from 'lodash';
 import { Portal } from 'portal-vue';
-import { COMMA } from '../../../utils/constants';
+import { COMMA, LEFT_MOUSE_BUTTON } from '../../../utils/constants';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
 import GlFilteredSearchSuggestionList from './filtered_search_suggestion_list.vue';
 import { splitOnQuotes, wrapTokenInQuotes } from './filtered_search_utils';
@@ -83,6 +83,11 @@ export default {
       default: 'end',
       validator: (value) => ['start', 'end'].includes(value),
     },
+    viewOnly: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
 
   data() {
@@ -181,7 +186,7 @@ export default {
 
   methods: {
     emitIfInactive(e) {
-      if (!this.active) {
+      if (e.button === LEFT_MOUSE_BUTTON && !this.active) {
         /**
          * Emitted on mousedown event on the main component.
          */
@@ -334,9 +339,10 @@ export default {
     class="gl-filtered-search-token-segment"
     :class="{
       'gl-filtered-search-token-segment-active': active,
+      'gl-cursor-text!': viewOnly,
     }"
     data-testid="filtered-search-token-segment"
-    @mousedown.left="emitIfInactive"
+    v-on="viewOnly ? {} : { mousedown: emitIfInactive }"
   >
     <template v-if="active">
       <input
@@ -345,6 +351,7 @@ export default {
         v-model="inputValue"
         class="gl-filtered-search-token-segment-input"
         :aria-label="label"
+        :readonly="viewOnly"
         @keydown="handleInputKeydown"
         @blur="handleBlur"
       />

package/src/components/base/form/form_checkbox/form_checkbox.scss

@@ -134,7 +134,7 @@
     }
 
     .custom-control-input:checked:disabled ~ .custom-control-label,
-    .custom-control-input:indeterminate:disabled ~ .custom-control-label {
+    .custom-control-input[type='checkbox']:indeterminate:disabled ~ .custom-control-label {
       &::before {
         @include gl-bg-gray-100;
         @include gl-border-gray-100;

package/src/components/base/form/form_checkbox/form_checkbox.stories.js

@@ -6,22 +6,34 @@ const components = {
   GlFormCheckboxGroup,
 };
 
+const data = () => ({
+  selected: ['checked-option', 'checked-disabled-option'],
+  indeterminate: true,
+});
+
 const template = `
-  <gl-form-checkbox-group>
+<div>
+  <gl-form-checkbox-group v-model="selected">
+    <gl-form-checkbox value="option">Option</gl-form-checkbox>
+    <gl-form-checkbox value="slot-option">
+      Slot option
+      <template #help> With help text </template>
+    </gl-form-checkbox>
+    <gl-form-checkbox value="checked-option">Checked option</gl-form-checkbox>
+    <gl-form-checkbox value="checked-disabled-option" :disabled="true">Checked disabled option</gl-form-checkbox>
+    <gl-form-checkbox value="disabled-option" :disabled="true">Disabled option</gl-form-checkbox>
     <template #first>
-      <gl-form-checkbox value="Slot option">
-        Slot option with help text
-        <template #help>
-          Help text
-        </template>
-      </gl-form-checkbox>
+      <gl-form-checkbox value="first">First</gl-form-checkbox>
     </template>
-    <gl-form-checkbox value="Last option">Last option</gl-form-checkbox>
   </gl-form-checkbox-group>
+  <gl-form-checkbox value="indeterminate-option" :indeterminate="indeterminate">Indeterminate option</gl-form-checkbox>
+  <gl-form-checkbox value="indeterminate-disabled-option" :indeterminate="indeterminate" :disabled="true">Indeterminate disabled option</gl-form-checkbox>
+</div>
 `;
 
 const Template = () => ({
   components,
+  data,
   template,
 });
 

package/src/components/base/form/form_radio/form_radio.stories.js

@@ -2,31 +2,44 @@ import { GlFormRadio } from '../../../../index';
 import readme from './form_radio.md';
 
 const defaultOptions = [
-  { value: 'Pizza', text: 'Pizza' },
-  { value: 'Tacos', text: 'Tacos' },
-  { value: 'Burger', text: 'Burger', disabled: true },
+  { value: 'Option', name: 'radio-group' },
+  { value: 'Slot option', name: 'radio-group', slot: 'With help text' },
+  { value: 'Checked option', name: 'radio-group' },
+  {
+    value: 'Checked disabled option',
+    disabled: true,
+    name: 'last-radio-group',
+    checked: 'Checked disabled option',
+  },
+  { value: 'Disabled option', disabled: true, name: 'radio-group' },
+  { value: 'Indeterminate option', name: 'indeterminate-radio-group' },
+  { value: 'Indeterminate disabled option', disabled: true, name: 'indeterminate-radio-group' },
 ];
 
-const generateProps = ({ name = 'radio-group-name', checked = defaultOptions[0].value } = {}) => ({
-  name,
+const template = `
+<div>
+  <gl-form-radio
+    v-for="option in options"
+    :key="option.value"
+    :checked="option.checked || checked"
+    :disabled="option.disabled"
+    :name="option.name || name"
+    :value="option.value"
+  >
+    {{ option.value }}
+    <template v-if="option.slot" #help>{{ option.slot }}</template>
+  </gl-form-radio>
+</div>
+`;
+
+const generateProps = ({ checked = 'Checked option' } = {}) => ({
   checked,
 });
 
 const Template = (args) => ({
   components: { GlFormRadio },
   props: Object.keys(args),
-  template: `
-      <div>
-        <gl-form-radio
-          v-for="option in options"
-          :key="option.value"
-          :checked="checked"
-          :value="option.value"
-          :disabled="option.disabled"
-          :name="name"
-        >{{ option.text }}</gl-form-radio>
-      </div>
-    `,
+  template,
   data() {
     return {
       options: defaultOptions,

package/src/components/base/link/link.spec.js

@@ -64,7 +64,7 @@ describe('link component', () => {
 
     // GlSafeLinkDirective is actually responsible to handle the unsafe URLs
     // and GlLink uses this directive to make all the links secure by default
-    it('should set href to blank ', () => {
+    it('should set href to blank', () => {
       createWrapper({
         propsData: {
           href: unsafeUrl,

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

@@ -135,7 +135,7 @@ describe('base dropdown', () => {
       buildWrapper();
     });
 
-    it('should toggle menu visibility on toggle button click ', async () => {
+    it('should toggle menu visibility on toggle button click', async () => {
       const toggle = findDropdownToggle();
       const menu = findDropdownMenu();
 

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

@@ -52,7 +52,7 @@ describe('GlListbox', () => {
   });
 
   describe('ARIA attributes', () => {
-    it('should provide `toggleId` to the base dropdown and reference it in`aria-labelledby` attribute of the list container` ', async () => {
+    it('should provide `toggleId` to the base dropdown and reference it in`aria-labelledby` attribute of the list container`', async () => {
       await buildWrapper();
       expect(findBaseDropdown().props('toggleId')).toBe(
         findListContainer().attributes('aria-labelledby')
@@ -70,7 +70,7 @@ describe('GlListbox', () => {
         });
       });
 
-      it('should render items as selected when `selected` provided ', () => {
+      it('should render items as selected when `selected` provided', () => {
         expect(findListboxItems().at(1).props('isSelected')).toBe(true);
         expect(findListboxItems().at(2).props('isSelected')).toBe(true);
       });
@@ -106,7 +106,7 @@ describe('GlListbox', () => {
         expect(wrapper).toHaveLoggedVueErrors();
       });
 
-      it('should render item as selected when `selected` provided ', () => {
+      it('should render item as selected when `selected` provided', () => {
         expect(findListboxItems().at(1).props('isSelected')).toBe(true);
       });
 
@@ -124,7 +124,7 @@ describe('GlListbox', () => {
         buildWrapper({ selected, items: mockGroups });
       });
 
-      it('should render item as selected when `selected` provided ', () => {
+      it('should render item as selected when `selected` provided', () => {
         expect(findListboxItems().at(3).props('isSelected')).toBe(true);
       });
 

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

@@ -17,7 +17,7 @@ describe('GlListboxItem', () => {
   const findCheckIcon = () => findItem().findComponent(GLIcon);
 
   describe('toggleSelection', () => {
-    describe('when selected ', () => {
+    describe('when selected', () => {
       beforeEach(() => {
         buildWrapper({ isSelected: true });
       });
@@ -48,7 +48,7 @@ describe('GlListboxItem', () => {
       });
     });
 
-    describe('when not selected ', () => {
+    describe('when not selected', () => {
       beforeEach(() => {
         buildWrapper({ isSelected: false });
       });

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

@@ -46,7 +46,7 @@ describe('area component', () => {
   });
 
   describe('Annotations tooltips', () => {
-    it('are hidden by default ', async () => {
+    it('are hidden by default', async () => {
       createShallowWrapper();
 
       await wrapper.vm.$nextTick();
@@ -54,7 +54,7 @@ describe('area component', () => {
       expect(findAnnotationsTooltip().exists()).toBe(false);
     });
 
-    it('are displayed if passed via annotations props ', async () => {
+    it('are displayed if passed via annotations props', async () => {
       createShallowWrapper({
         annotations: [
           {
@@ -69,7 +69,7 @@ describe('area component', () => {
       expect(findAnnotationsTooltip().exists()).toBe(true);
     });
 
-    it('are displayed if passed via option props ', async () => {
+    it('are displayed if passed via option props', async () => {
       createShallowWrapper({
         option: {
           series: [

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

@@ -45,7 +45,7 @@ describe('line component', () => {
   });
 
   describe('Annotations tooltips', () => {
-    it('are hidden by default ', async () => {
+    it('are hidden by default', async () => {
       createShallowWrapper();
 
       await wrapper.vm.$nextTick();
@@ -53,7 +53,7 @@ describe('line component', () => {
       expect(findAnnotationsTooltip().exists()).toBe(false);
     });
 
-    it('are displayed if passed via annotations props ', async () => {
+    it('are displayed if passed via annotations props', async () => {
       createShallowWrapper({
         annotations: [
           {
@@ -68,7 +68,7 @@ describe('line component', () => {
       expect(findAnnotationsTooltip().exists()).toBe(true);
     });
 
-    it('are displayed if passed via option props ', async () => {
+    it('are displayed if passed via option props', async () => {
       createShallowWrapper({
         option: {
           series: [

package/src/directives/outside/outside.spec.js

@@ -252,7 +252,7 @@ describe('outside directive', () => {
     });
   });
 
-  describe('click event fired before directive binding ', () => {
+  describe('click event fired before directive binding', () => {
     // This *attempts* to simulate something like the following situation:
     //
     //     <button @click="show = true">Show</button>

package/src/utils/constants.js

@@ -8,6 +8,8 @@ function appendDefaultOption(options) {
 
 export const COMMA = ',';
 
+export const LEFT_MOUSE_BUTTON = 0;
+
 export const glThemes = ['indigo', 'blue', 'light-blue', 'green', 'red', 'light-red'];
 
 export const variantOptions = {