Use gradients and subduing in MultiSeriesBarChart

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## Unreleased
+
+### Removed
+
+- `highLightColor` from `MultiSeriesBarChart` `barOptions` prop
+
 ## [0.9.4] — 2021-05-04
 
 ### Added

src/components/Bar/Bar.scss

@@ -1,7 +1,7 @@
 @import 'node_modules/@shopify/polaris-tokens/dist/index';
 @import '../../styles/common';
 
-.BarNoOutline {
+.Bar {
   @include no-outline;
-  transition: fill $duration-fast ease;
+  transition: fill $duration-slow ease;
 }

src/components/Bar/Bar.tsx

@@ -1,17 +1,13 @@
 import React, {useMemo} from 'react';
 import {animated, OpaqueInterpolation} from 'react-spring';
-import {Color} from 'types';
 import {ScaleLinear} from 'd3-scale';
 
-import {getColorValue} from '../../utilities';
 import {ROUNDED_BAR_RADIUS} from '../../constants';
 
 import styles from './Bar.scss';
 
 interface Props {
-  color: Color;
-  highlightColor: Color;
-  isSelected: boolean;
+  color: string;
   x: number;
   yScale: ScaleLinear<number, number>;
   rawValue: number;
@@ -27,8 +23,6 @@ interface Props {
 
 export function Bar({
   color,
-  highlightColor,
-  isSelected,
   x,
   rawValue,
   yScale,
@@ -46,9 +40,6 @@ export function Bar({
   const isNegative = rawValue < 0;
   const rotation = isNegative ? 'rotate(180deg)' : 'rotate(0deg)';
   const xPosition = isNegative ? x + width : x;
-  const currentColor = isSelected
-    ? getColorValue(highlightColor)
-    : getColorValue(color);
 
   const heightIsNumber = typeof height === 'number';
 
@@ -110,13 +101,13 @@ export function Bar({
   return (
     <animated.path
       d={path}
-      fill={currentColor}
+      fill={color}
       aria-label={ariaLabel}
       onFocus={handleFocus}
       tabIndex={tabIndex}
       role={role}
       style={style}
-      className={color === highlightColor ? undefined : styles.BarNoOutline}
+      className={styles.Bar}
     />
   );
 }

src/components/Bar/tests/Bar.test.tsx

@@ -3,133 +3,93 @@ import {mount} from '@shopify/react-testing';
 import {scaleBand} from 'd3-scale';
 
 import {Bar} from '../Bar';
+import {MASK_HIGHLIGHT_COLOR} from '../../../constants';
 
 jest.mock('d3-scale', () => ({
   scaleBand: jest.fn(() => jest.fn((value) => value)),
 }));
 
+const defaultProps = {
+  height: 1000,
+  color: MASK_HIGHLIGHT_COLOR,
+  isSelected: false,
+  x: 0,
+  rawValue: 1000,
+  width: 100,
+  yScale: scaleBand() as any,
+  index: 1,
+  onFocus: jest.fn(),
+  tabIndex: 0,
+};
+
 describe('<Bar/>', () => {
-  it('renders a path', () => {
-    const bar = mount(
-      <svg>
-        <Bar
-          height={1000}
-          color="colorPurple"
-          highlightColor="colorPurple"
-          isSelected={false}
-          x={0}
-          rawValue={1000}
-          width={100}
-          yScale={scaleBand() as any}
-          index={1}
-          onFocus={jest.fn()}
-          tabIndex={0}
-        />
-        ,
-      </svg>,
-    );
+  describe('hasRoundedCorners', () => {
+    it('renders sharp corners if false', () => {
+      const bar = mount(
+        <svg>
+          <Bar {...defaultProps} hasRoundedCorners={false} />,
+        </svg>,
+      );
 
-    expect(bar).toContainReactComponent('path', {
-      // eslint-disable-next-line id-length
-      d: `M0 0
+      expect(bar).toContainReactComponent('path', {
+        // eslint-disable-next-line id-length
+        d: `M0 0
         h100
         a0 0 0 010 0
         v1000
         H0
         V0
         a0 0 0 010-0
         Z`,
-      fill: 'rgb(156, 106, 222)',
-      style: {transform: 'translate(0px, -1000px) rotate(0deg)'},
+      });
     });
-  });
-
-  it('rounds the corners if hasRoundedCorners is true', () => {
-    const bar = mount(
-      <svg>
-        <Bar
-          height={1000}
-          color="colorPurple"
-          highlightColor="colorPurple"
-          isSelected={false}
-          x={0}
-          rawValue={1000}
-          width={100}
-          yScale={scaleBand() as any}
-          index={1}
-          onFocus={jest.fn()}
-          tabIndex={0}
-          hasRoundedCorners
-        />
-        ,
-      </svg>,
-    );
+    it('rounds the corners if true', () => {
+      const bar = mount(
+        <svg>
+          <Bar {...defaultProps} hasRoundedCorners />,
+        </svg>,
+      );
 
-    expect(bar).toContainReactComponent('path', {
-      // eslint-disable-next-line id-length
-      d: `M3 0
+      expect(bar).toContainReactComponent('path', {
+        // eslint-disable-next-line id-length
+        d: `M3 0
         h94
         a3 3 0 013 3
         v997
         H0
         V3
         a3 3 0 013-3
         Z`,
-      fill: 'rgb(156, 106, 222)',
-      style: {transform: 'translate(0px, -1000px) rotate(0deg)'},
+      });
     });
   });
 
-  it('gives a 0 value an empty path d attribute and 0 height', () => {
-    const bar = mount(
-      <svg>
-        <Bar
-          height={0}
-          color="colorPurple"
-          highlightColor="colorPurple"
-          isSelected={false}
-          x={0}
-          rawValue={0}
-          width={100}
-          yScale={scaleBand() as any}
-          index={1}
-          onFocus={jest.fn()}
-          tabIndex={0}
-        />
-        ,
-      </svg>,
-    );
+  describe('rawValue', () => {
+    it('gives a 0 value an empty path d attribute and 0 height', () => {
+      const bar = mount(
+        <svg>
+          <Bar {...defaultProps} rawValue={0} />,
+        </svg>,
+      );
 
-    expect(bar).toContainReactComponent('path', {
-      // eslint-disable-next-line id-length
-      d: ``,
-      fill: 'rgb(156, 106, 222)',
-      style: {transform: `translate(0px, 0px) rotate(0deg)`},
+      expect(bar).toContainReactComponent('path', {
+        // eslint-disable-next-line id-length
+        d: ``,
+      });
     });
   });
 
-  it('uses the primary color when the bar is not selected', () => {
-    const bar = mount(
-      <svg>
-        <Bar
-          height={1000}
-          color="colorPurple"
-          highlightColor="colorRed"
-          isSelected={false}
-          x={0}
-          rawValue={1}
-          width={100}
-          yScale={scaleBand() as any}
-          index={1}
-          onFocus={jest.fn()}
-          tabIndex={0}
-        />
-        ,
-      </svg>,
-    );
+  describe('color', () => {
+    it('gets passed to the underlying path', () => {
+      const bar = mount(
+        <svg>
+          <Bar {...defaultProps} color="rgb(156, 106, 222)" />,
+        </svg>,
+      );
 
-    expect(bar).toContainReactComponent('path', {
-      fill: 'rgb(156, 106, 222)',
+      expect(bar).toContainReactComponent('path', {
+        fill: 'rgb(156, 106, 222)',
+      });
     });
   });
 });

src/components/BarChart/Chart.tsx

@@ -19,12 +19,13 @@ import {
   getColorValue,
   isGradientType,
 } from '../../utilities';
+import {Bar} from '../../components';
 import {YAxis} from '../YAxis';
 import {BarChartXAxis} from '../BarChartXAxis';
 import {TooltipContainer} from '../TooltipContainer';
 import {LinearGradient} from '../LinearGradient';
 
-import {AnnotationLine, Bar} from './components';
+import {AnnotationLine} from './components';
 import {
   RenderTooltipContentData,
   BarOptions,