fix(ui-toolkit): fix tooltip font-size and padding

fixes #971

packages/ui-toolkit/src/styleguide/renderer.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import styled, { ThemeProvider } from 'styled-components';
-import { Grid, Row, Col } from '../grid';
 import remcalc from 'remcalc';
-import theme from '../theme';
 import is from 'styled-is';
-import Header, { HeaderBrand } from '../header';
-import { Triton } from '../icons';
+
+import { Grid, Row, Col } from '../grid';
+import theme from '../theme';
 
 const Main = styled(Row)`
   padding-top: ${remcalc(40)};
@@ -49,27 +48,18 @@ const StyleGuideRenderer = ({
   hasSidebar
 }) => (
   <ThemeProvider theme={fullTheme}>
-    <div>
-      <Sticky>
-        <Header fluid>
-          <HeaderBrand beta center>
-            <Triton light />
-          </HeaderBrand>
-        </Header>
-      </Sticky>
-      <Grid>
-        <Main>
-          {hasSidebar && (
-            <Col xs={3}>
-              <Sticky sidebar>{toc}</Sticky>
-            </Col>
-          )}
-          <Col xs={hasSidebar ? 9 : 12} lg={hasSidebar ? 8 : 12}>
-            {children}
+    <Grid>
+      <Main>
+        {hasSidebar && (
+          <Col xs={3}>
+            <Sticky sidebar>{toc}</Sticky>
           </Col>
-        </Main>
-      </Grid>
-    </div>
+        )}
+        <Col xs={hasSidebar ? 9 : 12} lg={hasSidebar ? 8 : 12}>
+          {children}
+        </Col>
+      </Main>
+    </Grid>
   </ThemeProvider>
 );
 

packages/ui-toolkit/src/tooltip/Readme.md

@@ -1,14 +1,15 @@
 ```jsx
 const React = require('react');
-const { default: Tooltip, Container, Target } = require('./');
 const { Row, Col } = require('react-styled-flexboxgrid');
+const { default: Tooltip, Container, Target } = require('./');
+const { P } = require('../text');
 
 <Row center="xs" between="xs" style={{ marginTop: 60 }}>
   <Col xs={2}>
     <Container>
       <Target>Hello</Target>
       <Tooltip placement="top">
-        <code>top</code>
+        <P white>top</P>
       </Tooltip>
     </Container>
   </Col>
@@ -16,7 +17,7 @@ const { Row, Col } = require('react-styled-flexboxgrid');
     <Container>
       <Target>Hello</Target>
       <Tooltip placement="right">
-        <code>right</code>
+        <P white>right</P>
       </Tooltip>
     </Container>
   </Col>
@@ -24,7 +25,7 @@ const { Row, Col } = require('react-styled-flexboxgrid');
     <Container>
       <Target>Hello</Target>
       <Tooltip placement="bottom">
-        <code>bottom</code>
+        <P white>bottom</P>
       </Tooltip>
     </Container>
   </Col>
@@ -32,7 +33,7 @@ const { Row, Col } = require('react-styled-flexboxgrid');
     <Container>
       <Target>Hello</Target>
       <Tooltip placement="left">
-        <code>left</code>
+        <P white>left</P>
       </Tooltip>
     </Container>
   </Col>
@@ -43,15 +44,16 @@ const { Row, Col } = require('react-styled-flexboxgrid');
 
 ```jsx
 const React = require('react');
-const { default: Tooltip, Container, Target } = require('./');
 const { Row, Col } = require('react-styled-flexboxgrid');
+const { default: Tooltip, Container, Target } = require('./');
+const { P } = require('../text');
 
 <Row center="xs" between="xs">
   <Col xs={3}>
     <Container hoverable>
       <Target>Hover here</Target>
       <Tooltip placement="top">
-        <code>top</code>
+        <P white>top</P>
       </Tooltip>
     </Container>
   </Col>
@@ -62,15 +64,16 @@ const { Row, Col } = require('react-styled-flexboxgrid');
 
 ```jsx
 const React = require('react');
-const { default: Tooltip, Container, Target } = require('./');
 const { Row, Col } = require('react-styled-flexboxgrid');
+const { default: Tooltip, Container, Target } = require('./');
+const { P } = require('../text');
 
 <Row center="xs" between="xs">
   <Col xs={2}>
     <Container clickable>
       <Target>Click here</Target>
       <Tooltip placement="top">
-        <code>top</code>
+        <P white>top</P>
       </Tooltip>
     </Container>
   </Col>

packages/ui-toolkit/src/tooltip/__tests__/__snapshots__/tooltip.spec.js.snap

@@ -11,7 +11,7 @@ Array [
     Hello
 </div>,
   .c0 {
-  padding: 0.8125rem 1.125rem;
+  padding: 0.75rem 1.125rem;
   font-weight: normal;
   background: rgba(73,73,73,1);
   color: rgb(255,255,255);

packages/ui-toolkit/src/tooltip/index.js

@@ -11,8 +11,9 @@ import style from './style';
 const arrowClassName = rndId();
 
 const Popper = styled(BasePopper)`
-  padding: ${remcalc(13)} ${remcalc(18)};
+  padding: ${remcalc(12)} ${remcalc(18)};
   font-weight: normal;
+
   ${style({
     background: 'text',
     color: 'white',

packages/ui-toolkit/styleguide.config.js

@@ -65,7 +65,6 @@ module.exports = {
       name: 'Compound Components',
       components: () => [
         'src/table/index.js',
-        'src/header/index.js',
         'src/message/index.js',
         'src/section-list/index.js',
         'src/breadcrumb/index.js'