@gitlab/ui 38.8.2 → 38.10.1

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

@@ -1,4 +1,5 @@
 import { GlFormTextarea } from '../../../../index';
+import { textareaCountOptions } from '../../../../utils/constants';
 import readme from './form_textarea.md';
 
 const template = `
@@ -7,6 +8,10 @@ const template = `
     :placeholder="placeholder"
     :rows="5"
     :no-resize="noResize"
+    :count="count"
+    :countType="countType"
+    :character-count-text="characterCountText"
+    :character-count-over-limit-text="characterCountOverLimitText"
   />
 `;
 
@@ -14,10 +19,18 @@ const generateProps = ({
   model = 'We take inspiration from other companies, and we always go for the boring solutions. Just like the rest of our work, we continually adjust our values and strive always to make them better. We used to have more values, but it was difficult to remember them all, so we condensed them and gave sub-values and created an acronym. Everyone is welcome to suggest improvements.',
   placeholder = 'hello',
   noResize = GlFormTextarea.props.noResize.default,
+  count = 400,
+  countType = textareaCountOptions.max,
+  characterCountText = '%{count} characters left',
+  characterCountOverLimitText = '%{count} characters over limit',
 } = {}) => ({
   model,
   placeholder,
   noResize,
+  count,
+  countType,
+  characterCountText,
+  characterCountOverLimitText,
 });
 
 const Template = (args) => ({
@@ -41,4 +54,12 @@ export default {
       },
     },
   },
+  argTypes: {
+    countType: {
+      control: {
+        type: 'select',
+        options: textareaCountOptions,
+      },
+    },
+  },
 };

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

@@ -1,5 +1,7 @@
 <script>
 import { BFormTextarea } from 'bootstrap-vue';
+import GlSprintf from '../../../utilities/sprintf/sprintf.vue';
+import { textareaCountOptions } from '../../../../utils/constants';
 
 const model = {
   prop: 'value',
@@ -9,6 +11,7 @@ const model = {
 export default {
   components: {
     BFormTextarea,
+    GlSprintf,
   },
   inheritAttrs: false,
   model,
@@ -30,6 +33,27 @@ export default {
       required: false,
       default: false,
     },
+    count: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    countType: {
+      required: false,
+      type: String,
+      default: textareaCountOptions.max,
+      validator: (value) => Object.keys(textareaCountOptions).includes(value),
+    },
+    characterCountText: {
+      required: false,
+      type: String,
+      default: '',
+    },
+    characterCountOverLimitText: {
+      required: false,
+      type: String,
+      default: '',
+    },
   },
   computed: {
     listeners() {
@@ -56,6 +80,37 @@ export default {
     keypressEvent() {
       return this.submitOnEnter ? 'keyup' : null;
     },
+    characters() {
+      return this.value.length;
+    },
+    remainingCharacters() {
+      if (this.count) {
+        return Math.abs(this.count - this.characters);
+      }
+
+      return null;
+    },
+    characterCountClasses() {
+      switch (this.countType) {
+        case textareaCountOptions.max:
+          return {
+            'gl-text-red-500': this.value.length > this.count,
+            'gl-text-gray-500': this.value.length <= this.count,
+          };
+        case textareaCountOptions.recommended:
+          return 'gl-text-gray-500';
+        default:
+          return {};
+      }
+    },
+    hasCount() {
+      return this.remainingCharacters != null;
+    },
+    characterCountMessage() {
+      return this.characters > this.count
+        ? this.characterCountOverLimitText
+        : this.characterCountText;
+    },
   },
   methods: {
     handleKeyPress(e) {
@@ -68,12 +123,22 @@ export default {
 </script>
 
 <template>
-  <b-form-textarea
-    class="gl-form-input gl-form-textarea"
-    :no-resize="noResize"
-    v-bind="$attrs"
-    :value="value"
-    v-on="listeners"
-    @[keypressEvent].native="handleKeyPress"
-  />
+  <div>
+    <b-form-textarea
+      ref="textarea"
+      class="gl-form-input gl-form-textarea"
+      :no-resize="noResize"
+      v-bind="$attrs"
+      :value="value"
+      v-on="listeners"
+      @[keypressEvent].native="handleKeyPress"
+    />
+    <div v-if="hasCount">
+      <small :class="characterCountClasses" aria-live="polite">
+        <gl-sprintf :message="characterCountMessage">
+          <template #count>{{ remainingCharacters }}</template>
+        </gl-sprintf>
+      </small>
+    </div>
+  </div>
 </template>

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

@@ -44,16 +44,12 @@ export default {
   argTypes: {
     ...disableControls(['useDeprecatedSizes']),
     name: {
-      control: {
-        type: 'select',
-        options: iconSpriteInfo.icons,
-      },
+      options: iconSpriteInfo.icons,
+      control: 'select',
     },
     size: {
-      control: {
-        type: 'select',
-        options: iconSizeOptions,
-      },
+      options: iconSizeOptions,
+      control: 'select',
     },
   },
 };

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

@@ -1,52 +1,76 @@
 import { setStoryTimeout } from '../../../utils/test_utils';
-import { GlInfiniteScroll } from '../../../index';
+import { GlInfiniteScroll, GlLoadingIcon } from '../../../index';
 import readme from './infinite_scroll.md';
 
 const ITEMS_BATCH_SIZE = 20;
 
 const template = `
   <gl-infinite-scroll
-    :max-list-height="285"
-    :fetched-items="fetchedItems"
-    @bottomReached="bottomReached"
+    :total-items="totalItems"
+    :fetched-items="localFetchedItems"
+    :max-list-height="maxListHeight"
+    @bottomReached="onBottomReached"
     >
     <template #items>
       <ul class="list-group list-group-flushed list-unstyled">
-        <li v-for="item in fetchedItems" :key="item" class="list-group-item">Item #{{ item }}</li>
+        <li v-for="item in localFetchedItems" :key="item" class="list-group-item">Item #{{ item }}</li>
       </ul>
     </template>
 
-    <template #default>
+    <template v-if="localIsLoading" #default>
       <div class="gl-mt-3">
-        <gl-loading-icon v-if="isLoading" />
-        <span v-else>{{ fetchedItems }} items loaded</span>
+        <gl-loading-icon />
       </div>
     </template>
   </gl-infinite-scroll>
 `;
 
-const generateProps = ({ isLoading = false, fetchedItems = ITEMS_BATCH_SIZE } = {}) => ({
+const generateProps = ({
+  isLoading = false,
+  totalItems = null,
+  fetchedItems = ITEMS_BATCH_SIZE,
+  maxListHeight = 285,
+} = {}) => ({
   isLoading,
+  totalItems,
   fetchedItems,
+  maxListHeight,
 });
 
 const Template = (args, { argTypes }) => ({
   components: {
     GlInfiniteScroll,
+    GlLoadingIcon,
   },
   props: Object.keys(argTypes),
+  watch: {
+    fetchedItems: {
+      immediate: true,
+      handler(fetchedItems) {
+        this.localFetchedItems = fetchedItems;
+      },
+    },
+    isLoading: {
+      immediate: true,
+      handler(isLoading) {
+        this.localIsLoading = isLoading;
+      },
+    },
+  },
   data() {
     return {
       loadTimer: null,
+      localFetchedItems: null,
+      localIsLoading: false,
     };
   },
   methods: {
-    bottomReached() {
+    onBottomReached() {
       clearTimeout(this.loadTimer);
-      this.isLoading = true;
+      this.localIsLoading = true;
       this.loadTimer = setStoryTimeout(() => {
-        this.fetchedItems += ITEMS_BATCH_SIZE;
-        this.isLoading = false;
+        this.localFetchedItems += ITEMS_BATCH_SIZE;
+        this.localIsLoading = false;
       }, 500);
     },
   },

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

@@ -67,18 +67,14 @@ export default {
   },
   argTypes: {
     backgroundColor: {
-      control: {
-        type: 'color',
-      },
+      control: 'color',
     },
     size: {
       options: labelSizeOptions,
     },
     tooltipPlacement: {
       options: tooltipPlacements,
-      control: {
-        type: 'select',
-      },
+      control: 'select',
     },
   },
 };

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

@@ -40,10 +40,8 @@ export default {
   },
   argTypes: {
     target: {
-      control: {
-        type: 'select',
-        options: targetOptions,
-      },
+      options: targetOptions,
+      control: 'select',
     },
   },
 };

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

@@ -46,16 +46,12 @@ export default {
   },
   argTypes: {
     color: {
-      control: {
-        type: 'select',
-        options: viewModeOptions,
-      },
+      options: viewModeOptions,
+      control: 'select',
     },
     size: {
-      control: {
-        type: 'select',
-        options: loadingIconSizes,
-      },
+      options: loadingIconSizes,
+      control: 'select',
     },
   },
 };

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

@@ -115,52 +115,36 @@ export default {
   },
   argTypes: {
     headerBgVariant: {
-      control: {
-        type: 'select',
-        options: variantOptionsWithNoDefault,
-      },
+      options: variantOptionsWithNoDefault,
+      control: 'select',
     },
     headerBorderVariant: {
-      control: {
-        type: 'select',
-        options: variantOptionsWithNoDefault,
-      },
+      options: variantOptionsWithNoDefault,
+      control: 'select',
     },
     headerTextVariant: {
-      control: {
-        type: 'select',
-        options: variantOptionsWithNoDefault,
-      },
+      options: variantOptionsWithNoDefault,
+      control: 'select',
     },
     bodyBgVariant: {
-      control: {
-        type: 'select',
-        options: variantOptionsWithNoDefault,
-      },
+      options: variantOptionsWithNoDefault,
+      control: 'select',
     },
     bodyTextVariant: {
-      control: {
-        type: 'select',
-        options: variantOptionsWithNoDefault,
-      },
+      options: variantOptionsWithNoDefault,
+      control: 'select',
     },
     footerBgVariant: {
-      control: {
-        type: 'select',
-        options: variantOptionsWithNoDefault,
-      },
+      options: variantOptionsWithNoDefault,
+      control: 'select',
     },
     footerBorderVariant: {
-      control: {
-        type: 'select',
-        options: variantOptionsWithNoDefault,
-      },
+      options: variantOptionsWithNoDefault,
+      control: 'select',
     },
     footerTextVariant: {
-      control: {
-        type: 'select',
-        options: variantOptionsWithNoDefault,
-      },
+      options: variantOptionsWithNoDefault,
+      control: 'select',
     },
   },
 };

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

@@ -4,27 +4,51 @@ import GlPagination from './pagination.vue';
 
 const components = { GlPagination };
 
-const generateBaseProps = ({
-  prevText = 'Previous',
-  nextText = 'Next',
-  disabled = false,
+const defaultValue = (name) => GlPagination.props[name].default;
+
+const generateProps = ({
+  page = 3,
+  align = defaultValue('align'),
+  disabled = defaultValue('disabled'),
+  linkGen = defaultValue('linkGen'),
+  nextPage = defaultValue('nextPage'),
+  nextText = defaultValue('nextText'),
+  perPage = 10, // Existing stories/shots used this value instead of the default
+  prevPage = defaultValue('prevPage'),
+  prevText = defaultValue('prevText'),
+  totalItems = 200, // The component's default value of 0 is for compact pagination, which most stories here do not use.
 } = {}) => ({
-  prevText,
-  nextText,
+  page,
+  align,
   disabled,
-});
-
-const generateFullProps = ({ page = 3, perPage = 10, totalItems = 200 } = {}) => ({
-  initialPage: page,
+  linkGen,
+  nextPage,
+  nextText,
   perPage,
+  prevPage,
+  prevText,
   totalItems,
-  ...generateBaseProps(),
 });
 
-const defaults = {
+const template = `
+  <gl-pagination
+    v-model="page"
+    :align="align"
+    :disabled="disabled"
+    :link-gen="linkGen"
+    :next-page="nextPage"
+    :next-text="nextText"
+    :per-page="perPage"
+    :prev-page="prevPage"
+    :prev-text="prevText"
+    :total-items="totalItems"
+  />
+`;
+
+const defaults = (args) => ({
   data() {
     return {
-      page: 3,
+      currentPage: args.page,
       alignOptions,
     };
   },
@@ -33,33 +57,20 @@ const defaults = {
       this.page = page;
     },
   },
-};
+});
 
 export const Default = (args, { argTypes }) => ({
   components,
   props: Object.keys(argTypes),
-  ...defaults,
-  template: `<gl-pagination
-      v-model="page"
-      :per-page="perPage"
-      :total-items="totalItems"
-      :prev-text="prevText"
-      :next-text="nextText"
-      :disabled="disabled"
-      />`,
+  ...defaults(args),
+  template,
 });
-Default.args = generateFullProps();
+Default.args = generateProps();
 
-export const Compact = () => ({
+export const Compact = (args, { argTypes }) => ({
   components,
-  ...defaults,
-  props: generateFullProps(),
-  data() {
-    return {
-      page: 1,
-      alignOptions,
-    };
-  },
+  props: Object.keys(argTypes),
+  ...defaults(args),
   computed: {
     prevPage() {
       return Math.max(this.page - 1, 0);
@@ -70,72 +81,37 @@ export const Compact = () => ({
     },
   },
   template: `
-      <div class="text-center gl-font-base">
-        <gl-pagination
-          v-model="page"
-          :prev-page="prevPage"
-          :next-page="nextPage"
-          :prev-text="prevText"
-          :next-text="nextText"
-          :disabled="disabled"
-          :align="alignOptions.center"
-        />
-        Page {{ page }} of 3
-      </div>`,
+    <div class="text-center gl-font-base">
+      ${template}
+      Page {{ page }} of 3
+    </div>
+  `,
 });
+Compact.args = generateProps({ page: 1, totalItems: 0, align: alignOptions.center });
 
 export const LinkBased = (args, { argTypes }) => ({
   components,
   props: Object.keys(argTypes),
-  ...defaults,
-  methods: {
-    linkGen(page) {
-      return `/page/${page}`;
-    },
-  },
-  template: `<gl-pagination
-    v-model="page"
-    :per-page="perPage"
-    :total-items="totalItems"
-    :prev-text="prevText"
-    :next-text="nextText"
-    :disabled="disabled"
-    :link-gen="linkGen"
-    />`,
+  ...defaults(args),
+  template,
 });
-LinkBased.args = generateFullProps();
+LinkBased.args = generateProps({ linkGen: (page) => `/page/${page}` });
 
 export const AlignCenter = (args, { argTypes }) => ({
   components,
   props: Object.keys(argTypes),
-  ...defaults,
-  template: `<gl-pagination
-    v-model="page"
-    :per-page="perPage"
-    :total-items="totalItems"
-    :prev-text="prevText"
-    :next-text="nextText"
-    :disabled="disabled"
-    :align="alignOptions.center"
-    />`,
+  ...defaults(args),
+  template,
 });
-AlignCenter.args = generateFullProps();
+AlignCenter.args = generateProps({ align: alignOptions.center });
 
 export const AlignRight = (args, { argTypes }) => ({
   components,
   props: Object.keys(argTypes),
-  ...defaults,
-  template: `<gl-pagination
-    v-model="page"
-    :per-page="perPage"
-    :total-items="totalItems"
-    :prev-text="prevText"
-    :next-text="nextText"
-    :disabled="disabled"
-    :align="alignOptions.right"
-    />`,
+  ...defaults(args),
+  template,
 });
-AlignRight.args = generateFullProps();
+AlignRight.args = generateProps({ align: alignOptions.right });
 
 export default {
   title: 'base/pagination',
@@ -148,4 +124,10 @@ export default {
       },
     },
   },
+  argTypes: {
+    align: {
+      options: Object.values(alignOptions),
+      control: 'select',
+    },
+  },
 };

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

@@ -75,14 +75,10 @@ export default {
   argTypes: {
     theme: {
       options: glThemes,
-      control: {
-        type: 'select',
-      },
+      control: 'select',
     },
     backgroundColor: {
-      control: {
-        type: 'color',
-      },
+      control: 'color',
     },
   },
 };

package/src/components/base/popover/popover.scss

@@ -67,10 +67,12 @@ $gl-popover-max-width: $grid-size * 35;
     @include gl-font-sm;
     @include gl-font-weight-bold;
     @include gl-m-0;
+    @include gl-border-bottom-0;
+    @include gl-pb-0;
   }
 
   .popover-body {
-    @include gl-py-5;
+    @include gl-py-3;
     @include gl-px-4;
 
     > .popover-hr {

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { tooltipActionEvents } from '../../../utils/constants';
+import { tooltipActionEvents, popoverPlacements } from '../../../utils/constants';
 import GlPopover from './popover.vue';
 
 describe('GlPopover', () => {
@@ -49,6 +49,20 @@ describe('GlPopover', () => {
     });
   });
 
+  describe('placement', () => {
+    it(`uses "${popoverPlacements.top}" placement by default`, () => {
+      createWrapper();
+
+      expect(findBVPopover().props('placement')).toBe(popoverPlacements.top);
+    });
+
+    it('uses a defined placement', () => {
+      createWrapper({ placement: popoverPlacements.right });
+
+      expect(findBVPopover().props('placement')).toBe(popoverPlacements.right);
+    });
+  });
+
   describe('close button', () => {
     let doCloseMock;
 

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

@@ -26,7 +26,7 @@ const getTemplate = (id, slots = '') => `
   </div>`;
 
 const generateProps = ({
-  placement = popoverPlacements.top,
+  placement = defaultValue('placement'),
   title = 'Popover',
   triggers = defaultValue('triggers'),
   cssClasses = defaultValue('cssClasses'),
@@ -87,12 +87,10 @@ export default {
   argTypes: {
     placement: {
       options: Object.values(popoverPlacements),
-      control: {
-        type: 'select',
-      },
+      control: 'select',
     },
     title: {
-      control: { type: 'text' },
+      control: 'text',
     },
   },
 };