@gitlab/ui 78.17.0 → 78.19.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [78.19.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v78.18.0...v78.19.0) (2024-04-22)
+
+
+### Features
+
+* **GlFormTextarea:** add support for character count ([1b359aa](https://gitlab.com/gitlab-org/gitlab-ui/commit/1b359aabb514831bddaeca108132427ecde4ae64))
+
+# [78.18.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v78.17.0...v78.18.0) (2024-04-19)
+
+
+### Features
+
+* **GlDisclosureDropdown:** Reorder dropdown items in example ([7145be6](https://gitlab.com/gitlab-org/gitlab-ui/commit/7145be686e16ae286e1189071a15e58403aaa635))
+
 # [78.17.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v78.16.0...v78.17.0) (2024-04-19)
 
 

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

@@ -1,4 +1,6 @@
 import { BFormTextarea } from 'bootstrap-vue/esm/index.js';
+import debounce from 'lodash/debounce';
+import uniqueId from 'lodash/uniqueId';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const model = {
@@ -29,8 +31,23 @@ var script = {
       type: Boolean,
       required: false,
       default: false
+    },
+    /**
+     * Max character count for the textarea.
+     */
+    characterCount: {
+      type: Number,
+      required: false,
+      default: null
     }
   },
+  data() {
+    return {
+      characterCountId: uniqueId('form-textarea-character-count-'),
+      remainingCharacterCount: this.initialRemainingCharacterCount(),
+      remainingCharacterCountSrOnly: this.initialRemainingCharacterCount()
+    };
+  },
   computed: {
     listeners() {
       var _this = this;
@@ -62,13 +79,50 @@ var script = {
     },
     keypressEvent() {
       return this.submitOnEnter ? 'keyup' : null;
+    },
+    isCharacterCountOverLimit() {
+      return this.remainingCharacterCount < 0;
+    },
+    characterCountTextClass() {
+      return this.isCharacterCountOverLimit ? 'gl-text-red-500' : 'gl-text-gray-500';
+    },
+    showCharacterCount() {
+      return this.characterCount !== null;
+    },
+    bFormTextareaProps() {
+      return {
+        ...this.$attrs,
+        class: 'gl-form-input gl-form-textarea',
+        noResize: this.noResize,
+        value: this.value
+      };
+    }
+  },
+  watch: {
+    value(newValue) {
+      if (!this.showCharacterCount) {
+        return;
+      }
+      this.remainingCharacterCount = this.characterCount - newValue.length;
+      this.debouncedUpdateRemainingCharacterCountSrOnly(newValue);
     }
   },
+  created() {
+    // Debounce updating the remaining character count for a second so
+    // screen readers announce the remaining text after the text in the textarea.
+    this.debouncedUpdateRemainingCharacterCountSrOnly = debounce(this.updateRemainingCharacterCountSrOnly, 1000);
+  },
   methods: {
     handleKeyPress(e) {
       if (e.keyCode === 13 && (e.metaKey || e.ctrlKey)) {
         this.$emit('submit');
       }
+    },
+    updateRemainingCharacterCountSrOnly(newValue) {
+      this.remainingCharacterCountSrOnly = this.characterCount - newValue.length;
+    },
+    initialRemainingCharacterCount() {
+      return this.characterCount - this.value.length;
     }
   }
 };
@@ -77,7 +131,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('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.apply(null, arguments)}])},'b-form-textarea',_vm.$attrs,false),_vm.listeners))};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.showCharacterCount)?_c('div',[_c('b-form-textarea',_vm._g(_vm._b({attrs:{"aria-describedby":_vm.characterCountId},nativeOn:_vm._d({},[_vm.keypressEvent,function($event){return _vm.handleKeyPress.apply(null, arguments)}])},'b-form-textarea',_vm.bFormTextareaProps,false),_vm.listeners)),_vm._v(" "),_c('small',{class:['form-text', _vm.characterCountTextClass],attrs:{"aria-hidden":"true"}},[(_vm.isCharacterCountOverLimit)?_vm._t("character-count-over-limit-text",null,{"count":Math.abs(_vm.remainingCharacterCount)}):_vm._t("character-count-text",null,{"count":_vm.remainingCharacterCount})],2),_vm._v(" "),_c('div',{staticClass:"gl-sr-only",attrs:{"id":_vm.characterCountId,"aria-live":"polite","data-testid":"character-count-text-sr-only"}},[(_vm.isCharacterCountOverLimit)?_vm._t("character-count-over-limit-text",null,{"count":Math.abs(_vm.remainingCharacterCount)}):_vm._t("character-count-text",null,{"count":_vm.remainingCharacterCountSrOnly})],2)],1):_c('b-form-textarea',_vm._g(_vm._b({nativeOn:_vm._d({},[_vm.keypressEvent,function($event){return _vm.handleKeyPress.apply(null, arguments)}])},'b-form-textarea',_vm.bFormTextareaProps,false),_vm.listeners))};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/new_dropdowns/disclosure/mock_data.js

@@ -6,17 +6,6 @@ const mockItems = [{
     rel: 'nofollow',
     'data-method': 'put'
   }
-}, {
-  text: 'Close merge request',
-  action: () => {
-    // eslint-disable-next-line no-console
-    console.log('CLOSED');
-  },
-  extraAttrs: {
-    class: 'gl-text-red-500!',
-    rel: 'nofollow',
-    'data-method': 'put'
-  }
 }, {
   text: 'Create new',
   href: 'https://gitlab.com/gitlab-org/gitlab/-/merge_requests/new',
@@ -30,6 +19,17 @@ const mockItems = [{
   extraAttrs: {
     'data-uuid': '1234'
   }
+}, {
+  text: 'Close merge request',
+  action: () => {
+    // eslint-disable-next-line no-console
+    console.log('CLOSED');
+  },
+  extraAttrs: {
+    class: 'gl-text-red-500!',
+    rel: 'nofollow',
+    'data-method': 'put'
+  }
 }];
 const mockItemsCustomItem = [{
   text: 'Assigned to you',

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 19 Apr 2024 15:34:12 GMT
+ * Generated on Mon, 22 Apr 2024 11:22:17 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 19 Apr 2024 15:34:12 GMT
+ * Generated on Mon, 22 Apr 2024 11:22:17 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 19 Apr 2024 15:34:12 GMT
+ * Generated on Mon, 22 Apr 2024 11:22:17 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 19 Apr 2024 15:34:12 GMT
+ * Generated on Mon, 22 Apr 2024 11:22:17 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 19 Apr 2024 15:34:12 GMT
+// Generated on Mon, 22 Apr 2024 11:22:17 GMT
 
 $gl-text-tertiary: #737278 !default;
 $gl-text-secondary: #89888d !default;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 19 Apr 2024 15:34:12 GMT
+// Generated on Mon, 22 Apr 2024 11:22:17 GMT
 
 $gl-text-tertiary: #89888d !default;
 $gl-text-secondary: #737278 !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "78.17.0",
+  "version": "78.19.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -131,14 +131,14 @@
     "babel-jest": "29.0.1",
     "babel-loader": "^8.0.5",
     "bootstrap": "4.6.2",
-    "cypress": "13.7.3",
+    "cypress": "13.8.0",
     "cypress-axe": "^1.4.0",
     "cypress-real-events": "^1.11.0",
     "dompurify": "^3.0.0",
     "emoji-regex": "^10.0.0",
     "eslint": "8.57.0",
     "eslint-import-resolver-jest": "3.0.2",
-    "eslint-plugin-cypress": "2.15.1",
+    "eslint-plugin-cypress": "2.15.2",
     "eslint-plugin-storybook": "0.8.0",
     "glob": "10.3.3",
     "identity-obj-proxy": "^3.0.0",

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

@@ -1,6 +1,9 @@
 import { mount } from '@vue/test-utils';
+import lodashDebounce from 'lodash/debounce';
 import GlFormTextarea from './form_textarea.vue';
 
+jest.mock('lodash/debounce', () => jest.fn((fn) => fn));
+
 const modelEvent = GlFormTextarea.model.event;
 const newValue = 'foo';
 
@@ -10,6 +13,25 @@ describe('GlFormTextArea', () => {
   const createComponent = (propsData = {}) => {
     wrapper = mount(GlFormTextarea, {
       propsData,
+      scopedSlots: {
+        'character-count-text': function characterCountText({ count }) {
+          return count === 1 ? `${count} character remaining` : `${count} characters remaining`;
+        },
+        'character-count-over-limit-text': function characterCountOverLimitText({ count }) {
+          return count === 1 ? `${count} character over limit` : `${count} characters over limit`;
+        },
+      },
+    });
+  };
+
+  const findTextarea = () => wrapper.find('textarea');
+
+  const itUpdatesDebouncedScreenReaderText = (expectedText) => {
+    it('updates debounced screen reader text', () => {
+      expect(lodashDebounce).toHaveBeenCalledWith(expect.any(Function), 1000);
+      expect(wrapper.find('[data-testid="character-count-text-sr-only"]').text()).toBe(
+        expectedText
+      );
     });
   };
 
@@ -20,7 +42,7 @@ describe('GlFormTextArea', () => {
       });
 
       it(`sets the textarea's value`, () => {
-        expect(wrapper.element.value).toBe('initial');
+        expect(findTextarea().element.value).toBe('initial');
       });
 
       describe('when the value prop changes', () => {
@@ -30,7 +52,7 @@ describe('GlFormTextArea', () => {
         });
 
         it(`updates the textarea's value`, () => {
-          expect(wrapper.element.value).toBe(newValue);
+          expect(findTextarea().element.value).toBe(newValue);
         });
       });
     });
@@ -39,7 +61,7 @@ describe('GlFormTextArea', () => {
       beforeEach(() => {
         createComponent();
 
-        wrapper.setValue(newValue);
+        findTextarea().setValue(newValue);
       });
 
       it('synchronously emits update event', () => {
@@ -59,7 +81,7 @@ describe('GlFormTextArea', () => {
 
         createComponent({ debounce });
 
-        wrapper.setValue(newValue);
+        findTextarea().setValue(newValue);
       });
 
       it('synchronously emits an update event', () => {
@@ -82,7 +104,7 @@ describe('GlFormTextArea', () => {
     beforeEach(() => {
       createComponent({ lazy: true });
 
-      wrapper.setValue(newValue);
+      findTextarea().setValue(newValue);
     });
 
     it('synchronously emits an update event', () => {
@@ -119,4 +141,65 @@ describe('GlFormTextArea', () => {
       expect(wrapper.emitted('submit')).toEqual([[]]);
     });
   });
+
+  describe('when `characterCount` prop is set', () => {
+    const characterCount = 10;
+
+    describe('when textarea character count is under the max character count', () => {
+      const textareaCharacterCount = 5;
+      const expectedText = `${characterCount - textareaCharacterCount} characters remaining`;
+
+      beforeEach(() => {
+        createComponent({
+          value: 'a'.repeat(textareaCharacterCount),
+          characterCount,
+        });
+      });
+
+      it('displays remaining characters', () => {
+        expect(wrapper.text()).toContain(expectedText);
+      });
+
+      itUpdatesDebouncedScreenReaderText(expectedText);
+    });
+
+    describe('when textarea character count is over the max character count', () => {
+      const textareaCharacterCount = 15;
+      const expectedText = `${textareaCharacterCount - characterCount} characters over limit`;
+
+      beforeEach(() => {
+        createComponent({
+          value: 'a'.repeat(textareaCharacterCount),
+          characterCount,
+        });
+      });
+
+      it('displays number of characters over', () => {
+        expect(wrapper.text()).toContain(expectedText);
+      });
+
+      itUpdatesDebouncedScreenReaderText(expectedText);
+    });
+
+    describe('when textarea value is updated', () => {
+      const textareaCharacterCount = 5;
+      const newTextareaCharacterCount = textareaCharacterCount + 3;
+      const expectedText = `${characterCount - newTextareaCharacterCount} characters remaining`;
+
+      beforeEach(() => {
+        createComponent({
+          value: 'a'.repeat(textareaCharacterCount),
+          characterCount,
+        });
+
+        wrapper.setProps({ value: 'a'.repeat(newTextareaCharacterCount) });
+      });
+
+      it('updates character count text', () => {
+        expect(wrapper.text()).toContain(expectedText);
+      });
+
+      itUpdatesDebouncedScreenReaderText(expectedText);
+    });
+  });
 });

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

@@ -3,32 +3,57 @@ import readme from './form_textarea.md';
 
 const template = `
   <gl-form-textarea
-    v-model="model"
+    :value="value"
     :placeholder="placeholder"
     :rows="5"
     :no-resize="noResize"
-  />
+    :character-count="characterCount"
+    @input="onInput"
+  >
+    <template #character-count-text="{ count }">{{ characterCountText(count) }}</template>
+    <template #character-count-over-limit-text="{ count }">{{ characterCountOverLimitText(count) }}</template>
+  </gl-form-textarea>
 `;
 
 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.',
+  value = '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,
+  characterCount = null,
 } = {}) => ({
-  model,
+  value,
   placeholder,
   noResize,
+  characterCount,
 });
 
-const Template = (args) => ({
+const Template = (args, { updateArgs }) => ({
   components: { GlFormTextarea },
   props: Object.keys(args),
+  methods: {
+    onInput(value) {
+      updateArgs({ ...args, value });
+    },
+    characterCountText(count) {
+      return count === 1 ? `${count} character remaining` : `${count} characters remaining`;
+    },
+    characterCountOverLimitText(count) {
+      return count === 1 ? `${count} character over limit` : `${count} characters over limit`;
+    },
+  },
   template,
 });
 
 export const Default = Template.bind({});
 Default.args = generateProps();
 
+export const WithCharacterCount = Template.bind({});
+WithCharacterCount.args = generateProps({
+  value: '',
+  placeholder: 'hello',
+  characterCount: 100,
+});
+
 export default {
   title: 'base/form/form-textarea',
   component: GlFormTextarea,

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

@@ -1,5 +1,7 @@
 <script>
 import { BFormTextarea } from 'bootstrap-vue';
+import debounce from 'lodash/debounce';
+import uniqueId from 'lodash/uniqueId';
 
 const model = {
   prop: 'value',
@@ -31,6 +33,21 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Max character count for the textarea.
+     */
+    characterCount: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      characterCountId: uniqueId('form-textarea-character-count-'),
+      remainingCharacterCount: this.initialRemainingCharacterCount(),
+      remainingCharacterCountSrOnly: this.initialRemainingCharacterCount(),
+    };
   },
   computed: {
     listeners() {
@@ -57,6 +74,41 @@ export default {
     keypressEvent() {
       return this.submitOnEnter ? 'keyup' : null;
     },
+    isCharacterCountOverLimit() {
+      return this.remainingCharacterCount < 0;
+    },
+    characterCountTextClass() {
+      return this.isCharacterCountOverLimit ? 'gl-text-red-500' : 'gl-text-gray-500';
+    },
+    showCharacterCount() {
+      return this.characterCount !== null;
+    },
+    bFormTextareaProps() {
+      return {
+        ...this.$attrs,
+        class: 'gl-form-input gl-form-textarea',
+        noResize: this.noResize,
+        value: this.value,
+      };
+    },
+  },
+  watch: {
+    value(newValue) {
+      if (!this.showCharacterCount) {
+        return;
+      }
+
+      this.remainingCharacterCount = this.characterCount - newValue.length;
+      this.debouncedUpdateRemainingCharacterCountSrOnly(newValue);
+    },
+  },
+  created() {
+    // Debounce updating the remaining character count for a second so
+    // screen readers announce the remaining text after the text in the textarea.
+    this.debouncedUpdateRemainingCharacterCountSrOnly = debounce(
+      this.updateRemainingCharacterCountSrOnly,
+      1000
+    );
   },
   methods: {
     handleKeyPress(e) {
@@ -64,16 +116,59 @@ export default {
         this.$emit('submit');
       }
     },
+    updateRemainingCharacterCountSrOnly(newValue) {
+      this.remainingCharacterCountSrOnly = this.characterCount - newValue.length;
+    },
+    initialRemainingCharacterCount() {
+      return this.characterCount - this.value.length;
+    },
   },
 };
 </script>
 
 <template>
+  <div v-if="showCharacterCount">
+    <b-form-textarea
+      :aria-describedby="characterCountId"
+      v-bind="bFormTextareaProps"
+      v-on="listeners"
+      @[keypressEvent].native="handleKeyPress"
+    />
+    <small :class="['form-text', characterCountTextClass]" aria-hidden="true">
+      <!-- 
+      @slot Internationalized over character count text. Example: `<template #character-count-over-limit-text="{ count }">{{ n__('%d character over limit', '%d characters over limit', count) }}</template>`
+      @binding {number} count
+      -->
+      <slot
+        v-if="isCharacterCountOverLimit"
+        name="character-count-over-limit-text"
+        :count="Math.abs(remainingCharacterCount)"
+      ></slot>
+      <!-- 
+      @slot Internationalized character count text. Example: `<template #character-count-text="{ count }">{{ n__('%d character remaining', '%d characters remaining', count) }}</template>`
+      @binding {number} count
+      -->
+
+      <slot v-else name="character-count-text" :count="remainingCharacterCount"></slot>
+    </small>
+    <div
+      :id="characterCountId"
+      class="gl-sr-only"
+      aria-live="polite"
+      data-testid="character-count-text-sr-only"
+    >
+      <slot
+        v-if="isCharacterCountOverLimit"
+        name="character-count-over-limit-text"
+        :count="Math.abs(remainingCharacterCount)"
+      ></slot>
+
+      <slot v-else name="character-count-text" :count="remainingCharacterCountSrOnly"></slot>
+    </div>
+  </div>
   <b-form-textarea
-    class="gl-form-input gl-form-textarea"
-    :no-resize="noResize"
-    v-bind="$attrs"
-    :value="value"
+    v-else
+    v-bind="bFormTextareaProps"
     v-on="listeners"
     @[keypressEvent].native="handleKeyPress"
   />

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.spec.js

@@ -51,7 +51,7 @@ describe('GlDisclosureDropdownItem', () => {
   describe.each`
     prop      | mockItem
     ${'href'} | ${0}
-    ${'to'}   | ${3}
+    ${'to'}   | ${2}
   `('when item has a `$prop`', ({ prop, mockItem }) => {
     const item = mockItems[mockItem];
 
@@ -102,7 +102,7 @@ describe('GlDisclosureDropdownItem', () => {
   });
 
   describe('when item has an `action`', () => {
-    const item = mockItems[1];
+    const item = mockItems[3];
     const action = jest.spyOn(item, 'action');
 
     beforeEach(() => {
@@ -184,7 +184,7 @@ describe('GlDisclosureDropdownItem', () => {
     beforeEach(() => {
       buildWrapper({
         item: {
-          ...mockItems[1],
+          ...mockItems[3],
           extraAttrs,
         },
       });

package/src/components/base/new_dropdowns/disclosure/mock_data.js

@@ -8,18 +8,6 @@ export const mockItems = [
       'data-method': 'put',
     },
   },
-  {
-    text: 'Close merge request',
-    action: () => {
-      // eslint-disable-next-line no-console
-      console.log('CLOSED');
-    },
-    extraAttrs: {
-      class: 'gl-text-red-500!',
-      rel: 'nofollow',
-      'data-method': 'put',
-    },
-  },
   {
     text: 'Create new',
     href: 'https://gitlab.com/gitlab-org/gitlab/-/merge_requests/new',
@@ -35,6 +23,18 @@ export const mockItems = [
       'data-uuid': '1234',
     },
   },
+  {
+    text: 'Close merge request',
+    action: () => {
+      // eslint-disable-next-line no-console
+      console.log('CLOSED');
+    },
+    extraAttrs: {
+      class: 'gl-text-red-500!',
+      rel: 'nofollow',
+      'data-method': 'put',
+    },
+  },
 ];
 
 export const mockItemsCustomItem = [