@gitlab/ui 40.6.2 → 40.6.3

package/CHANGELOG.md

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

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

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "40.6.2",
+  "version": "40.6.3",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -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.2",
-    "@storybook/addon-docs": "6.5.2",
-    "@storybook/addon-essentials": "6.5.2",
+    "@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.2",
-    "@storybook/addon-storyshots-puppeteer": "6.5.2",
-    "@storybook/addon-viewport": "6.5.2",
-    "@storybook/theming": "6.5.2",
-    "@storybook/vue": "6.5.2",
+    "@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",
@@ -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/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);
+  }
+}