-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Conversation
…issuecomment-382850059 1. Typo correction (Uppercase to Lowercase) of package name in package.json 2. Wrapped Flyout and Thread Settings Icon Button with React Popper to handle cutting out of dropdown due to scrollable container; removed unnecessary styles to complement this change. 3. Wrapped Flyout with OutsideClickHandler to handle click outside of it (and handle its closing), instead of setting a transparent div over the whole page to handle closing of the dropdown.
@brianlovin. Hello! I could use some help to understand what is happening here, namely why ci tests are failing, and the 'expected' awaiting status. |
@gdad-s-river the ci failing should have been fixed with #2930 - any chance you could pull the latest alpha code and re push to this PR to trigger a new build? |
@brianlovin I've a small question. Using One hits the delete thread option |
@gdad-s-river that's just fine for it to close behind the modal if a person selects 'delete' in the dropdown :) |
Looking through the CI failures now, it looks like 7 of them are related to the action bar, which makes me think they might be failing because of the changes here. If you do |
@gdad-s-river I pulled your branch and made a couple small changes to fix the tests and the overall behavior of the flyout (we don't want it to close immediately when the user clicks on something - we have loading states and confirmation states for things like locking the thread, which are useful bits of feedback to users). Anyways, everything is now passing for me locally, we'll see how things hold up here in CI! |
All tests pass! I'm going to get this on alpha.spectrum.chat right now :) |
@brianlovin oops, I have no idea how I missed your comment notifications 😅. I had fixed the CI issues 😁. But thank you for doing it yourself! This was my first experience seeing what end to end tests look like, and how they could be so beneficial to enforce required behaviour. I learnt a lot. Thanks to @FezVrasta for helping me out with finding an issue and generously putting time to help me figure things out when I was struggling with React Popper. Working on this issue, I made a small video explaining a small component OutsideClicker, which sparked this twitter thread which ultimately (again thanks to another generous person Timur), after numerous twitter DMs led to this codesandbox. I look forward to contributing more, because spectrum.chat is awesome! |
💜💜 Thanks @gdad-s-river - this is live by the way! |
Status
Deploy after merge (delete what needn't be deployed)
Release notes for users (delete if codebase-only change)
(fix for #2917) — Wrapped Flyout and Thread Settings Icon Button with React Popper to improve [and handle well] cutting out of dropdown due to scrollable container (react popper automatically switches its position from top↔️ bottom); removed unnecessary styles to complement this change.
(fix for https://github.com/withspectrum/spectrum/issues/2917#issuecomment-382850059) — Wrapped Flyout with OutsideClickHandler to handle click outside of it (to handle its closing), instead of setting a transparent div over the whole page to handle closing of the dropdown.
Gif of improved behavior
Small [issue unrelated] typo fix