feat(tooltip): move Chip style to theme (#589)

* add theme property to chip component * update theme typescript
plouc · Jun 11, 2019 · 343e38c · 343e38c
1 parent 9037d05
commit 343e38c
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/packages/core/index.d.ts b/packages/core/index.d.ts
@@ -68,6 +68,7 @@ declare module '@nivo/core' {
         tooltip: Partial<{
             container: Partial<React.CSSProperties>
             basic: Partial<React.CSSProperties>
+            chip: Partial<React.CSSProperties>
             table: Partial<React.CSSProperties>
             tableCell: Partial<React.CSSProperties>
         }>

diff --git a/packages/core/src/theming/defaultTheme.js b/packages/core/src/theming/defaultTheme.js
@@ -67,6 +67,9 @@ export const defaultTheme = {
             display: 'flex',
             alignItems: 'center',
         },
+        chip: {
+            marginRight: 7,
+        },
         table: {},
         tableCell: {
             padding: '3px 5px',

diff --git a/packages/tooltip/src/components/BasicTooltip.js b/packages/tooltip/src/components/BasicTooltip.js
@@ -11,8 +11,6 @@ import PropTypes from 'prop-types'
 import { useTheme, useValueFormatter } from '@nivo/core'
 import Chip from './Chip'
 
-const chipStyle = { marginRight: 7 }
-
 const BasicTooltip = memo(({ id, value: _value, format, enableChip, color, renderContent }) => {
     const theme = useTheme()
     const formatValue = useValueFormatter(format)
@@ -27,7 +25,7 @@ const BasicTooltip = memo(({ id, value: _value, format, enableChip, color, rende
         }
         content = (
             <div style={theme.tooltip.basic}>
-                {enableChip && <Chip color={color} style={chipStyle} />}
+                {enableChip && <Chip color={color} style={theme.tooltip.chip} />}
                 {value !== undefined ? (
                     <span>
                         {id}: <strong>{isNaN(value) ? String(value) : value}</strong>