@gitlab/ui 38.10.2 → 39.0.0

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