@gitlab/ui 32.20.1 → 32.20.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [32.20.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.20.1...v32.20.2) (2021-10-19)
+
+
+### Bug Fixes
+
+* **Toggle:** Always keep aria checked whether true or false ([84a240e](https://gitlab.com/gitlab-org/gitlab-ui/commit/84a240ea14fb7f5827b014f89551f692899f3df4))
+
 ## [32.20.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.20.0...v32.20.1) (2021-10-19)
 
 

package/dist/components/base/accordion/accordion_item.js

@@ -1,6 +1,6 @@
 import _uniqueId from 'lodash/uniqueId';
 import { BCollapse } from 'bootstrap-vue/esm/index.js';
-import GlCollapseToggle from '../../../directives/collapse_toggle';
+import { GlCollapseToggleDirective } from '../../../directives/collapse_toggle';
 import GlButton from '../button/button';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -11,7 +11,7 @@ var script = {
     GlButton
   },
   directives: {
-    GlCollapseToggle
+    GlCollapseToggle: GlCollapseToggleDirective
   },
   inject: ['accordionSetId', 'defaultHeaderLevel'],
   inheritAttrs: false,

package/dist/components/base/daterange_picker/daterange_picker.js

@@ -1,4 +1,4 @@
-import GlTooltip from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip';
 import { getDateInPast, getDateInFuture, getDayDifference } from '../../../utils/datetime_utility';
 import GlDatepicker from '../datepicker/datepicker';
 import GlIcon from '../icon/icon';
@@ -10,7 +10,7 @@ var script = {
     GlIcon
   },
   directives: {
-    GlTooltip
+    GlTooltip: GlTooltipDirective
   },
   props: {
     fromLabel: {

package/dist/components/base/filtered_search/filtered_search.js

@@ -1,7 +1,7 @@
 import _cloneDeep from 'lodash/cloneDeep';
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
-import GlTooltip from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlIcon from '../icon/icon';
 import GlSearchBoxByClick from '../search_box_by_click/search_box_by_click';
 import GlFilteredSearchTerm from './filtered_search_term';
@@ -30,7 +30,7 @@ var script = {
     GlIcon
   },
   directives: {
-    GlTooltip
+    GlTooltip: GlTooltipDirective
   },
 
   provide() {

package/dist/components/base/path/path.js

@@ -1,7 +1,7 @@
 import _findLast from 'lodash/findLast';
 import _uniqueId from 'lodash/uniqueId';
 import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
-import GlResizeObserverDirective from '../../../directives/resize_observer/resize_observer';
+import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import { glThemes } from '../../../utils/constants';
 import GlIcon from '../icon/icon';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

package/dist/components/base/search_box_by_click/search_box_by_click.js

@@ -1,4 +1,4 @@
-import GlTooltip from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlClearIconButton from '../../shared_components/clear_icon_button/clear_icon_button';
 import GlButton from '../button/button';
 import GlDropdown from '../dropdown/dropdown';
@@ -23,7 +23,7 @@ var script = {
     GlFormInputGroup
   },
   directives: {
-    GlTooltip
+    GlTooltip: GlTooltipDirective
   },
   props: {
     value: {

package/dist/components/base/sorting/sorting.js

@@ -1,4 +1,4 @@
-import GlTooltip from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlButton from '../button/button';
 import GlButtonGroup from '../button_group/button_group';
 import GlDropdown from '../dropdown/dropdown';
@@ -12,7 +12,7 @@ var script = {
     GlDropdown
   },
   directives: {
-    GlTooltip
+    GlTooltip: GlTooltipDirective
   },
   props: {
     /**

package/dist/components/base/tabs/tabs/scrollable_tabs.js

@@ -1,6 +1,6 @@
 import _isArray from 'lodash/isArray';
 import _debounce from 'lodash/debounce';
-import GlResizeObserverDirective from '../../../../directives/resize_observer/resize_observer';
+import { GlResizeObserverDirective } from '../../../../directives/resize_observer/resize_observer';
 import GlIcon from '../../icon/icon';
 import GlTabs from './tabs';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

package/dist/components/base/toggle/toggle.js

@@ -90,6 +90,10 @@ var script = {
 
     helpId() {
       return this.help ? `toggle-help-${this.uuid}` : undefined;
+    },
+
+    isChecked() {
+      return this.value ? 'true' : 'false';
     }
 
   },
@@ -123,7 +127,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
         'gl-toggle': true,
         'is-checked': _vm.value,
         'is-disabled': _vm.disabled,
-      },attrs:{"role":"switch","aria-checked":_vm.value,"aria-label":_vm.label,"aria-describedby":_vm.helpId,"type":"button"},on:{"click":function($event){$event.preventDefault();return _vm.toggleFeature($event)}}},[(_vm.isLoading)?_c('gl-loading-icon',{staticClass:"toggle-loading",attrs:{"color":"light"}}):_c('span',{class:{ 'toggle-icon': true, disabled: _vm.disabled }},[_c('gl-icon',{attrs:{"name":_vm.icon,"size":16}})],1)],1)]),_vm._v(" "),(_vm.help)?_c('span',{staticClass:"gl-help-label",attrs:{"id":_vm.helpId,"data-testid":"toggle-help"}},[_vm._t("help",[_vm._v(_vm._s(_vm.help))])],2):_vm._e()])};
+      },attrs:{"role":"switch","aria-checked":_vm.isChecked,"aria-label":_vm.label,"aria-describedby":_vm.helpId,"type":"button"},on:{"click":function($event){$event.preventDefault();return _vm.toggleFeature($event)}}},[(_vm.isLoading)?_c('gl-loading-icon',{staticClass:"toggle-loading",attrs:{"color":"light"}}):_c('span',{class:{ 'toggle-icon': true, disabled: _vm.disabled }},[_c('gl-icon',{attrs:{"name":_vm.icon,"size":16}})],1)],1)]),_vm._v(" "),(_vm.help)?_c('span',{staticClass:"gl-help-label",attrs:{"id":_vm.helpId,"data-testid":"toggle-help"}},[_vm._t("help",[_vm._v(_vm._s(_vm.help))])],2):_vm._e()])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/charts/heatmap/heatmap.js

@@ -1,5 +1,5 @@
 import merge from 'lodash/merge';
-import resizeObserver from '../../../directives/resize_observer/resize_observer';
+import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import { getDefaultTooltipContent } from '../../../utils/charts/config';
 import { TOOLTIP_LEFT_OFFSET } from '../../../utils/charts/constants';
 import { heatmapHues } from '../../../utils/charts/theme';
@@ -52,7 +52,7 @@ var script = {
     TooltipDefaultFormat
   },
   directives: {
-    resizeObserver
+    resizeObserver: GlResizeObserverDirective
   },
   mixins: [ToolboxMixin],
   props: {

package/dist/components/charts/sparkline/sparkline.js

@@ -1,5 +1,5 @@
 import merge from 'lodash/merge';
-import resizeObserver from '../../../directives/resize_observer/resize_observer';
+import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import defaultChartOptions, { mergeSeriesToOptions, symbolSize } from '../../../utils/charts/config';
 import Chart from '../chart/chart';
 import ChartTooltip from '../tooltip/tooltip';
@@ -12,7 +12,7 @@ var script = {
     ChartTooltip
   },
   directives: {
-    resizeObserver
+    resizeObserver: GlResizeObserverDirective
   },
   props: {
     /**

package/dist/components/shared_components/clear_icon_button/clear_icon_button.js

@@ -1,4 +1,4 @@
-import GlTooltip from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlButton from '../../base/button/button';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -7,7 +7,7 @@ var script = {
     GlButton
   },
   directives: {
-    GlTooltip
+    GlTooltip: GlTooltipDirective
   },
   props: {
     title: {

package/dist/directives/collapse_toggle.js

@@ -1,2 +1 @@
-import { VBToggle } from 'bootstrap-vue/esm/index.js';
-export { VBToggle as default } from 'bootstrap-vue/esm/index.js';
+export { VBToggle as GlCollapseToggleDirective } from 'bootstrap-vue/esm/index.js';

package/dist/directives/modal.js

@@ -1,2 +1 @@
-import { VBModal } from 'bootstrap-vue/esm/index.js';
-export { VBModal as default } from 'bootstrap-vue/esm/index.js';
+export { VBModal as GlModalDirective } from 'bootstrap-vue/esm/index.js';

package/dist/directives/resize_observer/resize_observer.js

@@ -1,7 +1,7 @@
 import isFunction from 'lodash/isFunction';
 
 let observer = null;
-const ResizeObserverDirective = {
+const GlResizeObserverDirective = {
   bind(el, {
     value: resizeHandler
   }) {
@@ -34,4 +34,4 @@ const ResizeObserverDirective = {
 
 };
 
-export default ResizeObserverDirective;
+export { GlResizeObserverDirective };

package/dist/directives/tooltip.js

@@ -1,2 +1 @@
-import { VBTooltip } from 'bootstrap-vue/esm/index.js';
-export { VBTooltip as default } from 'bootstrap-vue/esm/index.js';
+export { VBTooltip as GlTooltipDirective } from 'bootstrap-vue/esm/index.js';

package/dist/index.js

@@ -87,10 +87,10 @@ export { default as GlFriendlyWrap } from './components/utilities/friendly_wrap/
 export { default as GlIntersperse } from './components/utilities/intersperse/intersperse';
 export { default as GlSprintf } from './components/utilities/sprintf/sprintf';
 export { default as GlTruncate } from './components/utilities/truncate/truncate';
-export { default as GlModalDirective } from './directives/modal';
-export { default as GlTooltipDirective } from './directives/tooltip';
-export { default as GlResizeObserverDirective } from './directives/resize_observer/resize_observer';
-export { default as GlCollapseToggleDirective } from './directives/collapse_toggle';
+export { GlModalDirective } from './directives/modal';
+export { GlTooltipDirective } from './directives/tooltip';
+export { GlResizeObserverDirective } from './directives/resize_observer/resize_observer';
+export { GlCollapseToggleDirective } from './directives/collapse_toggle';
 export { SafeLinkDirective as GlSafeLinkDirective } from './directives/safe_link/safe_link';
 export { SafeHtmlDirective as GlSafeHtmlDirective } from './directives/safe_html/safe_html';
 export { OutsideDirective as GlOutsideDirective } from './directives/outside/outside';

package/index.js

@@ -101,10 +101,10 @@ export { default as GlSprintf } from './src/components/utilities/sprintf/sprintf
 export { default as GlTruncate } from './src/components/utilities/truncate/truncate.vue';
 
 // Directives
-export { default as GlModalDirective } from './src/directives/modal';
-export { default as GlTooltipDirective } from './src/directives/tooltip';
-export { default as GlResizeObserverDirective } from './src/directives/resize_observer/resize_observer';
-export { default as GlCollapseToggleDirective } from './src/directives/collapse_toggle';
+export { GlModalDirective } from './src/directives/modal';
+export { GlTooltipDirective } from './src/directives/tooltip';
+export { GlResizeObserverDirective } from './src/directives/resize_observer/resize_observer';
+export { GlCollapseToggleDirective } from './src/directives/collapse_toggle';
 export { SafeLinkDirective as GlSafeLinkDirective } from './src/directives/safe_link/safe_link';
 export { SafeHtmlDirective as GlSafeHtmlDirective } from './src/directives/safe_html/safe_html';
 export { OutsideDirective as GlOutsideDirective } from './src/directives/outside/outside';

package/package.json

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

package/src/components/base/accordion/accordion_item.spec.js

@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { BCollapse } from 'bootstrap-vue';
-import GlCollapseToggleDirective from '../../../directives/collapse_toggle';
+import { GlCollapseToggleDirective } from '../../../directives/collapse_toggle';
 import { waitForAnimationFrame } from '../../../utils/test_utils';
 import GlButton from '../button/button.vue';
 import GlAccordionItem from './accordion_item.vue';

package/src/components/base/accordion/accordion_item.vue

@@ -1,7 +1,7 @@
 <script>
 import { BCollapse } from 'bootstrap-vue';
 import { uniqueId } from 'lodash';
-import GlCollapseToggle from '../../../directives/collapse_toggle';
+import { GlCollapseToggleDirective } from '../../../directives/collapse_toggle';
 import GlButton from '../button/button.vue';
 
 export default {
@@ -11,7 +11,7 @@ export default {
     GlButton,
   },
   directives: {
-    GlCollapseToggle,
+    GlCollapseToggle: GlCollapseToggleDirective,
   },
   inject: ['accordionSetId', 'defaultHeaderLevel'],
   inheritAttrs: false,

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

@@ -1,7 +1,7 @@
 import { select, text, number, withKnobs } from '@storybook/addon-knobs';
 import Vue from 'vue';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import GlTooltipDirective from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip';
 import { avatarSizeOptions, avatarShapeOptions, tooltipPlacements } from '../../../utils/constants';
 import readme from './avatar.md';
 

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

@@ -1,7 +1,7 @@
 import { text, withKnobs, select } from '@storybook/addon-knobs';
 import Vue from 'vue';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import GlTooltipDirective from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip';
 import { avatarSizeOptions, avatarShapeOptions, tooltipPlacements } from '../../../utils/constants';
 import readme from './avatar_labeled.md';
 

package/src/components/base/daterange_picker/daterange_picker.vue

@@ -1,5 +1,5 @@
 <script>
-import GlTooltip from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip';
 import { getDayDifference, getDateInPast, getDateInFuture } from '../../../utils/datetime_utility';
 import GlDatepicker from '../datepicker/datepicker.vue';
 import GlIcon from '../icon/icon.vue';
@@ -10,7 +10,7 @@ export default {
     GlIcon,
   },
   directives: {
-    GlTooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     fromLabel: {

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

@@ -2,7 +2,7 @@
 import { cloneDeep } from 'lodash';
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
-import GlTooltip from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlIcon from '../icon/icon.vue';
 import GlSearchBoxByClick from '../search_box_by_click/search_box_by_click.vue';
 import GlFilteredSearchTerm from './filtered_search_term.vue';
@@ -34,7 +34,7 @@ export default {
     GlSearchBoxByClick,
     GlIcon,
   },
-  directives: { GlTooltip },
+  directives: { GlTooltip: GlTooltipDirective },
   provide() {
     portalUuid += 1;
     this.portalName = `filters_portal_${portalUuid}`;

package/src/components/base/path/path.vue

@@ -1,7 +1,7 @@
 <script>
 import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
 import { uniqueId, findLast } from 'lodash';
-import GlResizeObserverDirective from '../../../directives/resize_observer/resize_observer';
+import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import { glThemes } from '../../../utils/constants';
 import GlIcon from '../icon/icon.vue';
 

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

@@ -1,5 +1,5 @@
 <script>
-import GlTooltip from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlClearIconButton from '../../shared_components/clear_icon_button/clear_icon_button.vue';
 import GlButton from '../button/button.vue';
 import GlDropdown from '../dropdown/dropdown.vue';
@@ -23,7 +23,7 @@ export default {
     GlFormInputGroup,
   },
   directives: {
-    GlTooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     value: {

package/src/components/base/sorting/sorting.vue

@@ -1,5 +1,5 @@
 <script>
-import GlTooltip from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlButton from '../button/button.vue';
 import GlButtonGroup from '../button_group/button_group.vue';
 import GlDropdown from '../dropdown/dropdown.vue';
@@ -12,7 +12,7 @@ export default {
     GlDropdown,
   },
   directives: {
-    GlTooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     /**

package/src/components/base/tabs/tabs/scrollable_tabs.vue

@@ -1,6 +1,6 @@
 <script>
 import { debounce, isArray } from 'lodash';
-import GlResizeObserverDirective from '../../../../directives/resize_observer/resize_observer';
+import { GlResizeObserverDirective } from '../../../../directives/resize_observer/resize_observer';
 import GlIcon from '../../icon/icon.vue';
 import GlTabs from './tabs.vue';
 

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

@@ -36,7 +36,7 @@ describe('toggle', () => {
   describe.each`
     state    | value    | ariaCheckedExpected | checkedClassExpected
     ${'on'}  | ${true}  | ${'true'}           | ${true}
-    ${'off'} | ${false} | ${undefined}        | ${false}
+    ${'off'} | ${false} | ${'false'}          | ${false}
   `('when $state', ({ value, ariaCheckedExpected, checkedClassExpected }) => {
     beforeEach(() => {
       createWrapper({ value });

package/src/components/base/toggle/toggle.vue

@@ -83,6 +83,9 @@ export default {
     helpId() {
       return this.help ? `toggle-help-${this.uuid}` : undefined;
     },
+    isChecked() {
+      return this.value ? 'true' : 'false';
+    },
   },
 
   beforeCreate() {
@@ -119,7 +122,7 @@ export default {
       <input v-if="name" :name="name" :value="value" type="hidden" />
       <button
         role="switch"
-        :aria-checked="value"
+        :aria-checked="isChecked"
         :aria-label="label"
         :aria-describedby="helpId"
         :class="{

package/src/components/charts/heatmap/heatmap.vue

@@ -1,7 +1,7 @@
 <script>
 import merge from 'lodash/merge';
 import { white, gray100 } from '../../../../scss_to_js/scss_variables';
-import resizeObserver from '../../../directives/resize_observer/resize_observer';
+import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import { getDefaultTooltipContent } from '../../../utils/charts/config';
 import { TOOLTIP_LEFT_OFFSET } from '../../../utils/charts/constants';
 import { heatmapHues } from '../../../utils/charts/theme';
@@ -50,7 +50,7 @@ export default {
     TooltipDefaultFormat,
   },
   directives: {
-    resizeObserver,
+    resizeObserver: GlResizeObserverDirective,
   },
   mixins: [ToolboxMixin],
   props: {

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

@@ -26,8 +26,10 @@ jest.mock('~/utils/charts/theme', () => ({
 
 let triggerResize = () => {};
 jest.mock('~/directives/resize_observer/resize_observer', () => ({
-  bind(el, { value: resizeHandler }) {
-    triggerResize = () => resizeHandler();
+  GlResizeObserverDirective: {
+    bind(el, { value: resizeHandler }) {
+      triggerResize = () => resizeHandler();
+    },
   },
 }));
 

package/src/components/charts/sparkline/sparkline.vue

@@ -1,6 +1,6 @@
 <script>
 import merge from 'lodash/merge';
-import resizeObserver from '../../../directives/resize_observer/resize_observer';
+import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import defaultChartOptions, {
   mergeSeriesToOptions,
   symbolSize,
@@ -14,7 +14,7 @@ const gridPadding = symbolSize / 2;
 export default {
   components: { Chart, ChartTooltip },
   directives: {
-    resizeObserver,
+    resizeObserver: GlResizeObserverDirective,
   },
   props: {
     /**

package/src/components/shared_components/clear_icon_button/clear_icon_button.vue

@@ -1,5 +1,5 @@
 <script>
-import GlTooltip from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlButton from '../../base/button/button.vue';
 
 export default {
@@ -7,7 +7,7 @@ export default {
     GlButton,
   },
   directives: {
-    GlTooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     title: {

package/src/directives/collapse_toggle.js

@@ -1,3 +1 @@
-import { VBToggle } from 'bootstrap-vue';
-
-export default VBToggle;
+export { VBToggle as GlCollapseToggleDirective } from 'bootstrap-vue';

package/src/directives/modal.js

@@ -1,3 +1 @@
-import { VBModal } from 'bootstrap-vue';
-
-export default VBModal;
+export { VBModal as GlModalDirective } from 'bootstrap-vue';

package/src/directives/resize_observer/resize_observer.js

@@ -2,7 +2,7 @@ import isFunction from 'lodash/isFunction';
 
 let observer = null;
 
-const ResizeObserverDirective = {
+export const GlResizeObserverDirective = {
   bind(el, { value: resizeHandler }) {
     if (!isFunction(resizeHandler)) {
       throw TypeError('directive value must be a function');
@@ -28,5 +28,3 @@ const ResizeObserverDirective = {
     }
   },
 };
-
-export default ResizeObserverDirective;

package/src/directives/resize_observer/resize_observer.spec.js

@@ -1,5 +1,5 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
-import resizeObserver from './resize_observer';
+import { GlResizeObserverDirective } from './resize_observer';
 import { useMockResizeObserver } from '~helpers/mock_dom_observer';
 
 describe('resize observer directive', () => {
@@ -15,7 +15,7 @@ describe('resize observer directive', () => {
 
     const component = {
       directives: {
-        resizeObserver,
+        resizeObserver: GlResizeObserverDirective,
       },
       methods: {
         handleResize: mockHandleResize,
@@ -84,7 +84,7 @@ describe('resize observer directive', () => {
       (directiveValue) => {
         const testComponentWithoutHandler = {
           directives: {
-            resizeObserver,
+            resizeObserver: GlResizeObserverDirective,
           },
           data() {
             return {

package/src/directives/tooltip.js

@@ -1,3 +1 @@
-import { VBTooltip } from 'bootstrap-vue';
-
-export default VBTooltip;
+export { VBTooltip as GlTooltipDirective } from 'bootstrap-vue';