@brightspace-ui/core 1.220.3 → 1.220.4

package/components/count-badge/README.md

@@ -46,7 +46,7 @@ The `d2l-count-badge` element is a web component to display a number count, depe
 | `number` | Number, required | The number to display on the badge.  Must be a positive integer. |
 | `size`, default: `small` | String | The size of the badge. Valid options are `"small"` and `"large"`. |
 | `type`, default: `count` | String | The type of the badge. Valid options are `"notification"` and `"count"`. Notification badges are orange and count badges are grey. |
-| `max-digits`, default: `2` when `type="notification"` | Number | Optionally specify a digit limit, after which numbers are truncated. Defaults to two for `"notification"` type and no limit for `"count"` type.
+| `max-digits`, default: `2` when `type="notification"`, `5` when `type="count"` | Number | Optionally specify a digit limit, after which numbers are truncated. Defaults to two for `"notification"` type and five for `"count"` type. Must be between 1-5.
 | `hide-zero`, default: `false` | Boolean | Optionally choose not to show the count badge when the number is zero. |
 | `text`, required | String | Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled. |
 | `tab-stop`, default: `false` | Boolean | Optionally choose to make the badge a tab stop. |
@@ -88,7 +88,7 @@ The `d2l-count-badge-icon` element is a web component to display a number count,
 | `icon` | String | Required: [Preset icon key](../icons#preset-icons) (e.g. `tier1:gear`) |
 | `size`, default: `small` | String | The size of the badge. Valid options are `"small"` and `"large"`. |
 | `type`, default: `count` | String | The type of the badge. Valid options are `"notification"` and `"count"`. Notification badges are orange and count badges are grey. |
-| `max-digits`, default: `2` when `type="notification"` | Number | Optionally specify a digit limit, after which numbers are truncated. Defaults to two for `"notification"` type and no limit for `"count"` type.
+| `max-digits`, default: `2` when `type="notification"`, `5` when `type="count"` | Number | Optionally specify a digit limit, after which numbers are truncated. Defaults to two for `"notification"` type and five for `"count"` type. Must be between 1-5.
 | `hide-zero`, default: `false` | Boolean | Optionally choose not to show the count badge when the number is zero. |
 | `text`  | String | REQUIRED: Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled. |
 | `tab-stop`, default: `false` | Boolean | Optionally choose to make the badge a tab stop. |

package/components/count-badge/count-badge-mixin.js

@@ -9,6 +9,8 @@ import { RtlMixin } from '../../mixins/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 import { styleMap } from 'lit-html/directives/style-map.js';
 
+const maxBadgeDigits = 5;
+
 export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(SkeletonMixin(RtlMixin(superclass))) {
 
 	static get properties() {
@@ -47,7 +49,8 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
 				attribute: 'hide-zero'
 			},
 			/**
-			 * Optionally specify a digit limit, after which numbers are truncated. Defaults to two for "notification" type and no limit for "count" type.
+			 * Optionally specify a digit limit, after which numbers are truncated.
+			 * Defaults to two for "notification" type and five for "count" type.
 			 * @type {number}
 			 */
 			maxDigits: {
@@ -156,9 +159,20 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
 
 	connectedCallback() {
 		super.connectedCallback();
-		if (!this.maxDigits && this.type === 'notification') {
-			// default to two digits for notification type
-			this.maxDigits = 2;
+		if (!this.maxDigits) {
+			// default to two digits for notification type, 5 for count
+			this.maxDigits = this.type === 'notification' ? 2 : maxBadgeDigits;
+		} else if (this.maxDigits > maxBadgeDigits) {
+			// limit all badges to 5 digits
+			this.maxDigits = maxBadgeDigits;
+		}
+	}
+
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.get('maxDigits') && this.maxDigits > maxBadgeDigits) {
+			// impose a 5 digit maximum to prevent overflows
+			this.maxDigits = maxBadgeDigits;
 		}
 	}
 
@@ -166,15 +180,8 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
 		return this.hasTooltip ? undefined : this._labelId;
 	}
 
-	renderCount(numberStyles) {
+	getNumberString() {
 		let numberString = `${this.number}`;
-		const hideNumber = this.hideZero && this.number === 0;
-		if (!numberStyles || numberStyles.visibility !== 'hidden') {
-			numberStyles = {
-				...numberStyles,
-				visibility: hideNumber ? 'hidden' : 'visible'
-			};
-		}
 		if (this.maxDigits && this.number.toString().length > this.maxDigits) {
 			numberString = `${'9'.repeat(this.maxDigits)}`;
 			numberString = formatNumber(parseInt(numberString));
@@ -183,9 +190,20 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
 			numberString = formatNumber(numberString);
 		}
 
+		return numberString;
+	}
+
+	renderCount(numberStyles) {
+		const hideNumber = this.hideZero && this.number === 0;
+		if (!numberStyles || numberStyles.visibility !== 'hidden') {
+			numberStyles = {
+				...numberStyles,
+				visibility: hideNumber ? 'hidden' : 'visible'
+			};
+		}
 		return html`
 			<div class="d2l-count-badge-number" style=${styleMap(numberStyles)}>
-					<div aria-hidden="true">${numberString}</div>		
+					<div aria-hidden="true">${this.getNumberString()}</div>		
 			</div>
 		`;
 	}

package/custom-elements.json

@@ -1032,7 +1032,7 @@
         },
         {
           "name": "max-digits",
-          "description": "Optionally specify a digit limit, after which numbers are truncated. Defaults to two for \"notification\" type and no limit for \"count\" type.",
+          "description": "Optionally specify a digit limit, after which numbers are truncated.\nDefaults to two for \"notification\" type and five for \"count\" type.",
           "type": "number"
         },
         {
@@ -1105,7 +1105,7 @@
         {
           "name": "maxDigits",
           "attribute": "max-digits",
-          "description": "Optionally specify a digit limit, after which numbers are truncated. Defaults to two for \"notification\" type and no limit for \"count\" type.",
+          "description": "Optionally specify a digit limit, after which numbers are truncated.\nDefaults to two for \"notification\" type and five for \"count\" type.",
           "type": "number"
         },
         {
@@ -1185,7 +1185,7 @@
       "attributes": [
         {
           "name": "max-digits",
-          "description": "Optionally specify a digit limit, after which numbers are truncated. Defaults to two for \"notification\" type and no limit for \"count\" type.",
+          "description": "Optionally specify a digit limit, after which numbers are truncated.\nDefaults to two for \"notification\" type and five for \"count\" type.",
           "type": "number"
         },
         {
@@ -1252,7 +1252,7 @@
         {
           "name": "maxDigits",
           "attribute": "max-digits",
-          "description": "Optionally specify a digit limit, after which numbers are truncated. Defaults to two for \"notification\" type and no limit for \"count\" type.",
+          "description": "Optionally specify a digit limit, after which numbers are truncated.\nDefaults to two for \"notification\" type and five for \"count\" type.",
           "type": "number"
         },
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "1.220.3",
+  "version": "1.220.4",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",