feat(tree-view): new web component (#19027)

* feat(tree-view): web component

* feat(tree-view): add withcontrolled expansion

* fix(tree-view): more additions

* fix(tree-node): if statement

* fix(tree-node): add click option to node

* fix(tree-view): cleanup

* fix(tree-view): click and missing roles

* fix(tree-node): left arrow fix

* fix(tree): tab issues

* fix(tree-node-link): style

* fix(tree-view): cleanup

* fix(tree-view): suggestions

* fix(tree-view): missing parenthsis

* fix(tree-view): react story use button

* fix(tree-node): update

* fix(tree-view): resolve comments

---------

Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com>

Author: ariellalgilmore

packages/react/src/components/TreeView/TreeView.mdx

@@ -62,7 +62,7 @@ expanded or collapsed.
   ]}
 />
 
-## With Custom Icons
+## With Icons
 
 The `renderIcon` prop can be used to customize the icons of each node in the
 TreeView.
@@ -81,20 +81,12 @@ TreeView.
   ]}
 />
 
-## Temp
+## With Links
+
+The `href` prop can be used with click handling on each node of the TreeView.
 
 <Canvas
-  of={TreeViewStories.Temp}
-  additionalActions={[
-    {
-      title: 'Open in Stackblitz',
-      onClick: () =>
-        stackblitzPrefillConfig(
-          TreeViewStories.Temp,
-          "import { Document, Folder } from '@carbon/icons-react';"
-        ),
-    },
-  ]}
+  of={TreeViewStories.WithLinks}
 />
 
 ## Component API

packages/react/src/components/TreeView/Treeview.stories.js

@@ -9,6 +9,7 @@ import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { Document, Folder } from '@carbon/icons-react';
 import { default as TreeView, TreeNode } from './';
+import { Button } from '../Button/index';
 import mdx from './TreeView.mdx';
 import './story.scss';
 
@@ -820,12 +821,9 @@ export const WithControlledExpansion = () => {
   return (
     <>
       <div style={{ marginBottom: '1rem' }}>
-        <button type="button" onClick={() => setExpanded(true)}>
-          expand all
-        </button>
-        <button type="button" onClick={() => setExpanded(false)}>
-          collapse all
-        </button>
+        <Button onClick={() => setExpanded(true)}>Expand all</Button>
+        &nbsp;
+        <Button onClick={() => setExpanded(false)}>Collapse all</Button>
       </div>
       <TreeView label="Tree View">{renderTree({ nodes, expanded })}</TreeView>
     </>

packages/web-components/src/components/tree-view/defs.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export enum TREE_SIZE {
+  /**
+   * Small
+   */
+  SMALL = 'sm',
+
+  /**
+   * Extra small size.
+   */
+  EXTRA_SMALL = 'xs',
+}

packages/web-components/src/components/tree-view/docs/overview.mdx

@@ -0,0 +1,12 @@
+## Live demo
+
+<StorybookDemo
+  tall
+  url="https://www.ibm.com/standards/carbon/carbon-web-components"
+  variants={[
+    {
+      label: 'Default',
+      variant: 'components-tree-view--default'
+    },
+  ]}
+/>

packages/web-components/src/components/tree-view/index.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import './tree-node';
+import './tree-view';