Merge branch 'master' into issue.2915

carbon-design-system · Jun 25, 2024 · dfce8fa · dfce8fa
2 parents 32f1514 + 3e36538
commit dfce8fa
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 8 deletions.
diff --git a/src/contained-list/contained-list.component.ts b/src/contained-list/contained-list.component.ts
@@ -28,7 +28,11 @@ import { ContainedListKind, ContainedListSize } from "./contained-list.enums";
 				'cds--contained-list--sm': size === ContainedListSize.Small,
 				'cds--contained-list--md': size === ContainedListSize.Medium,
 				'cds--contained-list--lg': size === ContainedListSize.Large,
-				'cds--contained-list--xl': size === ContainedListSize.ExtraLarge
+				'cds--contained-list--xl': size === ContainedListSize.ExtraLarge,
+				'cds--layout--size-sm': size === ContainedListSize.Small,
+				'cds--layout--size-md': size === ContainedListSize.Medium,
+				'cds--layout--size-lg': size === ContainedListSize.Large,
+				'cds--layout--size-xl': size === ContainedListSize.ExtraLarge
 			}">
 			<div class="cds--contained-list__header">
 				<div [id]="labelId" class="cds--contained-list__label">

diff --git a/src/contained-list/contained-list.stories.ts b/src/contained-list/contained-list.stories.ts
@@ -183,7 +183,8 @@ const withActionsTemplate = () => ({
 				<svg ibmIcon="subtract--alt" size="16" class="cds--btn__icon"></svg>
 			</button>
 		</ng-template>
-		<cds-contained-list label="List title">
+
+		<cds-contained-list label="List title" [size]="size">
 			<cds-contained-list-item [action]="action">List item</cds-contained-list-item>
 			<cds-contained-list-item [action]="action">List item</cds-contained-list-item>
 			<cds-contained-list-item [action]="action">List item</cds-contained-list-item>
@@ -195,6 +196,7 @@ export const withActions = withActionsTemplate.bind({});
 
 export const withActionsAndContextData = (args) => {
 	args = {
+		...args,
 		items: [
 			{
 				id: 1,
@@ -228,8 +230,7 @@ export const withActionsAndContextData = (args) => {
 					<svg ibmIcon="add" size="16" class="cds--btn__icon"></svg>
 				</button>
 			</ng-template>
-
-			<cds-contained-list label="List title">
+			<cds-contained-list label="List title" [size]="size">
 				<cds-contained-list-item
 					*ngFor="let item of items"
 					[action]="actionWithClick"

diff --git a/src/treeview/tree-node.component.ts b/src/treeview/tree-node.component.ts
@@ -80,7 +80,11 @@ import { Node } from "./tree-node.types";
 							size="16">
 						</svg>
 					</ng-container>
-					<ng-template *ngIf="isTemplate(icon)" [ngTemplateOutlet]="icon"></ng-template>
+					<ng-template
+						*ngIf="isTemplate(icon)"
+						[ngTemplateOutlet]="icon"
+						[ngTemplateOutletContext]="{ $implicit: iconContext }">
+					</ng-template>
 					{{label}}
 				</span>
 			</div>
@@ -113,6 +117,7 @@ export class TreeNodeComponent implements AfterContentChecked, OnInit, OnDestroy
 	@Input() selected = false;
 	@Input() value;
 	@Input() icon: string | TemplateRef<any>;
+	@Input() iconContext: any;
 	@Input() children: Node[] = [];
 
 	/**
@@ -138,6 +143,7 @@ export class TreeNodeComponent implements AfterContentChecked, OnInit, OnDestroy
 		this.selected = node.selected ?? this.selected;
 		this.depth = node.depth ?? this.depth;
 		this.children = node.children ?? this.children;
+		this.iconContext = node.iconText ?? this.iconContext;
 	}
 
 	get node() {

diff --git a/src/treeview/tree-node.types.ts b/src/treeview/tree-node.types.ts
@@ -9,6 +9,7 @@ export interface Node {
 	expanded?: boolean;
 	selected?: boolean;
 	icon?: string | TemplateRef<any>;
+	iconContext?: any;
 	children?: Node[];
 	[key: string]: any;
 }
diff --git a/src/treeview/treeview.component.ts b/src/treeview/treeview.component.ts
@@ -32,7 +32,12 @@ import { TreeViewService } from "./treeview.service";
 			*ngIf="label"
 			[id]="id"
 			class="cds--label">
-			{{label}}
+			<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
+			<ng-template
+				*ngIf="isTemplate(label)"
+				[ngTemplateOutlet]="label"
+				[ngTemplateOutletContext]="{ $implicit: labelContext }">
+			</ng-template>
 		</label>
 		<div
 			class="cds--tree"
@@ -80,6 +85,10 @@ export class TreeViewComponent implements AfterViewInit, OnInit, OnDestroy {
 	 * Tree view label
 	 */
 	@Input() label: string | TemplateRef<any>;
+	/**
+	 * Optional context for label if it's a template
+	 */
+	@Input() labelContext: any;
 	/**
 	 * Specify the size of the list items in the tree
 	 */
@@ -154,6 +163,10 @@ export class TreeViewComponent implements AfterViewInit, OnInit, OnDestroy {
 		}
 	}
 
+	public isTemplate(value) {
+		return value instanceof TemplateRef;
+	}
+
 	public isProjected() {
 		return this.treeViewService.contentProjected;
 	}

diff --git a/src/ui-shell/sidenav/sidenav-item.component.ts b/src/ui-shell/sidenav/sidenav-item.component.ts
@@ -31,11 +31,18 @@ import { Router } from "@angular/router";
 
 		<ng-template #sidenavItemRouterTpl>
 			<a
+				[attr.title]="title ? title : null"
 				[routerLink]="route"
+ 				[relativeTo]="routeExtras?.relativeTo"
+				[queryParams]="routeExtras?.queryParams"
+				[fragment]="routeExtras?.fragment"
+				[queryParamsHandling]="routeExtras?.queryParamsHandling"
+				[preserveFragment]="routeExtras?.preserveFragment"
+				[skipLocationChange]="routeExtras?.skipLocationChange"
+				[replaceUrl]="routeExtras?.replaceUrl"
+				[state]="routeExtras?.state"
 				routerLinkActive="cds--side-nav__item--active"
-				(click)="navigate($event)"
 				ariaCurrentWhenActive="page"
-				[attr.title]="title ? title : null"
 				class="cds--side-nav__link">
 				<ng-template [ngTemplateOutlet]="sidenavItemContentTpl"></ng-template>
 			</a>