From 029e0b2d8f1a0d6ea1a9b7072638fd1bad90762d Mon Sep 17 00:00:00 2001
From: Zenith <z@zenith.dev>
Date: Mon, 2 May 2022 15:55:14 -0700
Subject: [PATCH] new(xychart, react-spring): add tickLineProps to
 AnimatedTicks (#1490)

---
 packages/visx-axis/src/types.ts                 |  2 +-
 .../src/axis/AnimatedTicks.tsx                  |  2 ++
 .../visx-xychart/test/components/Axis.test.tsx  | 17 +++++++++++++++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/visx-axis/src/types.ts b/packages/visx-axis/src/types.ts
index 53d216eda..59db2c984 100644
--- 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
index ed276f665..356ce8394 100644
--- 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
index 6a6e1450b..0a844ed9f 100644
--- 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}`);
+  });
 });