@brightspace-ui/labs 1.2.0 → 1.2.2

package/package.json

@@ -41,5 +41,5 @@
     "@brightspace-ui/core": "^2",
     "lit": "^2"
   },
-  "version": "1.2.0"
+  "version": "1.2.2"
 }

package/src/components/opt-in-flyout/README.md

@@ -7,11 +7,10 @@ The `<d2l-labs-opt-in-flyout>` and `<d2l-labs-opt-out-flyout>` can be used in ap
 
 | Property | Type | Description |
 |---|---|---|
-| `open` | Boolean, default: `false` | Indicates the opened or closed state of the flyout |
-| `title` | String, required | Title to display at the top of the flyout |
-| `short-description` | String |Descriptive text shown beneath the `title` |
+| `opened` | Boolean, default: `false` | Indicates the opened or closed state of the flyout |
+| `flyout-title` | String, required | Title to display at the top of the flyout |
+| `short-description` | String |Descriptive text shown beneath the `flyout-title` |
 | `long-description` | String | Additional text shown beneath `short-description` |
-| `tab-position` | String, default: `'right'` | Position to display the expand/collapse tab. Can either be an integer percentage (including the `%` character) or the string `left`, `right`, or `center`/`centre`. |
 | `tutorial-link` | String | A URL for a tutorial of the new experience or feature |
 | `help-docs-link` | String | A URL for help documentation on the new experience or feature |
 

package/src/components/opt-in-flyout/flyout-impl.js

@@ -8,7 +8,6 @@ import { css, html, LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { composeMixins } from '@brightspace-ui/core/helpers/composeMixins.js';
 import { LocalizeLabsElement } from '../localize-labs-element.js';
-import { RtlMixin } from '@brightspace-ui/core/mixins/rtl-mixin.js';
 
 const VISIBLE_STATES = Object.freeze({
 	opened: 'OPENED',
@@ -19,19 +18,16 @@ const VISIBLE_STATES = Object.freeze({
 
 class FlyoutImplementation extends composeMixins(
 	LitElement,
-	LocalizeLabsElement,
-	RtlMixin
+	LocalizeLabsElement
 ) {
 
 	static get properties() {
 		return {
 			optOut: { type: Boolean, attribute: 'opt-out' },
-			open: { type: Boolean, reflect: true },
-			title: { type: String },
+			opened: { type: Boolean, reflect: true },
+			flyoutTitle: { attribute: 'flyout-title', type: String },
 			shortDescription: { type: String, attribute: 'short-description' },
 			longDescription: { type: String, attribute: 'long-description' },
-			tabPosition: { type: String, attribute: 'tab-position' },
-			noTransform: { type: Boolean, attribute: 'no-transform' },
 			tutorialLink: { type: String, attribute: 'tutorial-link' },
 			helpDocsLink: { type: String, attribute: 'help-docs-link' },
 			hideReason: { type: Boolean, attribute: 'hide-reason' },
@@ -153,12 +149,13 @@ class FlyoutImplementation extends composeMixins(
 					box-sizing: border-box;
 					cursor: pointer;
 					height: 1rem;
+					inset-block-start: 0;
+					inset-inline-end: 15px;
 					min-height: 0;
 					padding: 1px;
 					pointer-events: auto;
 					position: absolute;
 					text-align: center;
-					top: 0;
 					width: 5rem;
 				}
 
@@ -187,13 +184,12 @@ class FlyoutImplementation extends composeMixins(
 
 	constructor() {
 		super();
-		this.tabPosition = 'right';
 		this._visibleState = VISIBLE_STATES.closed;
 	}
 
 	connectedCallback() {
 		super.connectedCallback();
-		this._visibleState = this.open ? VISIBLE_STATES.opened : VISIBLE_STATES.closed;
+		this._visibleState = this.opened ? VISIBLE_STATES.opened : VISIBLE_STATES.closed;
 	}
 
 	render() {
@@ -203,7 +199,7 @@ class FlyoutImplementation extends composeMixins(
 				<span tabindex="${this._getTabIndex()}" @focus="${this._shiftToLast}"></span>
 				${this._renderFlyoutContent()}
 				<div class="flyout-tab-container">
-					<button id="flyout-tab" class="flyout-tab" style="${this._getTabStyle()}" tabindex="0" aria-label="${this._getAriaLabelForTab()}" @click="${this._clickTab}">
+					<button id="flyout-tab" class="flyout-tab" tabindex="0" aria-label="${this._getAriaLabelForTab()}" @click="${this._clickTab}">
 						<d2l-icon icon="${this._getTabIcon()}"></d2l-icon>
 					</button>
 				</div>
@@ -214,8 +210,8 @@ class FlyoutImplementation extends composeMixins(
 
 	updated(changedProperties) {
 		super.updated(changedProperties);
-		if (changedProperties.has('open')) {
-			this._openChanged();
+		if (changedProperties.has('opened')) {
+			this._openedChanged();
 		}
 	}
 
@@ -243,7 +239,7 @@ class FlyoutImplementation extends composeMixins(
 
 	_clickOptIn() {
 		this._fireEvent('opt-in');
-		this.open = false;
+		this.opened = false;
 	}
 
 	_clickOptOut() {
@@ -251,20 +247,20 @@ class FlyoutImplementation extends composeMixins(
 			this._optOutDialogOpen = true;
 		} else {
 			this._fireEvent('opt-out');
-			this.open = false;
+			this.opened = false;
 		}
 	}
 
 	_clickTab() {
 		if (this._visibleState === VISIBLE_STATES.opened || this._visibleState === VISIBLE_STATES.closed) {
-			this.open = !this.open;
+			this.opened = !this.opened;
 		}
 	}
 
 	_confirmOptOut(event) {
 		this._optOutDialogOpen = false;
 		this._fireEvent('opt-out', event.detail);
-		this.open = false;
+		this.opened = false;
 		event.stopPropagation();
 	}
 
@@ -281,7 +277,7 @@ class FlyoutImplementation extends composeMixins(
 	}
 
 	_getAriaLabelForTab() {
-		if (this.open) {
+		if (this.opened) {
 			return this.localize('components:optInFlyout:close');
 		}
 		return this.localize(this.optOut ? 'components:optInFlyout:openOptOut' : 'components:optInFlyout:openOptIn');
@@ -317,36 +313,7 @@ class FlyoutImplementation extends composeMixins(
 	}
 
 	_getTabIndex() {
-		return this.open ? 0 : -1;
-	}
-
-	_getTabStyle() {
-		let rtl = this.dir === 'rtl';
-		let position = '';
-		if (this.tabPosition === 'left') {
-			position = 'calc(2.5rem + 15px)';
-		} else if (this.tabPosition === 'right' || this.tabPosition === 'default' || !this.tabPosition) {
-			position = 'calc(2.5rem + 15px)';
-			rtl = !rtl;
-		} else if (this.tabPosition === 'center' || this.tabPosition === 'centre') {
-			position = '50%';
-		} else if (!/^\d+(?:\.\d+)?%$/.test(this.tabPosition)) {
-			/* eslint-disable no-console */
-			console.warn('Invalid position supplied to opt-in flyout');
-			position = 'calc(2.5rem + 15px)';
-			rtl = !rtl;
-		}
-
-		const side = rtl ? 'right' : 'left';
-		const shift = rtl ? '50%' : '-50%';
-
-		const tabStyle = `${side}: ${position};`;
-
-		if (this.noTransform) {
-			return tabStyle;
-		}
-
-		return `${tabStyle} transform: translateX(${shift});`;
+		return this.opened ? 0 : -1;
 	}
 
 	_getTutorialLink(i) {
@@ -386,13 +353,13 @@ class FlyoutImplementation extends composeMixins(
 		}
 	}
 
-	_openChanged() {
-		if (this.open && this._visibleState === VISIBLE_STATES.closed || this._visibleState === VISIBLE_STATES.closing) {
+	_openedChanged() {
+		if (this.opened && this._visibleState === VISIBLE_STATES.closed || this._visibleState === VISIBLE_STATES.closing) {
 			this._visibleState = VISIBLE_STATES.opening;
-		} else if (!this.open && this._visibleState === VISIBLE_STATES.opened || this._visibleState === VISIBLE_STATES.opening) {
+		} else if (!this.opened && this._visibleState === VISIBLE_STATES.opened || this._visibleState === VISIBLE_STATES.opening) {
 			this._visibleState = VISIBLE_STATES.closing;
 		}
-		this._fireEvent(this.open ? 'flyout-opened' : 'flyout-closed');
+		this._fireEvent(this.opened ? 'flyout-opened' : 'flyout-closed');
 	}
 
 	_renderFlyoutContent() {
@@ -402,7 +369,7 @@ class FlyoutImplementation extends composeMixins(
 		return html`
 			<div id="flyout-content" role="dialog" aria-labelledby="title" aria-describedby="${this._getDescription()}" class="flyout-content">
 				<div class="flyout-text">
-					<h1 class="d2l-heading-1" id="title">${this.title}</h1>
+					<h1 class="d2l-heading-1" id="title">${this.flyoutTitle}</h1>
 					${this._renderShortDescription()}
 					${this._renderLongDescription()}
 					${this._renderLinksText()}
@@ -491,7 +458,7 @@ class FlyoutImplementation extends composeMixins(
 	}
 
 	_shiftToLast() {
-		if (this.open) {
+		if (this.opened) {
 			this.shadowRoot.querySelector('#flyout-tab').focus();
 		}
 	}

package/src/components/opt-in-flyout/opt-in-flyout.js

@@ -6,11 +6,10 @@ class OptInFlyout extends LitElement {
 
 	static get properties() {
 		return {
-			open: { type: Boolean, reflect: true },
-			title: { type: String },
+			opened: { type: Boolean, reflect: true },
+			flyoutTitle: { attribute: 'flyout-title', type: String },
 			shortDescription: { type: String, attribute: 'short-description' },
 			longDescription: { type: String, attribute: 'long-description' },
-			tabPosition: { type: String, attribute: 'tab-position' },
 			tutorialLink: { type: String, attribute: 'tutorial-link' },
 			helpDocsLink: { type: String, attribute: 'help-docs-link' }
 		};
@@ -26,20 +25,19 @@ class OptInFlyout extends LitElement {
 
 	constructor() {
 		super();
-		this.open = false;
+		this.opened = false;
 	}
 
 	render() {
 		return html`
 			<d2l-labs-opt-in-flyout-impl
 				class="d2l-typography"
-				title="${this.title}"
+				flyout-title="${this.flyoutTitle}"
 				short-description="${this.shortDescription}"
 				long-description="${this.longDescription}"
-				tab-position="${this.tabPosition}"
 				tutorial-link="${this.tutorialLink}"
 				help-docs-link="${this.helpDocsLink}"
-				?open="${this.open}"
+				?opened="${this.opened}"
 				@flyout-opened="${this._handleOpened}"
 				@flyout-closed="${this._handleClosed}">
 			</d2l-labs-opt-in-flyout-impl>
@@ -47,11 +45,11 @@ class OptInFlyout extends LitElement {
 	}
 
 	_handleClosed() {
-		this.open = false;
+		this.opened = false;
 	}
 
 	_handleOpened() {
-		this.open = true;
+		this.opened = true;
 	}
 
 }

package/src/components/opt-in-flyout/opt-out-flyout.js

@@ -6,12 +6,10 @@ class OptOutFlyout extends LitElement {
 
 	static get properties() {
 		return {
-			open: { type: Boolean, reflect: true },
-			title: { type: String },
+			opened: { type: Boolean, reflect: true },
+			flyoutTitle: { attribute: 'flyout-title', type: String },
 			shortDescription: { type: String, attribute: 'short-description' },
 			longDescription: { type: String, attribute: 'long-description' },
-			tabPosition: { type: String, attribute: 'tab-position' },
-			noTransform: { type: Boolean, attribute: 'no-transform' },
 			tutorialLink: { type: String, attribute: 'tutorial-link' },
 			helpDocsLink: { type: String, attribute: 'help-docs-link' },
 			hideReason: { type: Boolean, attribute: 'hide-reason' },
@@ -29,7 +27,7 @@ class OptOutFlyout extends LitElement {
 
 	constructor() {
 		super();
-		this.open = false;
+		this.opened = false;
 	}
 
 	render() {
@@ -38,16 +36,14 @@ class OptOutFlyout extends LitElement {
 				id="flyout-impl"
 				class="d2l-typography"
 				opt-out
-				title="${this.title}"
+				flyout-title="${this.flyoutTitle}"
 				short-description="${this.shortDescription}"
 				long-description="${this.longDescription}"
-				tab-position="${this.tabPosition}"
 				tutorial-link="${this.tutorialLink}"
 				help-docs-link="${this.helpDocsLink}"
 				?hide-reason="${this.hideReason}"
 				?hide-feedback="${this.hideFeedback}"
-				?no-transform="${this.noTransform}"
-				?open="${this.open}"
+				?opened="${this.opened}"
 				@flyout-opened="${this._handleOpened}"
 				@flyout-closed="${this._handleClosed}">
 				<slot></slot>
@@ -70,11 +66,11 @@ class OptOutFlyout extends LitElement {
 	}
 
 	_handleClosed() {
-		this.open = false;
+		this.opened = false;
 	}
 
 	_handleOpened() {
-		this.open = true;
+		this.opened = true;
 	}
 
 }