diff --git a/CHANGELOG.md b/CHANGELOG.md index 04e1478dfad..4352baa7deb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -31,6 +31,7 @@ - Limited the links allowed in `EuiMarkdownEditor` to http, https, or starting with a forward slash ([#4362](https://github.com/elastic/eui/pull/4362)) - Aligned components with an `href` prop to React's practice of disallowing `javascript:` protocols ([#4362](https://github.com/elastic/eui/pull/4362)) - Fixed form submit bug in `EuiButtonGroup` by adding an optional `type` prop for `EuiButtonGroupOption` ([#4368](https://github.com/elastic/eui/pull/4368)) +- Changed `label` type from `string` to `ReactNode` in `EuiTreeViewNode` ([#4352](https://github.com/elastic/eui/pull/4352)) **Theme: Amsterdam** diff --git a/src/components/tree_view/tree_view.test.tsx b/src/components/tree_view/tree_view.test.tsx index 5fe97b42cea..fa2f41099c4 100644 --- a/src/components/tree_view/tree_view.test.tsx +++ b/src/components/tree_view/tree_view.test.tsx @@ -86,7 +86,7 @@ const items = [ describe('EuiTreeView', () => { test('is rendered', () => { const component = render(); - + expect(component).toMatchSnapshot(); }); diff --git a/src/components/tree_view/tree_view.tsx b/src/components/tree_view/tree_view.tsx index 10dbccde057..1f3ac993fe3 100644 --- a/src/components/tree_view/tree_view.tsx +++ b/src/components/tree_view/tree_view.tsx @@ -25,6 +25,7 @@ import { EuiIcon } from '../icon'; import { EuiScreenReaderOnly } from '../accessibility'; import { EuiText } from '../text'; import { keys, htmlIdGenerator } from '../../services'; +import { EuiInnerText } from '../inner_text'; const EuiTreeViewContext = createContext(''); const treeIdGenerator = htmlIdGenerator('euiTreeView'); @@ -41,7 +42,7 @@ export interface Node { children?: Node[]; /** The readable label for the item */ - label: string; + label: React.ReactNode; /** A unique ID */ id: string; @@ -279,101 +280,114 @@ export class EuiTreeView extends Component { const buttonId = `${this.state.treeID}--${index}--node`; return ( - - {(ariaLabel: string) => { - const label: - | { 'aria-label': string } - | { 'aria-labelledby': string } = hasAriaLabel(rest) - ? { - 'aria-label': ariaLabel, - } - : { - 'aria-labelledby': `${buttonId} ${rest['aria-labelledby']}`, - }; + + {(ref, innerText) => ( + + {(ariaLabel: string) => { + const label: + | { 'aria-label': string } + | { 'aria-labelledby': string } = hasAriaLabel(rest) + ? { + 'aria-label': ariaLabel, + } + : { + 'aria-labelledby': `${buttonId} ${rest['aria-labelledby']}`, + }; - const nodeClasses = classNames( - 'euiTreeView__node', - display ? displayToClassNameMap[display] : null, - { 'euiTreeView__node--expanded': this.isNodeOpen(node) } - ); + const nodeClasses = classNames( + 'euiTreeView__node', + display ? displayToClassNameMap[display] : null, + { + 'euiTreeView__node--expanded': this.isNodeOpen( + node + ), + } + ); - const nodeButtonClasses = classNames( - 'euiTreeView__nodeInner', - showExpansionArrows && node.children - ? 'euiTreeView__nodeInner--withArrows' - : null, - this.state.activeItem === node.id - ? 'euiTreeView__node--active' - : null, - node.className ? node.className : null - ); + const nodeButtonClasses = classNames( + 'euiTreeView__nodeInner', + showExpansionArrows && node.children + ? 'euiTreeView__nodeInner--withArrows' + : null, + this.state.activeItem === node.id + ? 'euiTreeView__node--active' + : null, + node.className ? node.className : null + ); - return ( - -
  • - -
    - this.onChildrenKeydown(event, index) - }> - {node.children && this.isNodeOpen(node) ? ( - - ) : null} -
    -
  • -
    - ); - }} -
    + onClick={() => this.handleNodeClick(node)} + className={nodeButtonClasses}> + {showExpansionArrows && node.children ? ( + + ) : null} + {node.icon && !node.useEmptyIcon ? ( + + {this.isNodeOpen(node) && + node.iconWhenExpanded + ? node.iconWhenExpanded + : node.icon} + + ) : null} + {node.useEmptyIcon && !node.icon ? ( + + ) : null} + + {node.label} + + +
    + this.onChildrenKeydown(event, index) + }> + {node.children && this.isNodeOpen(node) ? ( + + ) : null} +
    + + + ); + }} +
    + )} + ); })}