Open didaquis opened 2 years ago
Currently, no. This is the component for it https://github.com/shipshapecode/shepherd/blob/master/src/js/components/shepherd-cancel-icon.svelte
I suppose we could add the ability to pass any arbitrary attributes down to components. Not sure if that would be good to do or not.
Adding those attributes can be useful for selectors. For example: https://docs.cypress.io/guides/references/best-practices#Selecting-Elements
This is useful in cases where the value of the “aria-label” changes dynamically. Adding a non-dynamic attribute can help you get a proper selector for e2e testing.
@didaquis if you have a solution in mind that works for your use case, could you please open a PR?
This was requested for buttons here as well https://github.com/shipshapecode/angular-shepherd/issues/623 so perhaps we could make the components pass any arbitrary attributes down to the elements?
In my opinion, will be cool something like this:
This code...
cancelIcon: {
enabled: true,
label: 'close the tour',
dataAttributes: [
{
id: 'foo', value: 'someData'
},
{
id: 'bar', value: '1234'
},
]
},
... will produce this
<button aria-label="close the tour" data-foo="someData" data-bar="1234" class="shepherd-cancel-icon" type="button"><span aria-hidden="true">×</span></button>
@didaquis if you have a solution in mind that works for your use case, could you please open a PR?
To be honest, I don't have enough time right now to investigate how the library works inside and implement the functionality. Sorry
I would suggest allowing passing any arbitrary attributes. Something like:
attributes: [
'data-foo-bar': 123,
class: 'foo',
style: 'color: red'
]
@EmNicholson93 could you work on supporting this please?
@rwwagner90 happy to, I was already thinking it'd be a good one to tackle as I think it'll apply to a few existing issues or at least point me in the same direction as a few other issues.
hi @Steezli
Is there any news related to this issue?
Hello.
I would like to know if there is a way to add a data attribute on the cancel tour icon.
In the documentation, it indicates that these are the only possible options:
Using this options...
... you will get this:
But I would like to get something like this:
Is there any way to add this
data-whatever="some-value"
?