@gitlab/ui 38.3.0 → 38.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "38.3.0",
+  "version": "38.5.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -88,7 +88,7 @@
     "@babel/preset-env": "^7.10.2",
     "@gitlab/eslint-plugin": "12.0.1",
     "@gitlab/stylelint-config": "4.0.0",
-    "@gitlab/svgs": "2.7.0",
+    "@gitlab/svgs": "2.8.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

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

@@ -73,6 +73,20 @@ describe('datepicker component', () => {
     expect(Pikaday.prototype.show).toHaveBeenCalled();
   });
 
+  describe('when `ariaLabel` prop is passed', () => {
+    it('configures pikaday with the given label', () => {
+      const ariaLabel = 'Meaningful description';
+
+      mountWithOptions({
+        propsData: {
+          ariaLabel,
+        },
+      });
+
+      expect(pikadayConfig().ariaLabel).toBe(ariaLabel);
+    });
+  });
+
   describe('when `target` prop is not passed', () => {
     it('sets calendar icon as `trigger` option', () => {
       const wrapper = mountWithOptions();

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

@@ -86,7 +86,7 @@ export default {
       'endRange',
       'disableDayFn',
       'firstDay',
-      'arialLabel',
+      'ariaLabel',
       'placeholder',
       'autocomplete',
       'disabled',

package/src/components/base/datepicker/datepicker.vue

@@ -99,7 +99,7 @@ export default {
       required: false,
       default: 0,
     },
-    arialLabel: {
+    ariaLabel: {
       type: String,
       required: false,
       default: '',
@@ -244,7 +244,7 @@ export default {
       },
       disableDayFn: this.disableDayFn,
       firstDay: this.firstDay,
-      arialLabel: this.ariaLabel,
+      ariaLabel: this.ariaLabel,
       toString: (date) => defaultDateFormatter(date),
       onSelect: this.selected.bind(this),
       onClose: this.closed.bind(this),

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

@@ -218,7 +218,7 @@ export const WithHeaderAndFooter = (args, { argTypes }) => ({
     <gl-dropdown-item>Fifth item</gl-dropdown-item>
     <gl-dropdown-item>Sixth item</gl-dropdown-item>
     <gl-dropdown-item>Seventh item</gl-dropdown-item>
-    <gl-dropdown-item>Eigth item</gl-dropdown-item>
+    <gl-dropdown-item>Eighth item</gl-dropdown-item>
     <template #footer>
       <gl-dropdown-item>First footer item</gl-dropdown-item>
       <gl-dropdown-item>Second footer item</gl-dropdown-item>

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

@@ -730,4 +730,23 @@ describe('Filtered search integration tests', () => {
       wrapper.findAllComponents(GlFilteredSearchToken).wrappers.map((cmp) => cmp.props('active'))
     ).toEqual([false, false]);
   });
+
+  it('updates tokens list when value is passed dynamically', async () => {
+    mountComponent({ value: ['one'] });
+    await nextTick();
+
+    expect(wrapper.findAllComponents(GlFilteredSearchTerm)).toHaveLength(2);
+
+    await wrapper.setProps({
+      value: ['one two'],
+    });
+
+    const termComponents = wrapper.findAllComponents(GlFilteredSearchTerm).wrappers;
+    expect(termComponents).toHaveLength(3);
+    expect(termComponents.map((termComponent) => termComponent.props('value'))).toEqual([
+      { data: 'one' },
+      { data: 'two' },
+      { data: '' },
+    ]);
+  });
 });

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

@@ -1,5 +1,5 @@
 <script>
-import { cloneDeep } from 'lodash';
+import { cloneDeep, isEqual } from 'lodash';
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
 import { GlTooltipDirective } from '../../../directives/tooltip';
@@ -174,11 +174,14 @@ export default {
       deep: true,
       immediate: true,
     },
-  },
-  mounted() {
-    if (this.value.length) {
-      this.applyNewValue(cloneDeep(this.value));
-    }
+    value: {
+      handler(newValue, oldValue) {
+        if (newValue.length && !isEqual(newValue, oldValue)) {
+          this.applyNewValue(cloneDeep(newValue));
+        }
+      },
+      immediate: true,
+    },
   },
 
   methods: {

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

@@ -36,6 +36,14 @@ describe('search box by click component', () => {
     expect(wrapper.emitted().input).toEqual([['new value']]);
   });
 
+  it('does not emit an input event when input is updated to the same value', async () => {
+    createComponent({ value: 'somevalue' });
+
+    await wrapper.setProps({ value: 'another value' });
+
+    expect(wrapper.emitted().input).toBe(undefined);
+  });
+
   it('does not displays history dropdown by default', () => {
     createComponent();
     expect(wrapper.findComponent({ ref: 'historyDropdown' }).exists()).toBe(false);

package/src/components/base/search_box_by_click/search_box_by_click.vue

@@ -152,6 +152,7 @@ export default {
       immediate: true,
     },
     currentValue(newValue) {
+      if (newValue === this.value) return;
       this.$emit('input', newValue);
     },
   },

package/src/scss/utilities.scss

@@ -5436,6 +5436,16 @@
 .gl-ml-auto\! {
   margin-left: auto !important;
 }
+.gl-sm-ml-auto {
+  @include gl-media-breakpoint-up(sm) {
+  margin-left: auto;
+  }
+}
+.gl-sm-ml-auto\! {
+  @include gl-media-breakpoint-up(sm) {
+  margin-left: auto !important;
+  }
+}
 .gl-ml-0 {
   margin-left: 0;
 }

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

@@ -514,6 +514,12 @@
   margin-left: auto;
 }
 
+@mixin gl-sm-ml-auto {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-ml-auto;
+  }
+}
+
 @mixin gl-ml-0 {
   margin-left: 0;
 }