@gitlab/ui 80.20.1 → 81.1.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [81.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v81.0.0...v81.1.0) (2024-06-17)
+
+
+### Features
+
+* **GlDaterangePicker:**  Add valid prop to GlFormInput, GlDatepicker, GlDaterangePicker ([a872eef](https://gitlab.com/gitlab-org/gitlab-ui/commit/a872eefbe1923ec500c4e5fbb5a2fbdc0d33c9df))
+
+# [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/datepicker/datepicker.js

@@ -181,6 +181,11 @@ var script = {
       required: false,
       default: null,
       validator: value => Object.keys(datepickerWidthOptionsMap).includes(value)
+    },
+    state: {
+      type: Boolean,
+      required: false,
+      default: null
     }
   },
   data() {
@@ -350,7 +355,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',{class:_vm.datepickerClasses},[(_vm.showDefaultField)?_c('div',{staticClass:"gl-display-flex gl-align-items-start gl-gap-3"},[_c('div',{staticClass:"gl-relative gl-display-flex gl-flex-grow-1"},[_vm._t("default",function(){return [_c('gl-form-input',{class:_vm.renderClearButton ? 'gl-pr-9!' : 'gl-pr-7!',attrs:{"id":_vm.inputId,"name":_vm.inputName,"data-testid":"gl-datepicker-input","value":_vm.formattedDate,"placeholder":_vm.placeholder,"autocomplete":_vm.inputAutocomplete,"disabled":_vm.disabled,"aria-label":_vm.inputLabel},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onKeydown.apply(null, arguments)}},model:{value:(_vm.textInput),callback:function ($$v) {_vm.textInput=$$v;},expression:"textInput"}})]},{"formattedDate":_vm.formattedDate}),_vm._v(" "),_c('div',{staticClass:"gl-datepicker-actions"},[(_vm.renderClearButton)?_c('gl-button',{staticClass:"gl-pointer-events-auto",attrs:{"data-testid":"clear-button","aria-label":"Clear date","category":"tertiary","size":"small","icon":"clear"},on:{"click":_vm.cleared}}):_vm._e(),_vm._v(" "),(_vm.triggerOnFocus || _vm.disabled)?_c('span',{staticClass:"gl-px-2",class:_vm.disabled ? 'gl-text-gray-400' : 'gl-text-gray-500',attrs:{"data-testid":"datepicker-calendar-icon"}},[_c('gl-icon',{staticClass:"gl-display-block",attrs:{"name":"calendar","size":16}})],1):_c('gl-button',{ref:"calendarTriggerBtn",staticClass:"gl-pointer-events-auto",attrs:{"aria-label":"Open datepicker","category":"tertiary","size":"small","icon":"calendar"}})],1)],2),_vm._v(" "),_vm._t("after")],2):_vm._t("default",null,{"formattedDate":_vm.formattedDate})],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.datepickerClasses},[(_vm.showDefaultField)?_c('div',{staticClass:"gl-display-flex gl-align-items-start gl-gap-3"},[_c('div',{staticClass:"gl-relative gl-display-flex gl-flex-grow-1"},[_vm._t("default",function(){return [_c('gl-form-input',{class:_vm.renderClearButton ? 'gl-pr-9!' : 'gl-pr-7!',attrs:{"id":_vm.inputId,"name":_vm.inputName,"data-testid":"gl-datepicker-input","value":_vm.formattedDate,"placeholder":_vm.placeholder,"autocomplete":_vm.inputAutocomplete,"disabled":_vm.disabled,"aria-label":_vm.inputLabel,"state":_vm.state},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onKeydown.apply(null, arguments)}},model:{value:(_vm.textInput),callback:function ($$v) {_vm.textInput=$$v;},expression:"textInput"}})]},{"formattedDate":_vm.formattedDate}),_vm._v(" "),_c('div',{staticClass:"gl-datepicker-actions"},[(_vm.renderClearButton)?_c('gl-button',{staticClass:"gl-pointer-events-auto",attrs:{"data-testid":"clear-button","aria-label":"Clear date","category":"tertiary","size":"small","icon":"clear"},on:{"click":_vm.cleared}}):_vm._e(),_vm._v(" "),(_vm.triggerOnFocus || _vm.disabled)?_c('span',{staticClass:"gl-px-2",class:_vm.disabled ? 'gl-text-gray-400' : 'gl-text-gray-500',attrs:{"data-testid":"datepicker-calendar-icon"}},[_c('gl-icon',{staticClass:"gl-display-block",attrs:{"name":"calendar","size":16}})],1):_c('gl-button',{ref:"calendarTriggerBtn",staticClass:"gl-pointer-events-auto",attrs:{"aria-label":"Open datepicker","category":"tertiary","size":"small","icon":"calendar"}})],1)],2),_vm._v(" "),_vm._t("after")],2):_vm._t("default",null,{"formattedDate":_vm.formattedDate})],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/daterange_picker/daterange_picker.js

@@ -76,6 +76,11 @@ var script = {
       required: false,
       default: ''
     },
+    startPickerState: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
     endPickerClass: {
       type: String,
       required: false,
@@ -91,6 +96,11 @@ var script = {
       required: false,
       default: ''
     },
+    endPickerState: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
     labelClass: {
       type: String,
       required: false,
@@ -263,7 +273,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',{staticClass:"gl-daterange-picker gl-gap-5 gl-display-flex"},[_c('div',{class:_vm.startContainerClasses,attrs:{"data-testid":"daterange-picker-start-container"}},[_c('label',{class:_vm.labelClass},[_vm._v(_vm._s(_vm.fromLabel))]),_vm._v(" "),_c('gl-datepicker',{attrs:{"min-date":_vm.defaultMinDate,"max-date":_vm.fromCalendarMaxDate,"start-range":_vm.defaultMinDate,"end-range":_vm.fromCalendarMaxDate,"theme":_vm.theme,"i18n":_vm.i18n,"target":_vm.startPickerTarget,"container":_vm.startPickerContainer,"start-opened":_vm.startOpened,"width":_vm.width},on:{"input":_vm.onStartDateSelected,"open":_vm.onStartPickerOpen,"close":_vm.onStartPickerClose},scopedSlots:_vm._u([{key:"after",fn:function(){return [_vm._t("after-start")]},proxy:true}],null,true),model:{value:(_vm.startDate),callback:function ($$v) {_vm.startDate=$$v;},expression:"startDate"}})],1),_vm._v(" "),_c('div',{class:_vm.endContainerClasses,attrs:{"data-testid":"daterange-picker-end-container"}},[_c('label',{class:_vm.labelClass},[_vm._v(_vm._s(_vm.toLabel))]),_vm._v(" "),_c('gl-datepicker',{key:_vm.numericStartTime,attrs:{"min-date":_vm.toCalendarMinDate,"max-date":_vm.toCalendarMaxDate,"start-range":_vm.toCalendarMinDate,"end-range":_vm.toCalendarMaxDate,"theme":_vm.theme,"i18n":_vm.i18n,"target":_vm.endPickerTarget,"container":_vm.endPickerContainer,"start-opened":_vm.openToCalendar,"default-date":_vm.toCalendarDefaultDate,"width":_vm.width},on:{"input":_vm.onEndDateSelected,"open":_vm.onEndPickerOpen,"close":_vm.onEndPickerClose},scopedSlots:_vm._u([{key:"after",fn:function(){return [_vm._t("after-end")]},proxy:true}],null,true),model:{value:(_vm.endDate),callback:function ($$v) {_vm.endDate=$$v;},expression:"endDate"}})],1),_vm._v(" "),(_vm.showIndicator)?_c('div',{staticClass:"gl-daterange-picker-indicator",class:_vm.dateRangeIndicatorClass,attrs:{"data-testid":"daterange-picker-indicator"}},[_vm._t("default",null,null,{ daysSelected: _vm.numberOfDays }),_vm._v(" "),(_vm.tooltip)?_c('gl-icon',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"name":"information-o","title":_vm.tooltip,"size":16}}):_vm._e()],2):_vm._e()])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-daterange-picker gl-gap-5 gl-display-flex"},[_c('div',{class:_vm.startContainerClasses,attrs:{"data-testid":"daterange-picker-start-container"}},[_c('label',{class:_vm.labelClass},[_vm._v(_vm._s(_vm.fromLabel))]),_vm._v(" "),_c('gl-datepicker',{attrs:{"min-date":_vm.defaultMinDate,"max-date":_vm.fromCalendarMaxDate,"start-range":_vm.defaultMinDate,"end-range":_vm.fromCalendarMaxDate,"theme":_vm.theme,"i18n":_vm.i18n,"target":_vm.startPickerTarget,"container":_vm.startPickerContainer,"start-opened":_vm.startOpened,"state":_vm.startPickerState,"width":_vm.width},on:{"input":_vm.onStartDateSelected,"open":_vm.onStartPickerOpen,"close":_vm.onStartPickerClose},scopedSlots:_vm._u([{key:"after",fn:function(){return [_vm._t("after-start")]},proxy:true}],null,true),model:{value:(_vm.startDate),callback:function ($$v) {_vm.startDate=$$v;},expression:"startDate"}})],1),_vm._v(" "),_c('div',{class:_vm.endContainerClasses,attrs:{"data-testid":"daterange-picker-end-container"}},[_c('label',{class:_vm.labelClass},[_vm._v(_vm._s(_vm.toLabel))]),_vm._v(" "),_c('gl-datepicker',{key:_vm.numericStartTime,attrs:{"min-date":_vm.toCalendarMinDate,"max-date":_vm.toCalendarMaxDate,"start-range":_vm.toCalendarMinDate,"end-range":_vm.toCalendarMaxDate,"theme":_vm.theme,"i18n":_vm.i18n,"target":_vm.endPickerTarget,"container":_vm.endPickerContainer,"start-opened":_vm.openToCalendar,"default-date":_vm.toCalendarDefaultDate,"width":_vm.width,"state":_vm.endPickerState},on:{"input":_vm.onEndDateSelected,"open":_vm.onEndPickerOpen,"close":_vm.onEndPickerClose},scopedSlots:_vm._u([{key:"after",fn:function(){return [_vm._t("after-end")]},proxy:true}],null,true),model:{value:(_vm.endDate),callback:function ($$v) {_vm.endDate=$$v;},expression:"endDate"}})],1),_vm._v(" "),(_vm.showIndicator)?_c('div',{staticClass:"gl-daterange-picker-indicator",class:_vm.dateRangeIndicatorClass,attrs:{"data-testid":"daterange-picker-indicator"}},[_vm._t("default",null,null,{ daysSelected: _vm.numberOfDays }),_vm._v(" "),(_vm.tooltip)?_c('gl-icon',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"name":"information-o","title":_vm.tooltip,"size":16}}):_vm._e()],2):_vm._e()])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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_text/form_text.js

@@ -1,8 +1,16 @@
 import { BFormText } from 'bootstrap-vue/esm/index.js';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
+var script = {
+  ...BFormText.options,
+  name: 'GlFormText',
+  render(createElement, context) {
+    return BFormText.options.render(createElement, context);
+  }
+};
+
 /* script */
-const __vue_script__ = BFormText;
+const __vue_script__ = script;
 
 /* template */
 

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.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -19,6 +19,7 @@
     "dist",
     "translations.json",
     "tailwind.defaults.js",
+    "!src/vendor",
     "!*.stories.js",
     "!*.snap",
     "!*.spec.{js,scss}"
@@ -63,7 +64,7 @@
     "stylelint": "stylelint 'src/**/*.scss'",
     "prestylelint": "yarn generate-utilities",
     "stylelint:fix": "yarn stylelint --fix",
-    "markdownlint": "markdownlint '**/*.md' --ignore node_modules --ignore CHANGELOG.md",
+    "markdownlint": "markdownlint '**/*.md' --ignore node_modules --ignore CHANGELOG.md --ignore src/vendor",
     "markdownlint:fix": "yarn markdownlint --fix",
     "lint": "run-p prettier eslint stylelint markdownlint",
     "lint:fix": "run-s eslint:fix prettier:fix stylelint:fix markdownlint:fix",
@@ -132,6 +133,7 @@
     "@vue/test-utils-vue3": "npm:@vue/test-utils@2.2.0",
     "@vue/vue2-jest": "29.0.0",
     "@vue/vue3-jest": "^29.1.1",
+    "@yarnpkg/lockfile": "^1.1.0",
     "autoprefixer": "^9.7.6",
     "axe-core": "^4.2.3",
     "babel-jest": "29.0.1",
@@ -146,6 +148,7 @@
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "3.3.0",
     "eslint-plugin-storybook": "0.8.0",
+    "gitlab-api-async-iterator": "^1.3.1",
     "glob": "10.3.3",
     "identity-obj-proxy": "^3.0.0",
     "inquirer-select-directory": "^1.2.0",

package/src/components/base/datepicker/datepicker.vue

@@ -181,6 +181,11 @@ export default {
       default: null,
       validator: (value) => Object.keys(datepickerWidthOptionsMap).includes(value),
     },
+    state: {
+      type: Boolean,
+      required: false,
+      default: null,
+    },
   },
   data() {
     return {
@@ -382,6 +387,7 @@ export default {
             :autocomplete="inputAutocomplete"
             :disabled="disabled"
             :aria-label="inputLabel"
+            :state="state"
             @keydown.enter="onKeydown"
           />
         </slot>

package/src/components/base/daterange_picker/daterange_picker.vue

@@ -83,6 +83,11 @@ export default {
       required: false,
       default: '',
     },
+    startPickerState: {
+      type: Boolean,
+      required: false,
+      default: null,
+    },
     endPickerClass: {
       type: String,
       required: false,
@@ -98,6 +103,11 @@ export default {
       required: false,
       default: '',
     },
+    endPickerState: {
+      type: Boolean,
+      required: false,
+      default: null,
+    },
     labelClass: {
       type: String,
       required: false,
@@ -277,6 +287,7 @@ export default {
         :target="startPickerTarget"
         :container="startPickerContainer"
         :start-opened="startOpened"
+        :state="startPickerState"
         :width="width"
         @input="onStartDateSelected"
         @open="onStartPickerOpen"
@@ -303,6 +314,7 @@ export default {
         :start-opened="openToCalendar"
         :default-date="toCalendarDefaultDate"
         :width="width"
+        :state="endPickerState"
         @input="onEndDateSelected"
         @open="onEndPickerOpen"
         @close="onEndPickerClose"

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_text/form_text.vue

@@ -1,5 +1,11 @@
 <script>
 import { BFormText } from 'bootstrap-vue';
 
-export default BFormText;
+export default {
+  ...BFormText.options,
+  name: 'GlFormText',
+  render(createElement, context) {
+    return BFormText.options.render(createElement, context);
+  },
+};
 </script>

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';