@gitlab/ui 38.8.1 → 38.10.0

package/dist/utils/constants.js

@@ -32,7 +32,8 @@ const badgeVariantOptions = {
   info: 'info',
   success: 'success',
   warning: 'warning',
-  danger: 'danger'
+  danger: 'danger',
+  tier: 'tier'
 };
 const variantCssColorMap = {
   muted: 'gl-text-gray-500',
@@ -250,5 +251,9 @@ const loadingIconSizes = {
   'lg (32x32)': 'lg',
   'xl (64x64)': 'xl'
 };
+const textareaCountOptions = {
+  max: 'max',
+  recommended: 'recommended'
+};
 
-export { COMMA, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonSizeOptionsMap, buttonVariantOptions, colorThemes, columnOptions, defaultDateFormat, drawerVariants, dropdownVariantOptions, focusableTags, formInputSizes, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, labelSizeOptions, loadingIconSizes, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, resizeDebounceTime, sizeOptions, sizeOptionsWithNoDefault, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };
+export { COMMA, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonSizeOptionsMap, buttonVariantOptions, colorThemes, columnOptions, defaultDateFormat, drawerVariants, dropdownVariantOptions, focusableTags, formInputSizes, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, labelSizeOptions, loadingIconSizes, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, resizeDebounceTime, sizeOptions, sizeOptionsWithNoDefault, tabsButtonDefaults, targetOptions, textareaCountOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "38.8.1",
+  "version": "38.10.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -146,7 +146,6 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^5.0.0",
     "start-server-and-test": "^1.10.6",
-    "storybook-readme": "5.0.9",
     "stylelint": "14.3.0",
     "stylelint-config-prettier": "9.0.3",
     "stylelint-prettier": "2.0.0",

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

@@ -59,10 +59,8 @@ export default {
   },
   argTypes: {
     headerLevel: {
-      control: {
-        type: 'select',
-        options: [1, 2, 3, 4, 5, 6],
-      },
+      options: [1, 2, 3, 4, 5, 6],
+      control: 'select',
     },
     ...disableControls(['autoCollapse']),
   },

package/src/components/base/accordion/accordion_item.stories.js

@@ -54,10 +54,8 @@ export default {
   },
   argTypes: {
     headerLevel: {
-      control: {
-        type: 'select',
-        options: [1, 2, 3, 4, 5, 6],
-      },
+      options: [1, 2, 3, 4, 5, 6],
+      control: 'select',
     },
   },
 };

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

@@ -140,10 +140,8 @@ export default {
   },
   argTypes: {
     variant: {
-      control: {
-        type: 'select',
-        options: alertVariantOptions,
-      },
+      options: alertVariantOptions,
+      control: 'select',
     },
   },
 };

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

@@ -102,21 +102,15 @@ export default {
   argTypes: {
     size: {
       options: avatarSizeOptions,
-      control: {
-        type: 'select',
-      },
+      control: 'select',
     },
     shape: {
       options: avatarShapeOptions,
-      control: {
-        type: 'select',
-      },
+      control: 'select',
     },
     placement: {
       options: tooltipPlacements,
-      control: {
-        type: 'select',
-      },
+      control: 'select',
     },
   },
 };

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

@@ -60,10 +60,8 @@ export const WithTooltip = (args, { argTypes }) => ({
 WithTooltip.args = { ...generateProps(), ...generateTooltipProps() };
 WithTooltip.argTypes = {
   placement: {
-    control: {
-      type: 'select',
-      options: tooltipPlacements,
-    },
+    options: tooltipPlacements,
+    control: 'select',
   },
 };
 
@@ -104,16 +102,12 @@ export default {
   },
   argTypes: {
     size: {
-      control: {
-        type: 'select',
-        options: avatarSizeOptions,
-      },
+      options: avatarSizeOptions,
+      control: 'select',
     },
     shape: {
-      control: {
-        type: 'select',
-        options: avatarShapeOptions,
-      },
+      options: avatarShapeOptions,
+      control: 'select',
     },
   },
 };

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

@@ -76,15 +76,11 @@ export default {
   argTypes: {
     shape: {
       options: avatarShapeOptions,
-      control: {
-        type: 'select',
-      },
+      control: 'select',
     },
     size: {
       options: avatarSizeOptions,
-      control: {
-        type: 'select',
-      },
+      control: 'select',
     },
   },
 };

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

@@ -74,10 +74,8 @@ export default {
   },
   argTypes: {
     avatarSize: {
-      control: {
-        type: 'select',
-        options: avatarsInlineSizeOptions,
-      },
+      options: avatarsInlineSizeOptions,
+      control: 'select',
     },
   },
 };

package/src/components/base/badge/badge.scss

@@ -135,6 +135,16 @@
   $active-bg: $red-200
 );
 
+@include gl-badge-variant(
+  $variant: tier,
+  $color: $purple-700,
+  $bg: $purple-100,
+  $hover-color: $purple-800,
+  $border-color: $purple-200,
+  $active-color: $purple-900,
+  $active-bg: $purple-200
+);
+
 // overriding Bootstap's `.btn .badge {top: -1px}` as the badge is not vertically centered otherwise
 .gl-button .gl-badge {
   top: 0;

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

@@ -154,21 +154,15 @@ export default {
   argTypes: {
     variant: {
       options: Object.keys(badgeVariantOptions),
-      control: {
-        type: 'select',
-      },
+      control: 'select',
     },
     size: {
       options: Object.keys(badgeSizeOptions),
-      control: {
-        type: 'select',
-      },
+      control: 'select',
     },
     icon: {
       options: ['', ...iconSpriteInfo.icons],
-      control: {
-        type: 'select',
-      },
+      control: 'select',
     },
   },
 };

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

@@ -99,9 +99,7 @@ export default {
   argTypes: {
     variant: {
       options: bannerVariants,
-      control: {
-        type: 'select',
-      },
+      control: 'select',
     },
     svgPath: {
       control: 'text',

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

@@ -78,16 +78,12 @@ export default {
   },
   argTypes: {
     iconName: {
-      control: {
-        type: 'select',
-        options: iconSpriteInfo.icons,
-      },
+      options: iconSpriteInfo.icons,
+      control: 'select',
     },
     theme: {
-      control: {
-        type: 'select',
-        options: Object.keys(colorThemes),
-      },
+      options: Object.keys(colorThemes),
+      control: 'select',
     },
   },
 };

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

@@ -511,28 +511,20 @@ export default {
   },
   argTypes: {
     category: {
-      control: {
-        type: 'select',
-        options: buttonCategoryOptions,
-      },
+      options: buttonCategoryOptions,
+      control: 'select',
     },
     variant: {
-      control: {
-        type: 'select',
-        options: buttonVariantOptions,
-      },
+      options: buttonVariantOptions,
+      control: 'select',
     },
     size: {
-      control: {
-        type: 'select',
-        options: buttonSizeOptions,
-      },
+      options: buttonSizeOptions,
+      control: 'select',
     },
     target: {
-      control: {
-        type: 'select',
-        options: targetOptions,
-      },
+      options: targetOptions,
+      control: 'select',
     },
   },
 };

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

@@ -101,10 +101,10 @@ export default {
       'inputName',
     ]),
     minDate: {
-      control: { type: 'date' },
+      control: 'date',
     },
     maxDate: {
-      control: { type: 'date' },
+      control: 'date',
     },
   },
 };

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

@@ -132,14 +132,10 @@ export default {
       'defaultEndDate',
     ]),
     defaultMinDate: {
-      control: {
-        type: 'date',
-      },
+      control: 'date',
     },
     defaultMaxDate: {
-      control: {
-        type: 'date',
-      },
+      control: 'date',
     },
   },
 };

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

@@ -535,27 +535,19 @@ export default {
   argTypes: {
     category: {
       options: Object.keys(buttonCategoryOptions),
-      control: {
-        type: 'select',
-      },
+      control: 'select',
     },
     variant: {
       options: Object.keys(dropdownVariantOptions),
-      control: {
-        type: 'select',
-      },
+      control: 'select',
     },
     size: {
       options: Object.keys(buttonSizeOptions),
-      control: {
-        type: 'select',
-      },
+      control: 'select',
     },
     icon: {
       options: iconSpriteInfo.icons,
-      control: {
-        type: 'select',
-      },
+      control: 'select',
     },
   },
 };

package/src/components/base/dropdown/dropdown_item.stories.js

@@ -100,15 +100,11 @@ export default {
   argTypes: {
     iconColor: {
       options: Object.keys(variantCssColorMap),
-      control: {
-        type: 'select',
-      },
+      control: 'select',
     },
     iconName: {
       options: iconSpriteInfo.icons,
-      control: {
-        type: 'select',
-      },
+      control: 'select',
     },
   },
 };

package/src/components/base/filtered_search/filtered_search.vue

@@ -296,11 +296,6 @@ export default {
        */
       this.$emit('submit', normalizeTokens(cloneDeep(this.tokens)));
     },
-
-    clearInput() {
-      this.tokens = initialState();
-      this.$emit('clearInput');
-    },
   },
 };
 </script>

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

@@ -119,7 +119,7 @@ export default {
   argTypes: {
     ...disableControls(['labelClass']),
     label: {
-      control: { type: 'text' },
+      control: 'text',
     },
   },
 };

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

@@ -72,9 +72,7 @@ export default {
   argTypes: {
     size: {
       options: formInputSizes,
-      control: {
-        type: 'select',
-      },
+      control: 'select',
     },
   },
 };

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

@@ -72,24 +72,16 @@ export default {
   argTypes: {
     ...disableControls(['value']),
     prepend: {
-      control: {
-        type: 'text',
-      },
+      control: 'text',
     },
     append: {
-      control: {
-        type: 'text',
-      },
+      control: 'text',
     },
     inputClass: {
-      control: {
-        type: 'text',
-      },
+      control: 'text',
     },
     label: {
-      control: {
-        type: 'text',
-      },
+      control: 'text',
     },
   },
 };

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

@@ -52,9 +52,7 @@ export default {
   argTypes: {
     checked: {
       options: defaultOptions.map(({ value }) => value),
-      control: {
-        type: 'select',
-      },
+      control: 'select',
     },
   },
 };

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

@@ -91,16 +91,12 @@ export default {
   },
   argTypes: {
     size: {
-      control: {
-        type: 'select',
-        options: sizeOptions,
-      },
+      options: sizeOptions,
+      control: 'select',
     },
     state: {
-      control: {
-        type: 'select',
-        options: formStateOptions,
-      },
+      options: formStateOptions,
+      control: 'select',
     },
     input: {
       description: 'Emitted with the select value changes.',

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

@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import { textareaCountOptions } from '../../../../utils/constants';
 import GlFormTextarea from './form_textarea.vue';
 
 const modelEvent = GlFormTextarea.model.event;
@@ -6,11 +7,13 @@ const newValue = 'foo';
 
 describe('GlFormTextArea', () => {
   let wrapper;
+  let textarea;
 
   const createComponent = (propsData = {}) => {
     wrapper = mount(GlFormTextarea, {
       propsData,
     });
+    textarea = wrapper.find('textarea');
   };
 
   describe('v-model', () => {
@@ -20,7 +23,7 @@ describe('GlFormTextArea', () => {
       });
 
       it(`sets the textarea's value`, () => {
-        expect(wrapper.element.value).toBe('initial');
+        expect(textarea.element.value).toBe('initial');
       });
 
       describe('when the value prop changes', () => {
@@ -30,7 +33,7 @@ describe('GlFormTextArea', () => {
         });
 
         it(`updates the textarea's value`, () => {
-          expect(wrapper.element.value).toBe(newValue);
+          expect(textarea.element.value).toBe(newValue);
         });
       });
     });
@@ -39,7 +42,7 @@ describe('GlFormTextArea', () => {
       beforeEach(() => {
         createComponent();
 
-        wrapper.setValue(newValue);
+        textarea.setValue(newValue);
       });
 
       it('synchronously emits update event', () => {
@@ -59,7 +62,7 @@ describe('GlFormTextArea', () => {
 
         createComponent({ debounce });
 
-        wrapper.setValue(newValue);
+        textarea.setValue(newValue);
       });
 
       it('synchronously emits an update event', () => {
@@ -82,7 +85,7 @@ describe('GlFormTextArea', () => {
     beforeEach(() => {
       createComponent({ lazy: true });
 
-      wrapper.setValue(newValue);
+      textarea.setValue(newValue);
     });
 
     it('synchronously emits an update event', () => {
@@ -92,7 +95,7 @@ describe('GlFormTextArea', () => {
     it.each(['change', 'blur'])('updates model after %s event', (event) => {
       expect(wrapper.emitted(modelEvent)).toBe(undefined);
 
-      wrapper.trigger(event);
+      textarea.trigger(event);
 
       expect(wrapper.emitted(modelEvent)).toEqual([[newValue]]);
     });
@@ -102,7 +105,7 @@ describe('GlFormTextArea', () => {
     it('should be false by default', () => {
       createComponent({});
 
-      wrapper.trigger('keyup.enter', {
+      textarea.trigger('keyup.enter', {
         metaKey: true,
       });
 
@@ -112,11 +115,115 @@ describe('GlFormTextArea', () => {
     it('should emit submit when cmd+enter is pressed', async () => {
       createComponent({ submitOnEnter: true });
 
-      wrapper.trigger('keyup.enter', {
+      textarea.trigger('keyup.enter', {
         metaKey: true,
       });
 
       expect(wrapper.emitted().submit).toEqual([[]]);
     });
   });
+
+  describe('count', () => {
+    it('should be 0 by default', () => {
+      createComponent({
+        characterCountText: '%{count} characters left',
+        characterCountOverLimitText: '%{count} characters over limit',
+      });
+
+      expect(wrapper.text()).not.toContain('characters left');
+      expect(wrapper.text()).not.toContain('characters over limit');
+    });
+
+    it('should display the remaining characters when a count is provided', () => {
+      createComponent({
+        count: 400,
+        characterCountText: '%{count} characters left',
+        characterCountOverLimitText: '%{count} characters over limit',
+      });
+
+      expect(wrapper.text()).toContain('400 characters left');
+    });
+
+    it('should display the difference between the limit and the length of the value', () => {
+      const value = 'hello';
+
+      createComponent({
+        value,
+        count: 400,
+        characterCountText: '%{count} characters left',
+        characterCountOverLimitText: '%{count} characters over limit',
+      });
+
+      const { length } = value;
+
+      expect(wrapper.text()).toContain(`${400 - length} characters left`);
+    });
+
+    it('should display the over limit text once over the limit', () => {
+      const value = 'hello';
+      const count = 4;
+
+      createComponent({
+        value,
+        count,
+        characterCountText: '%{count} characters left',
+        characterCountOverLimitText: '%{count} characters over limit',
+      });
+
+      const diff = Math.abs(count - value.length);
+
+      expect(wrapper.text()).toContain(`${diff} characters over limit`);
+    });
+
+    describe('max', () => {
+      it('should display the text as grey when up to the limit', () => {
+        const value = 'hello';
+        const count = 5;
+
+        createComponent({
+          value,
+          count,
+          characterCountText: '%{count} characters left',
+          characterCountOverLimitText: '%{count} characters over limit',
+        });
+
+        const small = wrapper.find('small');
+
+        expect(small.classes()).toContain('gl-text-gray-500');
+      });
+      it('should display the text as danger when over the limit', () => {
+        const value = 'hello';
+        const count = 4;
+
+        createComponent({
+          value,
+          count,
+          characterCountText: '%{count} characters left',
+          characterCountOverLimitText: '%{count} characters over limit',
+        });
+
+        const small = wrapper.find('small');
+
+        expect(small.classes()).toContain('gl-text-red-500');
+      });
+    });
+    describe('recommended', () => {
+      it('should display the text as gray when over the limit', () => {
+        const value = 'hello';
+        const count = 4;
+
+        createComponent({
+          value,
+          count,
+          countType: textareaCountOptions.recommended,
+          characterCountText: '%{count} characters left',
+          characterCountOverLimitText: '%{count} characters over limit',
+        });
+
+        const small = wrapper.find('small');
+
+        expect(small.classes()).toContain('gl-text-gray-500');
+      });
+    });
+  });
 });