@gitlab/ui 40.6.0 → 40.6.3

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [40.6.3](https://gitlab.com/gitlab-org/gitlab-ui/compare/v40.6.2...v40.6.3) (2022-05-24)
+
+
+### Bug Fixes
+
+* Set story container height with decorator ([672f6f9](https://gitlab.com/gitlab-org/gitlab-ui/commit/672f6f948710db39fad59b6a0da673783ce63bc5))
+
+## [40.6.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v40.6.1...v40.6.2) (2022-05-19)
+
+
+### Bug Fixes
+
+* **deps:** update dependency dompurify to ^2.3.8 ([77775b9](https://gitlab.com/gitlab-org/gitlab-ui/commit/77775b9a62d3fdf05f90072ce9b3a82b19c18265))
+
+## [40.6.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v40.6.0...v40.6.1) (2022-05-19)
+
+
+### Bug Fixes
+
+* **GlToggle:** Show help text from slot ([c531c4c](https://gitlab.com/gitlab-org/gitlab-ui/commit/c531c4c16ea68cd607c57c44778207e983fa59d2))
+
 # [40.6.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v40.5.0...v40.6.0) (2022-05-19)
 
 

package/dist/components/base/form/form_input_group/form_input_group.js

@@ -78,7 +78,7 @@ 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',[_c('b-input-group',[(_vm.activeOption || _vm.$scopedSlots.prepend)?_c('b-input-group-prepend',[_vm._t("prepend"),_vm._v(" "),(_vm.activeOption)?_c('gl-dropdown',{attrs:{"text":_vm.activeOption}},_vm._l((_vm.predefinedOptions),function(option){return _c('gl-dropdown-item',{key:option.value,attrs:{"is-check-item":"","is-checked":_vm.activeOption === option.name},on:{"click":function($event){return _vm.updateValue(option)}}},[_vm._v("\n          "+_vm._s(option.name)+"\n        ")])}),1):_vm._e()],2):_vm._e(),_vm._v(" "),_vm._t("default",[_c('b-form-input',_vm._g(_vm._b({ref:"input",class:['gl-form-input', _vm.inputClass],attrs:{"aria-label":_vm.label},on:{"click":_vm.handleClick},model:{value:(_vm.localValue),callback:function ($$v) {_vm.localValue=$$v;},expression:"localValue"}},'b-form-input',_vm.$attrs,false),_vm.$listeners))]),_vm._v(" "),(_vm.$scopedSlots.append)?_c('b-input-group-append',[_vm._t("append")],2):_vm._e()],2)],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-input-group',[(_vm.activeOption || _vm.$scopedSlots.prepend)?_c('b-input-group-prepend',[_vm._t("prepend"),_vm._v(" "),(_vm.activeOption)?_c('gl-dropdown',{attrs:{"text":_vm.activeOption}},_vm._l((_vm.predefinedOptions),function(option){return _c('gl-dropdown-item',{key:option.value,attrs:{"is-check-item":"","is-checked":_vm.activeOption === option.name},on:{"click":function($event){return _vm.updateValue(option)}}},[_vm._v("\n        "+_vm._s(option.name)+"\n      ")])}),1):_vm._e()],2):_vm._e(),_vm._v(" "),_vm._t("default",[_c('b-form-input',_vm._g(_vm._b({ref:"input",class:['gl-form-input', _vm.inputClass],attrs:{"aria-label":_vm.label},on:{"click":_vm.handleClick},model:{value:(_vm.localValue),callback:function ($$v) {_vm.localValue=$$v;},expression:"localValue"}},'b-form-input',_vm.$attrs,false),_vm.$listeners))]),_vm._v(" "),(_vm.$scopedSlots.append)?_c('b-input-group-append',[_vm._t("append")],2):_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -88,12 +88,16 @@ var script = {
   },
 
   computed: {
+    shouldRenderHelp() {
+      return Boolean(this.$slots.help || this.help);
+    },
+
     icon() {
       return this.value ? 'mobile-issue-close' : 'close';
     },
 
     helpId() {
-      return this.help ? `toggle-help-${this.uuid}` : undefined;
+      return this.shouldRenderHelp ? `toggle-help-${this.uuid}` : undefined;
     },
 
     isChecked() {
@@ -131,7 +135,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
       '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,"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()])};
+    },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()])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "40.6.0",
+  "version": "40.6.3",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -57,7 +57,7 @@
   "dependencies": {
     "@popperjs/core": "^2.11.2",
     "bootstrap-vue": "2.20.1",
-    "dompurify": "^2.3.7",
+    "dompurify": "^2.3.8",
     "echarts": "^5.2.1",
     "iframe-resizer": "^4.3.2",
     "lodash": "^4.17.20",
@@ -81,21 +81,21 @@
     "@arkweid/lefthook": "0.7.7",
     "@babel/core": "^7.10.2",
     "@babel/preset-env": "^7.10.2",
-    "@gitlab/eslint-plugin": "12.2.0",
+    "@gitlab/eslint-plugin": "12.3.0",
     "@gitlab/stylelint-config": "4.0.0",
     "@gitlab/svgs": "2.14.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.5.0",
-    "@storybook/addon-docs": "6.5.0",
-    "@storybook/addon-essentials": "6.5.0",
+    "@storybook/addon-a11y": "6.5.4",
+    "@storybook/addon-docs": "6.5.4",
+    "@storybook/addon-essentials": "6.5.4",
     "@storybook/addon-knobs": "6.4.0",
-    "@storybook/addon-storyshots": "6.5.0",
-    "@storybook/addon-storyshots-puppeteer": "6.5.0",
-    "@storybook/addon-viewport": "6.5.0",
-    "@storybook/theming": "6.5.0",
-    "@storybook/vue": "6.5.0",
+    "@storybook/addon-storyshots": "6.5.4",
+    "@storybook/addon-storyshots-puppeteer": "6.5.4",
+    "@storybook/addon-viewport": "6.5.4",
+    "@storybook/theming": "6.5.4",
+    "@storybook/vue": "6.5.4",
     "@vue/test-utils": "1.3.0",
     "autoprefixer": "^9.7.6",
     "babel-jest": "^26.6.3",
@@ -109,7 +109,7 @@
     "eslint": "7.32.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
-    "eslint-plugin-storybook": "0.5.11",
+    "eslint-plugin-storybook": "0.5.12",
     "file-loader": "^4.2.0",
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",
@@ -140,6 +140,7 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^5.0.0",
     "start-server-and-test": "^1.10.6",
+    "storybook-dark-mode": "^1.0.8",
     "stylelint": "14.3.0",
     "stylelint-config-prettier": "9.0.3",
     "stylelint-prettier": "2.0.0",

package/src/components/base/badge/badge.md

@@ -31,7 +31,8 @@ While this component is based on
 
 - Has a different set of valid `variant`s. See the examples or props
    documentation for those values.
-- Always sets the `pill` prop of the underlying `BBadge` to `true`. Any passed
+- Always sets the `pill` prop of the underlying
+[`BBadge`](https://bootstrap-vue.org/docs/components/badge) to `true`. Any passed
    in `pill` prop value is ignored.
 - Does _not_ scale itself to match the size of its immediate parent, like
-   `BBadge` does.
+   [`BBadge`](https://bootstrap-vue.org/docs/components/badge) does.

package/src/components/base/datepicker/datepicker.stories.js

@@ -1,6 +1,7 @@
 import { GlDatepicker } from '../../../index';
 import { disableControls } from '../../../utils/stories_utils';
 import { useFakeDate } from '../../../utils/use_fake_date';
+import { makeContainer } from '../../../utils/story_decorators/container';
 import readme from './datepicker.md';
 
 const defaults = {
@@ -18,8 +19,6 @@ const generateProps = ({ minDate = defaultMinDate, maxDate = defaultMaxDate } =
   maxDate,
 });
 
-const wrap = (template) => `<div style="height: 280px">${template}</div>`;
-
 export const Default = (_args, { argTypes }) => ({
   ...defaults,
   props: Object.keys(argTypes),
@@ -28,9 +27,7 @@ export const Default = (_args, { argTypes }) => ({
       pickerValue: defaultDate,
     };
   },
-  template: wrap(`
-    <gl-datepicker :max-date="maxDate" :min-date="minDate" :start-opened="true" v-model="pickerValue" />
-  `),
+  template: `<gl-datepicker :max-date="maxDate" :min-date="minDate" :start-opened="true" v-model="pickerValue" />`,
 });
 Default.args = generateProps();
 
@@ -42,14 +39,15 @@ export const CustomTrigger = (_args, { argTypes }) => ({
       pickerValue: null,
     };
   },
-  template: wrap(`
-    <div class="dropdown">
-      <button type="button" class="dropdown-menu-toggle">
-        <span class="dropdown-toggle-text"> Start date: {{value}} </span>
-      </button>
-    </div>
-    <gl-datepicker v-model="pickerValue" target=".dropdown-menu-toggle" :container="null" />
-  `),
+  template: `
+    <div>
+      <div class="dropdown">
+        <button type="button" class="dropdown-menu-toggle">
+          <span class="dropdown-toggle-text"> Start date: {{value}} </span>
+        </button>
+      </div>
+      <gl-datepicker v-model="pickerValue" target=".dropdown-menu-toggle" :container="null" />
+    </div>`,
 });
 CustomTrigger.args = generateProps();
 
@@ -61,15 +59,14 @@ export const WithClearButton = (_args, { argTypes }) => ({
       pickerValue: defaultDate,
     };
   },
-  template: wrap(`
-    <gl-datepicker showClearButton :max-date="maxDate" :min-date="minDate" v-model="pickerValue" />
-  `),
+  template: `<gl-datepicker showClearButton :max-date="maxDate" :min-date="minDate" v-model="pickerValue" />`,
 });
 WithClearButton.args = generateProps();
 
 export default {
   title: 'base/datepicker',
   component: GlDatepicker,
+  decorators: [makeContainer({ height: '280px' })],
   parameters: {
     docs: {
       description: {

package/src/components/base/daterange_picker/daterange_picker.stories.js

@@ -1,4 +1,5 @@
 import { disableControls } from '../../../utils/stories_utils';
+import { makeContainer } from '../../../utils/story_decorators/container';
 import readme from './daterange_picker.md';
 import GlDaterangePicker from './daterange_picker.vue';
 
@@ -113,6 +114,7 @@ export default {
   followsDesignSystem: true,
   title: 'base/daterange-picker',
   component: GlDaterangePicker,
+  decorators: [makeContainer({ height: '300px' })],
   parameters: {
     knobs: { disable: true },
     docs: {

package/src/components/base/form/form_input_group/form_input_group.vue

@@ -64,39 +64,37 @@ export default {
 };
 </script>
 <template>
-  <div>
-    <b-input-group>
-      <b-input-group-prepend v-if="activeOption || $scopedSlots.prepend">
-        <!-- @slot Is rendered in front of the input field. -->
-        <slot name="prepend"></slot>
-        <gl-dropdown v-if="activeOption" :text="activeOption">
-          <gl-dropdown-item
-            v-for="option in predefinedOptions"
-            :key="option.value"
-            is-check-item
-            :is-checked="activeOption === option.name"
-            @click="updateValue(option)"
-          >
-            {{ option.name }}
-          </gl-dropdown-item>
-        </gl-dropdown>
-      </b-input-group-prepend>
-      <!-- @slot Allows replacement of default input field. -->
-      <slot>
-        <b-form-input
-          ref="input"
-          v-model="localValue"
-          :class="['gl-form-input', inputClass]"
-          :aria-label="label"
-          v-bind="$attrs"
-          v-on="$listeners"
-          @click="handleClick"
-        />
-      </slot>
-      <b-input-group-append v-if="$scopedSlots.append">
-        <!-- @slot Is rendered after the input field. -->
-        <slot name="append"></slot>
-      </b-input-group-append>
-    </b-input-group>
-  </div>
+  <b-input-group>
+    <b-input-group-prepend v-if="activeOption || $scopedSlots.prepend">
+      <!-- @slot Is rendered in front of the input field. -->
+      <slot name="prepend"></slot>
+      <gl-dropdown v-if="activeOption" :text="activeOption">
+        <gl-dropdown-item
+          v-for="option in predefinedOptions"
+          :key="option.value"
+          is-check-item
+          :is-checked="activeOption === option.name"
+          @click="updateValue(option)"
+        >
+          {{ option.name }}
+        </gl-dropdown-item>
+      </gl-dropdown>
+    </b-input-group-prepend>
+    <!-- @slot Allows replacement of default input field. -->
+    <slot>
+      <b-form-input
+        ref="input"
+        v-model="localValue"
+        :class="['gl-form-input', inputClass]"
+        :aria-label="label"
+        v-bind="$attrs"
+        v-on="$listeners"
+        @click="handleClick"
+      />
+    </slot>
+    <b-input-group-append v-if="$scopedSlots.append">
+      <!-- @slot Is rendered after the input field. -->
+      <slot name="append"></slot>
+    </b-input-group-append>
+  </b-input-group>
 </template>

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

@@ -141,7 +141,7 @@ export const Default = (args, { argTypes }) => ({
   template: template('', `<span class="gl-my-0" id="listbox-label">Select a department</span>`),
 });
 Default.args = generateProps({ ariaLabelledby: 'listbox-label' });
-Default.decorators = [makeContainer({ height: '150px' })];
+Default.decorators = [makeContainer({ height: '370px' })];
 
 export const HeaderAndFooter = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
@@ -178,7 +178,7 @@ export const HeaderAndFooter = (args, { argTypes }) => ({
                               </template>`),
 });
 HeaderAndFooter.args = generateProps({ toggleText: 'Header and Footer', multiple: true });
-HeaderAndFooter.decorators = [makeContainer({ height: '220px' })];
+HeaderAndFooter.decorators = [makeContainer({ height: '370px' })];
 
 export const CustomListItem = (args, { argTypes }) => ({
   props: Object.keys(argTypes),

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

@@ -10,12 +10,13 @@ describe('toggle', () => {
   const label = 'toggle label';
   const helpText = 'help text';
 
-  const createWrapper = (props = {}) => {
+  const createWrapper = (props = {}, options = {}) => {
     wrapper = shallowMount(Toggle, {
       propsData: {
         label,
         ...props,
       },
+      ...options,
     });
   };
 
@@ -85,12 +86,13 @@ describe('toggle', () => {
   });
 
   describe.each`
-    state             | help         | getAriaDescribedBy
-    ${'with help'}    | ${helpText}  | ${() => findHelpElement().attributes('id')}
-    ${'without help'} | ${undefined} | ${() => undefined}
-  `('$state', ({ help, getAriaDescribedBy }) => {
+    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 }) => {
     beforeEach(() => {
-      createWrapper({ help });
+      createWrapper(props, options);
     });
 
     it(`${help ? 'shows' : 'does not show'} help`, () => {

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

@@ -81,11 +81,14 @@ export default {
     };
   },
   computed: {
+    shouldRenderHelp() {
+      return Boolean(this.$slots.help || this.help);
+    },
     icon() {
       return this.value ? 'mobile-issue-close' : 'close';
     },
     helpId() {
-      return this.help ? `toggle-help-${this.uuid}` : undefined;
+      return this.shouldRenderHelp ? `toggle-help-${this.uuid}` : undefined;
     },
     isChecked() {
       return this.value ? 'true' : 'false';
@@ -146,7 +149,7 @@ export default {
         <gl-icon :name="icon" :size="16" />
       </span>
     </button>
-    <span v-if="help" :id="helpId" class="gl-help-label" data-testid="toggle-help">
+    <span v-if="shouldRenderHelp" :id="helpId" class="gl-help-label" data-testid="toggle-help">
       <!-- @slot A help text to be shown below the toggle. -->
       <slot name="help">{{ help }}</slot>
     </span>

package/src/components/charts/legend/legend.stories.js

@@ -26,6 +26,7 @@ const generateOptions = (seriesLength, seriesNameType) => {
       showSymbol: true,
       type: 'line',
     })),
+    animation: false,
   };
 };
 

package/src/scss/storybook.scss

@@ -13,6 +13,8 @@
 
 @import 'components';
 
+@import 'storybook_dark_mode';
+
 /**
  * Custom padding for docs pages. This improves the integration in Pajamas pages.
  */

package/src/scss/storybook_dark_mode.scss

@@ -0,0 +1,23 @@
+// conditional overrides for dark mode for use in storybook.
+// Because we only use application.css from gitlab (and not
+// application_dark), we need to override some base rules so
+// that we can more easily test components in dark mode
+
+// This is because dark mode in gitlab currently depends on
+// overriding SCSS variables, but we want gitlab-ui dark mode
+// to use Custom Properties instead
+
+.gl-dark {
+  --color-body-bg: #1f1f1f;
+  --color-body-text: #fff;
+
+  color-scheme: dark;
+
+  &,
+  body {
+    // We can delete these once $body-bg and $body-color
+    // variables in variables.scss are updated to use CSS custom properties
+    background-color: var(--color-body-bg);
+    color: var(--color-body-text);
+  }
+}