Add dropdown demo #1
Conversation
|
@jamesnw I have some style cleanup edits I thought would be easier to do locally. Could you grant me access here? |
|
@dvdherron Whoops, sorry- you should have access now! |
|
@stacyk This is ready for style review whenever you're ready |
✅ Deploy Preview for oddbaseline ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
@jamesnw The entry and exit transitions are working fine on the outer popover. Haven't figured out yet why the exit animation isn't working on the nested popovers though. |
src/dropdown/style.css
Outdated
| opacity var(--slow), | ||
| inset var(--fast), | ||
| overlay var(--slow) allow-discrete, | ||
| display var(--slow) allow-discrete; |
There was a problem hiding this comment.
Wasn't there an issue with allow-discrete and Firefox on the CQ demo? Does that apply here as well?
There was a problem hiding this comment.
Yeah, but I'm not seeing the exit animation in Chrome either. Anything obvious sticking out to you @stacyk?
| const formerLink = document.querySelector("[aria-current]"); | ||
| if (formerLink) formerLink.removeAttribute("aria-current"); | ||
|
|
||
| const linkToRoute = document.querySelector(`[href="${newPage}"]`); |
There was a problem hiding this comment.
Not sure what's happening, but this line seems to be crashing in Safari. I'll look into this more.
Seems like Safari requires |
This is defined on |
| position-try-fallbacks: flip-inline; | ||
| inline-size: max-content; | ||
| min-inline-size: anchor-size(); | ||
| inset-block-start: var(--outer-popover-inset, var(--popover-offset)); |
There was a problem hiding this comment.
The inset here and in nested seems to be breaking Safari somehow? Is it actually needed?
There was a problem hiding this comment.
Looking into this, but it's what we're using to slide the outer popovers down and the nested popovers horizontally. I'll see if there's a fix or if it can be done a different way.
There was a problem hiding this comment.
Don’t do too much with this yet- I’d like to figure out why this is breaking Safari first
does this fix it? 5818b8f I have only tested on an older version of Safari on Saucelabs and it looks fine there. |
Run
npx http-server .Open http://localhost:8080/src/dropdown