changed label type from string to ReactNode

elastic · Dec 12, 2020 · e9f6800 · e9f6800
1 parent 08070f6
commit e9f6800
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 93 deletions.
diff --git 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
@@ -86,7 +86,7 @@ const items = [
 describe('EuiTreeView', () => {
   test('is rendered', () => {
     const component = render(<EuiTreeView items={items} {...requiredProps} />);
-
+    
     expect(component).toMatchSnapshot();
   });
 

diff --git 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<string>('');
 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<EuiTreeViewProps, EuiTreeViewState> {
               const buttonId = `${this.state.treeID}--${index}--node`;
 
               return (
-                <EuiI18n
-                  key={node.label + index}
-                  token="euiTreeView.ariaLabel"
-                  default="{nodeLabel} child of {ariaLabel}"
-                  values={{
-                    nodeLabel: node.label,
-                    ariaLabel: hasAriaLabel(rest) ? rest['aria-label'] : '',
-                  }}>
-                  {(ariaLabel: string) => {
-                    const label:
-                      | { 'aria-label': string }
-                      | { 'aria-labelledby': string } = hasAriaLabel(rest)
-                      ? {
-                          'aria-label': ariaLabel,
-                        }
-                      : {
-                          'aria-labelledby': `${buttonId} ${rest['aria-labelledby']}`,
-                        };
+                <EuiInnerText key={node.id + index}>
+                  {(ref, innerText) => (
+                    <EuiI18n
+                      key={node.id + index}
+                      token="euiTreeView.ariaLabel"
+                      default="{nodeLabel} child of {ariaLabel}"
+                      values={{
+                        nodeLabel: innerText,
+                        ariaLabel: hasAriaLabel(rest) ? rest['aria-label'] : '',
+                      }}>
+                      {(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 (
-                      <React.Fragment>
-                        <li className={nodeClasses}>
-                          <button
-                            id={buttonId}
-                            aria-controls={`euiNestedTreeView-${this.state.treeID}`}
-                            aria-expanded={this.isNodeOpen(node)}
-                            ref={(ref) => this.setButtonRef(ref, index)}
-                            data-test-subj={`euiTreeViewButton-${this.state.treeID}`}
-                            onKeyDown={(event: React.KeyboardEvent) =>
-                              this.onKeyDown(event, node)
-                            }
-                            onClick={() => this.handleNodeClick(node)}
-                            className={nodeButtonClasses}>
-                            {showExpansionArrows && node.children ? (
-                              <EuiIcon
-                                className="euiTreeView__expansionArrow"
-                                size={display === 'compressed' ? 's' : 'm'}
-                                type={
-                                  this.isNodeOpen(node)
-                                    ? 'arrowDown'
-                                    : 'arrowRight'
+                        return (
+                          <React.Fragment>
+                            <li className={nodeClasses}>
+                              <button
+                                id={buttonId}
+                                aria-controls={`euiNestedTreeView-${this.state.treeID}`}
+                                aria-expanded={this.isNodeOpen(node)}
+                                ref={(ref) => this.setButtonRef(ref, index)}
+                                data-test-subj={`euiTreeViewButton-${this.state.treeID}`}
+                                onKeyDown={(event: React.KeyboardEvent) =>
+                                  this.onKeyDown(event, node)
                                 }
-                              />
-                            ) : null}
-                            {node.icon && !node.useEmptyIcon ? (
-                              <span className="euiTreeView__iconWrapper">
-                                {this.isNodeOpen(node) && node.iconWhenExpanded
-                                  ? node.iconWhenExpanded
-                                  : node.icon}
-                              </span>
-                            ) : null}
-                            {node.useEmptyIcon && !node.icon ? (
-                              <span className="euiTreeView__iconPlaceholder" />
-                            ) : null}
-                            <span className="euiTreeView__nodeLabel">
-                              {node.label}
-                            </span>
-                          </button>
-                          <div
-                            id={`euiNestedTreeView-${this.state.treeID}`}
-                            onKeyDown={(event: React.KeyboardEvent) =>
-                              this.onChildrenKeydown(event, index)
-                            }>
-                            {node.children && this.isNodeOpen(node) ? (
-                              <EuiTreeView
-                                items={node.children}
-                                display={display}
-                                showExpansionArrows={showExpansionArrows}
-                                expandByDefault={this.state.expandChildNodes}
-                                {...label}
-                              />
-                            ) : null}
-                          </div>
-                        </li>
-                      </React.Fragment>
-                    );
-                  }}
-                </EuiI18n>
+                                onClick={() => this.handleNodeClick(node)}
+                                className={nodeButtonClasses}>
+                                {showExpansionArrows && node.children ? (
+                                  <EuiIcon
+                                    className="euiTreeView__expansionArrow"
+                                    size={display === 'compressed' ? 's' : 'm'}
+                                    type={
+                                      this.isNodeOpen(node)
+                                        ? 'arrowDown'
+                                        : 'arrowRight'
+                                    }
+                                  />
+                                ) : null}
+                                {node.icon && !node.useEmptyIcon ? (
+                                  <span className="euiTreeView__iconWrapper">
+                                    {this.isNodeOpen(node) &&
+                                    node.iconWhenExpanded
+                                      ? node.iconWhenExpanded
+                                      : node.icon}
+                                  </span>
+                                ) : null}
+                                {node.useEmptyIcon && !node.icon ? (
+                                  <span className="euiTreeView__iconPlaceholder" />
+                                ) : null}
+                                <span
+                                  ref={ref}
+                                  className="euiTreeView__nodeLabel">
+                                  {node.label}
+                                </span>
+                              </button>
+                              <div
+                                id={`euiNestedTreeView-${this.state.treeID}`}
+                                onKeyDown={(event: React.KeyboardEvent) =>
+                                  this.onChildrenKeydown(event, index)
+                                }>
+                                {node.children && this.isNodeOpen(node) ? (
+                                  <EuiTreeView
+                                    items={node.children}
+                                    display={display}
+                                    showExpansionArrows={showExpansionArrows}
+                                    expandByDefault={
+                                      this.state.expandChildNodes
+                                    }
+                                    {...label}
+                                  />
+                                ) : null}
+                              </div>
+                            </li>
+                          </React.Fragment>
+                        );
+                      }}
+                    </EuiI18n>
+                  )}
+                </EuiInnerText>
               );
             })}
           </ul>