@gitlab/ui 66.4.0 → 66.5.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [66.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.4.0...v66.5.0) (2023-09-07)
+
+
+### Features
+
+* **GlSingleStat:** Format the displayed number based on locale ([b6a845d](https://gitlab.com/gitlab-org/gitlab-ui/commit/b6a845d4344ad1ecef83738b6ef1b82a45d786a5))
+
 # [66.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.3.1...v66.4.0) (2023-09-04)
 
 

package/dist/components/base/table/table.js

@@ -21,7 +21,12 @@ var script = {
   },
   inheritAttrs: false,
   props: {
-    tableClass
+    tableClass,
+    fields: {
+      type: Array,
+      required: false,
+      default: null
+    }
   },
   computed: {
     localTableClass() {
@@ -41,7 +46,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-table',_vm._g(_vm._b({attrs:{"table-class":_vm.localTableClass},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$scopedSlots)),function(slot){return {key:slot,fn:function(scope){return [_vm._t(slot,null,null,scope)]}}})],null,true)},'b-table',_vm.$attrs,false),_vm.$listeners))};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-table',_vm._g(_vm._b({attrs:{"table-class":_vm.localTableClass,"fields":_vm.fields},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$scopedSlots)),function(slot){return {key:slot,fn:function(scope){return [_vm._t(slot,null,null,scope)]}}})],null,true)},'b-table',_vm.$attrs,false),_vm.$listeners))};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/table_lite/table_lite.js

@@ -11,7 +11,12 @@ var script = {
   },
   inheritAttrs: false,
   props: {
-    tableClass
+    tableClass,
+    fields: {
+      type: Array,
+      required: false,
+      default: null
+    }
   },
   computed: {
     localTableClass() {
@@ -24,7 +29,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-table-lite',_vm._g(_vm._b({attrs:{"table-class":_vm.localTableClass},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$scopedSlots)),function(slot){return {key:slot,fn:function(scope){return [_vm._t(slot,null,null,scope)]}}})],null,true)},'b-table-lite',_vm.$attrs,false),_vm.$listeners))};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-table-lite',_vm._g(_vm._b({attrs:{"table-class":_vm.localTableClass,"fields":_vm.fields},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$scopedSlots)),function(slot){return {key:slot,fn:function(scope){return [_vm._t(slot,null,null,scope)]}}})],null,true)},'b-table-lite',_vm.$attrs,false),_vm.$listeners))};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/charts/single_stat/single_stat.js

@@ -2,6 +2,7 @@ import { badgeVariantOptions, variantCssColorMap } from '../../../utils/constant
 import GlBadge from '../../base/badge/badge';
 import GlIcon from '../../base/icon/icon';
 import GlAnimatedNumber from '../../utilities/animated_number/animated_number';
+import { formatNumberToLocale } from '../../../utils/number_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
@@ -25,6 +26,14 @@ var script = {
       required: false,
       default: null
     },
+    /**
+     * Requires the `value` property to be a valid Number or convertible to one
+     */
+    useDelimiters: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     variant: {
       type: String,
       required: false,
@@ -85,6 +94,16 @@ var script = {
     },
     canAnimate() {
       return this.shouldAnimate && !Number.isNaN(Number(this.value));
+    },
+    statValue() {
+      if (this.useDelimiters) {
+        var _this$value$toString$;
+        const minimumFractionDigits = ((_this$value$toString$ = this.value.toString().split('.')[1]) === null || _this$value$toString$ === void 0 ? void 0 : _this$value$toString$.length) || 0;
+        return formatNumberToLocale(this.value, {
+          minimumFractionDigits
+        });
+      }
+      return this.value;
     }
   },
   methods: {
@@ -98,7 +117,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',_vm._g(_vm._b({staticClass:"gl-single-stat gl-display-flex gl-flex-direction-column gl-p-2"},'div',_vm.$attrs,false),_vm.$listeners),[_c('div',{staticClass:"gl-display-flex gl-align-items-center gl-text-gray-700 gl-mb-2"},[(_vm.showTitleIcon)?_c('gl-icon',{class:['gl-mr-2', _vm.titleIconClass],attrs:{"name":_vm.titleIcon,"data-testid":"title-icon"}}):_vm._e(),_vm._v(" "),_c('span',{staticClass:"gl-font-base gl-font-weight-normal",attrs:{"data-testid":"title-text"}},[_vm._v(_vm._s(_vm.title))])],1),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-align-items-baseline gl-font-weight-bold gl-text-gray-900"},[_c('span',{staticClass:"gl-font-size-h-display",class:{ 'gl-mr-2': !_vm.unit },attrs:{"data-testid":"displayValue"}},[(_vm.canAnimate)?_c('gl-animated-number',{attrs:{"number":Number(_vm.value),"decimal-places":_vm.animationDecimalPlaces},on:{"animating":function($event){return _vm.setHideUnits(true)},"animated":function($event){return _vm.setHideUnits(false)}}}):_c('span',{attrs:{"data-testid":"non-animated-value"}},[_vm._v(_vm._s(_vm.value))])],1),_vm._v(" "),(_vm.unit)?_c('span',{staticClass:"gl-font-sm gl-mx-2 gl-transition-medium gl-opacity-10",class:{ 'gl-opacity-0!': _vm.hideUnits },attrs:{"data-testid":"unit"}},[_vm._v(_vm._s(_vm.unit))]):_vm._e(),_vm._v(" "),(_vm.showMetaIcon)?_c('gl-icon',{class:_vm.textColor,attrs:{"name":_vm.metaIcon,"data-testid":"meta-icon"}}):_vm._e(),_vm._v(" "),(_vm.showBadge)?_c('gl-badge',{attrs:{"variant":_vm.variant,"icon":_vm.metaIcon,"data-testid":"meta-badge"}},[_vm._v(_vm._s(_vm.metaText))]):_vm._e()],1)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._g(_vm._b({staticClass:"gl-single-stat gl-display-flex gl-flex-direction-column gl-p-2"},'div',_vm.$attrs,false),_vm.$listeners),[_c('div',{staticClass:"gl-display-flex gl-align-items-center gl-text-gray-700 gl-mb-2"},[(_vm.showTitleIcon)?_c('gl-icon',{class:['gl-mr-2', _vm.titleIconClass],attrs:{"name":_vm.titleIcon,"data-testid":"title-icon"}}):_vm._e(),_vm._v(" "),_c('span',{staticClass:"gl-font-base gl-font-weight-normal",attrs:{"data-testid":"title-text"}},[_vm._v(_vm._s(_vm.title))])],1),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-align-items-baseline gl-font-weight-bold gl-text-gray-900"},[_c('span',{staticClass:"gl-font-size-h-display",class:{ 'gl-mr-2': !_vm.unit },attrs:{"data-testid":"displayValue"}},[(_vm.canAnimate)?_c('gl-animated-number',{attrs:{"number":Number(_vm.value),"decimal-places":_vm.animationDecimalPlaces,"use-delimiters":_vm.useDelimiters},on:{"animating":function($event){return _vm.setHideUnits(true)},"animated":function($event){return _vm.setHideUnits(false)}}}):_c('span',{attrs:{"data-testid":"non-animated-value"}},[_vm._v(_vm._s(_vm.statValue))])],1),_vm._v(" "),(_vm.unit)?_c('span',{staticClass:"gl-font-sm gl-mx-2 gl-transition-medium gl-opacity-10",class:{ 'gl-opacity-0!': _vm.hideUnits },attrs:{"data-testid":"unit"}},[_vm._v(_vm._s(_vm.unit))]):_vm._e(),_vm._v(" "),(_vm.showMetaIcon)?_c('gl-icon',{class:_vm.textColor,attrs:{"name":_vm.metaIcon,"data-testid":"meta-icon"}}):_vm._e(),_vm._v(" "),(_vm.showBadge)?_c('gl-badge',{attrs:{"variant":_vm.variant,"icon":_vm.metaIcon,"data-testid":"meta-badge"}},[_vm._v(_vm._s(_vm.metaText))]):_vm._e()],1)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/utilities/animated_number/animated_number.js

@@ -1,3 +1,4 @@
+import { formatNumberToLocale } from '../../../utils/number_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
@@ -23,6 +24,11 @@ var script = {
       required: false,
       default: 0
     },
+    useDelimiters: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     animateOnMount: {
       type: Boolean,
       required: false,
@@ -37,7 +43,13 @@ var script = {
   },
   computed: {
     animatedNumber() {
-      return this.displayNumber.toFixed(this.decimalPlaces);
+      const number = this.displayNumber.toFixed(this.decimalPlaces);
+      if (this.useDelimiters) {
+        return formatNumberToLocale(number, {
+          minimumFractionDigits: this.decimalPlaces
+        });
+      }
+      return number;
     }
   },
   ready() {

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 15:35:47 GMT
+ * Generated on Thu, 07 Sep 2023 10:31:09 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 15:35:47 GMT
+ * Generated on Thu, 07 Sep 2023 10:31:09 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 15:35:47 GMT
+ * Generated on Thu, 07 Sep 2023 10:31:09 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 15:35:47 GMT
+ * Generated on Thu, 07 Sep 2023 10:31:09 GMT
  */
 
 export const BLACK = "#000";

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 04 Sep 2023 15:35:47 GMT
+// Generated on Thu, 07 Sep 2023 10:31:09 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 04 Sep 2023 15:35:47 GMT
+// Generated on Thu, 07 Sep 2023 10:31:09 GMT
 
 $brand-gray-05: #2b2838 !default;
 $brand-gray-04: #45424d !default;

package/dist/utils/number_utils.js

@@ -96,4 +96,29 @@ const engineeringNotation = function (value) {
   return `${scaledMantissa}${allYourBase[scaledPower]}`;
 };
 
-export { addition, average, engineeringNotation, modulo, sum };
+/**
+ * Formats a number as a locale-based string using `Intl.NumberFormat`.
+ *
+ * 2333 -> 2,333
+ * 232324 -> 232,324
+ *
+ * @param {Number|string} value - number to be converted
+ * @param {{}?} options - options to be passed to
+ * `Intl.NumberFormat` such as `unit` and `style`.
+ * @param {String|String[]} locales - If set, forces a different
+ * language code from the one currently in the document.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat
+ *
+ * @returns {String}
+ */
+const formatNumberToLocale = function (value) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let locales = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+  if (Number.isNaN(Number(value))) {
+    return value;
+  }
+  return new Intl.NumberFormat(locales, options).format(value);
+};
+
+export { addition, average, engineeringNotation, formatNumberToLocale, modulo, sum };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "66.4.0",
+  "version": "66.5.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -89,7 +89,7 @@
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
     "@babel/core": "^7.22.11",
-    "@babel/preset-env": "^7.22.10",
+    "@babel/preset-env": "^7.22.14",
     "@babel/preset-react": "^7.22.5",
     "@gitlab/eslint-plugin": "19.0.0",
     "@gitlab/fonts": "^1.2.0",
@@ -117,11 +117,13 @@
     "@vue/vue2-jest": "29.0.0",
     "@vue/vue3-jest": "^29.1.1",
     "autoprefixer": "^9.7.6",
+    "axe-core": "^4.2.3",
     "babel-jest": "29.0.1",
     "babel-loader": "^8.0.5",
     "babel-plugin-require-context-hook": "^1.0.0",
     "bootstrap": "4.6.2",
     "cypress": "13.1.0",
+    "cypress-axe": "^1.4.0",
     "dompurify": "^3.0.0",
     "emoji-regex": "^10.0.0",
     "eslint": "8.48.0",

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

@@ -57,4 +57,13 @@ describe('GlTable', () => {
 
     expect(findBTable().props().tableClass).toEqual(['gl-table', 'test-class']);
   });
+
+  it('adds gl-table fields to table prop', () => {
+    const fields = ['name', 'age'];
+
+    factory({ props: { fields } });
+
+    expect(wrapper.props('fields')).toEqual(fields);
+    expect(findBTable().props('fields')).toEqual(fields);
+  });
 });

package/src/components/base/table/table.vue

@@ -21,6 +21,11 @@ export default {
   inheritAttrs: false,
   props: {
     tableClass,
+    fields: {
+      type: Array,
+      required: false,
+      default: null,
+    },
   },
   computed: {
     localTableClass() {
@@ -38,7 +43,7 @@ export default {
 </script>
 
 <template>
-  <b-table :table-class="localTableClass" v-bind="$attrs" v-on="$listeners">
+  <b-table :table-class="localTableClass" :fields="fields" v-bind="$attrs" v-on="$listeners">
     <template v-for="slot in Object.keys($scopedSlots)" #[slot]="scope">
       <slot :name="slot" v-bind="scope"></slot>
     </template>

package/src/components/base/table_lite/table_lite.spec.js

@@ -18,4 +18,13 @@ describe('GlTableLite', () => {
 
     expect(findBTableLite().props().tableClass).toEqual(['gl-table', 'test-class']);
   });
+
+  it('adds gl-table fields to table prop', () => {
+    const fields = ['name', 'age'];
+
+    factory({ fields });
+
+    expect(wrapper.props('fields')).toEqual(fields);
+    expect(findBTableLite().props('fields')).toEqual(fields);
+  });
 });

package/src/components/base/table_lite/table_lite.vue

@@ -9,7 +9,14 @@ export default {
     BTableLite,
   },
   inheritAttrs: false,
-  props: { tableClass },
+  props: {
+    tableClass,
+    fields: {
+      type: Array,
+      required: false,
+      default: null,
+    },
+  },
   computed: {
     localTableClass() {
       return ['gl-table', this.tableClass];
@@ -19,7 +26,7 @@ export default {
 </script>
 
 <template>
-  <b-table-lite :table-class="localTableClass" v-bind="$attrs" v-on="$listeners">
+  <b-table-lite :table-class="localTableClass" :fields="fields" v-bind="$attrs" v-on="$listeners">
     <template v-for="slot in Object.keys($scopedSlots)" #[slot]="scope">
       <!-- @slot See https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-lite-slots for available slots. -->
       <slot :name="slot" v-bind="scope"></slot>

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

@@ -25,7 +25,8 @@ describe('GlSingleStat', () => {
     });
   };
 
-  const findIemByTestId = (testId) => wrapper.find(`[data-testid="${testId}"]`);
+  const findItemByTestId = (testId) => wrapper.find(`[data-testid="${testId}"]`);
+  const findAnimatedNumber = () => wrapper.findComponent(GlAnimatedNumber);
 
   describe('displays the correct default data', () => {
     beforeEach(() => createWrapper());
@@ -41,7 +42,7 @@ describe('GlSingleStat', () => {
       ${'meta badge'}         | ${'meta-badge'}         | ${false}      | ${null}
     `('for the $element', ({ shouldDisplay, testId, expected, element }) => {
       it(`${shouldDisplay ? 'displays' : "doesn't display"} the ${element}`, () => {
-        const el = findIemByTestId(testId);
+        const el = findItemByTestId(testId);
 
         expect(el.exists()).toBe(shouldDisplay);
 
@@ -60,7 +61,7 @@ describe('GlSingleStat', () => {
       ({ propValue, shouldUseAnimatedComponent }) => {
         createWrapper({ value: propValue, shouldAnimate: true });
 
-        const el = wrapper.findComponent(GlAnimatedNumber);
+        const el = findAnimatedNumber();
         expect(el.exists()).toBe(shouldUseAnimatedComponent);
       }
     );
@@ -73,11 +74,11 @@ describe('GlSingleStat', () => {
       `('$display the units when $event', async ({ event, expected }) => {
         createWrapper({ unit, shouldAnimate: true });
 
-        wrapper.findComponent(GlAnimatedNumber).vm.$emit(event);
+        findAnimatedNumber().vm.$emit(event);
 
         await wrapper.vm.$nextTick();
 
-        expect(findIemByTestId('unit').classes('gl-opacity-0!')).toBe(expected);
+        expect(findItemByTestId('unit').classes('gl-opacity-0!')).toBe(expected);
       });
     });
   });
@@ -92,7 +93,7 @@ describe('GlSingleStat', () => {
         beforeEach(() => createWrapper(mockData));
 
         it('displays a standalone icon', () => {
-          const el = findIemByTestId('meta-icon');
+          const el = findItemByTestId('meta-icon');
           const variantSpecified = Object.keys(mockData).includes('variant');
 
           expect(el.exists()).toBe(true);
@@ -103,7 +104,7 @@ describe('GlSingleStat', () => {
         });
 
         it('does not display a badge', () => {
-          expect(findIemByTestId('meta-badge').exists()).toBe(false);
+          expect(findItemByTestId('meta-badge').exists()).toBe(false);
         });
       });
 
@@ -117,11 +118,11 @@ describe('GlSingleStat', () => {
         beforeEach(() => createWrapper(mockData));
 
         it("doesn't display a standalone icon", () => {
-          expect(findIemByTestId('meta-icon').exists()).toBe(false);
+          expect(findItemByTestId('meta-icon').exists()).toBe(false);
         });
 
         it('displays a badge', () => {
-          const badge = findIemByTestId('meta-badge');
+          const badge = findItemByTestId('meta-badge');
           const iconSpecified = Object.keys(mockData).includes('metaIcon');
           const variantSpecified = Object.keys(mockData).includes('variant');
 
@@ -141,7 +142,7 @@ describe('GlSingleStat', () => {
       beforeEach(() => createWrapper(mockData));
 
       it('displays when specified', () => {
-        const el = findIemByTestId(testId);
+        const el = findItemByTestId(testId);
 
         expect(el.exists()).toBe(true);
       });
@@ -161,11 +162,56 @@ describe('GlSingleStat', () => {
             titleIconClass: classes,
           });
 
-          expect(findIemByTestId('title-icon').classes()).toEqual(
+          expect(findItemByTestId('title-icon').classes()).toEqual(
             expect.arrayContaining(['title-icon-class'])
           );
         }
       );
     });
+
+    describe.each([true, false])(`when the \`useDelimiters\` prop is %s`, (useDelimiters) => {
+      const initialValue = '100000.12';
+
+      it('should render the value as expected when not animated', () => {
+        createWrapper({
+          value: initialValue,
+          shouldAnimate: false,
+          useDelimiters,
+        });
+
+        const displayValue = useDelimiters ? '100,000.12' : initialValue;
+
+        expect(findItemByTestId('non-animated-value').text()).toBe(displayValue);
+      });
+
+      it('should pass the value and delimiter setting to `GlAnimatedNumber`', () => {
+        createWrapper({
+          value: initialValue,
+          shouldAnimate: true,
+          animationDecimalPlaces: 2,
+          useDelimiters,
+        });
+
+        expect(findAnimatedNumber().props()).toMatchObject({
+          number: Number(initialValue),
+          decimalPlaces: 2,
+          useDelimiters,
+        });
+      });
+
+      it('should keep all the decimal points defined by the value', () => {
+        const decimalValue = '100000.000';
+
+        createWrapper({
+          value: decimalValue,
+          shouldAnimate: false,
+          useDelimiters,
+        });
+
+        const displayValue = useDelimiters ? '100,000.000' : decimalValue;
+
+        expect(findItemByTestId('non-animated-value').text()).toBe(displayValue);
+      });
+    });
   });
 });

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

@@ -8,6 +8,7 @@ const generateProps = ({
   title = 'Single stat',
   value = '100',
   unit = '',
+  useDelimiters = false,
   metaText = '',
   metaIcon = null,
   titleIcon = null,
@@ -19,6 +20,7 @@ const generateProps = ({
   title,
   value,
   unit,
+  useDelimiters,
   metaText,
   metaIcon,
   titleIcon,
@@ -41,6 +43,7 @@ const Template = (args, { argTypes }) => ({
       :title="title"
       :value="value"
       :unit="unit"
+      :use-delimiters="useDelimiters"
       :variant="variant"
       :meta-text="metaText"
       :meta-icon="metaIcon"
@@ -63,6 +66,9 @@ WithMetaIcon.args = generateProps({ metaIcon });
 export const WithTitleIcon = Template.bind({});
 WithTitleIcon.args = generateProps({ titleIcon });
 
+export const WithDelimiters = Template.bind({});
+WithDelimiters.args = generateProps({ value: '10000', useDelimiters: true });
+
 export default {
   title: 'charts/single-stat',
   component: GlSingleStat,
@@ -89,5 +95,9 @@ export default {
     unit: {
       control: 'text',
     },
+    useDelimiters: {
+      control: 'boolean',
+      description: 'Requires the `value` property to be a valid Number or convertable to one',
+    },
   },
 };

package/src/components/charts/single_stat/single_stat.vue

@@ -3,6 +3,7 @@ import { badgeVariantOptions, variantCssColorMap } from '../../../utils/constant
 import GlBadge from '../../base/badge/badge.vue';
 import GlIcon from '../../base/icon/icon.vue';
 import GlAnimatedNumber from '../../utilities/animated_number/animated_number.vue';
+import { formatNumberToLocale } from '../../../utils/number_utils';
 
 export default {
   name: 'GlSingleStat',
@@ -25,6 +26,14 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * Requires the `value` property to be a valid Number or convertible to one
+     */
+    useDelimiters: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     variant: {
       type: String,
       required: false,
@@ -86,6 +95,17 @@ export default {
     canAnimate() {
       return this.shouldAnimate && !Number.isNaN(Number(this.value));
     },
+    statValue() {
+      if (this.useDelimiters) {
+        const minimumFractionDigits = this.value.toString().split('.')[1]?.length || 0;
+
+        return formatNumberToLocale(this.value, {
+          minimumFractionDigits,
+        });
+      }
+
+      return this.value;
+    },
   },
   methods: {
     setHideUnits(flag) {
@@ -116,10 +136,11 @@ export default {
           v-if="canAnimate"
           :number="Number(value)"
           :decimal-places="animationDecimalPlaces"
+          :use-delimiters="useDelimiters"
           @animating="setHideUnits(true)"
           @animated="setHideUnits(false)"
         />
-        <span v-else data-testid="non-animated-value">{{ value }}</span></span
+        <span v-else data-testid="non-animated-value">{{ statValue }}</span></span
       >
       <span
         v-if="unit"

package/src/components/utilities/animated_number/animated_number.spec.js

@@ -9,11 +9,17 @@ const ACTION_ANIMATING = 'animating';
 describe('GlAnimatedNumber', () => {
   let wrapper;
 
-  const createComponent = ({ number = 100, decimalPlaces = 0, animateOnMount = false } = {}) => {
+  const createComponent = ({
+    number = 100,
+    decimalPlaces = 0,
+    useDelimiters = false,
+    animateOnMount = false,
+  } = {}) => {
     wrapper = shallowMount(GlAnimatedNumber, {
       propsData: {
         number,
         decimalPlaces,
+        useDelimiters,
         duration,
         animateOnMount,
       },
@@ -40,20 +46,22 @@ describe('GlAnimatedNumber', () => {
 
   describe('when animateOnMount is false', () => {
     describe.each`
-      withDecimal | number   | updatedNumber | decimalPlaces | expectedInitialOnMount | expectedInitialOnUpdate
-      ${false}    | ${100}   | ${200}        | ${0}          | ${'100'}               | ${'200'}
-      ${true}     | ${100.2} | ${200.2}      | ${1}          | ${'100.2'}             | ${'200.2'}
+      withDecimal | number      | updatedNumber | decimalPlaces | useDelimiters | expectedInitialOnMount | expectedInitialOnUpdate
+      ${false}    | ${100}      | ${200}        | ${0}          | ${false}      | ${'100'}               | ${'200'}
+      ${true}     | ${100.2}    | ${200.2}      | ${1}          | ${false}      | ${'100.2'}             | ${'200.2'}
+      ${true}     | ${100000.2} | ${200000.2}   | ${1}          | ${true}       | ${'100,000.2'}         | ${'200,000.2'}
     `(
-      'withDecimal === $withDecimal',
+      'when withDecimal = $withDecimal, useDelimiters = $useDelimiters',
       ({
         number,
         updatedNumber,
         decimalPlaces,
+        useDelimiters,
         expectedInitialOnMount,
         expectedInitialOnUpdate,
       }) => {
         beforeEach(() => {
-          createComponent({ number, decimalPlaces });
+          createComponent({ number, decimalPlaces, useDelimiters });
         });
 
         it('displays the correct number on mount', async () => {
@@ -77,24 +85,28 @@ describe('GlAnimatedNumber', () => {
 
   describe('when animateOnMount is true', () => {
     describe.each`
-      withDecimal | number   | decimalPlaces | expectedInitial
-      ${false}    | ${100}   | ${0}          | ${'0'}
-      ${true}     | ${100.2} | ${1}          | ${'0.0'}
-    `('withDecimal === $withDecimal', ({ number, decimalPlaces, expectedInitial }) => {
-      beforeEach(() => {
-        createComponent({ number, decimalPlaces, animateOnMount: true });
-      });
-
-      it('displays the correct intial number', () => {
-        expect(wrapper.text()).toBe(expectedInitial);
-      });
-
-      it('displays the correct end number', async () => {
-        await runOutAnimationTimer();
-
-        expect(wrapper.text()).toBe(`${number}`);
-      });
-    });
+      withDecimal | number      | decimalPlaces | useDelimiters | expectedInitial | expectedEnd
+      ${false}    | ${100}      | ${0}          | ${false}      | ${'0'}          | ${'100'}
+      ${true}     | ${100.2}    | ${1}          | ${false}      | ${'0.0'}        | ${'100.2'}
+      ${true}     | ${100000.2} | ${1}          | ${true}       | ${'0.0'}        | ${'100,000.2'}
+    `(
+      'when withDecimal = $withDecimal, useDelimiters = $useDelimiters',
+      ({ number, decimalPlaces, useDelimiters, expectedInitial, expectedEnd }) => {
+        beforeEach(() => {
+          createComponent({ number, decimalPlaces, useDelimiters, animateOnMount: true });
+        });
+
+        it('displays the correct initial number', () => {
+          expect(wrapper.text()).toBe(expectedInitial);
+        });
+
+        it('displays the correct end number', async () => {
+          await runOutAnimationTimer();
+
+          expect(wrapper.text()).toBe(expectedEnd);
+        });
+      }
+    );
   });
 
   describe('animation event emissions', () => {

package/src/components/utilities/animated_number/animated_number.stories.js

@@ -4,7 +4,7 @@ import GlAnimatedNumber from './animated_number.vue';
 
 const template = `
   <div>
-    <gl-animated-number :number="updatedNumber" :decimalPlaces="decimalPlaces" :duration="duration" :animateOnMount="animateOnMount"/>
+    <gl-animated-number :number="updatedNumber" :decimalPlaces="decimalPlaces" :use-delimiters="useDelimiters" :duration="duration" :animateOnMount="animateOnMount"/>
     <button @click="updateNumber">Update number</button>
   </div>
 `;
@@ -14,11 +14,13 @@ const defaultValue = (prop) => GlAnimatedNumber.props[prop].default;
 const generateProps = ({
   initialNumber = 100,
   decimalPlaces = defaultValue('decimalPlaces'),
+  useDelimiters = false,
   duration = 1000,
   animateOnMount = defaultValue('animateOnMount'),
 } = {}) => ({
   initialNumber,
   decimalPlaces,
+  useDelimiters,
   duration,
   animateOnMount,
 });

package/src/components/utilities/animated_number/animated_number.vue

@@ -1,4 +1,6 @@
 <script>
+import { formatNumberToLocale } from '../../../utils/number_utils';
+
 export default {
   name: 'AnimatedNumber',
   props: {
@@ -22,6 +24,11 @@ export default {
       required: false,
       default: 0,
     },
+    useDelimiters: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     animateOnMount: {
       type: Boolean,
       required: false,
@@ -36,7 +43,13 @@ export default {
   },
   computed: {
     animatedNumber() {
-      return this.displayNumber.toFixed(this.decimalPlaces);
+      const number = this.displayNumber.toFixed(this.decimalPlaces);
+
+      if (this.useDelimiters) {
+        return formatNumberToLocale(number, { minimumFractionDigits: this.decimalPlaces });
+      }
+
+      return number;
     },
   },
   ready() {

package/src/utils/number_utils.js

@@ -94,3 +94,27 @@ export const engineeringNotation = (value, precision = 2) => {
 
   return `${scaledMantissa}${allYourBase[scaledPower]}`;
 };
+
+/**
+ * Formats a number as a locale-based string using `Intl.NumberFormat`.
+ *
+ * 2333 -> 2,333
+ * 232324 -> 232,324
+ *
+ * @param {Number|string} value - number to be converted
+ * @param {{}?} options - options to be passed to
+ * `Intl.NumberFormat` such as `unit` and `style`.
+ * @param {String|String[]} locales - If set, forces a different
+ * language code from the one currently in the document.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat
+ *
+ * @returns {String}
+ */
+export const formatNumberToLocale = (value, options = {}, locales = undefined) => {
+  if (Number.isNaN(Number(value))) {
+    return value;
+  }
+
+  return new Intl.NumberFormat(locales, options).format(value);
+};

package/src/utils/number_utils.spec.js

@@ -86,4 +86,25 @@ describe('number utils', () => {
       expect(numberUtils.modulo(n, divisor)).toBe(result);
     });
   });
+
+  describe('formatNumberToLocale', () => {
+    it('should format the provided string of either an integer or float', () => {
+      expect(numberUtils.formatNumberToLocale('1234')).toEqual('1,234');
+      expect(numberUtils.formatNumberToLocale('222222.233')).toEqual('222,222.233');
+    });
+
+    it('should not format the provided string if it contains no numbers', () => {
+      expect(numberUtils.formatNumberToLocale('aaaa')).toEqual('aaaa');
+    });
+
+    it('should use the options if they are provided', () => {
+      expect(numberUtils.formatNumberToLocale('222222.233', { minimumFractionDigits: 4 })).toEqual(
+        '222,222.2330'
+      );
+    });
+
+    it('should override the locale if one is provided', () => {
+      expect(numberUtils.formatNumberToLocale('222222.233', {}, 'de-de')).toEqual('222.222,233');
+    });
+  });
 });