From 89152aa444090721c1db49bf9f402308c5d2a9b2 Mon Sep 17 00:00:00 2001 From: "dave.snider@gmail.com" Date: Wed, 11 Dec 2019 09:40:59 -0800 Subject: [PATCH] EuiTreeView now accepts classes per node and has truncation built in (#2627) Fixes for tree view component. --- CHANGELOG.md | 4 +- src-docs/src/components/guide_components.scss | 5 ++ src-docs/src/views/tree_view/compressed.js | 5 +- src-docs/src/views/tree_view/tree_view.js | 3 +- .../src/views/tree_view/tree_view_example.js | 5 ++ .../__snapshots__/tree_view.test.tsx.snap | 1 + src/components/tree_view/tree_view.scss | 6 +++ src/components/tree_view/tree_view.test.tsx | 1 + src/components/tree_view/tree_view.tsx | 54 ++++++++++--------- 9 files changed, 56 insertions(+), 28 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 580cf2ced67..5b9c01f0506 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,8 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `17.1.0`. +**Bug fixes** + +- Fixed screenreader text in `EuiTreeView` and added truncation ([#2627](https://github.com/elastic/eui/pull/2627)) ## [`17.1.0`](https://github.com/elastic/eui/tree/v17.1.0) diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss index 26c46a4453e..3750c9f5944 100644 --- a/src-docs/src/components/guide_components.scss +++ b/src-docs/src/components/guide_components.scss @@ -255,3 +255,8 @@ $guideZLevelHighest: $euiZLevel9 + 1000; .euiDataGridHeaderCell--favoriteFranchise { background: transparentize($color: #800080, $amount: .9) !important; } + +.euiTreeView__nodeInnerExample { + color: $euiColorDanger; + font-weight: $euiFontWeightBold; +} diff --git a/src-docs/src/views/tree_view/compressed.js b/src-docs/src/views/tree_view/compressed.js index fa4eab06156..2a825aa5793 100644 --- a/src-docs/src/views/tree_view/compressed.js +++ b/src-docs/src/views/tree_view/compressed.js @@ -68,9 +68,10 @@ export class TreeViewCompressed extends React.Component { icon: , }, { - label: 'mailOptions', - id: 'mailOptions', + label: 'A custom class is on this one', + id: 'cutomClass', icon: , + className: 'euiTreeView__nodeInnerExample', }, ], }, diff --git a/src-docs/src/views/tree_view/tree_view.js b/src-docs/src/views/tree_view/tree_view.js index 3ec6b383fb6..59f96e56d3f 100644 --- a/src-docs/src/views/tree_view/tree_view.js +++ b/src-docs/src/views/tree_view/tree_view.js @@ -52,7 +52,8 @@ export class TreeView extends React.Component { icon: , }, { - label: 'Another Bug', + label: + 'This one is a really long string that we will check truncates correctly', id: 'item_bug2', icon: , callback: this.showAlert, diff --git a/src-docs/src/views/tree_view/tree_view_example.js b/src-docs/src/views/tree_view/tree_view_example.js index ea04ef7c18f..1888c353f3c 100644 --- a/src-docs/src/views/tree_view/tree_view_example.js +++ b/src-docs/src/views/tree_view/tree_view_example.js @@ -87,6 +87,11 @@ export const TreeViewExample = { expandByDefault prop, as seen in the example below.

+

+ Lastly, each node can also accept a custom{' '} + className should you need to style them + individually. +

), components: { EuiTreeView }, diff --git a/src/components/tree_view/__snapshots__/tree_view.test.tsx.snap b/src/components/tree_view/__snapshots__/tree_view.test.tsx.snap index b05885ad4ae..da48f04d11c 100644 --- a/src/components/tree_view/__snapshots__/tree_view.test.tsx.snap +++ b/src/components/tree_view/__snapshots__/tree_view.test.tsx.snap @@ -5,6 +5,7 @@ exports[`EuiTreeView is rendered 1`] = ` class="euiText euiText--medium euiTreeView__wrapper" >

You can quickly navigate this list using arrow keys. diff --git a/src/components/tree_view/tree_view.scss b/src/components/tree_view/tree_view.scss index db33d627930..48af8a17d6a 100644 --- a/src/components/tree_view/tree_view.scss +++ b/src/components/tree_view/tree_view.scss @@ -20,6 +20,8 @@ } .euiTreeView__nodeInner { + @include euiTextTruncate; + padding-left: $euiSizeS; display: flex; flex-direction: row; @@ -44,6 +46,10 @@ } +.euiTreeView__nodeLabel { + @include euiTextTruncate; +} + .euiTreeView__iconWrapper { margin-top: -($euiSizeXS / 2); margin-right: $euiSizeS; diff --git a/src/components/tree_view/tree_view.test.tsx b/src/components/tree_view/tree_view.test.tsx index d1692dfbd4b..a6c72de6667 100644 --- a/src/components/tree_view/tree_view.test.tsx +++ b/src/components/tree_view/tree_view.test.tsx @@ -43,6 +43,7 @@ describe('EuiTreeView', () => { label: "I'm a Bug", id: 'item_bug', icon: , + className: 'classForBug', }, ], }, diff --git a/src/components/tree_view/tree_view.tsx b/src/components/tree_view/tree_view.tsx index 1880c92b304..2c5bfe7f5bb 100644 --- a/src/components/tree_view/tree_view.tsx +++ b/src/components/tree_view/tree_view.tsx @@ -40,6 +40,9 @@ export interface Node { /** Whether or not the item is expanded. */ isExpanded?: boolean; + /** Optional class to throw on the node + */ + className?: string; /** Function to call when the item is clicked. The open state of the item will always be toggled. */ @@ -232,15 +235,15 @@ export class EuiTreeView extends Component { size={display === 'compressed' ? 's' : 'm'} className="euiTreeView__wrapper"> {!this.isNested && ( - - - {(listNavigationInstructions: string) => ( + + {(listNavigationInstructions: string) => ( +

{listNavigationInstructions}

- )} - - + + )} + )}
    { }`, }; + 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 + ); + return ( -
  • +