@gitlab/ui 40.6.2 → 40.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "40.6.2",
+  "version": "40.6.5",
   "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.5",
+    "@storybook/addon-docs": "6.5.5",
+    "@storybook/addon-essentials": "6.5.5",
     "@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.5",
+    "@storybook/addon-storyshots-puppeteer": "6.5.5",
+    "@storybook/addon-viewport": "6.5.5",
+    "@storybook/theming": "6.5.5",
+    "@storybook/vue": "6.5.5",
     "@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_group/form_group.scss

@@ -18,6 +18,7 @@
   }
 
   .invalid-feedback,
+  .valid-feedback,
   .text-gl-muted {
     @include gl-font-base;
     @include gl-line-height-normal;
@@ -25,6 +26,7 @@
 
   .form-control {
     + .invalid-feedback,
+    + .valid-feedback,
     + .text-gl-muted,
     &.is-valid + .invalid-feedback + .text-gl-muted {
       // See https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2806

package/src/components/base/form/form_group/form_group.stories.js

@@ -74,31 +74,18 @@ WithLabelDescription.args = generateProps({
 export const WithValidations = (_args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { ...components, GlFormInput },
-  computed: {
-    state() {
-      return this.name.length >= 4;
-    },
-    invalidFeedback() {
-      let feedbackText = 'This field is required.';
-
-      if (this.name.length >= 4) {
-        feedbackText = '';
-      } else if (this.name.length > 0) {
-        feedbackText = 'Enter at least 4 characters.';
-      }
-
-      return feedbackText;
-    },
-  },
-  data() {
-    return {
-      name: '',
-    };
-  },
-  template: wrap(
-    '<gl-form-input :id="id" :state="state" v-model.trim="name" />',
-    ':invalid-feedback="invalidFeedback"'
-  ),
+  template: `
+    <div>
+      ${wrap(
+        '<gl-form-input :id="id" :state="false" />',
+        'invalid-feedback="This field is required."'
+      )}
+      ${wrap(
+        '<gl-form-input :id="id" :state="true" value="Sidney Jones" />',
+        'valid-feedback="This field is valid."'
+      )}
+    </div>
+  `,
 });
 WithValidations.args = generateProps({
   label: 'Name',

package/src/components/base/form/form_input/form_input.scss

@@ -38,6 +38,10 @@
     }
   }
 
+  &.is-valid {
+    background-image: none;
+  }
+
   &::placeholder {
     @include gl-text-gray-400;
   }

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/search_box_by_click/search_box_by_click.scss

@@ -41,17 +41,16 @@
     }
   }
 
-  .input-group {
+  &.input-group {
     > .input-group-prepend,
     > .input-group-append {
       @include gl-bg-white;
     }
+  }
 
-    .gl-search-box-by-click-search-button {
-      @include gl-text-gray-500;
-      @include gl-p-3;
-      @include gl-inset-border-1-gray-400;
-    }
+  .gl-search-box-by-click-search-button {
+    @include gl-text-gray-500;
+    @include gl-inset-border-1-gray-400;
   }
 
   .gl-search-box-by-click-input {

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);
+  }
+}