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: {