feat(tree-view): makes tree-view stable (uber#2981)

* feat(tree-view): remove Unstable_ from component name * fix(tree-view): remove Unstable toast from docs * fix(tree-view): updating docs for consistency and clarity * fix(tree-view): update yard example data * fix(tree-view): update yard example data and sort order
vmatthes · Mar 5, 2020 · 477e6c6 · 477e6c6
1 parent 8a2fae1
commit 477e6c6
Show file tree

Hide file tree

Showing 20 changed files with 94 additions and 54 deletions.
diff --git a/documentation-site/components/yard/config/tree-view.ts b/documentation-site/components/yard/config/tree-view.ts
@@ -1,16 +1,16 @@
-import {Unstable_TreeView, toggleIsExpanded} from 'baseui/tree-view';
+import {TreeView, toggleIsExpanded} from 'baseui/tree-view';
 import {PropTypes} from 'react-view';
 import {TConfig} from '../types';
 
 const treeViewProps = require('!!extract-react-types-loader!../../../../src/tree-view/tree-view.js');
 
 const TreeViewConfig: TConfig = {
-  componentName: 'Unstable_TreeView',
+  componentName: 'TreeView',
   imports: {
-    'baseui/tree-view': {named: ['Unstable_TreeView', 'toggleIsExpanded']},
+    'baseui/tree-view': {named: ['TreeView', 'toggleIsExpanded']},
   },
   scope: {
-    Unstable_TreeView,
+    TreeView,
     toggleIsExpanded,
   },
   theme: [],
@@ -19,24 +19,59 @@ const TreeViewConfig: TConfig = {
       value: `[
   {
     id: 1,
-    label: 'Projects',
+    label: 'The Two Gentlemen of Verona',
     isExpanded: true,
     children: [
       {
-        id: 2,
-        label: 'project-1.docx',
-      }
+        id: 11,
+        label: 'Duke of Milan',
+      },
+      {
+        id: 12,
+        label: 'Two Gentleman',
+        isExpanded: true,
+        children: [
+          {
+            id: 121,
+            label: 'Valentine',
+          },
+          {
+            id: 122,
+            label: 'Proteus',
+          }
+        ]
+      },
+      {
+        id: 13,
+        label: 'Silvia',
+      },
+      {
+        id: 14,
+        label: 'Julia',
+      },
     ]
   },
   {
-    id: 3,
-    label: 'Reports',
+    id: 2,
+    label: 'The Tempest',
     isExpanded: false,
     children: [
       {
-        id: 4,
-        label: 'report-1.docx',
-      }
+        id: 21,
+        label: 'Alonso',
+      },
+      {
+        id: 22,
+        label: 'Sebastian',
+      },
+      {
+        id: 23,
+        label: 'Prospero',
+      },
+      {
+        id: 24,
+        label: 'Antonio',
+      },
     ]
   },
 ]`,
@@ -45,6 +80,17 @@ const TreeViewConfig: TConfig = {
       stateful: true,
       hidden: true,
     },
+    getId: {
+      value: undefined,
+      type: PropTypes.Function,
+      placeholder: 'node => node.id',
+      description: `Let's you set a custom mapping node => id function.`,
+    },
+    indentGuides: {
+      value: false,
+      type: PropTypes.Boolean,
+      description: 'Displays indent guides',
+    },
     onToggle: {
       value:
         'node => {\n  setData(prevData => toggleIsExpanded(prevData, node))\n}',
@@ -57,17 +103,6 @@ const TreeViewConfig: TConfig = {
       description:
         'Renders all tab content for SEO purposes regardless of tab active state.',
     },
-    indentGuides: {
-      value: false,
-      type: PropTypes.Boolean,
-      description: 'Displays indent guides',
-    },
-    getId: {
-      value: undefined,
-      type: PropTypes.Function,
-      placeholder: 'node => node.id',
-      description: `Let's you set a custom mapping node => id function.`,
-    },
     overrides: {
       value: undefined,
       type: PropTypes.Custom,
@@ -105,7 +140,7 @@ const TreeViewConfig: TConfig = {
     },
   },
   mapTokensToProps: {
-    Unstable_TreeView: treeViewProps,
+    TreeView: treeViewProps,
   },
 };
 

diff --git a/documentation-site/examples/tree-view/basic.js b/documentation-site/examples/tree-view/basic.js
@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import {
-  Unstable_TreeView as TreeView,
+  TreeView,
   type TreeNodeT,
   toggleIsExpanded,
 } from 'baseui/tree-view';

diff --git a/documentation-site/examples/tree-view/basic.tsx b/documentation-site/examples/tree-view/basic.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {
-  Unstable_TreeView as TreeView,
+  TreeView,
   toggleIsExpanded,
   TreeNode,
 } from 'baseui/tree-view';

diff --git a/documentation-site/examples/tree-view/custom-label.js b/documentation-site/examples/tree-view/custom-label.js
@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import {
-  Unstable_TreeView as TreeView,
+  TreeView,
   type TreeNodeT,
   toggleIsExpanded,
 } from 'baseui/tree-view';

diff --git a/documentation-site/examples/tree-view/custom-label.tsx b/documentation-site/examples/tree-view/custom-label.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {
-  Unstable_TreeView as TreeView,
+  TreeView,
   TreeNode,
   toggleIsExpanded,
 } from 'baseui/tree-view';

diff --git a/documentation-site/examples/tree-view/label-overrides.js b/documentation-site/examples/tree-view/label-overrides.js
@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import {
-  Unstable_TreeView as TreeView,
+  TreeView,
   TreeLabel,
   type TreeNodeT,
   toggleIsExpanded,

diff --git a/documentation-site/examples/tree-view/label-overrides.tsx b/documentation-site/examples/tree-view/label-overrides.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {
-  Unstable_TreeView as TreeView,
+  TreeView,
   TreeLabel,
   TreeNode,
   TreeLabelProps,

diff --git a/documentation-site/examples/tree-view/overrides.js b/documentation-site/examples/tree-view/overrides.js
@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import {
-  Unstable_TreeView as TreeView,
+  TreeView,
   type TreeNodeT,
   toggleIsExpanded,
 } from 'baseui/tree-view';

diff --git a/documentation-site/examples/tree-view/overrides.tsx b/documentation-site/examples/tree-view/overrides.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {
-  Unstable_TreeView as TreeView,
+  TreeView,
   TreeNode,
   toggleIsExpanded,
 } from 'baseui/tree-view';

diff --git a/documentation-site/examples/tree-view/single-expanded.js b/documentation-site/examples/tree-view/single-expanded.js
@@ -1,6 +1,6 @@
 // @flow
 import * as React from 'react';
-import {Unstable_StatefulTreeView as StatefulTreeView} from 'baseui/tree-view';
+import {StatefulTreeView} from 'baseui/tree-view';
 
 const initialData = [
   {

diff --git a/documentation-site/examples/tree-view/single-expanded.tsx b/documentation-site/examples/tree-view/single-expanded.tsx
@@ -1,6 +1,6 @@
 // @flow
 import * as React from 'react';
-import {Unstable_StatefulTreeView as StatefulTreeView} from 'baseui/tree-view';
+import {StatefulTreeView} from 'baseui/tree-view';
 
 const initialData = [
   {

diff --git a/documentation-site/examples/tree-view/uncontrolled.js b/documentation-site/examples/tree-view/uncontrolled.js
@@ -1,6 +1,6 @@
 // @flow
 import * as React from 'react';
-import {Unstable_StatefulTreeView as StatefulTreeView} from 'baseui/tree-view';
+import {StatefulTreeView} from 'baseui/tree-view';
 
 const data = [
   {

diff --git a/documentation-site/examples/tree-view/uncontrolled.tsx b/documentation-site/examples/tree-view/uncontrolled.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Unstable_StatefulTreeView as StatefulTreeView} from 'baseui/tree-view';
+import {StatefulTreeView} from 'baseui/tree-view';
 
 const data = [
   {

diff --git a/documentation-site/pages/components/tree-view.mdx b/documentation-site/pages/components/tree-view.mdx
@@ -8,7 +8,6 @@ LICENSE file in the root directory of this source tree.
 import Example from '../../components/example';
 import Layout from '../../components/layout';
 import Exports from '../../components/exports';
-import UnstableWarning from '../../components/unstable-warning';
 
 import TreeViewBasic from 'examples/tree-view/basic.js';
 import TreeViewUncontrolled from 'examples/tree-view/uncontrolled.js';
@@ -27,36 +26,42 @@ export default Layout;
 
 # Tree View
 
-<UnstableWarning />
-
 <Yard placeholderHeight={134} {...treeviewYardConfig} />
 
+The TreeView is used to display a hierarchical list of items.
+
 ## Examples
 
-<Example title="Basic Tree View Usage" path="tree-view/basic.js">
+<Example title="Basic usage" path="tree-view/basic.js">
   <TreeViewBasic />
 </Example>
 
-<Example title="Custom labels Usage" path="tree-view/custom-label.js">
+<Example title="Adding custom labels" path="tree-view/custom-label.js">
   <CustomLabelledTreeView />
 </Example>
 
 <Example
-  title="Simple Overrides Usage with renderAll"
+  title="Customizing icons and rendering all content for SEO"
   path="tree-view/overrides.js"
 >
   <TreeViewOverrides />
 </Example>
 
-<Example title="Advanced Overrides Usage" path="tree-view/label-overrides.js">
+<Example
+  title="Customizing labels based on depth"
+  path="tree-view/label-overrides.js"
+>
   <TreeViewLabelOverrides />
 </Example>
 
-<Example title="Single Expanded Node" path="tree-view/single-expanded.js">
+<Example
+  title="Expanding a single node at a time with indent guides"
+  path="tree-view/single-expanded.js"
+>
   <SingleExpanded />
 </Example>
 
-<Example title="Uncontrolled Tree View Usage" path="tree-view/uncontrolled.js">
+<Example title="Stateful (uncontrolled) usage" path="tree-view/uncontrolled.js">
   <TreeViewUncontrolled />
 </Example>
 

diff --git a/scripts/component-sizes.js b/scripts/component-sizes.js
@@ -63,7 +63,7 @@ async function main() {
     textarea: 'Textarea',
     toast: ['toaster', 'ToasterContainer'],
     tooltip: 'Tooltip',
-    'tree-view': 'Unstable_StatefulTreeView',
+    'tree-view': 'StatefulTreeView',
     typography: ['Display1', 'Label1'],
   };
   const components = Object.keys(componentExports);

diff --git a/src/tree-view/__tests__/tree-view-render-all.scenario.js b/src/tree-view/__tests__/tree-view-render-all.scenario.js
@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {Unstable_StatefulTreeView as StatefulTreeView} from '../index.js';
+import {StatefulTreeView} from '../index.js';
 
 const initialData = [
   {

diff --git a/src/tree-view/__tests__/tree-view-single-expanded.scenario.js b/src/tree-view/__tests__/tree-view-single-expanded.scenario.js
@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {Unstable_StatefulTreeView as StatefulTreeView} from '../index.js';
+import {StatefulTreeView} from '../index.js';
 
 const initialData = [
   {

diff --git a/src/tree-view/__tests__/tree-view.scenario.js b/src/tree-view/__tests__/tree-view.scenario.js
@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {Unstable_StatefulTreeView as StatefulTreeView} from '../index.js';
+import {StatefulTreeView} from '../index.js';
 
 const initialData = [
   {

diff --git a/src/tree-view/index.d.ts b/src/tree-view/index.d.ts
@@ -56,9 +56,9 @@ export interface TreeViewProps {
   singleExpanded?: boolean;
 }
 
-export const Unstable_TreeView: React.FC<TreeViewProps>;
+export const TreeView: React.FC<TreeViewProps>;
 
-export const Unstable_StatefulTreeView: React.FC<TreeViewProps>;
+export const StatefulTreeView: React.FC<TreeViewProps>;
 
 export const TreeLabel: React.FC<TreeLabelProps>;
 

diff --git a/src/tree-view/index.js b/src/tree-view/index.js
@@ -6,8 +6,8 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-export {default as Unstable_TreeView} from './tree-view.js';
-export {default as Unstable_StatefulTreeView} from './stateful-tree-view.js';
+export {default as TreeView} from './tree-view.js';
+export {default as StatefulTreeView} from './stateful-tree-view.js';
 
 export type * from './types.js';