fix: nested filters: don't use translate in filters

BrightspaceUI · Oct 17, 2024 · 89615c0 · 89615c0
1 parent 20cb9b8
commit 89615c0
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/components/filter/demo/filter.html b/components/filter/demo/filter.html
@@ -174,6 +174,11 @@ <h2>Date Filter</h2>
 						<d2l-filter-dimension-set-date-time-range-value key="custom" type="date"></d2l-filter-dimension-set-date-time-range-value>
 						<d2l-filter-dimension-set-date-time-range-value key="custom2" text="Custom Date Range with Time"></d2l-filter-dimension-set-date-time-range-value>
 					</d2l-filter-dimension-set>
+					<d2l-filter-dimension-set key="role" text="Role" selected-first>
+						<d2l-filter-dimension-set-value key="admin" text="Admin" count="0"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="instructor" text="Instructor" count="22"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="student" text="Student" count="50"></d2l-filter-dimension-set-value>
+					</d2l-filter-dimension-set>
 				</d2l-filter>
 			</template>
 		</d2l-demo-snippet>

diff --git a/components/filter/filter.js b/components/filter/filter.js
@@ -303,7 +303,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 					prefer-fixed-positioning
 					trap-focus>
 					${header}
-					<d2l-menu label="${this.localize('components.filter.filters')}">
+					<d2l-menu label="${this.localize('components.filter.filters')}" ignore-translate>
 						${dimensions}
 					</d2l-menu>
 				</d2l-dropdown-menu>

diff --git a/components/hierarchical-view/hierarchical-view-mixin.js b/components/hierarchical-view/hierarchical-view-mixin.js
@@ -11,6 +11,10 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 
 	static get properties() {
 		return {
+			/**
+			 * @ignore
+			 */
+			ignoreTranslate: { type: Boolean, attribute: 'ignore-translate', reflect: true },
 			/**
 			 * @ignore
 			 */
@@ -49,11 +53,15 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 				display: inline-block;
 				vertical-align: top; /* DE37329: required to prevent extra spacing caused by inline-block */
 			}
-			.d2l-hierarchical-view-content.d2l-child-view-show {
+			:host([ignore-translate]) .d2l-hierarchical-view-content.d2l-child-view-show {
+				left: -100%;
+				position: relative;
+			}
+			:host(:not([ignore-translate])) .d2l-hierarchical-view-content.d2l-child-view-show {
 				-webkit-animation: show-child-view-animation forwards 300ms linear;
 				animation: show-child-view-animation 300ms forwards linear;
 			}
-			.d2l-hierarchical-view-content.d2l-child-view-hide {
+			:host(:not([ignore-translate])) .d2l-hierarchical-view-content.d2l-child-view-hide {
 				-webkit-animation: hide-child-view-animation forwards 300ms linear;
 				animation: hide-child-view-animation 300ms forwards linear;
 			}
@@ -62,13 +70,13 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 					-webkit-transition: none;
 					transition: none;
 				}
-				.d2l-hierarchical-view-content.d2l-child-view-show {
+				:host(:not([ignore-translate])) .d2l-hierarchical-view-content.d2l-child-view-show {
 					-webkit-animation: none;
 					animation: none;
 					-webkit-transform: translate(-100%, 0);
 					transform: translate(-100%, 0);
 				}
-				.d2l-hierarchical-view-content.d2l-child-view-hide {
+				:host(:not([ignore-translate])) .d2l-hierarchical-view-content.d2l-child-view-hide {
 					-webkit-animation: none;
 					animation: none;
 					-webkit-transform: translate(0, 0);
@@ -101,6 +109,8 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 		this.childView = false;
 		/** @ignore */
 		this.hierarchicalView = true;
+		/** @ignore */
+		this.ignoreTranslate = false;
 		this.__focusPrevious = false;
 		this.__intersectionObserver = null;
 		this.__isAutoSized = false;
@@ -443,7 +453,7 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 			const content = this.shadowRoot.querySelector('.d2l-hierarchical-view-content');
 
 			const data = e.detail.data;
-			const animate = (!!content.offsetParent && !reduceMotion);
+			const animate = (!!content.offsetParent && !reduceMotion && !this.ignoreTranslate);
 			const hideRoot = () => {
 				rootTarget.shown = false;
 				requestAnimationFrame(() => {