Add dialog demo

[dvdherron]

Change into the src/dialog directory
Run npx http-server .
Open http://localhost:8080/

[jamesnw]

I think this looks good overall. I few minor things, and I think I'd like a Miriam/Stacy review as well!

[jamesnw]

Could we do a play on JS = jumping spiders?

"Less JS (JavaScript), More JS (Jumping Spiders)"
"Vanilla JS (but the JS is Jumping spiders)"

[dvdherron]

What about "Less JS, More Jumping Spiders"? 🕷️🕸️

[netlify]

✅ Deploy Preview for oddbaseline ready!

Name	Link
🔨 Latest commit	a4ced14
🔍 Latest deploy log	https://app.netlify.com/projects/oddbaseline/deploys/691efe9a20902f0008f0b0a4
😎 Deploy Preview	https://deploy-preview-4--oddbaseline.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[mirisuzanne]

the out animation is jumpy because display animates so much faster than opacity. Consider making display one of the slowest, so it doesn't disappear before it's done fading?

[dvdherron]

@mirisuzanne I think I addressed all of the nesting and animation issues, so this is ready for another quick look.

[mirisuzanne]

@dvdherron looks great. There's a little linting that I think would clean up the code some, but isn't essential and we've never discussed any 'rules for nesting' or anything. To me it reads better if the nested stuff can be ordered:

1. properties
2. variants (like &[open])
3. descendants (like [data-heading])

Since there's specificity differences at play, I think that can all be reordered safely without impacting the cascade at all.

[dvdherron]

@mirisuzanne thanks. cleaned this up in 4fb757a

[jamesnw]

I had a few minor quibbles, but also the exit animations are only working in Chrome. In Firefox, it just disappears, but in Safari, it seems that overlay flips to none immediately, which puts the dialog in the bottom layer's flow, below the credits, causing the page to scroll down.

I suspect this is due to overlay animation not being supported in Safari or Firefox. I think we need to mention that in the article, and also see if we can find a way for the Safari experience not to jump so much. Potentially put the exit animation in a @supports block? Although I'm not sure how to feature detect this.

Also, I think whatever we find here will also need to be applied to the Dropdown demo.

[dvdherron]

I had a few minor quibbles, but also the exit animations are only working in Chrome. In Firefox, it just disappears, but in Safari, it seems that overlay flips to none immediately, which puts the dialog in the bottom layer's flow, below the credits, causing the page to scroll down.

I suspect this is due to overlay animation not being supported in Safari or Firefox. I think we need to mention that in the article, and also see if we can find a way for the Safari experience not to jump so much. Potentially put the exit animation in a @supports block? Although I'm not sure how to feature detect this.

Also, I think whatever we find here will also need to be applied to the Dropdown demo.

Doing a feature check for overlay: auto was the best/closest property I could think of. I moved the transition inside of a supports block in 795a94b.
I can see that the prevents the animation from happening in Firefox but I'm not able to test on the latest version of Safari. Does that fix the issue you were seeing @jamesnw?

I'll add notes for adding this note to the article and add the same approach to the dropdown if we think this works.

[jamesnw]

Doing a feature check for overlay: auto was the best/closest property I could think of. I moved the transition inside of a supports block in 795a94b. I can see that the prevents the animation from happening in Firefox but I'm not able to test on the latest version of Safari. Does that fix the issue you were seeing @jamesnw?

I'll add notes for adding this note to the article and add the same approach to the dropdown if we think this works.

I think this works, but I'm wondering if there's an easy way to only disable the exit animation, or if it has to be all or nothing like this?

[dvdherron]

I think this works, but I'm wondering if there's an easy way to only disable the exit animation, or if it has to be all or nothing like this?

@jamesnw Ok, I figured out how to test on the latest version of Safari and was finally able to see what was happening. Shortening the display transition duration seems to get rid of the issue on exit animations. And the entry transitions are back:

7aef159

[jamesnw]

Transitions look good!