@brightspace-ui/core 1.175.0 → 1.175.1

package/components/backdrop/README.md

@@ -1,30 +1,32 @@
-# Backdrop
-
-## d2l-backdrop
+# Backdrop [d2l-backdrop]
 
 The `d2l-backdrop` element is a web component to display a semi-transparent backdrop behind a specified sibling element. It also hides elements other than the target from assistive technologies by applying `role="presentation"` and `aria-hidden="true"`.
 
+<!-- docs: demo live name:d2l-backdrop size:small -->
 ```html
 <script type="module">
+  import '@brightspace-ui/core/components/button/button.js';
   import '@brightspace-ui/core/components/backdrop/backdrop.js';
+  import '@brightspace-ui/core/components/switch/switch.js';
 </script>
 <style>
-  #target { position: relative; z-index: 1000; }
+  #target { position: relative; z-index: 1000; margin: 40px; }
 </style>
-
-<div id="target"><button>toggle backdrop</button></div>
-<d2l-backdrop for-target="target" shown></d2l-backdrop>
-```
-
-Set the visible state of the backdrop by using the `shown` attribute/property.
-
-```javascript
-button.addEventListener('click', () => {
-  backdrop.shown = !backdrop.shown;
-});
+<div>
+  <div id="target"><d2l-button primary>Toggle backdrop</d2l-button></div>
+  <d2l-backdrop for-target="target"></d2l-backdrop>
+</div>
+<span>Background content</span>
+<script>
+  const backdrop = document.querySelector('d2l-backdrop');
+  document.querySelector('#target > d2l-button').addEventListener('click', () => {
+    backdrop.shown = !backdrop.shown;
+  });
+</script>
 ```
 
-**Properties:**
+<!-- docs: start hidden content -->
+### Properties:
 
 | Property | Type | Description |
 |--|--|--|
@@ -36,3 +38,4 @@ button.addEventListener('click', () => {
 ## Future Enhancements
 
 Looking for an enhancement not listed here? Create a GitHub issue!
+<!-- docs: end hidden content -->

package/components/loading-spinner/README.md

@@ -1,6 +1,7 @@
 # Loading Spinners
 
-The loading spinner can be used to indicate to a user that the current page/component is in a loading state, potentially when waiting for asynchronous data or during rendering.
+A loading spinner indicates that something is happening and we don't know how long it will take.
+
 <!-- docs: demo name:d2l-loading-spinner -->
 ```html
 <script type="module">
@@ -13,6 +14,21 @@ The loading spinner can be used to indicate to a user that the current page/comp
 ![Loading Spinner](./screenshots/loading-spinner.gif?raw=true)
 <!-- docs: end hidden content -->
 
+## Best Practices
+
+<!-- docs: start best practices -->
+<!-- docs: start dos -->
+* Use a loading spinner when the user initiates an action with indeterminate length, and it's expected to take longer than a couple seconds
+* Adjust the size proportionally to the area that is being loaded; small for a widget or dropdown, larger for a large list or an entire page
+* For a better user experience, use a Skeleton loader instead when possible
+<!-- docs: end dos -->
+
+<!-- docs: start donts -->
+* Don't use a loading spinner it if the user's action is nearly instant, as it may appear to flash or flicker on the screen before disappearing
+* Avoid using multiple spinners on one screen, as this can overwhelm users and create anxiety - see Skeleton loaders instead
+<!-- docs: end donts -->
+<!-- docs: end best practices -->
+
 ## Loading Spinner [d2l-loading-spinner]
 
 <!-- docs: demo live name:d2l-loading-spinner -->

package/components/typography/typography.js

@@ -67,7 +67,7 @@ if (!document.head.querySelector('#d2l-typography-font-face')) {
 
 		.d2l-typography:lang(ar),
 		.d2l-typography :lang(ar) {
-			font-family: 'Arabic Transparent', 'Arabic Typesetting', 'Geeza Pro', sans-serif;
+			font-family: 'Segoe UI', 'Geeza Pro', sans-serif;
 		}
 
 		.d2l-typography:lang(zh),

package/components/typography/typography.scss

@@ -16,7 +16,7 @@
 
 	&:lang(ar),
 	& :lang(ar) {
-		font-family: 'Arabic Transparent', 'Arabic Typesetting', 'Geeza Pro', sans-serif;
+		font-family: 'Segoe UI', 'Geeza Pro', sans-serif;
 	}
 
 	&:lang(zh),

package/package.json

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