@brightspace-ui/core 3.262.2 → 3.262.4

package/components/button/button-move.js

@@ -80,8 +80,12 @@ class ButtonMove extends ThemeMixin(FocusMixin(LitElement)) {
 			 * ACCESSIBILITY: REQUIRED: Accessible text for the button
 			 * @type {string}
 			 */
-			text: { type: String, reflect: true }
-
+			text: { type: String, reflect: true },
+			/**
+			 * Renders the buttons in a side by side orientation
+			 * @type {boolean}
+			 */
+			sideToSide: { type: Boolean, attribute: 'side-to-side', reflect: true }
 		};
 	}
 
@@ -135,19 +139,20 @@ class ButtonMove extends ThemeMixin(FocusMixin(LitElement)) {
 					border-bottom-left-radius: 0.3rem;
 					border-bottom-right-radius: 0.3rem;
 				}
-
-				.up-layer,
-				.down-layer {
-					height: 1.2rem;
+				.layer {
+					display: flex;
+					flex-direction: column;
+					height: calc(1.2rem * 2);
 					inset-inline-start: -0.2rem;
 					position: absolute;
-					width: 1.3rem;
-				}
-				.up-layer {
 					top: -0.35rem;
+					width: 1.3rem;
 				}
+				.up-layer,
 				.down-layer {
-					bottom: -0.35rem;
+					height: 1.2rem;
+					position: relative;
+					width: 1.3rem;
 				}
 
 				/* Firefox includes a hidden border which messes up button dimensions */
@@ -165,6 +170,27 @@ class ButtonMove extends ThemeMixin(FocusMixin(LitElement)) {
 				:host([disabled-down]) .down-layer {
 					cursor: default;
 				}
+
+				:host([side-to-side]) button {
+					align-items: center;
+					flex-direction: row;
+					height: 1.2rem;
+					justify-content: center;
+					width: calc(1.3rem * 2);
+				}
+
+				:host([side-to-side]) .layer {
+					flex-direction: row;
+					height: 1.2rem;
+					inset-inline-start: 0;
+					top: 0;
+					width: calc(1.3rem * 2);
+				}
+
+				:host([side-to-side]) d2l-icon {
+					/* Arrows need to be rotated in opposite direction for RTL */
+					transform: rotate(calc(-90deg * var(--d2l-length-factor)));
+				}
 			`
 		];
 	}
@@ -197,8 +223,10 @@ class ButtonMove extends ThemeMixin(FocusMixin(LitElement)) {
 					type="button">
 					<d2l-icon icon="tier1:arrow-toggle-up" class="up-icon"></d2l-icon>
 					<d2l-icon icon="tier1:arrow-toggle-down" class="down-icon"></d2l-icon>
-					<div class="up-layer" @click="${this._handleUpClick}"></div>
-					<div class="down-layer" @click="${this._handleDownClick}"></div>
+					<div class="layer">
+						<div class="up-layer" @click="${this._handleUpClick}"></div>
+						<div class="down-layer" @click="${this._handleDownClick}"></div>
+					</div>
 			</button>
 			${this.description ? html`<span id="${this._describedById}" hidden>${this.description}</span>` : null}
 		</div>`;

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

@@ -1,6 +1,6 @@
 import { css } from 'lit';
-import { getFlag } from '../../helpers/flags.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
+import { getUseNewTabsStructureFlag } from './tabs.js';
 
 export const TabPanelMixin = superclass => class extends superclass {
 
@@ -101,6 +101,6 @@ export const TabPanelMixin = superclass => class extends superclass {
 		});
 	}
 
-	#useTabsNewStructure = getFlag('GAUD-8299-core-tabs-use-new-structure', false);
+	#useTabsNewStructure = getUseNewTabsStructureFlag();
 
 };

package/components/tabs/tabs.js

@@ -15,6 +15,10 @@ import { repeat } from 'lit/directives/repeat.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
+export function getUseNewTabsStructureFlag() {
+	return getFlag('GAUD-8299-core-tabs-use-new-structure', true);
+}
+
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 
 const scrollButtonWidth = 56;
@@ -427,7 +431,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 
 	#GAUD_9963_FLAG = getFlag('GAUD-9963-dropdown-tabs-not-resizing', false);
 	#checkTabPanelMatchRequested;
-	#newTabsPanelStructure = getFlag('GAUD-8299-core-tabs-use-new-structure', false);
+	#newTabsPanelStructure = getUseNewTabsStructureFlag();
 	#panels;
 	#updateAriaControlsRequested;
 

package/custom-elements.json

@@ -691,6 +691,11 @@
           "name": "text",
           "description": "ACCESSIBILITY: REQUIRED: Accessible text for the button",
           "type": "string"
+        },
+        {
+          "name": "side-to-side",
+          "description": "Renders the buttons in a side by side orientation",
+          "type": "boolean"
         }
       ],
       "properties": [
@@ -741,6 +746,12 @@
           "attribute": "text",
           "description": "ACCESSIBILITY: REQUIRED: Accessible text for the button",
           "type": "string"
+        },
+        {
+          "name": "sideToSide",
+          "attribute": "side-to-side",
+          "description": "Renders the buttons in a side by side orientation",
+          "type": "boolean"
         }
       ],
       "events": [

package/package.json

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