Merge pull request #1599 from storybooks/tree-visual-adjusments

Tree view visual adjustments
storybookjs · Aug 10, 2017 · 1e2855c · 1e2855c
2 parents f21210a + c859985
commit 1e2855c
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git a/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap b/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap
@@ -1637,7 +1637,7 @@ exports[`Storyshots Cells/Molecules/Atoms.more with text2 1`] = `
 </button>
 `;
 
-exports[`Storyshots Centered Button with text 1`] = `
+exports[`Storyshots Some really long story kind description with text 1`] = `
 <div
   style={
     Object {

diff --git a/examples/cra-kitchen-sink/src/stories/index.js b/examples/cra-kitchen-sink/src/stories/index.js
@@ -147,7 +147,7 @@ storiesOf('Button', module)
 
 storiesOf('App', module).add('full app', () => <App />);
 
-storiesOf('Centered Button', module)
+storiesOf('Some really long story kind description', module)
   .addDecorator(centered)
   .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>);
 

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
@@ -26,12 +26,14 @@ export default {
         zIndex: 1,
       },
       activeLink: {
+        color: 'inherit',
         fontWeight: 'bold',
         backgroundColor: '#EEE',
         zIndex: 0,
       },
       nativeLink: {
-        color: 'inherit',
+        marginLeft: '5px',
+        color: '#828282',
         textDecoration: 'none',
       },
       toggle: {
@@ -42,16 +44,18 @@ export default {
           marginLeft: '-5px',
           height: '24px',
           width: toggleWidth,
+          transformOrigin: '50% 11px',
         },
         wrapper: {
           position: 'absolute',
           top: '50%',
           left: '50%',
-          margin: '-12px 0 0 -4px',
+          margin: '-6px 0 0 -5px',
         },
         height: 10,
         width: 10,
         arrow: {
+          verticalAlign: 'top',
           fill: '#9DA5AB',
         },
       },
@@ -71,11 +75,13 @@ export default {
           left: '-21px',
         },
         title: {
-          lineHeight: '24px',
-          verticalAlign: 'middle',
+          lineHeight: '18px',
+          padding: '1px 0 5px',
         },
         storyTitle: {
           fontSize: '13px',
+          lineHeight: '16px',
+          padding: '1px 0 4px',
         },
         highLightText: {
           backgroundColor: '#FFFEAA',