@brightspace-ui/core 1.220.3 → 1.222.0

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/components/dropdown/README.md

@@ -126,6 +126,7 @@ If the dropdown is initially empty when it's opened, the dropdown pointer will n
 | `disabled` | Boolean, default: `false` | Disables the dropdown opener |
 | `no-auto-open` | Boolean, default: `false` | Prevents the dropdown from automatically on click or on key press |
 | `open-on-hover` | Boolean, default: `false` | Optionally open dropdown on click or hover action |
+| `h-align` | String | Possible values are undefined (default) or text. If text, aligns the button content to the leading edge of text |
 <!-- docs: end hidden content -->
 
 ### Accessibility Properties

package/components/dropdown/dropdown-button-subtle.js

@@ -17,6 +17,13 @@ class DropdownButtonSubtle extends DropdownOpenerMixin(LitElement) {
 			 * @type {string}
 			 */
 			description: { type: String },
+
+			/**
+			* Aligns the leading edge of text if value is set to "text"
+			* @type {'text'|''}
+			*/
+			hAlign: { type: String, reflect: true, attribute: 'h-align' },
+
 			/**
 			 * REQUIRED: Text for the button
 			 * @type {string}
@@ -31,7 +38,7 @@ class DropdownButtonSubtle extends DropdownOpenerMixin(LitElement) {
 
 	render() {
 		return html`
-			<d2l-button-subtle description="${ifDefined(this.description)}" text=${this.text} icon="tier1:chevron-down" icon-right ?disabled=${this.disabled}></d2l-button-subtle>
+			<d2l-button-subtle description="${ifDefined(this.description)}" h-align="${ifDefined(this.hAlign)}" text=${this.text} icon="tier1:chevron-down" icon-right ?disabled=${this.disabled}></d2l-button-subtle>
 			<slot></slot>
 		`;
 	}

package/components/dropdown/dropdown-content-mixin.js

@@ -14,6 +14,8 @@ import { tryGetIfrauBackdropService } from '../../helpers/ifrauBackdropService.j
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 const minBackdropHeightMobile = 42;
 const minBackdropWidthMobile = 30;
+const outerMarginTopBottom = 18;
+const defaultVerticalOffset = 16;
 
 export const DropdownContentMixin = superclass => class extends LocalizeCoreElement(RtlMixin(superclass)) {
 
@@ -264,6 +266,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		this._hasHeader = false;
 		this._hasFooter = false;
 		this._showBackdrop = false;
+		this._verticalOffset = defaultVerticalOffset;
 
 		this.__onResize = this.__onResize.bind(this);
 		this.__onAutoCloseFocus = this.__onAutoCloseFocus.bind(this);
@@ -324,9 +327,10 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			if (propName === 'verticalOffset') {
 				let newVerticalOffset = parseInt(this.verticalOffset);
 				if (isNaN(newVerticalOffset)) {
-					newVerticalOffset = 20;
+					newVerticalOffset = defaultVerticalOffset;
 				}
 				this.style.setProperty('--d2l-dropdown-verticaloffset', `${newVerticalOffset}px`);
+				this._verticalOffset = newVerticalOffset;
 			}
 		});
 	}
@@ -616,9 +620,9 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			if (bounded) {
 				spaceAround = this._constrainSpaceAround({
 					// allow for target offset + outer margin
-					above: targetRect.top - boundingContainerRect.top - 40,
+					above: targetRect.top - boundingContainerRect.top - this._verticalOffset - outerMarginTopBottom,
 					// allow for target offset + outer margin
-					below: boundingContainerRect.bottom - targetRect.bottom - 40,
+					below: boundingContainerRect.bottom - targetRect.bottom - this._verticalOffset - outerMarginTopBottom,
 					// allow for outer margin
 					left: targetRect.left - boundingContainerRect.left - 20,
 					// allow for outer margin
@@ -631,9 +635,9 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			} else {
 				spaceAround = this._constrainSpaceAround({
 					// allow for target offset + outer margin
-					above: targetRect.top - 50,
+					above: targetRect.top - this._verticalOffset - outerMarginTopBottom,
 					// allow for target offset + outer margin
-					below: window.innerHeight - targetRect.bottom - 80,
+					below: window.innerHeight - targetRect.bottom - this._verticalOffset - outerMarginTopBottom,
 					// allow for outer margin
 					left: targetRect.left - 20,
 					// allow for outer margin

package/components/dropdown/dropdown-content-styles.js

@@ -16,7 +16,7 @@ export const dropdownContentStyles = css`
 		left: 0;
 		position: absolute;
 		text-align: left;
-		top: calc(100% + var(--d2l-dropdown-verticaloffset, 20px));
+		top: calc(100% + var(--d2l-dropdown-verticaloffset, 16px));
 		width: 100%;
 		z-index: 1000; /* position on top of floating buttons */
 	}
@@ -38,7 +38,7 @@ export const dropdownContentStyles = css`
 
 	:host([opened-above]) {
 		animation: var(--d2l-dropdown-above-animation-name) 300ms ease;
-		bottom: calc(100% + var(--d2l-dropdown-verticaloffset, 20px));
+		bottom: calc(100% + var(--d2l-dropdown-verticaloffset, 16px));
 		top: auto;
 	}
 
@@ -49,7 +49,7 @@ export const dropdownContentStyles = css`
 
 	:host([data-mobile][opened-above]:not([mobile-tray])) {
 		animation: var(--d2l-dropdown-above-animation-name) 300ms ease;
-		bottom: calc(100% + var(--d2l-dropdown-verticaloffset, 20px));
+		bottom: calc(100% + var(--d2l-dropdown-verticaloffset, 16px));
 		top: auto;
 	}
 

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"
         },
         {
@@ -1686,6 +1686,11 @@
           "description": "A description to be added to the opener button for accessibility when text on button does not provide enough context",
           "type": "string"
         },
+        {
+          "name": "h-align",
+          "description": "Aligns the leading edge of text if value is set to \"text\"",
+          "type": "'text'|''"
+        },
         {
           "name": "text",
           "description": "REQUIRED: Text for the button",
@@ -1717,6 +1722,12 @@
           "description": "A description to be added to the opener button for accessibility when text on button does not provide enough context",
           "type": "string"
         },
+        {
+          "name": "hAlign",
+          "attribute": "h-align",
+          "description": "Aligns the leading edge of text if value is set to \"text\"",
+          "type": "'text'|''"
+        },
         {
           "name": "text",
           "attribute": "text",

package/package.json

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