Hi, I’m trying to use Atlaskit Onboarding and I can’t get the buttons to work. I have created a project with “npx create-react-app”, replaced App with SpotlightBasicExample, included the spotlight stuff from atlaskit and replaced the lorem with just a div. The file is a js file (not typescript). If I run this I can click on the button to start the onboarding. But when the purple dialog boxes appear I can’t click on the buttons. I can use the keyboard to navigate to the button and they work. I inspected the HTML and one of the divs (that contains the buttons) has the css pointer-events:none.
If I create a project and run as typescript then the buttons work
Does anyone know why this doesn’t work for me and any ideas on getting it to work without installing typescript.
I’ve also noticed that dialogPlacement doesn’t work in javascript but it does in typescript.
The documentation also says there is a property width but there isn’t, typescript shows this up as an error. There is one called dialogWidth which seems to work.
Does anyone know if Atlaskit is meant for React using javascript or is it only meant for typescript?
I’m assuming these are bugs so does anyone know what project I create bug ticket under https://ecosystem.atlassian.net? Or is there another place for bugs in Atlaskit?
Found the problem (thanks to @remie) If you use styled components 4.x then it doesn’t work. My typescript example just happened to use 3.2.6 and the es script used 4.x. When I changed the es script to 3.2.6 it worked as well.
TLDR: Don’t use styled components 4.x with atlaskit