@gitlab/ui 48.3.0 → 49.0.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [49.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v48.3.1...v49.0.0) (2022-10-24)
+
+
+### Bug Fixes
+
+* **GlToggle:** Fix help text visibility ([1bd4137](https://gitlab.com/gitlab-org/gitlab-ui/commit/1bd4137fca78152966869b0b6781fe44c5f9a69e))
+
+
+### BREAKING CHANGES
+
+* **GlToggle:** Hide help text when `labelPosition: left`
+
+## [48.3.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v48.3.0...v48.3.1) (2022-10-24)
+
+
+### Bug Fixes
+
+* **OutsideDirective:** enable event capture ([c32381a](https://gitlab.com/gitlab-org/gitlab-ui/commit/c32381a3048895e747cc905df468319d8eff7a30))
+
 # [48.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v48.2.0...v48.3.0) (2022-10-24)
 
 

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

@@ -90,7 +90,7 @@ var script = {
   computed: {
     shouldRenderHelp() {
       // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-      return Boolean(this.$slots.help || this.help);
+      return Boolean(this.$slots.help || this.help) && this.isVerticalLayout;
     },
 
     icon() {
@@ -103,6 +103,10 @@ var script = {
 
     isChecked() {
       return this.value ? 'true' : 'false';
+    },
+
+    isVerticalLayout() {
+      return this.labelPosition === 'top' || this.labelPosition === 'hidden';
     }
 
   },
@@ -133,8 +137,8 @@ const __vue_script__ = script;
 
 /* template */
 var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-toggle-wrapper gl-display-flex gl-mb-0",class:{
-    'gl-flex-direction-column': _vm.labelPosition === 'top' || _vm.labelPosition === 'hidden',
-    'gl-toggle-label-inline': _vm.labelPosition === 'left',
+    'gl-flex-direction-column': _vm.isVerticalLayout,
+    'gl-toggle-label-inline': !_vm.isVerticalLayout,
     'is-disabled': _vm.disabled,
   },attrs:{"data-testid":"toggle-wrapper"}},[_c('span',{staticClass:"gl-toggle-label gl-flex-shrink-0",class:{ 'gl-sr-only': _vm.labelPosition === 'hidden' },attrs:{"id":_vm.labelId,"data-testid":"toggle-label"}},[_vm._t("label",function(){return [_vm._v(_vm._s(_vm.label))]})],2),_vm._v(" "),(_vm.name)?_c('input',{attrs:{"name":_vm.name,"type":"hidden"},domProps:{"value":_vm.value}}):_vm._e(),_vm._v(" "),_c('button',{staticClass:"gl-flex-shrink-0",class:{
       'gl-toggle': true,

package/dist/directives/outside/outside.js

@@ -40,7 +40,9 @@ const startListening = () => {
     return;
   }
 
-  document.addEventListener('click', globalListener);
+  document.addEventListener('click', globalListener, {
+    capture: true
+  });
   listening = true;
 };
 

package/package.json

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

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

@@ -249,7 +249,6 @@ const makeGroupedExample = (changes) => {
         openListbox(this);
       }
     },
-    template: template(''),
     ...changes,
   });
 
@@ -259,7 +258,53 @@ const makeGroupedExample = (changes) => {
   return story;
 };
 
-export const Groups = makeGroupedExample();
+export const Groups = makeGroupedExample({
+  template: template('', {
+    bindingOverrides: {
+      ':toggle-text': 'customToggleText',
+      ':items': 'computedItems',
+    },
+  }),
+  data() {
+    return {
+      selected: ['v1.0'],
+    };
+  },
+  computed: {
+    customToggleText() {
+      return this.selected.length ? `${this.selected.length} refs selected` : 'Select refs';
+    },
+    computedItems() {
+      const isSelected = (option) => this.selected.includes(option.value);
+      const notSelected = (option) => !isSelected(option);
+
+      const selectedBranches = mockGroups[0].options.filter(isSelected);
+      const availableBranches = mockGroups[0].options.filter(notSelected);
+      const selectedTags = mockGroups[1].options.filter(isSelected);
+      const availableTags = mockGroups[1].options.filter(notSelected);
+
+      return [
+        {
+          text: 'Selected branches',
+          options: selectedBranches,
+        },
+        {
+          text: 'Selected tags',
+          options: selectedTags,
+        },
+        {
+          text: 'Branches',
+          options: availableBranches,
+        },
+        {
+          text: 'Tags',
+          options: availableTags,
+        },
+      ].filter((group) => group.options.length);
+    },
+  },
+});
+Groups.args = generateProps({ multiple: true });
 
 export const CustomGroupsAndItems = makeGroupedExample({
   template: template(`

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

@@ -86,10 +86,11 @@ describe('toggle', () => {
   });
 
   describe.each`
-    state                  | help         | props                 | options                          | getAriaDescribedBy
-    ${'with help'}         | ${helpText}  | ${{ help: helpText }} | ${undefined}                     | ${() => findHelpElement().attributes('id')}
-    ${'with help in slot'} | ${helpText}  | ${undefined}          | ${{ slots: { help: helpText } }} | ${() => findHelpElement().attributes('id')}
-    ${'without help'}      | ${undefined} | ${undefined}          | ${undefined}                     | ${() => undefined}
+    state                                 | help         | props                                                          | options                          | getAriaDescribedBy
+    ${'with help'}                        | ${helpText}  | ${{ help: helpText }}                                          | ${undefined}                     | ${() => findHelpElement().attributes('id')}
+    ${'with help in slot'}                | ${helpText}  | ${undefined}                                                   | ${{ slots: { help: helpText } }} | ${() => findHelpElement().attributes('id')}
+    ${'without help'}                     | ${undefined} | ${undefined}                                                   | ${undefined}                     | ${() => undefined}
+    ${'with help and labelPosition left'} | ${undefined} | ${{ help: helpText, labelPosition: toggleLabelPosition.left }} | ${undefined}                     | ${() => undefined}
   `('$state', ({ help, props, options, getAriaDescribedBy }) => {
     beforeEach(() => {
       createWrapper(props, options);

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

@@ -83,7 +83,7 @@ export default {
   computed: {
     shouldRenderHelp() {
       // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-      return Boolean(this.$slots.help || this.help);
+      return Boolean(this.$slots.help || this.help) && this.isVerticalLayout;
     },
     icon() {
       return this.value ? 'mobile-issue-close' : 'close';
@@ -94,6 +94,9 @@ export default {
     isChecked() {
       return this.value ? 'true' : 'false';
     },
+    isVerticalLayout() {
+      return this.labelPosition === 'top' || this.labelPosition === 'hidden';
+    },
   },
 
   beforeCreate() {
@@ -121,8 +124,8 @@ export default {
   <div
     class="gl-toggle-wrapper gl-display-flex gl-mb-0"
     :class="{
-      'gl-flex-direction-column': labelPosition === 'top' || labelPosition === 'hidden',
-      'gl-toggle-label-inline': labelPosition === 'left',
+      'gl-flex-direction-column': isVerticalLayout,
+      'gl-toggle-label-inline': !isVerticalLayout,
       'is-disabled': disabled,
     }"
     data-testid="toggle-wrapper"

package/src/directives/outside/outside.js

@@ -37,7 +37,7 @@ const startListening = () => {
     return;
   }
 
-  document.addEventListener('click', globalListener);
+  document.addEventListener('click', globalListener, { capture: true });
   listening = true;
 };
 

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

@@ -129,7 +129,9 @@ describe('outside directive', () => {
     it('attaches the global listener on first initialisation', async () => {
       await createComponent();
 
-      expect(document.addEventListener.mock.calls).toEqual([['click', expect.any(Function)]]);
+      expect(document.addEventListener.mock.calls).toEqual([
+        ['click', expect.any(Function), { capture: true }],
+      ]);
     });
 
     it('detaches the global listener when last binding is removed', async () => {
@@ -150,7 +152,9 @@ describe('outside directive', () => {
         `,
       });
 
-      expect(document.addEventListener.mock.calls).toEqual([['click', expect.any(Function)]]);
+      expect(document.addEventListener.mock.calls).toEqual([
+        ['click', expect.any(Function), { capture: true }],
+      ]);
     });
 
     it('only unbinds once there are no instances', async () => {