EuiTreeView now accepts classes per node and has truncation built in (#…

…2627) Fixes for tree view component.
elastic · Dec 11, 2019 · 89152aa · 89152aa
1 parent 5aeab0b
commit 89152aa
Show file tree

Hide file tree

Showing 9 changed files with 56 additions and 28 deletions.
diff --git 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
@@ -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
@@ -68,9 +68,10 @@ export class TreeViewCompressed extends React.Component {
             icon: <EuiToken size="xs" iconType="tokenConstant" />,
           },
           {
-            label: 'mailOptions',
-            id: 'mailOptions',
+            label: 'A custom class is on this one',
+            id: 'cutomClass',
             icon: <EuiToken size="xs" iconType="tokenObject" />,
+            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
@@ -52,7 +52,8 @@ export class TreeView extends React.Component {
                 icon: <EuiToken iconType="tokenConstant" />,
               },
               {
-                label: 'Another Bug',
+                label:
+                  'This one is a really long string that we will check truncates correctly',
                 id: 'item_bug2',
                 icon: <EuiToken iconType="tokenEnum" />,
                 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
@@ -87,6 +87,11 @@ export const TreeViewExample = {
             <EuiCode>expandByDefault</EuiCode> prop, as seen in the example
             below.
           </p>
+          <p>
+            Lastly, each node can also accept a custom{' '}
+            <EuiCode>className</EuiCode> should you need to style them
+            individually.
+          </p>
         </div>
       ),
       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
@@ -5,6 +5,7 @@ exports[`EuiTreeView is rendered 1`] = `
   class="euiText euiText--medium euiTreeView__wrapper"
 >
   <p
+    class="euiScreenReaderOnly"
     id="htmlId--instruction"
   >
     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
@@ -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
@@ -43,6 +43,7 @@ describe('EuiTreeView', () => {
                     label: "I'm a Bug",
                     id: 'item_bug',
                     icon: <EuiToken iconType="tokenEnum" />,
+                    className: 'classForBug',
                   },
                 ],
               },

diff --git 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<EuiTreeViewProps, EuiTreeViewState> {
           size={display === 'compressed' ? 's' : 'm'}
           className="euiTreeView__wrapper">
           {!this.isNested && (
-            <EuiScreenReaderOnly>
-              <EuiI18n
-                token="euiTreeView.listNavigationInstructions"
-                default="You can quickly navigate this list using arrow keys.">
-                {(listNavigationInstructions: string) => (
+            <EuiI18n
+              token="euiTreeView.listNavigationInstructions"
+              default="You can quickly navigate this list using arrow keys.">
+              {(listNavigationInstructions: string) => (
+                <EuiScreenReaderOnly>
                   <p id={instructionsId}>{listNavigationInstructions}</p>
-                )}
-              </EuiI18n>
-            </EuiScreenReaderOnly>
+                </EuiScreenReaderOnly>
+              )}
+            </EuiI18n>
           )}
           <ul
             className={classes}
@@ -272,15 +275,26 @@ export class EuiTreeView extends Component<EuiTreeViewProps, EuiTreeViewState> {
                           }`,
                         };
 
+                    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 (
                       <React.Fragment>
-                        <li
-                          className={classNames(
-                            'euiTreeView__node',
-                            this.isNodeOpen(node)
-                              ? 'euiTreeView__node--expanded'
-                              : null
-                          )}>
+                        <li className={nodeClasses}>
                           <button
                             id={buttonId}
                             aria-controls={`euiNestedTreeView-${
@@ -295,15 +309,7 @@ export class EuiTreeView extends Component<EuiTreeViewProps, EuiTreeViewState> {
                               this.onKeyDown(event, node)
                             }
                             onClick={() => this.handleNodeClick(node)}
-                            className={classNames(
-                              'euiTreeView__nodeInner',
-                              showExpansionArrows && node.children
-                                ? 'euiTreeView__nodeInner--withArrows'
-                                : null,
-                              this.state.activeItem === node.id
-                                ? 'euiTreeView__node--active'
-                                : null
-                            )}>
+                            className={nodeButtonClasses}>
                             {showExpansionArrows && node.children ? (
                               <EuiIcon
                                 className="euiTreeView__expansionArrow"