Add overflow options to layout components#311
Conversation
🎭 Playwright tests failedThe Playwright tests failed on this PR. Please check the test results and fix any issues. |
|
@rgieseke the test that's failing here is the full page gallery but when I look at the screenshots, they look identical to me. The flagged pixels come from the x-axis on the cleveland dot plot example. kind of mysterious that it's just that one and not all text... |
Indeed odd. From the call log it seems that there are multiple attempts at taking a stable screenshot. Maybe a larger initial timeout might help? |
🎭 Playwright tests failedThe Playwright tests failed on this PR. Please check the test results and fix any issues. |
🎭 Playwright tests failedThe Playwright tests failed on this PR. Please check the test results and fix any issues. |
|
Increasing the timeout didnt have any effect. Looks like it's some very slight differences in anti-aliasing: I think we maybe just redo that one |
|
Yeah, it seems there is another timeout which gets increased until the screenshot is stable or something. Haven't found yet whether it's possible to configure that. In any case odd that only this specific plot is wrong. |
🎭 Playwright tests failedThe Playwright tests failed on this PR. Please check the test results and fix any issues. |
|
I installed the PR locally (
When I add the new prop (
When I use two separate <Svg overflow="visible">
<AxisX
gridlines={false}
ticks={data.map(d => d[xKey]).sort((a, b) => a - b)}
format={formatLabelX}
snapLabels
tickMarks
/>
<AxisY ticks={4} format={formatLabelY} />
</Svg>
<Svg overflow="hidden">
<MultiLine />
</Svg>
Would that splitting be required with the new approach or would I have to change the padding somehow? |
|
For <Html>
<AxisX
gridlines={false}
ticks={data.map(d => d[xKey]).sort((a, b) => a - b)}
format={formatLabelX}
snapLabels
tickMarks
/>
<AxisY format={formatLabelY} />
</Html>
<ScaledSvg overflow="hidden">
<MultiLine />
</ScaledSvg> |
|
Hm ya that isn't good. |
|
Oh actually, he was doing it with the axes in a separate |
Not sure I understand, the The first attempt (which led to using two |
Yeah, I had also thought that maybe one could do the clipping/overflow hiding in the |
Yes, sorry that wasn't as clear as it could have been. The However, the If this looks good to you, we'll merge it in! |
|
Got it, thanks for the explanation. Looks good to me! |
|
Great! Thanks for taking a look and for these other PRs. I'll go through them and then cut a new |
Closes #283
This standardizes the how
paddingworks on layout components and gets rid of the<g>inner tag on Svg layout components. Because of that, it will be a breaking change although I expect very few people use those features.