From 6ee380f7ca252fde01f0f0b3365a16d59720c42e Mon Sep 17 00:00:00 2001
From: adamviktora <viktora.adam@gmail.com>
Date: Mon, 6 Jan 2025 16:40:34 +0100
Subject: [PATCH] docs(TreeView): add example with unique icon per item

---
 .../components/TreeView/examples/TreeView.md  |  8 ++-
 .../examples/TreeViewWithIconPerItem.tsx      | 67 +++++++++++++++++++
 2 files changed, 74 insertions(+), 1 deletion(-)
 create mode 100644 packages/react-core/src/components/TreeView/examples/TreeViewWithIconPerItem.tsx

diff --git a/packages/react-core/src/components/TreeView/examples/TreeView.md b/packages/react-core/src/components/TreeView/examples/TreeView.md
index 88b281b5158..6533239135c 100644
--- a/packages/react-core/src/components/TreeView/examples/TreeView.md
+++ b/packages/react-core/src/components/TreeView/examples/TreeView.md
@@ -5,7 +5,7 @@ cssPrefix: pf-v6-c-tree-view
 propComponents: ['TreeView', 'TreeViewDataItem', 'TreeViewSearch']
 ---
 
-import { FolderIcon, FolderOpenIcon, EllipsisVIcon, ClipboardIcon, HamburgerIcon } from '@patternfly/react-icons';
+import { FolderIcon, FolderOpenIcon, EllipsisVIcon, ClipboardIcon, HamburgerIcon, GitlabIcon, GithubIcon, GoogleIcon } from '@patternfly/react-icons';
 
 ## Examples
 
@@ -51,6 +51,12 @@ A search input can be used to filter tree view items. It is recommended that a t
 
 ```
 
+### With unique icon per item
+
+```ts file='./TreeViewWithIconPerItem.tsx'
+
+```
+
 ### With badges
 
 ```ts file='./TreeViewWithBadges.tsx'
diff --git a/packages/react-core/src/components/TreeView/examples/TreeViewWithIconPerItem.tsx b/packages/react-core/src/components/TreeView/examples/TreeViewWithIconPerItem.tsx
new file mode 100644
index 00000000000..16f6e4a2be6
--- /dev/null
+++ b/packages/react-core/src/components/TreeView/examples/TreeViewWithIconPerItem.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
+import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon';
+import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
+import GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon';
+
+export const TreeViewWithIconPerItem: React.FunctionComponent = () => {
+  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
+
+  const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
+    // Ignore folders for selection
+    if (treeViewItem && !treeViewItem.children) {
+      setActiveItems([treeViewItem]);
+    }
+  };
+  const options: TreeViewDataItem[] = [
+    {
+      name: 'Github accounts',
+      id: 'iconPerItem-Github',
+      icon: <GithubIcon />,
+      expandedIcon: <GithubIcon />,
+      children: [
+        {
+          name: 'Account 1',
+          id: 'iconPerItem-Acc1'
+        },
+        {
+          name: 'Account 2',
+          id: 'iconPerItem-Acc2'
+        }
+      ],
+      defaultExpanded: true
+    },
+    {
+      name: 'Gitlab accounts',
+      id: 'iconPerItem-Gitlab',
+      icon: <GitlabIcon />,
+      expandedIcon: <GitlabIcon />,
+      children: [
+        {
+          name: 'Account 3',
+          id: 'iconPerItem-Acc3'
+        }
+      ]
+    },
+    {
+      name: 'Google accounts',
+      id: 'iconPerItem-Google',
+      icon: <GoogleIcon />,
+      expandedIcon: <GoogleIcon />,
+      children: [
+        {
+          name: 'Account 4',
+          id: 'iconPerItem-Acc4'
+        }
+      ]
+    }
+  ];
+  return (
+    <TreeView
+      aria-label="Tree View with unique icon per item example"
+      data={options}
+      activeItems={activeItems}
+      onSelect={onSelect}
+    />
+  );
+};