@brightspace-ui/core 3.268.0 → 3.268.1

package/components/hierarchical-view/README.md

@@ -21,8 +21,7 @@ The `d2l-hierarchical-view` component uses the `d2l-hierarchical-view-mixin` for
         this.showParentView = this.showParentView.bind(this);
     }
     // <!-- docs: start hidden content -->
-    static get styles() {
-      return [css`
+    static styles = [css`
       #view1 {
         width: 100%;
       }
@@ -74,8 +73,8 @@ The `d2l-hierarchical-view` component uses the `d2l-hierarchical-view-mixin` for
       .position-display {
         display: flex;
         justify-content: space-evenly;
-      }`];
-    }
+      }
+    `];
 
     // <!-- docs: end hidden content -->
     showSubView(id) {
@@ -208,13 +207,11 @@ This mixin allows for nested views within components. To use, apply the mixin an
 ```js
 import { HierarchicalViewMixin } from '@brightspace-ui/core/components/hierarchical-view/hierarchical-view-mixin.js';
 class MyComponent extends HierarchicalViewMixin(LitElement) {
-  static get styles() {
-        return [ super.styles, css`
-            :host {
-                display: inline-block;
-            }
-        `];
-    }
+  static styles = [super.styles, css`
+        :host {
+            display: inline-block;
+        }
+    `];
 
     render() {
         return html`

package/components/inputs/docs/input-select-styles.md

@@ -10,9 +10,8 @@ A Select List allows the user to select a single option out of a relatively larg
 
   class MySelectElem extends LitElement {
 
-    static get styles() {
-      return selectStyles;
-    }
+    static styles = selectStyles;
+
     render() {
       return html`
         <select class="d2l-input-select" aria-label="Options">
@@ -61,9 +60,7 @@ When applying styles to the native element, we also recommend using the [`Skelet
   import { SkeletonMixin } from '@brightspace-ui/core/components/skeleton/skeleton-mixin.js';
 
   class TestInputSelect extends SkeletonMixin(LitElement) {
-  static get styles() {
-    return [super.styles, selectStyles];
-  }
+  static styles = [super.styles, selectStyles];
 
   render() {
     return html`
@@ -100,9 +97,7 @@ For a visible label, import the label styles and include them in your component'
 
   class TestInputSelect extends LitElement {
 
-    static get styles() {
-      return [inputLabelStyles, selectStyles];
-    }
+    static styles = [inputLabelStyles, selectStyles];
 
     render() {
       return html`

package/components/inputs/docs/styling-native-inputs.md

@@ -16,9 +16,7 @@ Import `input-checkbox-styles.js` and apply the `d2l-input-checkbox` CSS class t
 
   class MyCheckboxElem extends LitElement {
 
-    static get styles() {
-      return checkboxStyles;
-    }
+    static styles = checkboxStyles;
 
     render() {
       return html`<input type="checkbox" class="d2l-input-checkbox">`;
@@ -46,9 +44,7 @@ For disabled items, add the `d2l-input-radio-label-disabled` class on the label
 
   class MyRadioElem extends LitElement {
 
-    static get styles() {
-      return radioStyles;
-    }
+    static styles = radioStyles;
 
     render() {
       return html`
@@ -85,17 +81,13 @@ If you'd like to manually link the radio input with a label, or use an ARIA labe
 
   class MyRadioElem extends LitElement {
 
-    static get properties() {
-      return {
-        checked: { type: Boolean },
-        disabled: { type: Boolean },
-        invalid: { type: Boolean }
-      };
-    }
+    static properties = {
+      checked: { type: Boolean },
+      disabled: { type: Boolean },
+      invalid: { type: Boolean }
+    };
 
-    static get styles() {
-      return radioStyles;
-    }
+    static styles = radioStyles;
 
     render() {
       const invalid = this.invalid ? 'true' : 'false';
@@ -130,9 +122,7 @@ To align related content below radio buttons, the `d2l-input-radio-spacer` eleme
 
   class MyRadioElem extends LitElement {
 
-    static get styles() {
-      return [ radioStyles, inlineHelpStyles ];
-    }
+    static styles = [ radioStyles, inlineHelpStyles ];
 
     render() {
       return html`
@@ -164,9 +154,7 @@ Import `input-styles.js` and apply the `d2l-input` CSS class to the native `<inp
 
   class MyTextInputElem extends LitElement {
 
-    static get styles() {
-      return inputStyles;
-    }
+    static styles = inputStyles;
 
     render() {
       return html`<input type="text" class="d2l-input">`;
@@ -189,9 +177,7 @@ Import `input-styles.js` and apply the `d2l-input` CSS class to the  native `<te
   import { inputStyles } from '@brightspace-ui/core/components/inputs/input-styles.js';
 
   class MyTextareaInputElem extends LitElement {
-    static get styles() {
-      return inputStyles;
-    }
+    static styles = inputStyles;
     render() {
       return html`
         <textarea class="d2l-input">

package/components/link/README.md

@@ -70,7 +70,7 @@ Alternately, you can apply link styles to a native `<a>` element by importing th
 
   class MyLinkElem extends LitElement {
 
-    static get styles() { return [ linkStyles ] }
+    static styles = [ linkStyles ];
 
     render() {
       return html`

package/components/list/README.md

@@ -403,11 +403,9 @@ If an item is draggable, the `drag-handle-text` attribute should be used to prov
   import { css, html, LitElement } from 'lit';
 
   class ListDemoDragAndDropUsage extends LitElement {
-    static get properties() {
-      return {
-        list: { type: Array }
-      };
-    }
+    static properties = {
+      list: { type: Array }
+    };
 
     constructor() {
       super();
@@ -467,15 +465,11 @@ These scenarios can be seen in the demo below.
   import { labelStyles } from '@brightspace-ui/core/components/typography/styles.js';
 
   class ListDemoDragAndDropInteractiveUsage extends LitElement {
-    static get properties() {
-      return {
-        list: { type: Array }
-      };
-    }
+    static properties = {
+      list: { type: Array }
+    };
 
-    static get styles() {
-      return labelStyles;
-    }
+    static styles = labelStyles;
 
     constructor() {
       super();
@@ -1058,9 +1052,7 @@ class ListItem extends ListItemMixin(LitElement) {
 
 How add the styles:
 ```javascript
-static get styles() {
-  return [ super.styles ];
-}
+static styles = [super.styles];
 ```
 
 How to render the list item:

package/components/menu/menu-item-checkbox.js

@@ -9,9 +9,7 @@ import { menuItemSelectableStyles } from './menu-item-selectable-styles.js';
  */
 class MenuItemCheckbox extends MenuItemSelectableMixin(LitElement) {
 
-	static get styles() {
-		return menuItemSelectableStyles;
-	}
+	static styles = menuItemSelectableStyles;
 
 	constructor() {
 		super();

package/components/menu/menu-item-link.js

@@ -10,43 +10,37 @@ import { menuItemStyles } from './menu-item-styles.js';
  */
 class MenuItemLink extends LinkMixin(MenuItemMixin(LitElement)) {
 
-	static get properties() {
-		return {
-			_ariaDescription: { type: String, attribute: 'aria-description', reflect: true },
-		};
-	}
+	static properties = {
+		_ariaDescription: { type: String, attribute: 'aria-description', reflect: true },
+	};
 
-	static get styles() {
-		return [ super.styles, menuItemStyles,
-			css`
-				:host {
-					display: block;
-					padding: 0;
-				}
+	static styles = [super.styles, menuItemStyles, css`
+		:host {
+			display: block;
+			padding: 0;
+		}
 
-				:host > a {
-					align-items: center;
-					color: inherit;
-					display: flex;
-					line-height: 1rem;
-					outline: none;
-					overflow-x: hidden;
-					padding: 0.75rem 1rem;
-					text-decoration: none;
-				}
+		:host > a {
+			align-items: center;
+			color: inherit;
+			display: flex;
+			line-height: 1rem;
+			outline: none;
+			overflow-x: hidden;
+			padding: 0.75rem 1rem;
+			text-decoration: none;
+		}
 
-				:host([target="_blank"]) .d2l-menu-item-text {
-					align-self: baseline;
-					flex: 0 1 auto;
-				}
+		:host([target="_blank"]) .d2l-menu-item-text {
+			align-self: baseline;
+			flex: 0 1 auto;
+		}
 
-				#new-window {
-					align-self: baseline;
-					flex: auto;
-				}
-			`
-		];
-	}
+		#new-window {
+			align-self: baseline;
+			flex: auto;
+		}
+	`];
 
 	constructor() {
 		super();

package/components/menu/menu-item-mixin.js

@@ -4,60 +4,58 @@ const defaultLines = 2;
 
 export const MenuItemMixin = superclass => class extends PropertyRequiredMixin(superclass) {
 
-	static get properties() {
-		return {
-			/**
-			 * Disables the menu item
-			 * @type {boolean}
-			 */
-			disabled: { type: Boolean, reflect: true },
-			/**
-			 * @ignore
-			 */
-			first: { type: Boolean, reflect: true }, // set by d2l-menu
-			/**
-			 * @ignore
-			 */
-			hasChildView: { type: Boolean },
-			/**
-			 * @ignore
-			 */
-			// eslint-disable-next-line lit/no-native-attributes
-			hidden: { type: Boolean, reflect: true },
-			/**
-			 * @ignore
-			 */
-			last: { type: String, reflect: true }, // set by d2l-menu
-			/**
-			 * The number of lines to display before truncating text with an ellipsis. Defaults to 2.
-			 * @type {number}
-			 */
-			lines: { type: Number },
-			/**
-			 * @ignore
-			 */
-			// eslint-disable-next-line lit/no-native-attributes
-			role: { type: String, reflect: true },
-			/**
-			 * @ignore
-			 */
-			// eslint-disable-next-line lit/no-native-attributes
-			tabindex: { type: String, reflect: true },
-			/**
-			 * REQUIRED: Text displayed by the menu item
-			 * @type {string}
-			 */
-			text: { type: String, required: true },
-			/**
-			 * ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context
-			 * @type {string}
-			 */
-			description: { type: String },
-			_ariaDisabled: { type: String, attribute: 'aria-disabled', reflect: true },
-			_ariaLabel: { type: String, attribute: 'aria-label', reflect: true },
-			_letClickPropagate: { state: true }
-		};
-	}
+	static properties = {
+		/**
+		 * Disables the menu item
+		 * @type {boolean}
+		 */
+		disabled: { type: Boolean, reflect: true },
+		/**
+		 * @ignore
+		 */
+		first: { type: Boolean, reflect: true }, // set by d2l-menu
+		/**
+		 * @ignore
+		 */
+		hasChildView: { type: Boolean },
+		/**
+		 * @ignore
+		 */
+		// eslint-disable-next-line lit/no-native-attributes
+		hidden: { type: Boolean, reflect: true },
+		/**
+		 * @ignore
+		 */
+		last: { type: String, reflect: true }, // set by d2l-menu
+		/**
+		 * The number of lines to display before truncating text with an ellipsis. Defaults to 2.
+		 * @type {number}
+		 */
+		lines: { type: Number },
+		/**
+		 * @ignore
+		 */
+		// eslint-disable-next-line lit/no-native-attributes
+		role: { type: String, reflect: true },
+		/**
+		 * @ignore
+		 */
+		// eslint-disable-next-line lit/no-native-attributes
+		tabindex: { type: String, reflect: true },
+		/**
+		 * REQUIRED: Text displayed by the menu item
+		 * @type {string}
+		 */
+		text: { type: String, required: true },
+		/**
+		 * ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context
+		 * @type {string}
+		 */
+		description: { type: String },
+		_ariaDisabled: { type: String, attribute: 'aria-disabled', reflect: true },
+		_ariaLabel: { type: String, attribute: 'aria-label', reflect: true },
+		_letClickPropagate: { state: true }
+	};
 
 	constructor() {
 		super();

package/components/menu/menu-item-radio.js

@@ -9,9 +9,7 @@ import { menuItemSelectableStyles } from './menu-item-selectable-styles.js';
  */
 export class MenuItemRadio extends MenuItemRadioMixin(LitElement) {
 
-	static get styles() {
-		return menuItemSelectableStyles;
-	}
+	static styles = menuItemSelectableStyles;
 
 	render() {
 		return html`

package/components/menu/menu-item-return.js

@@ -7,28 +7,24 @@ import { overflowEllipsisDeclarations } from '../../helpers/overflow.js';
 
 class MenuItemReturn extends LocalizeCoreElement(MenuItemMixin(LitElement)) {
 
-	static get styles() {
-		return [ menuItemStyles,
-			css`
-				:host {
-					display: flex;
-					padding: 0.75rem 1rem;
-				}
-
-				span {
-					flex: auto;
-					line-height: 1rem;
-					${overflowEllipsisDeclarations}
-				}
-
-				d2l-icon {
-					flex: none;
-					margin-inline-end: 1rem;
-					margin-top: 0.1rem;
-				}
-			`
-		];
-	}
+	static styles = [menuItemStyles, css`
+		:host {
+			display: flex;
+			padding: 0.75rem 1rem;
+		}
+
+		span {
+			flex: auto;
+			line-height: 1rem;
+			${overflowEllipsisDeclarations}
+		}
+
+		d2l-icon {
+			flex: none;
+			margin-inline-end: 1rem;
+			margin-top: 0.1rem;
+		}
+	`];
 
 	constructor() {
 		super();

package/components/menu/menu-item-selectable-mixin.js

@@ -2,20 +2,18 @@ import { MenuItemMixin } from './menu-item-mixin.js';
 
 export const MenuItemSelectableMixin = superclass => class extends MenuItemMixin(superclass) {
 
-	static get properties() {
-		return {
-			/**
-			 * This will set the item to be selected by default
-			 * @type {boolean}
-			 */
-			selected: { type: Boolean, reflect: true },
-			/**
-			 * REQUIRED: The selectable item's value
-			 * @type {string}
-			 */
-			value: { type: String }
-		};
-	}
+	static properties = {
+		/**
+		 * This will set the item to be selected by default
+		 * @type {boolean}
+		 */
+		selected: { type: Boolean, reflect: true },
+		/**
+		 * REQUIRED: The selectable item's value
+		 * @type {string}
+		 */
+		value: { type: String }
+	};
 
 	constructor() {
 		super();

package/components/menu/menu-item-separator.js

@@ -5,17 +5,15 @@ import { css, LitElement } from 'lit';
  */
 class MenuItemSeparator extends LitElement {
 
-	static get styles() {
-		return css`
-			:host {
-				border-top: 1px solid var(--d2l-menu-separator-color);
-				display: block;
-				margin-top: -1px;
-				position: relative;
-				z-index: 1;
-			}
-		`;
-	}
+	static styles = css`
+		:host {
+			border-top: 1px solid var(--d2l-menu-separator-color);
+			display: block;
+			margin-top: -1px;
+			position: relative;
+			z-index: 1;
+		}
+	`;
 
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);

package/components/menu/menu-item.js

@@ -10,21 +10,17 @@ import { menuItemStyles } from './menu-item-styles.js';
  */
 class MenuItem extends MenuItemMixin(LitElement) {
 
-	static get styles() {
-		return [ menuItemStyles,
-			css`
-				:host {
-					align-items: center;
-					display: flex;
-					padding: 0.75rem 1rem;
-				}
-				d2l-icon {
-					flex: none;
-					margin-inline-start: 6px;
-				}
-			`
-		];
-	}
+	static styles = [menuItemStyles, css`
+		:host {
+			align-items: center;
+			display: flex;
+			padding: 0.75rem 1rem;
+		}
+		d2l-icon {
+			flex: none;
+			margin-inline-start: 6px;
+		}
+	`];
 
 	render() {
 		const icon = this.hasChildView ?