@gitlab/ui 40.6.0 → 40.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/components/base/toggle/toggle.js +6 -2
  3. package/package.json +1 -1
  4. package/src/components/base/toggle/toggle.spec.js +8 -6
  5. package/src/components/base/toggle/toggle.vue +5 -2
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ ## [40.6.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v40.6.0...v40.6.1) (2022-05-19)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * **GlToggle:** Show help text from slot ([c531c4c](https://gitlab.com/gitlab-org/gitlab-ui/commit/c531c4c16ea68cd607c57c44778207e983fa59d2))
7
+
1
8
  # [40.6.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v40.5.0...v40.6.0) (2022-05-19)
2
9
 
3
10
 
package/dist/components/base/toggle/toggle.js CHANGED
@@ -88,12 +88,16 @@ var script = {
88
88
  },
89
89
 
90
90
  computed: {
91
+ shouldRenderHelp() {
92
+ return Boolean(this.$slots.help || this.help);
93
+ },
94
+
91
95
  icon() {
92
96
  return this.value ? 'mobile-issue-close' : 'close';
93
97
  },
94
98
 
95
99
  helpId() {
96
- return this.help ? `toggle-help-${this.uuid}` : undefined;
100
+ return this.shouldRenderHelp ? `toggle-help-${this.uuid}` : undefined;
97
101
  },
98
102
 
99
103
  isChecked() {
@@ -131,7 +135,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
131
135
  'gl-toggle': true,
132
136
  'is-checked': _vm.value,
133
137
  'is-disabled': _vm.disabled,
134
- },attrs:{"role":"switch","aria-checked":_vm.isChecked,"aria-labelledby":_vm.labelId,"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()])};
138
+ },attrs:{"role":"switch","aria-checked":_vm.isChecked,"aria-labelledby":_vm.labelId,"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.shouldRenderHelp)?_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()])};
135
139
  var __vue_staticRenderFns__ = [];
136
140
 
137
141
  /* style */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gitlab/ui",
3
- "version": "40.6.0",
3
+ "version": "40.6.1",
4
4
  "description": "GitLab UI Components",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",
package/src/components/base/toggle/toggle.spec.js CHANGED
@@ -10,12 +10,13 @@ describe('toggle', () => {
10
10
  const label = 'toggle label';
11
11
  const helpText = 'help text';
12
12
 
13
- const createWrapper = (props = {}) => {
13
+ const createWrapper = (props = {}, options = {}) => {
14
14
  wrapper = shallowMount(Toggle, {
15
15
  propsData: {
16
16
  label,
17
17
  ...props,
18
18
  },
19
+ ...options,
19
20
  });
20
21
  };
21
22
 
@@ -85,12 +86,13 @@ describe('toggle', () => {
85
86
  });
86
87
 
87
88
  describe.each`
88
- state | help | getAriaDescribedBy
89
- ${'with help'} | ${helpText} | ${() => findHelpElement().attributes('id')}
90
- ${'without help'} | ${undefined} | ${() => undefined}
91
- `('$state', ({ help, getAriaDescribedBy }) => {
89
+ state | help | props | options | getAriaDescribedBy
90
+ ${'with help'} | ${helpText} | ${{ help: helpText }} | ${undefined} | ${() => findHelpElement().attributes('id')}
91
+ ${'with help in slot'} | ${helpText} | ${undefined} | ${{ slots: { help: helpText } }} | ${() => findHelpElement().attributes('id')}
92
+ ${'without help'} | ${undefined} | ${undefined} | ${undefined} | ${() => undefined}
93
+ `('$state', ({ help, props, options, getAriaDescribedBy }) => {
92
94
  beforeEach(() => {
93
- createWrapper({ help });
95
+ createWrapper(props, options);
94
96
  });
95
97
 
96
98
  it(`${help ? 'shows' : 'does not show'} help`, () => {
package/src/components/base/toggle/toggle.vue CHANGED
@@ -81,11 +81,14 @@ export default {
81
81
  };
82
82
  },
83
83
  computed: {
84
+ shouldRenderHelp() {
85
+ return Boolean(this.$slots.help || this.help);
86
+ },
84
87
  icon() {
85
88
  return this.value ? 'mobile-issue-close' : 'close';
86
89
  },
87
90
  helpId() {
88
- return this.help ? `toggle-help-${this.uuid}` : undefined;
91
+ return this.shouldRenderHelp ? `toggle-help-${this.uuid}` : undefined;
89
92
  },
90
93
  isChecked() {
91
94
  return this.value ? 'true' : 'false';
@@ -146,7 +149,7 @@ export default {
146
149
  <gl-icon :name="icon" :size="16" />
147
150
  </span>
148
151
  </button>
149
- <span v-if="help" :id="helpId" class="gl-help-label" data-testid="toggle-help">
152
+ <span v-if="shouldRenderHelp" :id="helpId" class="gl-help-label" data-testid="toggle-help">
150
153
  <!-- @slot A help text to be shown below the toggle. -->
151
154
  <slot name="help">{{ help }}</slot>
152
155
  </span>