diff --git a/lib/ui/src/modules/ui/components/left_panel/stories_tree/tree_decorators.js b/lib/ui/src/modules/ui/components/left_panel/stories_tree/tree_decorators.js
index 3acc69cc857..a809915e663 100644
--- a/lib/ui/src/modules/ui/components/left_panel/stories_tree/tree_decorators.js
+++ b/lib/ui/src/modules/ui/components/left_panel/stories_tree/tree_decorators.js
@@ -1,15 +1,26 @@
import { decorators } from 'react-treebeard';
-import { IoFolder, IoDocumentText, IoCode } from 'react-icons/lib/io';
+import { IoChevronRight } from 'react-icons/lib/io';
import React from 'react';
import PropTypes from 'prop-types';
-import treeNodeTypes from './tree_node_type';
-const iconsColor = '#7d8890';
+function ToggleDecorator({ style }) {
+ const { height, width, arrow } = style;
-const iconsMap = {
- [treeNodeTypes.NAMESPACE]: IoFolder,
- [treeNodeTypes.COMPONENT]: IoDocumentText,
- [treeNodeTypes.STORY]: IoCode,
+ return (
+
+ );
+}
+
+ToggleDecorator.propTypes = {
+ style: PropTypes.shape({
+ width: PropTypes.number.isRequired,
+ height: PropTypes.number.isRequired,
+ arrow: PropTypes.object.isRequired,
+ }).isRequired,
};
function ContainerDecorator(props) {
@@ -55,15 +66,12 @@ function createHeaderDecoratorScope(parent) {
...style.title,
};
- const Icon = iconsMap[node.type];
-
if (!node.children || !node.children.length) {
newStyleTitle.fontSize = '13px';
}
return (
- {Icon &&
}
{node.name}
@@ -90,5 +98,6 @@ export default function(parent) {
...decorators,
Header: createHeaderDecoratorScope(parent),
Container: ContainerDecorator,
+ Toggle: ToggleDecorator,
};
}
diff --git a/lib/ui/src/modules/ui/components/left_panel/stories_tree/tree_style.js b/lib/ui/src/modules/ui/components/left_panel/stories_tree/tree_style.js
index 0cc5f691a85..1fa9c7d1dcb 100644
--- a/lib/ui/src/modules/ui/components/left_panel/stories_tree/tree_style.js
+++ b/lib/ui/src/modules/ui/components/left_panel/stories_tree/tree_style.js
@@ -39,13 +39,12 @@ export default {
position: 'absolute',
top: '50%',
left: '50%',
- margin: '-10px 0 0 -4px',
+ margin: '-12px 0 0 -4px',
},
height: 10,
width: 10,
arrow: {
fill: '#9DA5AB',
- strokeWidth: 0,
},
},
header: {