new(xychart, react-spring): add tickLineProps to AnimatedTicks (#1490)

airbnb · May 2, 2022 · 029e0b2 · 029e0b2
1 parent 1b5897b
commit 029e0b2
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 1 deletion.
diff --git a/packages/visx-axis/src/types.ts b/packages/visx-axis/src/types.ts
@@ -10,7 +10,7 @@ export type AxisScaleOutput = number | NumberLike | undefined;
 export type AxisScale<Output extends AxisScaleOutput = AxisScaleOutput> =
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   D3Scale<Output, any, any>;
-type LineProps = Omit<React.SVGProps<SVGLineElement>, 'to' | 'from'>;
+type LineProps = Omit<React.SVGProps<SVGLineElement>, 'to' | 'from' | 'ref'>;
 
 type FormattedValue = string | undefined;
 

diff --git a/packages/visx-react-spring/src/axis/AnimatedTicks.tsx b/packages/visx-react-spring/src/axis/AnimatedTicks.tsx
@@ -19,6 +19,7 @@ export default function AnimatedTicks<Scale extends AxisScale>({
   tickStroke = '#222',
   tickTransform,
   ticks,
+  tickLineProps,
   animationTrajectory,
 }: TicksRendererProps<Scale> & { animationTrajectory?: AnimationTrajectory }) {
   const animatedTicks = useTransition(ticks, {
@@ -50,6 +51,7 @@ export default function AnimatedTicks<Scale extends AxisScale>({
                 stroke={tickStroke}
                 strokeLinecap="square"
                 strokeOpacity={opacity}
+                {...tickLineProps}
               />
             )}
             {/** animate the group, not the Text */}

diff --git a/packages/visx-xychart/test/components/Axis.test.tsx b/packages/visx-xychart/test/components/Axis.test.tsx
@@ -101,4 +101,21 @@ describe('<BaseAxis />', () => {
     expect(VisxLine).toHaveAttribute('stroke-width', `${axisStyles.axisLine.strokeWidth}`);
     expect(VisxLine).toHaveAttribute('stroke', axisStyles.tickLine.stroke);
   });
+
+  it('should accept props for tickline', () => {
+    const tickLineProps = { strokeWidth: 12345, stroke: 'banana', opacity: 0.5 };
+    const { container } = setup(
+      <BaseAxis
+        orientation="left"
+        AxisComponent={() => <AnimatedAxis orientation="top" tickLineProps={tickLineProps} />}
+      />,
+    );
+
+    const VisxAxisTick = container.querySelector('.visx-axis-tick > line');
+
+    // specified styles in the props
+    expect(VisxAxisTick).toHaveAttribute('stroke-width', `${tickLineProps.strokeWidth}`);
+    expect(VisxAxisTick).toHaveAttribute('stroke', `${tickLineProps.stroke}`);
+    expect(VisxAxisTick).toHaveAttribute('opacity', `${tickLineProps.opacity}`);
+  });
 });