@gitlab/ui 38.8.2 → 38.9.0

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

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

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

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

package/src/components/base/icon/icon.stories.js

@@ -44,16 +44,12 @@ export default {
   argTypes: {
     ...disableControls(['useDeprecatedSizes']),
     name: {
-      control: {
-        type: 'select',
-        options: iconSpriteInfo.icons,
-      },
+      options: iconSpriteInfo.icons,
+      control: 'select',
     },
     size: {
-      control: {
-        type: 'select',
-        options: iconSizeOptions,
-      },
+      options: iconSizeOptions,
+      control: 'select',
     },
   },
 };

package/src/components/base/label/label.stories.js

@@ -67,18 +67,14 @@ export default {
   },
   argTypes: {
     backgroundColor: {
-      control: {
-        type: 'color',
-      },
+      control: 'color',
     },
     size: {
       options: labelSizeOptions,
     },
     tooltipPlacement: {
       options: tooltipPlacements,
-      control: {
-        type: 'select',
-      },
+      control: 'select',
     },
   },
 };

package/src/components/base/link/link.stories.js

@@ -40,10 +40,8 @@ export default {
   },
   argTypes: {
     target: {
-      control: {
-        type: 'select',
-        options: targetOptions,
-      },
+      options: targetOptions,
+      control: 'select',
     },
   },
 };

package/src/components/base/loading_icon/loading_icon.stories.js

@@ -46,16 +46,12 @@ export default {
   },
   argTypes: {
     color: {
-      control: {
-        type: 'select',
-        options: viewModeOptions,
-      },
+      options: viewModeOptions,
+      control: 'select',
     },
     size: {
-      control: {
-        type: 'select',
-        options: loadingIconSizes,
-      },
+      options: loadingIconSizes,
+      control: 'select',
     },
   },
 };

package/src/components/base/modal/modal.stories.js

@@ -115,52 +115,36 @@ export default {
   },
   argTypes: {
     headerBgVariant: {
-      control: {
-        type: 'select',
-        options: variantOptionsWithNoDefault,
-      },
+      options: variantOptionsWithNoDefault,
+      control: 'select',
     },
     headerBorderVariant: {
-      control: {
-        type: 'select',
-        options: variantOptionsWithNoDefault,
-      },
+      options: variantOptionsWithNoDefault,
+      control: 'select',
     },
     headerTextVariant: {
-      control: {
-        type: 'select',
-        options: variantOptionsWithNoDefault,
-      },
+      options: variantOptionsWithNoDefault,
+      control: 'select',
     },
     bodyBgVariant: {
-      control: {
-        type: 'select',
-        options: variantOptionsWithNoDefault,
-      },
+      options: variantOptionsWithNoDefault,
+      control: 'select',
     },
     bodyTextVariant: {
-      control: {
-        type: 'select',
-        options: variantOptionsWithNoDefault,
-      },
+      options: variantOptionsWithNoDefault,
+      control: 'select',
     },
     footerBgVariant: {
-      control: {
-        type: 'select',
-        options: variantOptionsWithNoDefault,
-      },
+      options: variantOptionsWithNoDefault,
+      control: 'select',
     },
     footerBorderVariant: {
-      control: {
-        type: 'select',
-        options: variantOptionsWithNoDefault,
-      },
+      options: variantOptionsWithNoDefault,
+      control: 'select',
     },
     footerTextVariant: {
-      control: {
-        type: 'select',
-        options: variantOptionsWithNoDefault,
-      },
+      options: variantOptionsWithNoDefault,
+      control: 'select',
     },
   },
 };

package/src/components/base/path/path.stories.js

@@ -75,14 +75,10 @@ export default {
   argTypes: {
     theme: {
       options: glThemes,
-      control: {
-        type: 'select',
-      },
+      control: 'select',
     },
     backgroundColor: {
-      control: {
-        type: 'color',
-      },
+      control: 'color',
     },
   },
 };

package/src/components/base/popover/popover.stories.js

@@ -87,12 +87,10 @@ export default {
   argTypes: {
     placement: {
       options: Object.values(popoverPlacements),
-      control: {
-        type: 'select',
-      },
+      control: 'select',
     },
     title: {
-      control: { type: 'text' },
+      control: 'text',
     },
   },
 };

package/src/components/base/progress_bar/progress_bar.stories.js

@@ -28,10 +28,8 @@ export default {
   },
   argTypes: {
     variant: {
-      control: {
-        type: 'select',
-        options: variantOptions,
-      },
+      options: variantOptions,
+      control: 'select',
     },
   },
 };

package/src/components/base/search_box_by_click/search_box_by_click.stories.js

@@ -92,9 +92,7 @@ export default {
   argTypes: {
     ...disableControls(['tooltipContainer']),
     historyItems: {
-      control: {
-        type: 'object',
-      },
+      control: 'object',
     },
   },
 };

package/src/components/base/segmented_control/segmented_control.stories.js

@@ -51,9 +51,7 @@ export default {
       options: Object.values(defaultOptions)
         .filter(({ disabled }) => !disabled)
         .map(({ value }) => value),
-      control: {
-        type: 'radio',
-      },
+      control: 'radio',
       table: {
         disable: true,
       },

package/src/components/base/skeleton_loading/skeleton_loading.stories.js

@@ -35,10 +35,8 @@ export default {
   },
   argTypes: {
     lines: {
-      control: {
-        type: 'select',
-        options: [1, 2, 3],
-      },
+      options: [1, 2, 3],
+      control: 'select',
     },
   },
 };

package/src/components/base/table/table.stories.js

@@ -107,10 +107,8 @@ export default {
   },
   argTypes: {
     stacked: {
-      control: {
-        type: 'select',
-        options: ['sm', 'md', 'lg', 'xl', true, false],
-      },
+      options: ['sm', 'md', 'lg', 'xl', true, false],
+      control: 'select',
     },
   },
 };

package/src/components/base/toggle/toggle.stories.js

@@ -56,20 +56,14 @@ export default {
   argTypes: {
     ...disableControls(['name']),
     labelPosition: {
-      control: {
-        type: 'select',
-        options: toggleLabelPosition,
-      },
+      options: toggleLabelPosition,
+      control: 'select',
     },
     label: {
-      control: {
-        type: 'text',
-      },
+      control: 'text',
     },
     help: {
-      control: {
-        type: 'text',
-      },
+      control: 'text',
     },
   },
 };

package/src/components/base/token/token.stories.js

@@ -50,10 +50,8 @@ export default {
   },
   argTypes: {
     variant: {
-      control: {
-        type: 'select',
-        options: tokenVariants,
-      },
+      options: tokenVariants,
+      control: 'select',
     },
   },
 };

package/src/components/base/token_selector/token_selector.stories.js

@@ -104,10 +104,8 @@ export default {
   },
   argTypes: {
     state: {
-      control: {
-        type: 'radio',
-        options: [true, false, null],
-      },
+      options: [true, false, null],
+      control: 'radio',
     },
   },
 };

package/src/components/charts/single_stat/single_stat.stories.js

@@ -74,9 +74,7 @@ export default {
   argTypes: {
     variant: {
       options: Object.values(badgeVariantOptions),
-      control: {
-        type: 'select',
-      },
+      control: 'select',
     },
     metaIcon: {
       options: iconSpriteInfo.icons,

package/src/directives/resize_observer/resize_observer.stories.js

@@ -55,9 +55,7 @@ Default.args = generateProps();
 
 const makeControl = () => ({
   options: ['100%', '75%', '50%'],
-  control: {
-    type: 'select',
-  },
+  control: 'select',
 });
 
 export default {

package/src/utils/constants.js

@@ -37,6 +37,7 @@ export const badgeVariantOptions = {
   success: 'success',
   warning: 'warning',
   danger: 'danger',
+  tier: 'tier',
 };
 
 export const variantCssColorMap = {
@@ -297,3 +298,8 @@ export const loadingIconSizes = {
   'lg (32x32)': 'lg',
   'xl (64x64)': 'xl',
 };
+
+export const textareaCountOptions = {
+  max: 'max',
+  recommended: 'recommended',
+};