feat(bar): use @nivo/colors for inherited colors

plouc · Apr 17, 2019 · c7cf5ce · c7cf5ce
1 parent 1347fd8
commit c7cf5ce
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 31 deletions.
diff --git a/packages/bar/src/enhance.js b/packages/bar/src/enhance.js
@@ -14,11 +14,10 @@ import {
     withTheme,
     withDimensions,
     withMotion,
-    getInheritedColorGenerator,
     getAccessorFor,
     getLabelGenerator,
 } from '@nivo/core'
-import { getOrdinalColorScale } from '@nivo/colors'
+import { getOrdinalColorScale, getInheritedColorGenerator } from '@nivo/colors'
 import { BarDefaultProps } from './props'
 
 export default Component =>
@@ -33,17 +32,17 @@ export default Component =>
         withPropsOnChange(['indexBy'], ({ indexBy }) => ({
             getIndex: getAccessorFor(indexBy),
         })),
-        withPropsOnChange(['labelTextColor'], ({ labelTextColor }) => ({
-            getLabelTextColor: getInheritedColorGenerator(labelTextColor, 'axis.ticks.text.fill'),
+        withPropsOnChange(['labelTextColor', 'theme'], ({ labelTextColor, theme }) => ({
+            getLabelTextColor: getInheritedColorGenerator(labelTextColor, theme),
         })),
-        withPropsOnChange(['labelLinkColor'], ({ labelLinkColor }) => ({
-            getLabelLinkColor: getInheritedColorGenerator(labelLinkColor, 'axis.ticks.line.stroke'),
+        withPropsOnChange(['labelLinkColor', 'theme'], ({ labelLinkColor, theme }) => ({
+            getLabelLinkColor: getInheritedColorGenerator(labelLinkColor, theme),
         })),
         withPropsOnChange(['label', 'labelFormat'], ({ label, labelFormat }) => ({
             getLabel: getLabelGenerator(label, labelFormat),
         })),
-        withPropsOnChange(['borderColor'], ({ borderColor }) => ({
-            getBorderColor: getInheritedColorGenerator(borderColor),
+        withPropsOnChange(['borderColor', 'theme'], ({ borderColor, theme }) => ({
+            getBorderColor: getInheritedColorGenerator(borderColor, theme),
         })),
         withPropsOnChange(['tooltipLabel'], ({ tooltipLabel }) => {
             let getTooltipLabel = d => `${d.id} - ${d.indexValue}`

diff --git a/packages/bar/src/props.js b/packages/bar/src/props.js
@@ -8,7 +8,11 @@
  */
 import PropTypes from 'prop-types'
 import { noop, defsPropTypes } from '@nivo/core'
-import { ordinalColorsPropType, colorPropertyAccessorPropType } from '@nivo/colors'
+import {
+    ordinalColorsPropType,
+    colorPropertyAccessorPropType,
+    inheritedColorPropType,
+} from '@nivo/colors'
 import { axisPropType } from '@nivo/axes'
 import { LegendPropShape } from '@nivo/legends'
 import BarItem from './BarItem'
@@ -51,9 +55,9 @@ export const BarPropTypes = {
     getLabel: PropTypes.func.isRequired, // computed
     labelSkipWidth: PropTypes.number.isRequired,
     labelSkipHeight: PropTypes.number.isRequired,
-    labelTextColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
+    labelTextColor: inheritedColorPropType.isRequired,
     getLabelTextColor: PropTypes.func.isRequired, // computed
-    labelLinkColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
+    labelLinkColor: inheritedColorPropType.isRequired,
     getLabelLinkColor: PropTypes.func.isRequired, // computed
 
     colors: ordinalColorsPropType.isRequired,
@@ -62,7 +66,7 @@ export const BarPropTypes = {
     getColor: PropTypes.func.isRequired, // computed
     ...defsPropTypes,
     borderWidth: PropTypes.number.isRequired,
-    borderColor: PropTypes.any.isRequired,
+    borderColor: inheritedColorPropType.isRequired,
     getBorderColor: PropTypes.func.isRequired,
 
     isInteractive: PropTypes.bool,
@@ -81,7 +85,6 @@ export const BarPropTypes = {
         })
     ).isRequired,
 
-    // canvas specific
     pixelRatio: PropTypes.number.isRequired,
 }
 
@@ -119,7 +122,7 @@ export const BarDefaultProps = {
     fill: [],
     borderRadius: 0,
     borderWidth: 0,
-    borderColor: 'inherit',
+    borderColor: { from: 'color' },
 
     isInteractive: true,
     onClick: noop,

diff --git a/website/src/data/components/bar/mapper.js b/website/src/data/components/bar/mapper.js
@@ -8,7 +8,7 @@
  */
 import React from 'react'
 import styled from 'styled-components'
-import { settingsMapper, mapAxis, mapInheritedColor } from '../../../lib/settings'
+import { settingsMapper, mapAxis } from '../../../lib/settings'
 
 const TooltipWrapper = styled.div`
     display: grid;
@@ -43,8 +43,6 @@ export default settingsMapper(
         axisRight: mapAxis('right'),
         axisBottom: mapAxis('bottom'),
         axisLeft: mapAxis('left'),
-        borderColor: mapInheritedColor,
-        labelTextColor: mapInheritedColor,
         tooltip: (value, values) => {
             if (!values['custom tooltip example']) return null
 

diff --git a/website/src/data/components/bar/props.js b/website/src/data/components/bar/props.js
@@ -317,14 +317,11 @@ const props = [
             how to compute border color,
             [see dedicated documentation](self:/guides/colors).
         `,
-        type: 'string | Function',
+        type: 'string | object | Function',
         required: false,
         defaultValue: defaults.borderColor,
-        controlType: 'color',
+        controlType: 'inheritedColor',
         group: 'Style',
-        controlOptions: {
-            withCustomColor: true,
-        },
     },
     ...defsProperties(['Bar']),
     {
@@ -416,14 +413,11 @@ const props = [
         key: 'labelTextColor',
         scopes: '*',
         help: 'Defines how to compute label text color.',
-        type: 'string | Function',
+        type: 'string | object | Function',
         required: false,
         defaultValue: defaults.labelTextColor,
-        controlType: 'color',
+        controlType: 'inheritedColor',
         group: 'Labels',
-        controlOptions: {
-            withCustomColor: true,
-        },
     },
     {
         key: 'enableGridX',

diff --git a/website/src/pages/bar/index.js b/website/src/pages/bar/index.js
@@ -60,8 +60,8 @@ const initialProperties = {
     borderRadius: 0,
     borderWidth: 0,
     borderColor: {
-        type: 'inherit:darker',
-        gamma: 1.6,
+        from: 'color',
+        modifiers: [['darker', 1.6]],
     },
 
     axisTop: {
@@ -106,8 +106,8 @@ const initialProperties = {
     labelSkipWidth: 12,
     labelSkipHeight: 12,
     labelTextColor: {
-        type: 'inherit:darker',
-        gamma: 1.6,
+        from: 'color',
+        modifiers: [['darker', 1.6]],
     },
 
     animate: true,