@gitlab/ui 80.20.1 → 81.0.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [81.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.20.1...v81.0.0) (2024-06-13)
+
+
+### Features
+
+* Add `GlFormCharacterCount` component ([c3ccb44](https://gitlab.com/gitlab-org/gitlab-ui/commit/c3ccb44479939d380707b979bee6bcbbedf22d9d))
+
+
+### BREAKING CHANGES
+
+* So you can add character count to standalone inputs
+Also renames character count related props and slots in `GlFormTextarea`
+
 ## [80.20.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.20.0...v80.20.1) (2024-06-12)
 
 

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

@@ -0,0 +1,107 @@
+import debounce from 'lodash/debounce';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlFormCharacterCount',
+  props: {
+    /**
+     * Input value
+     */
+    value: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * Character count limit for the input.
+     */
+    limit: {
+      type: Number,
+      required: true
+    },
+    /**
+     * id attribute for the character count text. Input should have `:aria-describedby="countTextId"`
+     */
+    countTextId: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      remainingCount: this.initialRemainingCount(),
+      remainingCountSrOnly: this.initialRemainingCount()
+    };
+  },
+  computed: {
+    isOverLimit() {
+      return this.remainingCount < 0;
+    },
+    isOverLimitSrOnly() {
+      return this.remainingCountSrOnly < 0;
+    },
+    countTextClass() {
+      return this.isOverLimit ? 'gl-text-danger' : 'gl-text-subtle';
+    }
+  },
+  watch: {
+    value(newValue) {
+      this.remainingCount = this.limit - this.valueLength(newValue);
+      this.debouncedUpdateRemainingCountSrOnly(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.debouncedUpdateRemainingCountSrOnly = debounce(this.updateRemainingCountSrOnly, 1000);
+  },
+  methods: {
+    valueLength(value) {
+      return (value === null || value === void 0 ? void 0 : value.length) || 0;
+    },
+    updateRemainingCountSrOnly(newValue) {
+      this.remainingCountSrOnly = this.limit - this.valueLength(newValue);
+    },
+    initialRemainingCount() {
+      return this.limit - this.valueLength(this.value);
+    }
+  }
+};
+
+/* 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('small',{class:['form-text', _vm.countTextClass],attrs:{"aria-hidden":"true"}},[(_vm.isOverLimit)?_vm._t("over-limit-text",null,{"count":Math.abs(_vm.remainingCount)}):_vm._t("remaining-count-text",null,{"count":_vm.remainingCount})],2),_vm._v(" "),_c('div',{staticClass:"gl-sr-only",attrs:{"id":_vm.countTextId,"aria-live":"polite","data-testid":"count-text-sr-only"}},[(_vm.isOverLimitSrOnly)?_vm._t("over-limit-text",null,{"count":Math.abs(_vm.remainingCountSrOnly)}):_vm._t("remaining-count-text",null,{"count":_vm.remainingCountSrOnly})],2)])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;

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

@@ -1,6 +1,6 @@
 import { BFormTextarea } from 'bootstrap-vue/esm/index.js';
-import debounce from 'lodash/debounce';
 import uniqueId from 'lodash/uniqueId';
+import GlFormCharacterCount from '../form_character_count/form_character_count';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const model = {
@@ -10,7 +10,8 @@ const model = {
 var script = {
   name: 'GlFormTextarea',
   components: {
-    BFormTextarea
+    BFormTextarea,
+    GlFormCharacterCount
   },
   inheritAttrs: false,
   model,
@@ -35,7 +36,7 @@ var script = {
     /**
      * Max character count for the textarea.
      */
-    characterCount: {
+    characterCountLimit: {
       type: Number,
       required: false,
       default: null
@@ -48,9 +49,7 @@ var script = {
   },
   data() {
     return {
-      characterCountId: uniqueId('form-textarea-character-count-'),
-      remainingCharacterCount: this.initialRemainingCharacterCount(),
-      remainingCharacterCountSrOnly: this.initialRemainingCharacterCount()
+      characterCountTextId: uniqueId('form-textarea-character-count-')
     };
   },
   computed: {
@@ -85,14 +84,8 @@ var script = {
     keypressEvent() {
       return this.submitOnEnter ? 'keyup' : null;
     },
-    isCharacterCountOverLimit() {
-      return this.remainingCharacterCount < 0;
-    },
-    characterCountTextClass() {
-      return this.isCharacterCountOverLimit ? 'gl-text-danger' : 'gl-text-subtle';
-    },
     showCharacterCount() {
-      return this.characterCount !== null;
+      return this.characterCountLimit !== null;
     },
     bFormTextareaProps() {
       return {
@@ -104,34 +97,11 @@ var script = {
       };
     }
   },
-  watch: {
-    value(newValue) {
-      if (!this.showCharacterCount) {
-        return;
-      }
-      this.remainingCharacterCount = this.characterCount - this.valueLength(newValue);
-      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: {
-    valueLength(value) {
-      return (value === null || value === void 0 ? void 0 : value.length) || 0;
-    },
     handleKeyPress(e) {
       if (e.keyCode === 13 && (e.metaKey || e.ctrlKey)) {
         this.$emit('submit');
       }
-    },
-    updateRemainingCharacterCountSrOnly(newValue) {
-      this.remainingCharacterCountSrOnly = this.characterCount - this.valueLength(newValue);
-    },
-    initialRemainingCharacterCount() {
-      return this.characterCount - this.valueLength(this.value);
     }
   }
 };
@@ -140,7 +110,11 @@ 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 (_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_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.characterCountTextId},nativeOn:_vm._d({},[_vm.keypressEvent,function($event){return _vm.handleKeyPress.apply(null, arguments)}])},'b-form-textarea',_vm.bFormTextareaProps,false),_vm.listeners)),_vm._v(" "),_c('gl-form-character-count',{attrs:{"value":_vm.value,"limit":_vm.characterCountLimit,"count-text-id":_vm.characterCountTextId},scopedSlots:_vm._u([{key:"over-limit-text",fn:function(ref){
+var count = ref.count;
+return [_vm._t("character-count-over-limit-text",null,{"count":count})]}},{key:"remaining-count-text",fn:function(ref){
+var count = ref.count;
+return [_vm._t("remaining-character-count-text",null,{"count":count})]}}],null,true)})],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/index.js

@@ -29,6 +29,7 @@ export { default as GlToast } from './components/base/toast/toast';
 export { default as GlDashboardSkeleton } from './components/regions/dashboard_skeleton/dashboard_skeleton';
 export { default as GlEmptyState } from './components/regions/empty_state/empty_state';
 export { default as GlForm } from './components/base/form/form';
+export { default as GlFormCharacterCount } from './components/base/form/form_character_count/form_character_count';
 export { default as GlFormInput } from './components/base/form/form_input/form_input';
 export { default as GlFormInputGroup } from './components/base/form/form_input_group/form_input_group';
 export { default as GlFormRadio } from './components/base/form/form_radio/form_radio';

package/package.json

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

package/src/components/base/form/form_character_count/form_character_count.md

@@ -0,0 +1,53 @@
+## Usage
+
+`GlFormCharacterCount` can be used to add a character count to an input.
+If you are using `GlFormTextarea` on its own see [with character count example](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-form-form-textarea--with-character-count).
+If you are wrapping your input, such as in a markdown component, and need the character
+count separate from the input, use `GlFormCharacterCount`.
+
+## Example
+
+```html
+<script>
+  import { GlFormCharacterCount, GlFormInput, GlFormGroup } from '@gitlab/ui'
+
+  export default {
+    inputId: 'form-input-with-character-count',
+    countTextId: 'character-count-text',
+    limit: 100,
+    components: { GlFormCharacterCount, GlFormInput, GlFormGroup },
+    data() {
+      return {
+        value: '',
+      }
+    },
+    methods: {
+      remainingCountText(count) {
+        return  n__('%d character remaining', '%d characters remaining', count)
+      },
+      overLimitText(count) {
+        return n__('%d character over limit', '%d characters over limit', count);
+      },
+    },
+  }
+<script>
+
+<template>
+  <gl-form-group label="Form input with character count" :label-for="$options.inputId">
+    <gl-form-input
+      v-model="value"
+      :id="$options.inputId"
+      :value="value"
+      :aria-describedby="$options.countTextId"
+    />
+    <gl-form-character-count
+      :value="value"
+      :limit="$options.limit"
+      :count-text-id="$options.countTextId"
+    >
+      <template #remaining-count-text="{ count }">{{ remainingCountText(count) }}</template>
+      <template #over-limit-text="{ count }">{{ overLimitText(count) }}</template>
+    </gl-form-character-count>
+  </gl-form-group>
+<template>
+```

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

@@ -0,0 +1,97 @@
+<script>
+import debounce from 'lodash/debounce';
+
+export default {
+  name: 'GlFormCharacterCount',
+  props: {
+    /**
+     * Input value
+     */
+    value: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    /**
+     * Character count limit for the input.
+     */
+    limit: {
+      type: Number,
+      required: true,
+    },
+    /**
+     * id attribute for the character count text. Input should have `:aria-describedby="countTextId"`
+     */
+    countTextId: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      remainingCount: this.initialRemainingCount(),
+      remainingCountSrOnly: this.initialRemainingCount(),
+    };
+  },
+  computed: {
+    isOverLimit() {
+      return this.remainingCount < 0;
+    },
+    isOverLimitSrOnly() {
+      return this.remainingCountSrOnly < 0;
+    },
+    countTextClass() {
+      return this.isOverLimit ? 'gl-text-danger' : 'gl-text-subtle';
+    },
+  },
+  watch: {
+    value(newValue) {
+      this.remainingCount = this.limit - this.valueLength(newValue);
+      this.debouncedUpdateRemainingCountSrOnly(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.debouncedUpdateRemainingCountSrOnly = debounce(this.updateRemainingCountSrOnly, 1000);
+  },
+  methods: {
+    valueLength(value) {
+      return value?.length || 0;
+    },
+    updateRemainingCountSrOnly(newValue) {
+      this.remainingCountSrOnly = this.limit - this.valueLength(newValue);
+    },
+    initialRemainingCount() {
+      return this.limit - this.valueLength(this.value);
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <small :class="['form-text', countTextClass]" aria-hidden="true">
+      <!--
+      @slot Internationalized over limit text. Example: `<template #over-limit-text="{ count }">{{ n__('%d character over limit', '%d characters over limit', count) }}</template>`
+      @binding {number} count
+      -->
+      <slot v-if="isOverLimit" name="over-limit-text" :count="Math.abs(remainingCount)"></slot>
+      <!--
+      @slot Internationalized character count text. Example: `<template #remaining-count-text="{ count }">{{ n__('%d character remaining', '%d characters remaining', count) }}</template>`
+      @binding {number} count
+      -->
+
+      <slot v-else name="remaining-count-text" :count="remainingCount"></slot>
+    </small>
+    <div :id="countTextId" class="gl-sr-only" aria-live="polite" data-testid="count-text-sr-only">
+      <slot
+        v-if="isOverLimitSrOnly"
+        name="over-limit-text"
+        :count="Math.abs(remainingCountSrOnly)"
+      ></slot>
+
+      <slot v-else name="remaining-count-text" :count="remainingCountSrOnly"></slot>
+    </div>
+  </div>
+</template>

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

@@ -1,7 +1,7 @@
 <script>
 import { BFormTextarea } from 'bootstrap-vue';
-import debounce from 'lodash/debounce';
 import uniqueId from 'lodash/uniqueId';
+import GlFormCharacterCount from '../form_character_count/form_character_count.vue';
 
 const model = {
   prop: 'value',
@@ -12,6 +12,7 @@ export default {
   name: 'GlFormTextarea',
   components: {
     BFormTextarea,
+    GlFormCharacterCount,
   },
   inheritAttrs: false,
   model,
@@ -36,7 +37,7 @@ export default {
     /**
      * Max character count for the textarea.
      */
-    characterCount: {
+    characterCountLimit: {
       type: Number,
       required: false,
       default: null,
@@ -49,9 +50,7 @@ export default {
   },
   data() {
     return {
-      characterCountId: uniqueId('form-textarea-character-count-'),
-      remainingCharacterCount: this.initialRemainingCharacterCount(),
-      remainingCharacterCountSrOnly: this.initialRemainingCharacterCount(),
+      characterCountTextId: uniqueId('form-textarea-character-count-'),
     };
   },
   computed: {
@@ -79,14 +78,8 @@ export default {
     keypressEvent() {
       return this.submitOnEnter ? 'keyup' : null;
     },
-    isCharacterCountOverLimit() {
-      return this.remainingCharacterCount < 0;
-    },
-    characterCountTextClass() {
-      return this.isCharacterCountOverLimit ? 'gl-text-danger' : 'gl-text-subtle';
-    },
     showCharacterCount() {
-      return this.characterCount !== null;
+      return this.characterCountLimit !== null;
     },
     bFormTextareaProps() {
       return {
@@ -98,39 +91,12 @@ export default {
       };
     },
   },
-  watch: {
-    value(newValue) {
-      if (!this.showCharacterCount) {
-        return;
-      }
-
-      this.remainingCharacterCount = this.characterCount - this.valueLength(newValue);
-      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: {
-    valueLength(value) {
-      return value?.length || 0;
-    },
     handleKeyPress(e) {
       if (e.keyCode === 13 && (e.metaKey || e.ctrlKey)) {
         this.$emit('submit');
       }
     },
-    updateRemainingCharacterCountSrOnly(newValue) {
-      this.remainingCharacterCountSrOnly = this.characterCount - this.valueLength(newValue);
-    },
-    initialRemainingCharacterCount() {
-      return this.characterCount - this.valueLength(this.value);
-    },
   },
 };
 </script>
@@ -138,42 +104,33 @@ export default {
 <template>
   <div v-if="showCharacterCount">
     <b-form-textarea
-      :aria-describedby="characterCountId"
+      :aria-describedby="characterCountTextId"
       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"
+    <gl-form-character-count
+      :value="value"
+      :limit="characterCountLimit"
+      :count-text-id="characterCountTextId"
     >
-      <slot
-        v-if="isCharacterCountOverLimit"
-        name="character-count-over-limit-text"
-        :count="Math.abs(remainingCharacterCount)"
-      ></slot>
+      <template #over-limit-text="{ count }">
+        <!-- 
+        @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 name="character-count-over-limit-text" :count="count"></slot>
+      </template>
+
+      <template #remaining-count-text="{ count }">
+        <!-- 
+        @slot Internationalized character count text. Example: `<template #remaining-character-count-text="{ count }">{{ n__('%d character remaining', '%d characters remaining', count) }}</template>`
+        @binding {number} count
+        -->
 
-      <slot v-else name="character-count-text" :count="remainingCharacterCountSrOnly"></slot>
-    </div>
+        <slot name="remaining-character-count-text" :count="count"></slot
+      ></template>
+    </gl-form-character-count>
   </div>
   <b-form-textarea
     v-else

package/src/index.js

@@ -36,6 +36,7 @@ export { default as GlToast } from './components/base/toast/toast';
 export { default as GlDashboardSkeleton } from './components/regions/dashboard_skeleton/dashboard_skeleton.vue';
 export { default as GlEmptyState } from './components/regions/empty_state/empty_state.vue';
 export { default as GlForm } from './components/base/form/form.vue';
+export { default as GlFormCharacterCount } from './components/base/form/form_character_count/form_character_count.vue';
 export { default as GlFormInput } from './components/base/form/form_input/form_input.vue';
 export { default as GlFormInputGroup } from './components/base/form/form_input_group/form_input_group.vue';
 export { default as GlFormRadio } from './components/base/form/form_radio/form_radio.vue';