@gitlab/ui 64.20.1 → 64.21.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [64.21.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.20.1...v64.21.0) (2023-07-14)
+
+
+### Bug Fixes
+
+* **GlToggle:** Enable flex-grow-1 to ensure backwards compatibility ([dfd6554](https://gitlab.com/gitlab-org/gitlab-ui/commit/dfd655420bd8aef33a3af0d5ea3144ac59934ee0))
+* **GlToggle:** Remove vertical padding if label is sr-only ([697a597](https://gitlab.com/gitlab-org/gitlab-ui/commit/697a5979ceae6f6e46c877c8baea58051741f732))
+* **GlToggle:** Wrap long texts when using block-layout for toggle ([a487517](https://gitlab.com/gitlab-org/gitlab-ui/commit/a4875170a207018b605833b022d6fce6ca3803e4))
+
+
+### Features
+
+* **GlToggle:** Add a block level toggle ([0b73ddb](https://gitlab.com/gitlab-org/gitlab-ui/commit/0b73ddb0acfdad3d81501cb360e857de4089247e))
+
 ## [64.20.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.20.0...v64.20.1) (2023-07-13)
 
 

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

@@ -88,18 +88,40 @@ var script = {
     };
   },
   computed: {
+    layoutAllowsDescription() {
+      return this.isVerticalLayout || this.isBlockLayout;
+    },
     shouldRenderDescription() {
-      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-      return Boolean(this.$scopedSlots.description || this.description) && this.isVerticalLayout;
+      return Boolean(this.$scopedSlots.description || this.description) && this.layoutAllowsDescription;
+    },
+    labelIsSrOnly() {
+      return this.labelPosition === 'hidden';
+    },
+    layoutAllowsHelp() {
+      return this.isVerticalLayout || this.isBlockLayout;
     },
     shouldRenderHelp() {
-      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-      return Boolean(this.$slots.help || this.help) && this.isVerticalLayout;
+      return Boolean(this.$scopedSlots.help || this.help) && this.layoutAllowsHelp;
     },
-    toggleClasses() {
-      return [{
-        'gl-sr-only': this.labelPosition === 'hidden'
-      }, this.shouldRenderDescription ? 'gl-mb-2' : 'gl-mb-3'];
+    labelContainerClasses() {
+      return {
+        'gl-mb-3': this.isVerticalLayout && !this.labelIsSrOnly
+      };
+    },
+    labelClasses() {
+      if (this.labelIsSrOnly) return 'gl-sr-only';
+      return {
+        'gl-mb-2': this.shouldRenderDescription,
+        'gl-mb-3': !this.shouldRenderDescription && !this.isVerticalLayout
+      };
+    },
+    wrapperClasses() {
+      return {
+        'gl-flex-direction-column': this.isVerticalLayout,
+        'gl-toggle-label-inline': !this.isVerticalLayout,
+        'is-disabled': this.disabled,
+        'gl-toggle-label-position-block': this.isBlockLayout
+      };
     },
     icon() {
       return this.value ? 'mobile-issue-close' : 'close';
@@ -112,6 +134,9 @@ var script = {
     },
     isVerticalLayout() {
       return this.labelPosition === 'top' || this.labelPosition === 'hidden';
+    },
+    isBlockLayout() {
+      return this.labelPosition === 'block';
     }
   },
   beforeCreate() {
@@ -137,15 +162,11 @@ 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 _c('div',{staticClass:"gl-toggle-wrapper gl-display-flex gl-mb-0",class:{
-    '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:_vm.toggleClasses,attrs:{"id":_vm.labelId,"data-testid":"toggle-label"}},[_vm._t("label",function(){return [_vm._v(_vm._s(_vm.label))]})],2),_vm._v(" "),(_vm.shouldRenderDescription)?_c('span',{staticClass:"gl-description-label gl-mb-3",attrs:{"data-testid":"toggle-description"}},[_vm._t("description",function(){return [_vm._v(_vm._s(_vm.description))]})],2):_vm._e(),_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,
-      'is-checked': _vm.value,
-      'is-disabled': _vm.disabled,
-    },attrs:{"role":"switch","aria-checked":_vm.isChecked,"aria-labelledby":_vm.labelId,"aria-describedby":_vm.helpId,"aria-disabled":_vm.disabled,"type":"button"},on:{"click":function($event){$event.preventDefault();return _vm.toggleFeature.apply(null, arguments)}}},[(_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.shouldRenderHelp)?_c('span',{staticClass:"gl-help-label",attrs:{"id":_vm.helpId,"data-testid":"toggle-help"}},[_vm._t("help",function(){return [_vm._v(_vm._s(_vm.help))]})],2):_vm._e()])};
+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 flex-grow-1",class:_vm.wrapperClasses,attrs:{"data-testid":"toggle-wrapper"}},[_c('span',{staticClass:"gl-toggle-label-container",class:_vm.labelContainerClasses},[_c('span',{staticClass:"gl-toggle-label",class:_vm.labelClasses,attrs:{"id":_vm.labelId,"data-testid":"toggle-label"}},[_vm._t("label",function(){return [_vm._v(_vm._s(_vm.label))]})],2),_vm._v(" "),(_vm.shouldRenderDescription)?_c('span',{staticClass:"gl-description-label",attrs:{"data-testid":"toggle-description"}},[_vm._t("description",function(){return [_vm._v(_vm._s(_vm.description))]})],2):_vm._e()]),_vm._v(" "),_c('span',{staticClass:"gl-toggle-switch-container"},[(_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,
+        'is-checked': _vm.value,
+        'is-disabled': _vm.disabled,
+      },attrs:{"role":"switch","aria-checked":_vm.isChecked,"aria-labelledby":_vm.labelId,"aria-describedby":_vm.helpId,"aria-disabled":_vm.disabled,"type":"button"},on:{"click":function($event){$event.preventDefault();return _vm.toggleFeature.apply(null, arguments)}}},[(_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.shouldRenderHelp)?_c('span',{staticClass:"gl-help-label",attrs:{"id":_vm.helpId,"data-testid":"toggle-help"}},[_vm._t("help",function(){return [_vm._v(_vm._s(_vm.help))]})],2):_vm._e()])])};
 var __vue_staticRenderFns__ = [];
 
   /* style */