feat(TreeView): add experimental TreeView component (#6008)

* docs: import treeview styles * feat(TreeView): scaffold TreeView * feat(TreeNode): scaffold TreeNode * feat(treeview): init treeview styles * docs(TreeView): add TreeView story * fix(TreeNode): reposition node icons * refactor(TreeNode): rename event object * fix(treeview): modify spacing for nodes with icons * docs(TreeView): add value props and with icons story * refactor(TreeView): recursively calculate depth for offset * fix(treeview): reduce margin for nodes with icons * fix(treeview): set icon fill * feat(treeview): support disabled nodes * feat(TreeView): add tree node selection * feat(TreeView): add compact size support * refactor(TreeNode): consolidate shared props * fix(TreeNode): prevent selection handler on disabled nodes * docs(TreeView): add size prop * docs(TreeNode): define prop types * docs(TreeView): fix selected prop description * docs(TreeView): add prop types * refactor(TreeView): replace comma delimited selected string with array * feat(TreeView): allow deselection of selected nodes in multiselect mode * docs(TreeView): change selected proptype * fix(TreeNode): stop event propagation only on matched keys * feat(TreeView): support keyboard navigation * feat(TreeNode): enable keyboard selection of nodes * fix(TreeView): prevent page scroll on arrow keydown * chore(TreeView): add component index * fix(TreeView): replace document.activeElement reference * fix(TreeNode): remove tabindex from expandos * refactor(TreeView): target tree node class directly * fix(TreeView): prevent TreeWalker recreation on each render * refactor(TreeView): replace `onChange` with `onSelect` * fix(TreeView): set sequential-focusable node * docs(TreeView): set negative tabindex on interactive label element * fix(TreeNode): toggle aria-expanded based on expanded state * fix(TreeNode): set aria-selected on selected nodes * docs(TreeView): change tree node label demo from button to span * fix(TreeNode): set aria-selected on selected state * refactor(TreeNode): add currentNodeLabel ref * fix(TreeView): remove tabindex on disabled nodes * fix(treeview): remove toggle focus outline * feat(TreeView): support visible or hidden labels * fix(TreeNode): set tabindex for nested tree nodes * fix(TreeNode): add aria-disabled on disabled nodes * feat(TreeNode): add additional keyboard controls * chore: prettier * fix(TreeView): set preselected if array is not empty * feat(TreeView): separate tree and node selection handlers * fix(TreeNode): assign default expanded state when prop is nullish * test(TreeView): add test suite * feat(TreeNode): display checkmark icons for selected nodes * fix(TreeNode): use correct expanded state * chore: update snapshots * feat(TreeView): separate active and selected tree node styles * docs(TreeView): add active prop knob * docs(TreeView): recursively build tree examples * feat(TreeView): use IDs for active and selected nodes * fix(TreeNode): fire custom click handler when provided * fix(TreeNode): fire toggle handler with keyboard controls * feat(TreeNode): expand toggle handler function signature * test(TreeView): add IDs to sample markup * test(TreeView): consolidate test markup * chore: update snapshot * fix(TreeView): allow ctrl key multiselect for windows * feat(TreeNode): enable space key selection to match alternative patterns * docs(TreeNode): add onTreeSelect proptype * docs(TreeView): add JSX keys * chore: update snapshots * feat(TreeNode): include aria-selected attribute for any enabled node * chore: update snapshots * Revert "feat(TreeNode): display checkmark icons for selected nodes" This reverts commit 3642a9e. * feat(tree-view): disable pointer events on disabled nodes * feat(treeview): set selected node text color * chore: update snapshots * chore: use unstable prefix * docs(TreeView): relabel active knob * docs(TreeView): update example data * chore: prettier * fix(treeview): update caret rotation * refactor: function declarations * fix(TreeNode): set button type * Revert "chore: use unstable prefix" This reverts commit e5d29a1. * chore: use unstable prefix * chore: update snapshots * chore: rename export * chore: update snapshots * chore: update story format * refactor(TreeNode): replace toggle button with interactive span * docs(TreeView): create experimental warning in stories * chore: update snapshots * docs(TreeView): add unstable prefix to story name * feat(TreeNode): modify tabIndex on focus/blur to include mouse actions * chore: update snapshots * fix(TreeNode): show aria-expanded attribute when value is nullish * refactor(TreeNode): remove span type attribute * refactor(TreeNode): remove span tabIndex * chore: update snapshots * refactor(TreeView): extract tabIndex reset into helper function * feat(TreeView): create shared FocusEvent handler * chore: update snapshots * fix(TreeView): only act on tree node tabindices on focus * docs(TreeNode): add note on ESLint suppression Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Aug 25, 2020 · 1dc2ef5 · 1dc2ef5
1 parent 9f18d54
commit 1dc2ef5
Show file tree

Hide file tree

Showing 12 changed files with 2,422 additions and 0 deletions.
diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
@@ -433,6 +433,8 @@
   - [❌⚠️tooltip--definition--legacy [mixin]](#tooltip--definition--legacy-mixin)
   - [❌⚠️tooltip--icon--legacy [mixin]](#tooltip--icon--legacy-mixin)
   - [❌tooltip [mixin]](#tooltip-mixin)
+- [treeview](#treeview)
+  - [❌treeview [mixin]](#treeview-mixin)
 - [ui-shell](#ui-shell)
   - [❌carbon-content [mixin]](#carbon-content-mixin)
   - [✅mini-units [function]](#mini-units-function)
@@ -1868,6 +1870,7 @@ $prefix: 'bx';
   - [tooltip--definition--legacy [mixin]](#tooltip--definition--legacy-mixin)
   - [tooltip--icon--legacy [mixin]](#tooltip--icon--legacy-mixin)
   - [tooltip [mixin]](#tooltip-mixin)
+  - [treeview [mixin]](#treeview-mixin)
   - [carbon-content [mixin]](#carbon-content-mixin)
   - [carbon-header-panel [mixin]](#carbon-header-panel-mixin)
   - [carbon-header [mixin]](#carbon-header-mixin)
@@ -3725,6 +3728,7 @@ $spacing-03: $carbon--spacing-03;
   - [select [mixin]](#select-mixin)
   - [tabs [mixin]](#tabs-mixin)
   - [tooltip [mixin]](#tooltip-mixin)
+  - [treeview [mixin]](#treeview-mixin)
   - [carbon-switcher [mixin]](#carbon-switcher-mixin)
 
 ### ✅spacing-04 [variable]
@@ -3773,6 +3777,7 @@ $spacing-05: $carbon--spacing-05;
   - [search [mixin]](#search-mixin)
   - [select [mixin]](#select-mixin)
   - [tabs [mixin]](#tabs-mixin)
+  - [treeview [mixin]](#treeview-mixin)
   - [carbon-switcher [mixin]](#carbon-switcher-mixin)
 
 ### ✅spacing-06 [variable]
@@ -3813,6 +3818,7 @@ $spacing-07: $carbon--spacing-07;
   - [modal [mixin]](#modal-mixin)
   - [search [mixin]](#search-mixin)
   - [select [mixin]](#select-mixin)
+  - [treeview [mixin]](#treeview-mixin)
   - [carbon-switcher [mixin]](#carbon-switcher-mixin)
 
 ### ✅spacing-08 [variable]
@@ -3833,6 +3839,7 @@ $spacing-08: $carbon--spacing-08;
   - [carbon--theme [mixin]](#carbon--theme-mixin)
   - [dropdown [mixin]](#dropdown-mixin)
   - [search [mixin]](#search-mixin)
+  - [treeview [mixin]](#treeview-mixin)
 
 ### ✅spacing-09 [variable]
 
@@ -6545,6 +6552,7 @@ $interactive-01: if(
   - [pseudo-underline [mixin]](#pseudo-underline-mixin)
   - [progress-indicator [mixin]](#progress-indicator-mixin)
   - [tooltip--definition--legacy [mixin]](#tooltip--definition--legacy-mixin)
+  - [treeview [mixin]](#treeview-mixin)
 
 ### ✅interactive-02 [variable]
 
@@ -6701,6 +6709,7 @@ $ui-01: if(
   - [slider [mixin]](#slider-mixin)
   - [tabs [mixin]](#tabs-mixin)
   - [tile [mixin]](#tile-mixin)
+  - [treeview [mixin]](#treeview-mixin)
 
 ### ✅ui-02 [variable]
 
@@ -6906,6 +6915,7 @@ $text-01: if(
   - [text-input [mixin]](#text-input-mixin)
   - [tile [mixin]](#tile-mixin)
   - [tooltip--definition--legacy [mixin]](#tooltip--definition--legacy-mixin)
+  - [treeview [mixin]](#treeview-mixin)
 
 ### ✅text-02 [variable]
 
@@ -6947,6 +6957,7 @@ $text-02: if(
   - [toggle [mixin]](#toggle-mixin)
   - [toolbar [mixin]](#toolbar-mixin)
   - [tooltip [mixin]](#tooltip-mixin)
+  - [treeview [mixin]](#treeview-mixin)
 
 ### ✅text-03 [variable]
 
@@ -7088,6 +7099,7 @@ $icon-01: if(
   - [overflow-menu [mixin]](#overflow-menu-mixin)
   - [radio-button [mixin]](#radio-button-mixin)
   - [search [mixin]](#search-mixin)
+  - [treeview [mixin]](#treeview-mixin)
 
 ### ✅icon-02 [variable]
 
@@ -7924,6 +7936,7 @@ $hover-ui: if(
   - [tabs [mixin]](#tabs-mixin)
   - [tile [mixin]](#tile-mixin)
   - [time-picker [mixin]](#time-picker-mixin)
+  - [treeview [mixin]](#treeview-mixin)
 
 ### ✅active-ui [variable]
 
@@ -7984,6 +7997,7 @@ $selected-ui: if(
   - [dropdown [mixin]](#dropdown-mixin)
   - [listbox [mixin]](#listbox-mixin)
   - [search [mixin]](#search-mixin)
+  - [treeview [mixin]](#treeview-mixin)
 
 ### ✅selected-light-ui [variable]
 
@@ -8036,6 +8050,7 @@ $hover-selected-ui: if(
   - [data-table-core [mixin]](#data-table-core-mixin)
   - [data-table-expandable [mixin]](#data-table-expandable-mixin)
   - [tabs [mixin]](#tabs-mixin)
+  - [treeview [mixin]](#treeview-mixin)
 
 ### ✅inverse-hover-ui [variable]
 
@@ -8195,6 +8210,7 @@ $disabled-01: if(
   - [tags [mixin]](#tags-mixin)
   - [text-input [mixin]](#text-input-mixin)
   - [toggle [mixin]](#toggle-mixin)
+  - [treeview [mixin]](#treeview-mixin)
 
 ### ✅disabled-02 [variable]
 
@@ -8243,6 +8259,7 @@ $disabled-02: if(
   - [text-input [mixin]](#text-input-mixin)
   - [time-picker [mixin]](#time-picker-mixin)
   - [toggle [mixin]](#toggle-mixin)
+  - [treeview [mixin]](#treeview-mixin)
 
 ### ✅disabled-03 [variable]
 
@@ -25962,6 +25979,165 @@ Tooltip styles
   - [spacing-03 [variable]](#spacing-03-variable)
   - [interactive-04 [variable]](#interactive-04-variable)
 
+## treeview
+
+### ❌treeview [mixin]
+
+Treeview styles
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@mixin treeview() {
+  .#{$prefix}--tree {
+    overflow: hidden;
+
+    .#{$prefix}--tree-node {
+      padding-left: $spacing-05;
+      color: $text-02;
+      background-color: $ui-01;
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    .#{$prefix}--tree-node:focus > .#{$prefix}--tree-node__label {
+      @include focus-outline('outline');
+    }
+
+    .#{$prefix}--tree-node--disabled {
+      color: $disabled-02;
+      background-color: $disabled-01;
+      pointer-events: none;
+    }
+
+    .#{$prefix}--tree-node--disabled .#{$prefix}--tree-node__label:hover {
+      background-color: $disabled-01;
+    }
+
+    .#{$prefix}--tree-node--disabled .#{$prefix}--tree-parent-node__toggle-icon,
+    .#{$prefix}--tree-node--disabled .#{$prefix}--tree-node__icon {
+      fill: $disabled-02;
+    }
+
+    .#{$prefix}--tree-node--disabled
+      .#{$prefix}--tree-parent-node__toggle-icon:hover {
+      cursor: default;
+    }
+
+    .#{$prefix}--tree-node__label {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      min-height: rem(32px);
+
+      &:hover {
+        background-color: $hover-ui;
+      }
+    }
+
+    .#{$prefix}--tree-leaf-node {
+      display: flex;
+      padding-left: $spacing-08;
+    }
+
+    .#{$prefix}--tree-leaf-node.#{$prefix}--tree-node--with-icon {
+      padding-left: $spacing-07;
+    }
+
+    .#{$prefix}--tree-node__label__details {
+      display: flex;
+      align-items: center;
+    }
+
+    .#{$prefix}--tree-node--with-icon .#{$prefix}--tree-parent-node__toggle {
+      margin-right: 0;
+    }
+
+    .#{$prefix}--tree-parent-node__toggle {
+      width: rem(16px);
+      height: rem(16px);
+      margin-right: $spacing-03;
+      padding: 0;
+      background-color: transparent;
+      border: 0;
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    .#{$prefix}--tree-parent-node__toggle-icon {
+      transform: rotate(-90deg);
+      transition: all $duration--fast-02 motion(standard, productive);
+      fill: $icon-01;
+    }
+
+    .#{$prefix}--tree-parent-node__toggle-icon--expanded {
+      transform: rotate(0);
+    }
+
+    .#{$prefix}--tree-node__icon {
+      margin-right: $spacing-03;
+      fill: $icon-01;
+    }
+
+    .#{$prefix}--tree-node--selected > .#{$prefix}--tree-node__label {
+      color: $text-01;
+      background-color: $selected-ui;
+
+      &:hover {
+        background-color: $hover-selected-ui;
+      }
+    }
+
+    .#{$prefix}--tree-node--active > .#{$prefix}--tree-node__label {
+      position: relative;
+
+      &::before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: rem(4px);
+        height: 100%;
+        background-color: $interactive-01;
+        content: '';
+      }
+    }
+  }
+
+  .#{$prefix}--tree--compact .#{$prefix}--tree-node__label {
+    min-height: rem(24px);
+  }
+}
+```
+
+</details>
+
+- **Group**: [treeview](#treeview)
+- **Requires**:
+  - [prefix [variable]](#prefix-variable)
+  - [spacing-05 [variable]](#spacing-05-variable)
+  - [text-02 [variable]](#text-02-variable)
+  - [ui-01 [variable]](#ui-01-variable)
+  - [disabled-02 [variable]](#disabled-02-variable)
+  - [disabled-01 [variable]](#disabled-01-variable)
+  - [hover-ui [variable]](#hover-ui-variable)
+  - [spacing-08 [variable]](#spacing-08-variable)
+  - [spacing-07 [variable]](#spacing-07-variable)
+  - [spacing-03 [variable]](#spacing-03-variable)
+  - [icon-01 [variable]](#icon-01-variable)
+  - [text-01 [variable]](#text-01-variable)
+  - [selected-ui [variable]](#selected-ui-variable)
+  - [hover-selected-ui [variable]](#hover-selected-ui-variable)
+  - [interactive-01 [variable]](#interactive-01-variable)
+
 ## ui-shell
 
 ### ❌carbon-content [mixin]