@gitlab/ui 38.12.0 → 39.0.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [39.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v38.12.0...v39.0.0) (2022-04-21)
+
+
+### Reverts
+
+* add character counter to gl-form-textarea ([70a7a3f](https://gitlab.com/gitlab-org/gitlab-ui/commit/70a7a3fd9c2729b739020d167043490da72a556b))
+
+
+### BREAKING CHANGES
+
+* The feature added in
+https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2738 has been
+removed, as it causes complications regarding a validator used in
+GitLab. This feature will be reconsidered and re-implemented later.
+
 # [38.12.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v38.11.0...v38.12.0) (2022-04-21)
 
 

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

@@ -1,6 +1,4 @@
 import { BFormTextarea } from 'bootstrap-vue/esm/index.js';
-import GlSprintf from '../../../utilities/sprintf/sprintf';
-import { textareaCountOptions } from '../../../../utils/constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const model = {
@@ -9,8 +7,7 @@ const model = {
 };
 var script = {
   components: {
-    BFormTextarea,
-    GlSprintf
+    BFormTextarea
   },
   inheritAttrs: false,
   model,
@@ -31,27 +28,6 @@ var script = {
       type: Boolean,
       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: {
@@ -88,42 +64,6 @@ var script = {
 
     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;
     }
 
   },
@@ -141,7 +81,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-form-textarea',_vm._g(_vm._b({ref:"textarea",staticClass:"gl-form-input gl-form-textarea",attrs:{"no-resize":_vm.noResize,"value":_vm.value},nativeOn:_vm._d({},[_vm.keypressEvent,function($event){return _vm.handleKeyPress($event)}])},'b-form-textarea',_vm.$attrs,false),_vm.listeners)),_vm._v(" "),(_vm.hasCount)?_c('div',[_c('small',{class:_vm.characterCountClasses,attrs:{"aria-live":"polite"}},[_c('gl-sprintf',{attrs:{"message":_vm.characterCountMessage},scopedSlots:_vm._u([{key:"count",fn:function(){return [_vm._v(_vm._s(_vm.remainingCharacters))]},proxy:true}],null,false,2559963941)})],1)]):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form-textarea',_vm._g(_vm._b({staticClass:"gl-form-input gl-form-textarea",attrs:{"no-resize":_vm.noResize,"value":_vm.value},nativeOn:_vm._d({},[_vm.keypressEvent,function($event){return _vm.handleKeyPress($event)}])},'b-form-textarea',_vm.$attrs,false),_vm.listeners))};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/utils/constants.js

@@ -251,9 +251,5 @@ 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, textareaCountOptions, 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, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "38.12.0",
+  "version": "39.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -1,5 +1,4 @@
 import { mount } from '@vue/test-utils';
-import { textareaCountOptions } from '../../../../utils/constants';
 import GlFormTextarea from './form_textarea.vue';
 
 const modelEvent = GlFormTextarea.model.event;
@@ -7,13 +6,11 @@ const newValue = 'foo';
 
 describe('GlFormTextArea', () => {
   let wrapper;
-  let textarea;
 
   const createComponent = (propsData = {}) => {
     wrapper = mount(GlFormTextarea, {
       propsData,
     });
-    textarea = wrapper.find('textarea');
   };
 
   describe('v-model', () => {
@@ -23,7 +20,7 @@ describe('GlFormTextArea', () => {
       });
 
       it(`sets the textarea's value`, () => {
-        expect(textarea.element.value).toBe('initial');
+        expect(wrapper.element.value).toBe('initial');
       });
 
       describe('when the value prop changes', () => {
@@ -33,7 +30,7 @@ describe('GlFormTextArea', () => {
         });
 
         it(`updates the textarea's value`, () => {
-          expect(textarea.element.value).toBe(newValue);
+          expect(wrapper.element.value).toBe(newValue);
         });
       });
     });
@@ -42,7 +39,7 @@ describe('GlFormTextArea', () => {
       beforeEach(() => {
         createComponent();
 
-        textarea.setValue(newValue);
+        wrapper.setValue(newValue);
       });
 
       it('synchronously emits update event', () => {
@@ -62,7 +59,7 @@ describe('GlFormTextArea', () => {
 
         createComponent({ debounce });
 
-        textarea.setValue(newValue);
+        wrapper.setValue(newValue);
       });
 
       it('synchronously emits an update event', () => {
@@ -85,7 +82,7 @@ describe('GlFormTextArea', () => {
     beforeEach(() => {
       createComponent({ lazy: true });
 
-      textarea.setValue(newValue);
+      wrapper.setValue(newValue);
     });
 
     it('synchronously emits an update event', () => {
@@ -95,7 +92,7 @@ describe('GlFormTextArea', () => {
     it.each(['change', 'blur'])('updates model after %s event', (event) => {
       expect(wrapper.emitted(modelEvent)).toBe(undefined);
 
-      textarea.trigger(event);
+      wrapper.trigger(event);
 
       expect(wrapper.emitted(modelEvent)).toEqual([[newValue]]);
     });
@@ -105,7 +102,7 @@ describe('GlFormTextArea', () => {
     it('should be false by default', () => {
       createComponent({});
 
-      textarea.trigger('keyup.enter', {
+      wrapper.trigger('keyup.enter', {
         metaKey: true,
       });
 
@@ -115,115 +112,11 @@ describe('GlFormTextArea', () => {
     it('should emit submit when cmd+enter is pressed', async () => {
       createComponent({ submitOnEnter: true });
 
-      textarea.trigger('keyup.enter', {
+      wrapper.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');
-      });
-    });
-  });
 });

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

@@ -1,5 +1,4 @@
 import { GlFormTextarea } from '../../../../index';
-import { textareaCountOptions } from '../../../../utils/constants';
 import readme from './form_textarea.md';
 
 const template = `
@@ -8,10 +7,6 @@ const template = `
     :placeholder="placeholder"
     :rows="5"
     :no-resize="noResize"
-    :count="count"
-    :countType="countType"
-    :character-count-text="characterCountText"
-    :character-count-over-limit-text="characterCountOverLimitText"
   />
 `;
 
@@ -19,18 +14,10 @@ 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) => ({
@@ -54,12 +41,4 @@ export default {
       },
     },
   },
-  argTypes: {
-    countType: {
-      control: {
-        type: 'select',
-        options: textareaCountOptions,
-      },
-    },
-  },
 };

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

@@ -1,7 +1,5 @@
 <script>
 import { BFormTextarea } from 'bootstrap-vue';
-import GlSprintf from '../../../utilities/sprintf/sprintf.vue';
-import { textareaCountOptions } from '../../../../utils/constants';
 
 const model = {
   prop: 'value',
@@ -11,7 +9,6 @@ const model = {
 export default {
   components: {
     BFormTextarea,
-    GlSprintf,
   },
   inheritAttrs: false,
   model,
@@ -33,27 +30,6 @@ 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() {
@@ -80,37 +56,6 @@ 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) {
@@ -123,22 +68,12 @@ export default {
 </script>
 
 <template>
-  <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>
+  <b-form-textarea
+    class="gl-form-input gl-form-textarea"
+    :no-resize="noResize"
+    v-bind="$attrs"
+    :value="value"
+    v-on="listeners"
+    @[keypressEvent].native="handleKeyPress"
+  />
 </template>

package/src/utils/constants.js

@@ -298,8 +298,3 @@ export const loadingIconSizes = {
   'lg (32x32)': 'lg',
   'xl (64x64)': 'xl',
 };
-
-export const textareaCountOptions = {
-  max: 'max',
-  recommended: 'recommended',
-};