@brightspace-ui/labs 1.2.1 → 1.2.2

package/package.json

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

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

@@ -11,7 +11,6 @@ The `<d2l-labs-opt-in-flyout>` and `<d2l-labs-opt-out-flyout>` can be used in ap
 | `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,8 +18,7 @@ const VISIBLE_STATES = Object.freeze({
 
 class FlyoutImplementation extends composeMixins(
 	LitElement,
-	LocalizeLabsElement,
-	RtlMixin
+	LocalizeLabsElement
 ) {
 
 	static get properties() {
@@ -30,8 +28,6 @@ class FlyoutImplementation extends composeMixins(
 			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,7 +184,6 @@ class FlyoutImplementation extends composeMixins(
 
 	constructor() {
 		super();
-		this.tabPosition = 'right';
 		this._visibleState = VISIBLE_STATES.closed;
 	}
 
@@ -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>
@@ -320,35 +316,6 @@ class FlyoutImplementation extends composeMixins(
 		return this.opened ? 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});`;
-	}
-
 	_getTutorialLink(i) {
 		if (this.tutorialLink && this.helpDocsLink) {
 			const translation = this.localize('components:optInFlyout:tutorialAndHelpMessage');

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

@@ -10,7 +10,6 @@ class OptInFlyout extends LitElement {
 			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' }
 		};
@@ -36,7 +35,6 @@ class OptInFlyout extends LitElement {
 				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}"
 				?opened="${this.opened}"

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

@@ -10,8 +10,6 @@ class OptOutFlyout extends LitElement {
 			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' },
@@ -41,12 +39,10 @@ class OptOutFlyout extends LitElement {
 				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}"
 				?opened="${this.opened}"
 				@flyout-opened="${this._handleOpened}"
 				@flyout-closed="${this._handleClosed}">