@gitlab/ui 48.3.1 → 49.0.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [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)
 
 

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/package.json

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

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"