fix(vx-legend): fix LabelLegendProps to include HTMLDivElement props,…

… add test
airbnb · Jun 17, 2020 · 292854d · 292854d
1 parent 092e991
commit 292854d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/packages/vx-legend/src/legends/Legend/LegendLabel.tsx b/packages/vx-legend/src/legends/Legend/LegendLabel.tsx
@@ -1,21 +1,24 @@
 import React from 'react';
 
-export type LegendLabelProps = {
+export type LegendLabelOwnProps = {
   align?: string;
   label?: React.ReactNode;
   flex?: string | number;
   margin?: string | number;
   children?: React.ReactNode;
 };
 
+export type LegendLabelProps = LegendLabelOwnProps &
+  Omit<React.HTMLProps<HTMLDivElement>, keyof LegendLabelOwnProps>;
+
 export default function LegendLabel({
   flex = '1',
   label,
   margin = '5px 0',
   align = 'left',
   children,
   ...restProps
-}: LegendLabelProps & Omit<React.HTMLProps<HTMLDivElement>, keyof LegendLabelProps>) {
+}: LegendLabelProps) {
   return (
     <div
       className="vx-legend-label"

diff --git a/packages/vx-legend/test/Legend.test.tsx b/packages/vx-legend/test/Legend.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { scaleLinear } from '@vx/scale';
 
-import { Legend } from '../src';
+import { Legend, LegendLabel } from '../src';
 
 const defaultProps = {
   scale: scaleLinear<number>({
@@ -39,4 +39,11 @@ describe('<Legend />', () => {
       flexDirection: 'row',
     });
   });
+
+  test('it should pass through legendLabelProps to legend labels', () => {
+    const style = { fontFamily: 'Comic Sans' };
+    const wrapper = shallow(<Legend {...defaultProps} legendLabelProps={{ style }} />);
+    const label = wrapper.find(LegendLabel).first();
+    expect(label.prop('style')).toEqual(style);
+  });
 });