From e83bda91e0643902635d24122647bdb3da2083cf Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Mon, 5 Feb 2024 14:15:26 -0800
Subject: [PATCH] Add Storybook + fix style bugs caught as a result

- need `flex-shrink` on icon wrappers

- enforce icon width/heights appropriately for consumers that switch between default and compressed styles
---
 .../tree_view/_tree_view_item.styles.ts       |  19 +++-
 .../tree_view/tree_view.stories.tsx           | 105 ++++++++++++++++++
 src/components/tree_view/tree_view.tsx        |   2 +-
 3 files changed, 122 insertions(+), 4 deletions(-)
 create mode 100644 src/components/tree_view/tree_view.stories.tsx

diff --git a/src/components/tree_view/_tree_view_item.styles.ts b/src/components/tree_view/_tree_view_item.styles.ts
index d757de7000d8..f33c875ce6d0 100644
--- a/src/components/tree_view/_tree_view_item.styles.ts
+++ b/src/components/tree_view/_tree_view_item.styles.ts
@@ -67,11 +67,24 @@ export const euiTreeViewItemStyles = (euiThemeContext: UseEuiTheme) => {
     },
 
     icon: {
-      // Line height helps vertically center the icons
       euiTreeView__iconWrapper: css`
-        line-height: 0;
+        flex-shrink: 0;
+        line-height: 0; /* Vertically centers the icon */
+
+        /* Handle smaller icons in compressed mode */
+        & > * {
+          ${logicalCSS('max-width', '100%')}
+        }
+
+        & > .euiToken {
+          ${logicalCSS('max-height', '100%')}
+          ${logicalCSS('height', 'auto')}
+
+          svg {
+            ${logicalCSS('width', '100%')}
+          }
+        }
       `,
-      euiTreeView__placeholder: css``,
       default: css`
         ${logicalCSS(
           'width',
diff --git a/src/components/tree_view/tree_view.stories.tsx b/src/components/tree_view/tree_view.stories.tsx
new file mode 100644
index 000000000000..61ec5c3e4bb3
--- /dev/null
+++ b/src/components/tree_view/tree_view.stories.tsx
@@ -0,0 +1,105 @@
+/*
+ * 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 { EuiToken } from '../token';
+
+import { EuiTreeView, EuiTreeViewProps } from './tree_view';
+
+const meta: Meta<EuiTreeViewProps> = {
+  title: 'EuiTreeView',
+  component: EuiTreeView,
+  argTypes: {
+    'aria-label': {
+      type: {
+        name: 'string',
+        required: true,
+      },
+      description:
+        'Passing either an `aria-label` or an `aria-labelledby` is required for accessibility.',
+    },
+    'aria-labelledby': {
+      type: { name: 'string', required: true },
+      description:
+        'Passing either an `aria-label` or an `aria-labelledby` is required for accessibility.',
+    },
+  },
+  args: {
+    // Component defaults
+    display: 'default',
+    expandByDefault: false,
+    showExpansionArrows: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiTreeViewProps>;
+
+export const Playground: Story = {
+  args: {
+    'aria-label': 'Directory of items',
+    items: [
+      {
+        label: 'Item One',
+        id: 'item_one',
+        icon: <EuiIcon type="folderClosed" />,
+        iconWhenExpanded: <EuiIcon type="folderOpen" />,
+        isExpanded: true,
+        children: [
+          {
+            label: 'Item A',
+            id: 'item_a',
+            icon: <EuiIcon type="document" />,
+          },
+          {
+            label: 'Item B',
+            id: 'item_b',
+            useEmptyIcon: true,
+            children: [
+              {
+                label: 'A Cloud',
+                id: 'item_cloud',
+                icon: <EuiToken iconType="tokenConstant" />,
+              },
+              {
+                label: "I'm a Bug",
+                id: 'item_bug',
+                icon: <EuiToken iconType="tokenEnum" />,
+              },
+            ],
+          },
+          {
+            label: 'Item C',
+            id: 'item_c',
+            children: [
+              {
+                label: 'Another Cloud',
+                id: 'item_cloud2',
+                icon: <EuiToken iconType="tokenConstant" />,
+              },
+              {
+                label:
+                  'This one is a really long string that we will check truncates correctly',
+                id: 'item_bug2',
+                useEmptyIcon: true,
+                callback: () => '',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: 'Item Two',
+        id: 'item_two',
+      },
+    ],
+  },
+};
diff --git a/src/components/tree_view/tree_view.tsx b/src/components/tree_view/tree_view.tsx
index 45d30f3dbe9c..9ab2a2fd425b 100644
--- a/src/components/tree_view/tree_view.tsx
+++ b/src/components/tree_view/tree_view.tsx
@@ -91,7 +91,7 @@ export type CommonTreeProps = CommonProps &
     items: Node[];
     /**
      * Optionally use a variation with smaller text and icon sizes
-     * @default 'default'
+     * @default default
      */
     display?: EuiTreeViewDisplayOptions;
     /**