Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(click-away-wrapper): add ClickAwayWrapper component to internal directory #5188

Merged
merged 5 commits into from
Jun 13, 2022

Conversation

edleeks87
Copy link
Contributor

@edleeks87 edleeks87 commented May 27, 2022

Proposed behaviour

Adds ClickAwayWrapper component to handle triggering an action if a mousedown/ click event is detected
outside of it

Adds the ClickAwayWrapper to enable the PopoverContainer to close when a mousedown event is
detected from outside of the wrapper boundaries

Adds ClickAwayWrapper to Date and Submenu as well

fix #5017, fix #5158

Current behaviour

No ClickAwayWrapper component exists. PopoverContainer does not close when click is outside of it. Date and Submenu have their own implementations to handle closing when click outside occurs

Checklist

  • Commits follow our style guide
  • Related issues linked in commit messages if required
  • Screenshots are included in the PR if useful
  • Unit tests added or updated if required
  • Cypress automation tests added or updated if required
  • Storybook added or updated if required
  • Translations added or updated (including creating or amending translation keys table in storybook) if required
  • Typescript d.ts file added or updated if required

QA

  • Tested in CodeSandbox/storybook
  • Add new Cypress test coverage if required
  • Carbon implementation matches Design System/designs
  • UI Tests GitHub check reviewed if required

Additional context

Testing instructions

Test Date, Submenu and PopoverContainer stories, clicking inside should not close the components but clicking outside should

The following CodeSandbox is an example of the broken behaviour.
You can see the new behaviour by looking at the version in the comment by codesandbox[bot].

https://codesandbox.io/s/mystifying-northcutt-c3slyx?file=/src/index.js

@codesandbox-ci
Copy link

codesandbox-ci bot commented May 27, 2022

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 5c38e7f:

Sandbox Source
carbon-quickstart Configuration
carbon-quickstart-typescript Configuration
carbon-quickstart PR
suspicious-nash-x887pj PR
vigorous-payne-uir4on Issue #5158

@cypress
Copy link

cypress bot commented May 27, 2022



Test summary

1317 0 1 0Flakiness 0


Run details

Project carbon
Status Passed
Commit 5c38e7f
Started Jun 13, 2022 1:01 PM
Ended Jun 13, 2022 1:07 PM
Duration 05:18 💡
OS Linux Debian - 10.10
Browser Chrome 100

View run in Cypress Dashboard ➡️


This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

@edleeks87 edleeks87 force-pushed the click-away-wrapper branch 2 times, most recently from cd23fa4 to cb1c4e1 Compare May 30, 2022 10:19
Parsium
Parsium previously approved these changes May 31, 2022
@DipperTheDan DipperTheDan self-requested a review June 6, 2022 09:57
DipperTheDan
DipperTheDan previously approved these changes Jun 6, 2022
Parsium
Parsium previously approved these changes Jun 6, 2022
@edleeks87 edleeks87 marked this pull request as ready for review June 6, 2022 10:29
@edleeks87 edleeks87 requested review from a team as code owners June 6, 2022 10:29
@edleeks87 edleeks87 dismissed stale reviews from Parsium and DipperTheDan via 9f56b2a June 6, 2022 13:50
@edleeks87 edleeks87 force-pushed the click-away-wrapper branch from 18220fa to 9f56b2a Compare June 6, 2022 13:50
DipperTheDan
DipperTheDan previously approved these changes Jun 6, 2022
Parsium
Parsium previously approved these changes Jun 6, 2022
…directory

Adds `ClikcAwayWrapper` component to handle triggering an action if a mousedown event is detected
outside of it
…lick outside detected

Adds the `ClickAwayWrapper` to enable the `PopoverContainer` to close when a `mousedown` event is
detected from outside of the wrapper boundaries

fix #5017, fix #5158
@edleeks87 edleeks87 dismissed stale reviews from Parsium and DipperTheDan via 3b09573 June 10, 2022 15:53
@edleeks87 edleeks87 force-pushed the click-away-wrapper branch from 9f56b2a to 3b09573 Compare June 10, 2022 15:53
@edleeks87 edleeks87 merged commit f3ddfde into master Jun 13, 2022
@edleeks87 edleeks87 deleted the click-away-wrapper branch June 13, 2022 13:21
@carbonci
Copy link
Collaborator

🎉 This PR is included in version 107.1.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
6 participants