@gitlab/ui 66.0.0 → 66.1.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [66.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.0.1...v66.1.0) (2023-08-29)
+
+
+### Features
+
+* **css:** Add gl-mb-n* util classes ([12fd76f](https://gitlab.com/gitlab-org/gitlab-ui/commit/12fd76f3841823aed4a411b03e0b7bbaa151e897))
+
+## [66.0.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.0.0...v66.0.1) (2023-08-24)
+
+
+### Reverts
+
+* feat(GlToggle): Add a block level toggle ([c092403](https://gitlab.com/gitlab-org/gitlab-ui/commit/c0924031044b00711eceb8f3f63e4a5d2351c4e4))
+
 # [66.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v65.4.0...v66.0.0) (2023-08-24)
 
 

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

@@ -88,40 +88,18 @@ var script = {
     };
   },
   computed: {
-    layoutAllowsDescription() {
-      return this.isVerticalLayout || this.isBlockLayout;
-    },
     shouldRenderDescription() {
-      return Boolean(this.$scopedSlots.description || this.description) && this.layoutAllowsDescription;
-    },
-    labelIsSrOnly() {
-      return this.labelPosition === 'hidden';
-    },
-    layoutAllowsHelp() {
-      return this.isVerticalLayout || this.isBlockLayout;
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
+      return Boolean(this.$scopedSlots.description || this.description) && this.isVerticalLayout;
     },
     shouldRenderHelp() {
-      return Boolean(this.$scopedSlots.help || this.help) && this.layoutAllowsHelp;
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
+      return Boolean(this.$slots.help || this.help) && this.isVerticalLayout;
     },
-    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
-      };
+    toggleClasses() {
+      return [{
+        'gl-sr-only': this.labelPosition === 'hidden'
+      }, this.shouldRenderDescription ? 'gl-mb-2' : 'gl-mb-3'];
     },
     icon() {
       return this.value ? 'mobile-issue-close' : 'close';
@@ -134,9 +112,6 @@ var script = {
     },
     isVerticalLayout() {
       return this.labelPosition === 'top' || this.labelPosition === 'hidden';
-    },
-    isBlockLayout() {
-      return this.labelPosition === 'block';
     }
   },
   beforeCreate() {
@@ -162,11 +137,15 @@ 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 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_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_staticRenderFns__ = [];
 
   /* style */