feat(@clayui/core): Add expanderIcons API to change icons throughout the structure

Author: matuzalemsteles

packages/clay-core/src/tree-view/TreeView.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import {ChildrenFunction, Collection, ICollectionProps} from './Collection';
 import {TreeViewGroup} from './TreeViewGroup';
 import {TreeViewItem, TreeViewItemStack} from './TreeViewItem';
-import {TreeViewContext} from './context';
+import {Icons, TreeViewContext} from './context';
 import {IExpandable, IMultipleSelection, useTree} from './useTree';
 
 interface ITreeViewProps<T>
@@ -18,6 +18,7 @@ interface ITreeViewProps<T>
 		IExpandable,
 		ICollectionProps<T> {
 	displayType?: 'light' | 'dark';
+	expanderIcons?: Icons;
 	nestedKey?: string;
 	showExpanderOnHover?: boolean;
 }
@@ -35,6 +36,7 @@ export function TreeView<T>({
 	className,
 	displayType = 'light',
 	expandedKeys,
+	expanderIcons,
 	items,
 	nestedKey,
 	onExpandedChange,
@@ -51,6 +53,7 @@ export function TreeView<T>({
 			typeof children === 'function'
 				? (children as ChildrenFunction<Object>)
 				: undefined,
+		expanderIcons,
 		nestedKey,
 		showExpanderOnHover,
 		...state,

packages/clay-core/src/tree-view/TreeViewItem.tsx

@@ -110,11 +110,21 @@ export function TreeViewItemStack({
 						onClick={() => toggle!(item.key)}
 					>
 						<span className="c-inner" tabIndex={-2}>
-							<Icon symbol="angle-down" />
-							<Icon
-								className="component-expanded-d-none"
-								symbol="angle-right"
-							/>
+							{expanderIcons?.close ? (
+								expanderIcons.close
+							) : (
+								<Icon symbol="angle-down" />
+							)}
+							{expanderIcons?.open ? (
+								React.cloneElement(expanderIcons.open, {
+									className: 'component-expanded-d-none',
+								})
+							) : (
+								<Icon
+									className="component-expanded-d-none"
+									symbol="angle-right"
+								/>
+							)}
 						</span>
 					</Button>
 				</Layout.ContentCol>

packages/clay-core/src/tree-view/context.ts

@@ -5,6 +5,11 @@
 
 import React, {Key, useContext} from 'react';
 
+export type Icons = {
+	open: React.ReactElement;
+	close: React.ReactElement;
+};
+
 export interface ITreeViewContext {
 	childrenRoot?: (item: Object) => React.ReactElement;
 	expandedKeys?: Set<Key>;