feat(circle-packing): use @nivo/colors for inherited colors

plouc · Apr 17, 2019 · 53ffed9 · 53ffed9
1 parent a217ab8
commit 53ffed9
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 39 deletions.
diff --git a/packages/circle-packing/src/enhance.js b/packages/circle-packing/src/enhance.js
@@ -19,10 +19,9 @@ import {
     withMotion,
     getAccessorFor,
     getLabelGenerator,
-    getInheritedColorGenerator,
     bindDefs,
 } from '@nivo/core'
-import { getOrdinalColorScale } from '@nivo/colors'
+import { getOrdinalColorScale, getInheritedColorGenerator } from '@nivo/colors'
 import { computeNodes, computeZoom } from './compute'
 import * as props from './props'
 
@@ -44,16 +43,16 @@ const commonEnhancers = [
     })),
 
     // border
-    withPropsOnChange(['borderColor'], ({ borderColor }) => ({
-        getBorderColor: getInheritedColorGenerator(borderColor),
+    withPropsOnChange(['borderColor', 'theme'], ({ borderColor, theme }) => ({
+        getBorderColor: getInheritedColorGenerator(borderColor, theme),
     })),
 
     // labels
     withPropsOnChange(['label', 'labelFormat'], ({ label, labelFormat }) => ({
         getLabel: getLabelGenerator(label, labelFormat),
     })),
-    withPropsOnChange(['labelTextColor'], ({ labelTextColor }) => ({
-        getLabelTextColor: getInheritedColorGenerator(labelTextColor),
+    withPropsOnChange(['labelTextColor', 'theme'], ({ labelTextColor, theme }) => ({
+        getLabelTextColor: getInheritedColorGenerator(labelTextColor, theme),
     })),
 
     // zoom

diff --git a/packages/circle-packing/src/props.js b/packages/circle-packing/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 BubbleNode from './BubbleNode'
 import BubbleHtmlNode from './BubbleHtmlNode'
 
@@ -27,12 +31,12 @@ const commonPropTypes = {
     padding: PropTypes.number.isRequired,
 
     borderWidth: PropTypes.number.isRequired,
-    borderColor: PropTypes.any.isRequired,
+    borderColor: inheritedColorPropType.isRequired,
 
     enableLabel: PropTypes.bool.isRequired,
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
     labelFormat: PropTypes.string,
-    labelTextColor: PropTypes.any.isRequired,
+    labelTextColor: inheritedColorPropType.isRequired,
     labelSkipRadius: PropTypes.number.isRequired,
 
     isInteractive: PropTypes.bool.isRequired,
@@ -67,11 +71,14 @@ const commonDefaultProps = {
     colors: { scheme: 'nivo' },
     colorBy: 'depth',
     borderWidth: 0,
-    borderColor: 'inherit',
+    borderColor: { from: 'color' },
 
     enableLabel: true,
     label: 'id',
-    labelTextColor: 'inherit:darker(1)',
+    labelTextColor: {
+        from: 'color',
+        modifiers: [['darker', 1]],
+    },
     labelSkipRadius: 8,
 
     isInteractive: true,

diff --git a/website/src/data/components/bubble/mapper.js b/website/src/data/components/bubble/mapper.js
@@ -6,13 +6,11 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import { settingsMapper, mapInheritedColor } from '../../../lib/settings'
+import { settingsMapper } from '../../../lib/settings'
 
 export default settingsMapper({
     label: value => {
         if (value === `d => \`\${d.id}: \${d.value}\``) return d => `${d.id}: ${d.value}`
         return value
     },
-    labelTextColor: mapInheritedColor,
-    borderColor: mapInheritedColor,
 })
diff --git a/website/src/data/components/bubble/props.js b/website/src/data/components/bubble/props.js
@@ -204,14 +204,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(['Bubble']),
     {
@@ -264,14 +261,11 @@ const props = [
             how to compute label text color,
             [see dedicated documentation](self:/guides/colors).
         `,
-        type: 'string | Function',
+        type: 'string | object | Function',
         required: false,
         defaultValue: defaults.labelTextColor,
-        controlType: 'color',
+        controlType: 'inheritedColor',
         group: 'Labels',
-        controlOptions: {
-            withCustomColor: true,
-        },
     },
     {
         key: 'labelSkipRadius',

diff --git a/website/src/pages/bubble/api.js b/website/src/pages/bubble/api.js
@@ -46,14 +46,14 @@ const BubbleApi = () => {
                     label: 'id',
                     labelSkipRadius: 8,
                     labelTextColor: {
-                        type: 'inherit:darker',
-                        gamma: 0.8,
+                        from: 'color',
+                        modifiers: [['darker', 0.8]],
                     },
                     labelTextDY: 4,
                     borderWidth: 0,
                     borderColor: {
-                        type: 'inherit:darker',
-                        gamma: 0.3,
+                        from: 'color',
+                        modifiers: [['darker', 0.3]],
                     },
                 }}
             />

diff --git a/website/src/pages/bubble/canvas.js b/website/src/pages/bubble/canvas.js
@@ -50,14 +50,14 @@ const initialProperties = {
     label: 'name',
     labelSkipRadius: 10,
     labelTextColor: {
-        type: 'inherit:darker',
-        gamma: 0.8,
+        from: 'color',
+        modifiers: [['darker', 0.8]],
     },
 
     borderWidth: 0,
     borderColor: {
-        type: 'inherit:darker',
-        gamma: 0.3,
+        from: 'color',
+        modifiers: [['darker', 0.3]],
     },
 
     animate: true,

diff --git a/website/src/pages/bubble/html.js b/website/src/pages/bubble/html.js
@@ -32,14 +32,14 @@ const initialProperties = {
     label: 'id',
     labelSkipRadius: 10,
     labelTextColor: {
-        type: 'inherit:darker',
-        gamma: 0.8,
+        from: 'color',
+        modifiers: [['darker', 0.8]],
     },
 
     borderWidth: 0,
     borderColor: {
-        type: 'inherit:darker',
-        gamma: 0.3,
+        from: 'color',
+        modifiers: [['darker', 0.3]],
     },
 
     animate: true,

diff --git a/website/src/pages/bubble/index.js b/website/src/pages/bubble/index.js
@@ -33,13 +33,13 @@ const initialProperties = {
     label: 'id',
     labelSkipRadius: 8,
     labelTextColor: {
-        type: 'inherit:darker',
-        gamma: 0.8,
+        from: 'color',
+        modifiers: [['darker', 0.8]],
     },
 
     borderWidth: 2,
     borderColor: {
-        type: 'inherit',
+        from: 'color',
     },
 
     defs: [