Allow arrow padding to be configured for a step. #3051
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@JakeThurman is attempting to deploy a commit to the shipshapecode Team on Vercel. A member of the Team first needs to authorize it. |
|
@RobbieTheWagner Any chance this could make it in soon? I'd rather not create an special fork for my company to use, and it sounds like this is important to have for us. |
|
Hi @JakeThurman apologies for the extremely late reply on this! Is this something that could be fixed via CSS in your app? We do heavy arrow customization via CSS for our landing page with things like this: .shepherd-element[data-popper-placement^=top]>.shepherd-arrow {
bottom:-8px
} |
|
@RobbieTheWagner No worries on the delay. I appreciate you taking the time to reply now! It's certainly possible, but it would only work in isolated cases. floating-ui has lots of logic to make sure the arrow points at the anchor element, and this would eliminate that down to just a fixed number of px from the edge. (i.e., middleware can shift the This floating-ui padding parameter configures the closest the arrow can get to the edge of the balloon. It seems to be set to 4px because of the default shepherd CSS. Finally, the floating-ui documentation explicitly says to set this parameter to your border-radius, which is what led me to open this PR so I could do so. See: https://floating-ui.com/docs/arrow#padding |
| const arrowOptions = | ||
| typeof step.options.arrow === "object" | ||
| ? step.options.arrow | ||
| : { padding: 4 }; | ||
|
|
There was a problem hiding this comment.
| const arrowOptions = | |
| typeof step.options.arrow === "object" | |
| ? step.options.arrow | |
| : { padding: 4 }; |
| options.middleware.push( | ||
| arrow({ element: arrowEl, padding: hasEdgeAlignment ? 4 : 0 }) | ||
| arrow({ element: arrowEl, padding: hasEdgeAlignment ? arrowOptions.padding : 0 }) |
There was a problem hiding this comment.
| arrow({ element: arrowEl, padding: hasEdgeAlignment ? arrowOptions.padding : 0 }) | |
| arrow({ element: arrowEl, padding: hasEdgeAlignment ? step.options.arrow?.padding ?? 4 : 0 }) |
What would you think about putting this inline here? I think it is a little less verbose.
| const testElement = document.createElement('div'); | ||
| const tour = new Tour(); | ||
| const step = new Step(tour, { | ||
| arrow: { padding: 10 }, |
There was a problem hiding this comment.
Thanks for adding tests! Could we perhaps add an assertion checking that padding of 10px is applied to the arrow element?
| } | ||
| }); | ||
|
|
||
| expect( |
There was a problem hiding this comment.
For this one, perhaps we could also assert padding, and I think it would be 0px here?
Hi! First time contributer.
We have a >4px border radius on out shepherd-element, and our looking to increase it so the arrow doesn't overlay the border radius:
This PR allows you to configure the arrow padding using something like:
arrow: { padding: 10 }This builds and tests pass locally, please let me know if there's anything else you need from me on this PR, or anything I missed!