fix(tree): Center toggle icon with flex and not after (#1047)

AmadeusITGroup · Dec 2, 2024 · 06ef4c8 · 06ef4c8
1 parent 798fc66
commit 06ef4c8
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 27 deletions.
diff --git a/angular/bootstrap/src/components/tree/tree.component.ts b/angular/bootstrap/src/components/tree/tree.component.ts
@@ -75,7 +75,9 @@ export class TreeItemToggleDirective {
 	template: `
 		<ng-template auTreeItemToggle #toggle let-directives="directives" let-item="item">
 			@if (item.children.length > 0) {
-				<button [auUse]="[directives.itemToggleDirective, {item}]"></button>
+				<button [auUse]="[directives.itemToggleDirective, {item}]">
+					<span class="au-tree-expand-icon-svg"></span>
+				</button>
 			} @else {
 				<span class="au-tree-expand-icon-placeholder"></span>
 			}
@@ -260,7 +262,7 @@ export class TreeComponent extends BaseWidgetDirective<TreeWidget> {
 	 * () => {}
 	 * ```
 	 */
-	@Output('auExpandToggle') expandToggle = new EventEmitter<TreeItem>();
+	@Output('auExpandToggle') expandToggle = new EventEmitter<NormalizedTreeItem>();
 
 	/**
 	 * Slot to change the default tree item content

diff --git a/core-bootstrap/src/scss/_variables.scss b/core-bootstrap/src/scss/_variables.scss
@@ -77,8 +77,8 @@ $au-tree-expand-icon-background-color: transparent !default;
 $au-tree-expand-icon-background-color-hover: var(--#{$prefix}blue-100, #cfe2ff) !default;
 $au-tree-expand-icon-width: 2.25rem;
 $au-tree-expand-icon-height: 2.25rem;
-$au-tree-expand-icon-color-default: #0d6efd !default;
+$au-tree-expand-icon-color: #0d6efd !default;
 $au-tree-expand-icon-color-hover: #052c65 !default;
-$au-tree-expand-icon-default: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 10 10"><path d="M3 1 L7 5 L3 9" stroke="#{$au-tree-expand-icon-color-default}" stroke-width="1" fill="none"/></svg>') !default;
+$au-tree-expand-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 10 10"><path d="M3 1 L7 5 L3 9" stroke="#{$au-tree-expand-icon-color}" stroke-width="1" fill="none"/></svg>') !default;
 $au-tree-expand-icon-hover: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 10 10"><path d="M3 1 L7 5 L3 9" stroke="#{$au-tree-expand-icon-color-hover}" stroke-width="1" fill="none"/></svg>') !default;
 // scss-docs-end tree-vars
diff --git a/core-bootstrap/src/scss/tree.scss b/core-bootstrap/src/scss/tree.scss
@@ -10,7 +10,7 @@
 	--#{variables.$prefix}tree-expand-icon-background-color-hover: #{variables.$au-tree-expand-icon-background-color-hover};
 	--#{variables.$prefix}tree-expand-icon-width: #{variables.$au-tree-expand-icon-width};
 	--#{variables.$prefix}tree-expand-icon-height: #{variables.$au-tree-expand-icon-height};
-	--#{variables.$prefix}tree-expand-icon-default: #{functions.escape-svg(variables.$au-tree-expand-icon-default)};
+	--#{variables.$prefix}tree-expand-icon: #{functions.escape-svg(variables.$au-tree-expand-icon)};
 	--#{variables.$prefix}tree-expand-icon-hover: #{functions.escape-svg(variables.$au-tree-expand-icon-hover)};
 	// scss-docs-end tree-css-vars
 
@@ -44,33 +44,32 @@
 	}
 
 	.au-tree-expand-icon {
-		position: relative;
 		width: var(--#{variables.$prefix}tree-expand-icon-width);
 		height: var(--#{variables.$prefix}tree-expand-icon-height);
 		border-radius: var(--#{variables.$prefix}tree-expand-icon-border-radius);
 		display: inline-flex;
+		align-items: center;
+		justify-content: center;
 		border: 0;
 		padding-inline: 0;
 		margin-inline-end: var(--#{variables.$prefix}tree-expand-icon-margin-inline-end);
 		background-color: var(--#{variables.$prefix}tree-expand-icon-background-color);
+		cursor: pointer;
 
 		&:hover {
-			--#{variables.$prefix}tree-expand-icon-default: var(--#{variables.$prefix}tree-expand-icon-hover);
+			--#{variables.$prefix}tree-expand-icon: var(--#{variables.$prefix}tree-expand-icon-hover);
 			--#{variables.$prefix}tree-expand-icon-background-color: var(--#{variables.$prefix}tree-expand-icon-background-color-hover);
 		}
-	}
 
-	.au-tree-expand-icon::after {
-		position: absolute;
-		content: var(--#{variables.$prefix}tree-expand-icon-default);
-		transition: transform 0.3s;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-	}
+		.au-tree-expand-icon-svg {
+			content: var(--#{variables.$prefix}tree-expand-icon);
+			transition: transform 0.3s;
+		}
 
-	/* Expanded state */
-	.au-tree-expand-icon-expanded::after {
-		transform: translate(-55%, -50%) rotate(90deg);
+		&.au-tree-expand-icon-expanded {
+			.au-tree-expand-icon-svg {
+				transform: rotate(90deg);
+			}
+		}
 	}
 }
diff --git a/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/bootstrap-tree-basic.html b/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/bootstrap-tree-basic.html
@@ -20,7 +20,11 @@
 					 class="au-tree-expand-icon au-tree-expand-icon-expanded"
 					 tabindex="0"
 					 type="button"
-					/>
+					>
+						<span
+						 class="au-tree-expand-icon-svg"
+						/>
+					</button>
 					"Node 1"
 				</span>
 				<ul
@@ -39,7 +43,11 @@
 							 class="au-tree-expand-icon"
 							 tabindex="-1"
 							 type="button"
-							/>
+							>
+								<span
+								 class="au-tree-expand-icon-svg"
+								/>
+							</button>
 							"Node 1.1"
 						</span>
 					</li>
@@ -56,7 +64,11 @@
 							 class="au-tree-expand-icon"
 							 tabindex="-1"
 							 type="button"
-							/>
+							>
+								<span
+								 class="au-tree-expand-icon-svg"
+								/>
+							</button>
 							"Node 1.2"
 						</span>
 					</li>

diff --git a/e2e/ssr.ssr-e2e-spec.ts-snapshots/ssr.html b/e2e/ssr.ssr-e2e-spec.ts-snapshots/ssr.html
@@ -509,7 +509,11 @@ <h2>
 						 class="au-tree-expand-icon au-tree-expand-icon-expanded"
 						 tabindex="0"
 						 type="button"
-						/>
+						>
+							<span
+							 class="au-tree-expand-icon-svg"
+							/>
+						</button>
 						"Node 1"
 					</span>
 					<ul
@@ -528,7 +532,11 @@ <h2>
 								 class="au-tree-expand-icon"
 								 tabindex="-1"
 								 type="button"
-								/>
+								>
+									<span
+									 class="au-tree-expand-icon-svg"
+									/>
+								</button>
 								"Node 1.1"
 							</span>
 						</li>
@@ -545,7 +553,11 @@ <h2>
 								 class="au-tree-expand-icon"
 								 tabindex="-1"
 								 type="button"
-								/>
+								>
+									<span
+									 class="au-tree-expand-icon-svg"
+									/>
+								</button>
 								"Node 1.2"
 							</span>
 						</li>

diff --git a/react/bootstrap/src/components/tree/tree.tsx b/react/bootstrap/src/components/tree/tree.tsx
@@ -6,7 +6,11 @@ import {createTree} from './tree.gen';
 import classNames from 'classnames';
 
 const ToggleButtonDisplay = ({directive, item}: {directive: TreeDirectives['itemToggleDirective']; item: NormalizedTreeItem}) => {
-	return <button {...useDirective(directive, {item})}></button>;
+	return (
+		<button {...useDirective(directive, {item})}>
+			<span className="au-tree-expand-icon-svg"></span>
+		</button>
+	);
 };
 
 /**

diff --git a/svelte/bootstrap/src/components/tree/TreeDefaultItemToggle.svelte b/svelte/bootstrap/src/components/tree/TreeDefaultItemToggle.svelte
@@ -6,7 +6,9 @@
 
 {#if item.children.length > 0}
 	<!-- svelte-ignore a11y_consider_explicit_label -->
-	<button use:directives.itemToggleDirective={{item: item}}></button>
+	<button use:directives.itemToggleDirective={{item: item}}>
+		<span class="au-tree-expand-icon-svg"></span>
+	</button>
 {:else}
 	<span class="au-tree-expand-icon-placeholder"></span>
 {/if}