diff --git a/src/components/tree_view/tree_view_item.stories.tsx b/src/components/tree_view/tree_view_item.stories.tsx new file mode 100644 index 00000000000..43e1a82f34f --- /dev/null +++ b/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 = { + title: 'EuiTreeView.Item', + component: EuiTreeView.Item, + args: { + // Component defaults + display: 'default', + hasArrow: false, + isActive: false, + isExpanded: false, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + args: { + id: 'id', + label: 'Hello world', + icon: , + children: '', + }, +}; diff --git a/src/components/tree_view/tree_view_item.styles.ts b/src/components/tree_view/tree_view_item.styles.ts index f33c875ce6d..5089c5aac96 100644 --- a/src/components/tree_view/tree_view_item.styles.ts +++ b/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}; diff --git a/src/components/tree_view/tree_view_item.tsx b/src/components/tree_view/tree_view_item.tsx index 76a8ac58c70..2c8fec105bd 100644 --- a/src/components/tree_view/tree_view_item.tsx +++ b/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 & - CommonProps & - PropsWithChildren & { +export type EuiTreeViewItemProps = Omit< + HTMLAttributes, + '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., `` or `` + */ 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; + /** + * Optional extra props to pass to the wrapping `
  • ` + */ wrapperProps?: HTMLAttributes; };