new(axis): enable customization of tickLineProps #1211
Conversation
|
I could improve this by using |
There was a problem hiding this comment.
Thanks for the PR @LoiKos 🙌 I think this is looking good and thanks for the added tests! 🙏
I left a comment about an approach for tickLineProps if you want to give that a shot. Let me know if you have any other questions about it.
| @@ -34,7 +36,7 @@ export default function Ticks<Scale extends AxisScale>({ | |||
| className={cx('visx-axis-tick', tickClassName)} | |||
| transform={tickTransform} | |||
| > | |||
| {!hideTicks && <Line from={from} to={to} stroke={tickStroke} strokeLinecap="square" />} | |||
| {!hideTicks && <Line from={from} to={to} stroke={tickStroke} strokeWidth={tickStrokeWidth ?? strokeWidth} strokeLinecap="square" />} | |||
There was a problem hiding this comment.
I agree that this could be slightly more generic if we add tickLineProps, the props for <Line /> are currently a combination of specific LineProps and all SVGLineElement props as defined here.
The union currently isn't exported, but you should be able to access them with React.ComponentProps, something like
type LineProps = Omit<React.ComponentProps<typeof Line>, 'to' | 'from'>;There was a problem hiding this comment.
I will give a shot on adding LineProps
|
I have pushed a new version with |
Co-authored-by: Chris Williams <williaster@users.noreply.github.com>
packages/visx-axis/src/types.ts
Outdated
| @@ -11,6 +12,8 @@ export type AxisScale<Output extends AxisScaleOutput = AxisScaleOutput> = | |||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | |||
| D3Scale<Output, any, any>; | |||
|
|
|||
| type LineProps = Omit<React.ComponentProps<typeof Line>, 'to' | 'from'>; | |||
There was a problem hiding this comment.
oof, looks like this somehow results in a very complex type such that TS throws
I think if we simplify this to just type LineProps = Omit<React.SVGProps<SVGLineElement>, 'to' | 'from'>; (TS seems to throw if we don't omit to/from because the types are different for the native SVGLineElement) and remove the import Line from '@visx/shape/lib/shapes/Line'; line above we should be good. Sorry for the back and forth on this!
There was a problem hiding this comment.
I have fixed this :)
|
Sorry looks like our happo/visual diffing CI is returning some errors at the moment and failing the build. I reached out to our contact to help debug. |
|
hey @LoiKos sorry for the CI troubles. we think this will be fixed if you force push the branch, so maybe you could rebase on the latest master? If you're over it let me know and I can take over the PR to figure out any lingering issues 😅 |
|
Ok no problem i'll do that tomorrow |
|
i have merge master into my branch is it possible to restart build ? |
|
hey @LoiKos it should restart as soon as you push your branch, I'll keep an eye on it once I see the new commit! |
|
Hey @williaster , i updated the branch to follow last change on visx/master. Could you take a look if you have a moment 😄 ? |
|
We're having auth issues with happo but the other CI checks look good 👍 thanks again for the contribution! 🙏 |
|
🎉 This PR is included in version |
💥 Breaking Changes
strokeWidthis used as default tick stroke width (can be override)📝 Documentation
add support to configure stroke width:
tickStrokeWidth(defaultValue: undefined, optional) define stroke widthstrokeWidth(default, defaultValue: 1) tick stroke width is equal to parent strokeWidth