@brightspace-ui/core 3.89.0 → 3.90.0

package/components/tabs/README.md

@@ -35,7 +35,7 @@ Tabs are used to present related information in mutually exclusive panels, allow
 <!-- docs: end donts -->
 <!-- docs: end best practices -->
 
-## Tab [d2l-tabs]
+## Tabs [d2l-tabs]
 
 The `d2l-tabs` element is a web component for tabbed content. It provides the `d2l-tab-panel` component for the content, renders tabs responsively, and provides virtual scrolling for large tab lists.
 
@@ -66,6 +66,10 @@ The `d2l-tabs` element is a web component for tabbed content. It provides the `d
 
 <!-- docs: end hidden content -->
 
+## Tab [d2l-tab]
+
+Coming soon! This is currently in development and not quite ready for usage.
+
 ## Tab Panels [d2l-tab-panel]
 Selecting a tab in the tab bar causes the relevant tab panel to be displayed. Tab panels can contain text, form controls, rich media, or just about anything else. There is an optional “slot” available for related controls such as a Settings button.
 

package/components/tabs/demo/tabs.html

@@ -34,6 +34,40 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Tabs (paired d2l-tab with d2l-panel)</h2>
+
+			<d2l-demo-snippet>
+				<div>This format is not yet functional. Please do not use yet.</div>
+				<template>
+					<d2l-tabs>
+						<d2l-tab id="all" text="All" slot="tabs"></d2l-tab>
+						<d2l-tab id="biology" text="Biology" slot="tabs"></d2l-tab>
+						<d2l-tab id="chemistry" text="Chemistry" slot="tabs"></d2l-tab>
+						<d2l-tab id="earth" text="Earth &amp; Planetary Sciences" slot="tabs"></d2l-tab>
+						<d2l-tab id="physics" text="Physics" slot="tabs"></d2l-tab>
+						<d2l-tab id="math" text="Math" slot="tabs"></d2l-tab>
+						<d2l-tab-panel labelled-by="all" slot="panels">Tab content for All</d2l-tab-panel>
+						<d2l-tab-panel labelled-by="biology" slot="panels">Tab content for Biology</d2l-tab-panel>
+						<d2l-tab-panel labelled-by="chemistry" slot="panels">Tab content for Chemistry</d2l-tab-panel>
+						<d2l-tab-panel labelled-by="earth" slot="panels">Tab content for Earth &amp; Planetary Sciences</d2l-tab-panel>
+						<d2l-tab-panel labelled-by="physics" slot="panels">Tab content for physics</d2l-tab-panel>
+						<d2l-tab-panel labelled-by="math" slot="panels">Tab content for math</d2l-tab-panel>
+						<d2l-dropdown-button-subtle slot="ext" text="Explore Topics">
+							<d2l-dropdown-menu>
+								<d2l-menu label="Astronomy">
+									<d2l-menu-item text="Introduction"></d2l-menu-item>
+									<d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
+									<d2l-menu-item text="The Solar System"></d2l-menu-item>
+									<d2l-menu-item text="Stars &amp; Galaxies"></d2l-menu-item>
+									<d2l-menu-item text="The Night Sky"></d2l-menu-item>
+									<d2l-menu-item text="The Universe"></d2l-menu-item>
+								</d2l-menu>
+							</d2l-dropdown-menu>
+						</d2l-dropdown-button-subtle>
+					</d2l-tabs>
+				</template>
+			</d2l-demo-snippet>
+
 			<h3>Tabs (with slot)</h3>
 
 			<div style="margin-bottom: 30px;">

package/components/tabs/tab-mixin.js

@@ -92,25 +92,22 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
 
 	render() {
 		return html`
-			<div class="d2l-skeletize">
-				${this.renderContent()}
-			</div>
+			${this.renderContent()}
 			<div class="d2l-tab-selected-indicator d2l-skeletize-container"></div>
 		`;
 	}
 
 	update(changedProperties) {
 		super.update(changedProperties);
-		changedProperties.forEach((oldVal, prop) => {
-			if (prop === 'selected') {
-				this.ariaSelected = this.selected;
-				if (this.selected === 'true') {
-					this.dispatchEvent(new CustomEvent(
-						'd2l-tab-selected', { bubbles: true, composed: true }
-					));
-				}
+
+		if (changedProperties.has('selected')) {
+			this.ariaSelected = this.selected;
+			if (this.selected) {
+				this.dispatchEvent(new CustomEvent(
+					'd2l-tab-selected', { bubbles: true, composed: true }
+				));
 			}
-		});
+		}
 	}
 
 	renderContent() {

package/components/tabs/tab-panel-mixin.js

@@ -9,7 +9,7 @@ export const TabPanelMixin = superclass => class extends superclass {
 			 * Id of the tab that labels this panel
 			 * @type {string}
 			 */
-			labelledBy: { type: String },
+			labelledBy: { type: String, attribute: 'labelled-by' },
 			/**
 			 * Opt out of default padding/whitespace around the panel
 			 * @type {boolean}
@@ -21,12 +21,12 @@ export const TabPanelMixin = superclass => class extends superclass {
 			// eslint-disable-next-line lit/no-native-attributes
 			role: { type: String, reflect: true },
 			/**
-			 * Use to select the tab
+			 * Use to select the tab. Do not set if using the d2l-tab/d2l-tab-panel implementation.
 			 * @type {boolean}
 			 */
 			selected: { type: Boolean, reflect: true },
 			/**
-			 * ACCESSIBILITY: REQUIRED: The text used for the tab, as well as labelling the panel
+			 * ACCESSIBILITY: The text used for the tab, as well as labelling the panel. Required if not using d2l-tab/d2l-tab-panel implementation.
 			 * @type {string}
 			 */
 			text: { type: String }

package/components/tabs/tab.js

@@ -5,6 +5,16 @@ import { TabMixin } from './tab-mixin.js';
 
 class Tab extends TabMixin(LitElement) {
 
+	static get properties() {
+		return {
+			/**
+			 * ACCESSIBILITY: REQUIRED: The text used for the tab, as well as labelling the panel.
+			 * @type {string}
+			 */
+			text: { type: String }
+		};
+	}
+
 	static get styles() {
 		const styles = [ css`
 			.d2l-tab-text {
@@ -30,16 +40,15 @@ class Tab extends TabMixin(LitElement) {
 
 	renderContent() {
 		const contentClasses = {
-			'd2l-tab-handler': true,
 			'd2l-tab-text': true,
 		};
 
 		return html`
 			<div class="${classMap(contentClasses)}">
-				<slot></slot>
+				${this.text}
 			</div>
 		`;
 	}
 }
 
-customElements.define('d2l-tab-wip', Tab);
+customElements.define('d2l-tab', Tab);

package/components/tabs/tabs.js

@@ -87,7 +87,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 				padding-inline: 4px 0;
 			}
 			.d2l-tabs-container-list {
-				display: block;
+				display: flex;
 				-webkit-transition: transform 200ms ease-out;
 				transition: transform 200ms ease-out;
 				white-space: nowrap;

package/custom-elements.json

@@ -12762,13 +12762,13 @@
       "description": "A component for tab panel content.",
       "attributes": [
         {
-          "name": "labelledBy",
+          "name": "labelled-by",
           "description": "Id of the tab that labels this panel",
           "type": "string"
         },
         {
           "name": "text",
-          "description": "ACCESSIBILITY: REQUIRED: The text used for the tab, as well as labelling the panel",
+          "description": "ACCESSIBILITY: The text used for the tab, as well as labelling the panel. Required if not using d2l-tab/d2l-tab-panel implementation.",
           "type": "string"
         },
         {
@@ -12779,7 +12779,7 @@
         },
         {
           "name": "selected",
-          "description": "Use to select the tab",
+          "description": "Use to select the tab. Do not set if using the d2l-tab/d2l-tab-panel implementation.",
           "type": "boolean",
           "default": "false"
         }
@@ -12787,14 +12787,14 @@
       "properties": [
         {
           "name": "labelledBy",
-          "attribute": "labelledBy",
+          "attribute": "labelled-by",
           "description": "Id of the tab that labels this panel",
           "type": "string"
         },
         {
           "name": "text",
           "attribute": "text",
-          "description": "ACCESSIBILITY: REQUIRED: The text used for the tab, as well as labelling the panel",
+          "description": "ACCESSIBILITY: The text used for the tab, as well as labelling the panel. Required if not using d2l-tab/d2l-tab-panel implementation.",
           "type": "string"
         },
         {
@@ -12807,7 +12807,7 @@
         {
           "name": "selected",
           "attribute": "selected",
-          "description": "Use to select the tab",
+          "description": "Use to select the tab. Do not set if using the d2l-tab/d2l-tab-panel implementation.",
           "type": "boolean",
           "default": "false"
         }
@@ -12830,9 +12830,14 @@
       ]
     },
     {
-      "name": "d2l-tab-wip",
+      "name": "d2l-tab",
       "path": "./components/tabs/tab.js",
       "attributes": [
+        {
+          "name": "text",
+          "description": "ACCESSIBILITY: REQUIRED: The text used for the tab, as well as labelling the panel.",
+          "type": "string"
+        },
         {
           "name": "selected",
           "type": "boolean",
@@ -12845,6 +12850,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "ACCESSIBILITY: REQUIRED: The text used for the tab, as well as labelling the panel.",
+          "type": "string"
+        },
         {
           "name": "ariaSelected",
           "type": "boolean",

package/package.json

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