Add storybook for component since we're exporting it publicly + bette…

…r prop docs

+ add minor CSS style to make 'standalone' use a little easier

src/components/tree_view/tree_view_item.stories.tsx

@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { EuiIcon } from '../icon';
+
+import { EuiTreeView } from './tree_view';
+import type { EuiTreeViewItemProps } from './tree_view_item';
+
+const meta: Meta<EuiTreeViewItemProps> = {
+  title: 'EuiTreeView.Item',
+  component: EuiTreeView.Item,
+  args: {
+    // Component defaults
+    display: 'default',
+    hasArrow: false,
+    isActive: false,
+    isExpanded: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiTreeViewItemProps>;
+
+export const Playground: Story = {
+  args: {
+    id: 'id',
+    label: 'Hello world',
+    icon: <EuiIcon type="folderOpen" />,
+    children: '',
+  },
+};

src/components/tree_view/tree_view_item.styles.ts

@@ -19,7 +19,9 @@ export const euiTreeViewItemStyles = (euiThemeContext: UseEuiTheme) => {
 
   return {
     li: {
-      euiTreeView__node: css``,
+      euiTreeView__node: css`
+        list-style: none;
+      `,
       default: css`
         ${logicalCSS('max-height', defaultSize)}
         line-height: ${defaultSize};

src/components/tree_view/tree_view_item.tsx

@@ -8,7 +8,6 @@
 
 import React, {
   FunctionComponent,
-  PropsWithChildren,
   HTMLAttributes,
   ReactNode,
   Ref,
@@ -23,17 +22,47 @@ import { EuiIcon } from '../icon';
 import { EuiTreeViewProps } from './tree_view';
 import { euiTreeViewItemStyles } from './tree_view_item.styles';
 
-type EuiTreeViewItemProps = HTMLAttributes<HTMLButtonElement> &
-  CommonProps &
-  PropsWithChildren & {
+export type EuiTreeViewItemProps = Omit<
+  HTMLAttributes<HTMLButtonElement>,
+  'id' | 'children'
+> &
+  CommonProps & {
+    /**
+     * Required for `aria-controls` accessibility
+     */
     id: string;
+    /**
+     * The main button content
+     */
     label: ReactNode;
+    /**
+     * Used to render nested `EuiTreeView`s
+     */
+    children?: ReactNode;
+    /**
+     * Optional icon to render. Pass, e.g., `<EuiIcon />` or `<EuiToken />`
+     */
     icon?: ReactNode;
+    /**
+     * Renders an arrow if `children` exists. Otherwise renders a blank icon
+     */
     hasArrow?: boolean;
+    /**
+     * Adds a targetable modifier class
+     */
     isActive?: boolean;
+    /**
+     * Sets the `aria-expanded` attribute
+     */
     isExpanded?: boolean;
+    /**
+     * Determines default or compressed display
+     */
     display?: EuiTreeViewProps['display'];
     buttonRef?: Ref<HTMLButtonElement>;
+    /**
+     * Optional extra props to pass to the wrapping `<li>`
+     */
     wrapperProps?: HTMLAttributes<HTMLLIElement>;
   };