@gitlab/ui 48.1.1 → 48.2.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [48.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v48.1.2...v48.2.0) (2022-10-24)
+
+
+### Features
+
+* **datepicker:** add public show method for datepicker ([adc2c8f](https://gitlab.com/gitlab-org/gitlab-ui/commit/adc2c8f53016efb253b003b02e6c354eb297ddb6))
+
+## [48.1.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v48.1.1...v48.1.2) (2022-10-21)
+
+
+### Bug Fixes
+
+* **GlPagination:** Fix GlPagination accessibility ([a802cf6](https://gitlab.com/gitlab-org/gitlab-ui/commit/a802cf6752e9d29c28b0059f94f63592d10ed86d))
+
 ## [48.1.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v48.1.0...v48.1.1) (2022-10-21)
 
 

package/dist/components/base/datepicker/datepicker.js

@@ -189,7 +189,7 @@ var script = {
 
   computed: {
     formattedDate() {
-      return this.$options.pikaday.calendar && this.$options.pikaday.calendar.toString();
+      return 'calendar' in this && this.calendar.toString();
     },
 
     customTrigger() {
@@ -223,25 +223,25 @@ var script = {
   },
   watch: {
     value(val) {
-      if (!areDatesEqual(val, this.$options.pikaday.calendar.getDate())) {
-        this.$options.pikaday.calendar.setDate(val, true);
+      if (!areDatesEqual(val, this.calendar.getDate())) {
+        this.calendar.setDate(val, true);
       }
     },
 
     minDate(minDate) {
-      this.$options.pikaday.calendar.setMinDate(minDate);
+      this.calendar.setMinDate(minDate);
     },
 
     maxDate(maxDate) {
-      this.$options.pikaday.calendar.setMaxDate(maxDate);
+      this.calendar.setMaxDate(maxDate);
     },
 
     startRange(startRange) {
-      this.$options.pikaday.calendar.setStartRange(startRange);
+      this.calendar.setStartRange(startRange);
     },
 
     endRange(endRange) {
-      this.$options.pikaday.calendar.setEndRange(endRange);
+      this.calendar.setEndRange(endRange);
     }
 
   },
@@ -295,18 +295,23 @@ var script = {
       pikadayConfig.i18n = this.i18n;
     }
 
-    this.$options.pikaday.calendar = new Pikaday(pikadayConfig);
+    this.calendar = new Pikaday(pikadayConfig);
 
     if (this.startOpened) {
-      this.$options.pikaday.calendar.show();
+      this.calendar.show();
     }
   },
 
   beforeDestroy() {
-    this.$options.pikaday.calendar.destroy();
+    this.calendar.destroy();
   },
 
   methods: {
+    // is used to open datepicker programmatically
+    show() {
+      this.calendar.show();
+    },
+
     selected(date) {
       /**
        * Emitted when a new date has been selected.
@@ -348,17 +353,11 @@ var script = {
     onKeydown() {
       if (this.textInput === '') {
         const resetDate = this.minDate || null;
-        this.$options.pikaday.calendar.setDate(resetDate);
+        this.calendar.setDate(resetDate);
         this.selected(resetDate);
       }
     }
 
-  },
-  // Vue3 will make this.$options shallow-readonly
-  // that means that in order to store anything in $options
-  // we need an object as a container
-  pikaday: {
-    calendar: null
   }
 };
 

package/dist/components/base/pagination/pagination.js

@@ -413,16 +413,16 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.isVisible)?_c('ul',{staticClass:"pagination gl-pagination text-nowrap",class:_vm.wrapperClasses,attrs:{"role":"navigation","aria-label":"Pagination"}},[_c('li',{staticClass:"page-item",class:{
-      disabled: _vm.prevPageIsDisabled,
-      'flex-fill': _vm.isFillAlign,
-    },attrs:{"aria-hidden":_vm.prevPageIsDisabled}},[_c(_vm.prevPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link prev-page-item gl-display-flex",attrs:{"aria-label":_vm.prevPageAriaLabel,"href":_vm.prevPageHref},on:{"click":function($event){return _vm.handlePrevious($event, _vm.value - 1)}}},[_vm._t("previous",function(){return [_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.prevText))])]},null,{ page: _vm.value - 1, disabled: _vm.prevPageIsDisabled })],2)],1),_vm._v(" "),_vm._l((_vm.visibleItems),function(item){return _c('li',{key:item.key,staticClass:"page-item",class:{
-      disabled: item.disabled,
-      'flex-fill': _vm.isFillAlign,
-    }},[_c(item.component,_vm._g(_vm._b({tag:"component",staticClass:"page-link",attrs:{"size":"md","aria-disabled":item.disabled}},'component',item.attrs,false),item.listeners),[_vm._t(item.slot,function(){return [_vm._v(_vm._s(item.content))]},null,item.slotData)],2)],1)}),_vm._v(" "),_c('li',{staticClass:"page-item",class:{
-      disabled: _vm.nextPageIsDisabled,
-      'flex-fill': _vm.isFillAlign,
-    },attrs:{"aria-hidden":_vm.nextPageIsDisabled}},[_c(_vm.nextPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link next-page-item gl-display-flex",attrs:{"aria-label":_vm.nextPageAriaLabel,"href":_vm.nextPageHref},on:{"click":function($event){return _vm.handleNext($event, _vm.value + 1)}}},[_vm._t("next",function(){return [_c('span',[_vm._v(_vm._s(_vm.nextText))]),_vm._v(" "),_c('gl-icon',{attrs:{"name":"chevron-right"}})]},null,{ page: _vm.value + 1, disabled: _vm.nextPageIsDisabled })],2)],1)],2):_vm._e()};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('nav',{attrs:{"aria-label":"Pagination"}},[(_vm.isVisible)?_c('ul',{staticClass:"pagination gl-pagination text-nowrap",class:_vm.wrapperClasses},[_c('li',{staticClass:"page-item",class:{
+        disabled: _vm.prevPageIsDisabled,
+        'flex-fill': _vm.isFillAlign,
+      },attrs:{"aria-hidden":_vm.prevPageIsDisabled}},[_c(_vm.prevPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link prev-page-item gl-display-flex",attrs:{"aria-label":_vm.prevPageAriaLabel,"href":_vm.prevPageHref},on:{"click":function($event){return _vm.handlePrevious($event, _vm.value - 1)}}},[_vm._t("previous",function(){return [_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.prevText))])]},null,{ page: _vm.value - 1, disabled: _vm.prevPageIsDisabled })],2)],1),_vm._v(" "),_vm._l((_vm.visibleItems),function(item){return _c('li',{key:item.key,staticClass:"page-item",class:{
+        disabled: item.disabled,
+        'flex-fill': _vm.isFillAlign,
+      }},[_c(item.component,_vm._g(_vm._b({tag:"component",staticClass:"page-link",attrs:{"size":"md","aria-disabled":item.disabled}},'component',item.attrs,false),item.listeners),[_vm._t(item.slot,function(){return [_vm._v(_vm._s(item.content))]},null,item.slotData)],2)],1)}),_vm._v(" "),_c('li',{staticClass:"page-item",class:{
+        disabled: _vm.nextPageIsDisabled,
+        'flex-fill': _vm.isFillAlign,
+      },attrs:{"aria-hidden":_vm.nextPageIsDisabled}},[_c(_vm.nextPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link next-page-item gl-display-flex",attrs:{"aria-label":_vm.nextPageAriaLabel,"href":_vm.nextPageHref},on:{"click":function($event){return _vm.handleNext($event, _vm.value + 1)}}},[_vm._t("next",function(){return [_c('span',[_vm._v(_vm._s(_vm.nextText))]),_vm._v(" "),_c('gl-icon',{attrs:{"name":"chevron-right"}})]},null,{ page: _vm.value + 1, disabled: _vm.nextPageIsDisabled })],2)],1)],2):_vm._e()])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

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

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

@@ -53,7 +53,7 @@ export const Image = (args, { argTypes }) => ({
       <gl-avatar
         :size="size"
         :shape="shape"
-        src="https://about.gitlab.com/images/press/gitlab-summit-south-africa.jpg"
+        src="./img/gitlab-summit-south-africa.jpg"
       />
     `,
 });
@@ -66,7 +66,7 @@ export const ResponsiveImage = (args, { argTypes }) => ({
       <gl-avatar
         :size="size"
         :shape="shape"
-        src="https://about.gitlab.com/images/press/gitlab-summit-south-africa.jpg"
+        src="./img/gitlab-summit-south-africa.jpg"
       />
     `,
 });
@@ -97,7 +97,7 @@ export const WithTooltip = (args, { argTypes }) => ({
         :size="size"
         :shape="shape"
         :title="tooltipText"
-        src="https://about.gitlab.com/images/press/gitlab-summit-south-africa.jpg"
+        src="./img/gitlab-summit-south-africa.jpg"
         v-gl-tooltip="{ placement }"
       />
     `,

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

@@ -3,11 +3,11 @@ import { avatarsInlineSizeOptions } from '../../../utils/constants';
 import readme from './avatars_inline.md';
 
 const defaultAvatars = [
-  { src: 'https://picsum.photos/id/1005/32', alt: 'Administrator’s user avatar' },
-  { src: 'https://picsum.photos/id/1006/32', alt: 'Ops Manager’s user avatar' },
-  { src: 'https://picsum.photos/id/1009/32', alt: 'Developer’s user avatar' },
-  { src: 'https://picsum.photos/id/1011/32', alt: 'Business Admin’s user avatar' },
-  { src: 'https://picsum.photos/id/1012/32', alt: 'Product designer’s user avatar' },
+  { src: './img/avatar_1.png', alt: 'Administrator’s user avatar' },
+  { src: './img/avatar_2.png', alt: 'Ops Manager’s user avatar' },
+  { src: './img/avatar_3.png', alt: 'Developer’s user avatar' },
+  { src: './img/avatar_4.png', alt: 'Business Admin’s user avatar' },
+  { src: './img/avatar_5.png', alt: 'Product designer’s user avatar' },
 ];
 
 const generateProps = (

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

@@ -73,6 +73,14 @@ describe('datepicker component', () => {
     expect(Pikaday.prototype.show).toHaveBeenCalled();
   });
 
+  it('opens calendar when show method is called', () => {
+    const wrapper = mountWithOptions();
+
+    wrapper.vm.show();
+
+    expect(Pikaday.prototype.show).toHaveBeenCalled();
+  });
+
   describe('when `ariaLabel` prop is passed', () => {
     it('configures pikaday with the given label', () => {
       const ariaLabel = 'Meaningful description';

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

@@ -179,7 +179,7 @@ export default {
   },
   computed: {
     formattedDate() {
-      return this.$options.pikaday.calendar && this.$options.pikaday.calendar.toString();
+      return 'calendar' in this && this.calendar.toString();
     },
     customTrigger() {
       return isString(this.target) && this.target !== '';
@@ -207,21 +207,21 @@ export default {
   },
   watch: {
     value(val) {
-      if (!areDatesEqual(val, this.$options.pikaday.calendar.getDate())) {
-        this.$options.pikaday.calendar.setDate(val, true);
+      if (!areDatesEqual(val, this.calendar.getDate())) {
+        this.calendar.setDate(val, true);
       }
     },
     minDate(minDate) {
-      this.$options.pikaday.calendar.setMinDate(minDate);
+      this.calendar.setMinDate(minDate);
     },
     maxDate(maxDate) {
-      this.$options.pikaday.calendar.setMaxDate(maxDate);
+      this.calendar.setMaxDate(maxDate);
     },
     startRange(startRange) {
-      this.$options.pikaday.calendar.setStartRange(startRange);
+      this.calendar.setStartRange(startRange);
     },
     endRange(endRange) {
-      this.$options.pikaday.calendar.setEndRange(endRange);
+      this.calendar.setEndRange(endRange);
     },
   },
   mounted() {
@@ -279,16 +279,21 @@ export default {
       pikadayConfig.i18n = this.i18n;
     }
 
-    this.$options.pikaday.calendar = new Pikaday(pikadayConfig);
+    this.calendar = new Pikaday(pikadayConfig);
 
     if (this.startOpened) {
-      this.$options.pikaday.calendar.show();
+      this.calendar.show();
     }
   },
   beforeDestroy() {
-    this.$options.pikaday.calendar.destroy();
+    this.calendar.destroy();
   },
   methods: {
+    // is used to open datepicker programmatically
+    show() {
+      this.calendar.show();
+    },
+
     selected(date) {
       /**
        * Emitted when a new date has been selected.
@@ -324,18 +329,11 @@ export default {
     onKeydown() {
       if (this.textInput === '') {
         const resetDate = this.minDate || null;
-        this.$options.pikaday.calendar.setDate(resetDate);
+        this.calendar.setDate(resetDate);
         this.selected(resetDate);
       }
     },
   },
-
-  // Vue3 will make this.$options shallow-readonly
-  // that means that in order to store anything in $options
-  // we need an object as a container
-  pikaday: {
-    calendar: null,
-  },
 };
 </script>
 

package/src/components/base/pagination/pagination.vue

@@ -375,102 +375,98 @@ export default {
 </script>
 
 <template>
-  <ul
-    v-if="isVisible"
-    role="navigation"
-    class="pagination gl-pagination text-nowrap"
-    :class="wrapperClasses"
-    aria-label="Pagination"
-  >
-    <li
-      class="page-item"
-      :class="{
-        disabled: prevPageIsDisabled,
-        'flex-fill': isFillAlign,
-      }"
-      :aria-hidden="prevPageIsDisabled"
-    >
-      <component
-        :is="prevPageIsDisabled ? 'span' : 'a'"
-        class="gl-link page-link prev-page-item gl-display-flex"
-        :aria-label="prevPageAriaLabel"
-        :href="prevPageHref"
-        @click="handlePrevious($event, value - 1)"
+  <nav aria-label="Pagination">
+    <ul v-if="isVisible" class="pagination gl-pagination text-nowrap" :class="wrapperClasses">
+      <li
+        class="page-item"
+        :class="{
+          disabled: prevPageIsDisabled,
+          'flex-fill': isFillAlign,
+        }"
+        :aria-hidden="prevPageIsDisabled"
       >
-        <!--
-          @slot Content for the "previous" button. Overrides the "prevText" prop.
+        <component
+          :is="prevPageIsDisabled ? 'span' : 'a'"
+          class="gl-link page-link prev-page-item gl-display-flex"
+          :aria-label="prevPageAriaLabel"
+          :href="prevPageHref"
+          @click="handlePrevious($event, value - 1)"
+        >
+          <!--
+            @slot Content for the "previous" button. Overrides the "prevText" prop.
+            @binding {boolean} active
+            @binding {boolean} disabled
+            @binding {number} number
+            -->
+          <slot name="previous" v-bind="{ page: value - 1, disabled: prevPageIsDisabled }">
+            <gl-icon name="chevron-left" />
+            <span>{{ prevText }}</span>
+          </slot>
+        </component>
+      </li>
+      <li
+        v-for="item in visibleItems"
+        :key="item.key"
+        class="page-item"
+        :class="{
+          disabled: item.disabled,
+          'flex-fill': isFillAlign,
+        }"
+      >
+        <component
+          :is="item.component"
+          size="md"
+          :aria-disabled="item.disabled"
+          class="page-link"
+          v-bind="item.attrs"
+          v-on="item.listeners"
+        >
+          <!--
+          Content for page number buttons.
+          @slot page-number
           @binding {boolean} active
           @binding {boolean} disabled
           @binding {number} number
           -->
-        <slot name="previous" v-bind="{ page: value - 1, disabled: prevPageIsDisabled }">
-          <gl-icon name="chevron-left" />
-          <span>{{ prevText }}</span>
-        </slot>
-      </component>
-    </li>
-    <li
-      v-for="item in visibleItems"
-      :key="item.key"
-      class="page-item"
-      :class="{
-        disabled: item.disabled,
-        'flex-fill': isFillAlign,
-      }"
-    >
-      <component
-        :is="item.component"
-        size="md"
-        :aria-disabled="item.disabled"
-        class="page-link"
-        v-bind="item.attrs"
-        v-on="item.listeners"
-      >
-        <!--
-        Content for page number buttons.
-        @slot page-number
-        @binding {boolean} active
-        @binding {boolean} disabled
-        @binding {number} number
-        -->
-        <!--
-        Content for the left ellipsis. Overrides the "ellipsisText" prop.
-        @slot ellipsis-left
-        -->
-        <!--
-        Content for the right ellipsis. Overrides the "ellipsisText" prop.
-        @slot ellipsis-right
-        -->
-        <slot :name="item.slot" v-bind="item.slotData">{{ item.content }}</slot>
-      </component>
-    </li>
+          <!--
+          Content for the left ellipsis. Overrides the "ellipsisText" prop.
+          @slot ellipsis-left
+          -->
+          <!--
+          Content for the right ellipsis. Overrides the "ellipsisText" prop.
+          @slot ellipsis-right
+          -->
+          <slot :name="item.slot" v-bind="item.slotData">{{ item.content }}</slot>
+        </component>
+      </li>
 
-    <li
-      class="page-item"
-      :class="{
-        disabled: nextPageIsDisabled,
-        'flex-fill': isFillAlign,
-      }"
-      :aria-hidden="nextPageIsDisabled"
-    >
-      <component
-        :is="nextPageIsDisabled ? 'span' : 'a'"
-        class="gl-link page-link next-page-item gl-display-flex"
-        :aria-label="nextPageAriaLabel"
-        :href="nextPageHref"
-        @click="handleNext($event, value + 1)"
+      <li
+        class="page-item"
+        :class="{
+          disabled: nextPageIsDisabled,
+          'flex-fill': isFillAlign,
+        }"
+        :aria-hidden="nextPageIsDisabled"
       >
-        <!--
-          @slot Content for the "next" button. Overrides the "nextText" prop.
-          @binding {boolean} active
-          @binding {boolean} disabled
-          @binding {number} number
-          -->
-        <slot name="next" v-bind="{ page: value + 1, disabled: nextPageIsDisabled }">
-          <span>{{ nextText }}</span>
-          <gl-icon name="chevron-right" />
-        </slot>
-      </component>
-    </li>
-  </ul>
+        <component
+          :is="nextPageIsDisabled ? 'span' : 'a'"
+          class="gl-link page-link next-page-item gl-display-flex"
+          :aria-label="nextPageAriaLabel"
+          :href="nextPageHref"
+          @click="handleNext($event, value + 1)"
+        >
+          <!--
+            @slot Content for the "next" button. Overrides the "nextText" prop.
+            @binding {boolean} active
+            @binding {boolean} disabled
+            @binding {number} number
+            -->
+          <slot name="next" v-bind="{ page: value + 1, disabled: nextPageIsDisabled }">
+            <span>{{ nextText }}</span>
+            <gl-icon name="chevron-right" />
+          </slot>
+        </component>
+      </li>
+    </ul>
+  </nav>
 </template>