@brightspace-ui/core 3.70.0 → 3.71.0

package/components/inputs/demo/input-text.html

@@ -132,9 +132,9 @@
 			<h2>Inline Help</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-input-text label="Name">
+					<d2l-input-text label="Alphabet" pattern="[a-z]*" pattern-failure-text="Must be a lowercase letter from a to z">
 						<div slot="inline-help">
-							Help text <b>right here</b>!
+							Enter only lowercase letters from the alphabet.
 						</div>
 					</d2l-input-text>
 				</template>

package/components/inputs/docs/input-text.md

@@ -81,6 +81,7 @@ The `<d2l-input-text>` element is a simple wrapper around the native `<input typ
 | `name` | String | Name of the input |
 | `novalidate` | Boolean | Disables the built-in validation |
 | `pattern` | String | Regular expression pattern to validate the value |
+| `pattern-failure-text` | String | Text to display when input fails validation against the pattern. If a list of characters is included in the message, use `LocalizeMixin`'s `localizeCharacter`. |
 | `prevent-submit` | Boolean | Prevents pressing ENTER from submitting forms |
 | `readonly` | Boolean | Makes the input read-only |
 | `required` | Boolean | Indicates that a value is required |

package/components/inputs/input-text.js

@@ -102,12 +102,12 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 			 */
 			minlength: { type: Number },
 			/**
-			 * Regular expression pattern to validate the value
+			 * ADVANCED: Regular expression pattern to validate the value
 			 * @type {string}
 			 */
 			pattern: { type: String },
 			/**
-			 * Text to display when input fails validation against the pattern
+			 * ADVANCED: Text to display when input fails validation against the pattern.  If a list of characters is included in the message, use `LocalizeMixin`'s `localizeCharacter`.
 			 */
 			patternFailureText: { type: String, attribute: 'pattern-failure-text' },
 			/**
@@ -332,6 +332,8 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 			} else if (this.type === 'url') {
 				return this.localize('components.form-element.input.url.typeMismatch');
 			}
+		} else if (this.validity.patternMismatch && (typeof this.patternFailureText === 'string')) {
+			return this.patternFailureText;
 		}
 		return super.validationMessage;
 	}

package/custom-elements.json

@@ -6847,12 +6847,12 @@
         },
         {
           "name": "pattern",
-          "description": "Regular expression pattern to validate the value",
+          "description": "ADVANCED: Regular expression pattern to validate the value",
           "type": "string"
         },
         {
           "name": "pattern-failure-text",
-          "description": "Text to display when input fails validation against the pattern",
+          "description": "ADVANCED: Text to display when input fails validation against the pattern.  If a list of characters is included in the message, use `LocalizeMixin`'s `localizeCharacter`.",
           "type": "string"
         },
         {
@@ -7013,13 +7013,13 @@
         {
           "name": "pattern",
           "attribute": "pattern",
-          "description": "Regular expression pattern to validate the value",
+          "description": "ADVANCED: Regular expression pattern to validate the value",
           "type": "string"
         },
         {
           "name": "patternFailureText",
           "attribute": "pattern-failure-text",
-          "description": "Text to display when input fails validation against the pattern",
+          "description": "ADVANCED: Text to display when input fails validation against the pattern.  If a list of characters is included in the message, use `LocalizeMixin`'s `localizeCharacter`.",
           "type": "string"
         },
         {

package/mixins/localize/README.md

@@ -152,6 +152,39 @@ this.localizeHTML('octopus', {
 });
 ```
 
+### Common Resources
+
+Some localization resources are common and shared across D2L applications. To use these resources, set the `loadCommon` option:
+
+```javascript
+static get localizeConfig() {
+  return {
+    loadCommon: true
+  };
+}
+```
+
+#### localizeCharacter
+
+The localized value of the following characters can be accessed using `localizeCharacter(char)`:
+* `'` (apostrophe)
+* `&` (ampersand)
+* `*` (asterisk)
+* `\` (backslash)
+* `:` (colon)
+* `,` (comma)
+* `>` (greater-than sign)
+* `<` (less-than sign)
+* `#` (number sign)
+* `%` (percent sign)
+* `|` (pipe)
+* `?` (question mark)
+* `"` (quotation mark)
+
+```javascript
+this.localizeCharacter('&'); // -> 'ampersand' in en-US
+```
+
 ## Off-Stack Language Overrides
 
 To enable OSLO, map the project's localization resources to a language collection in Brightspace by defining `osloCollection` in `localizeConfig`:

package/package.json

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