Skip to content
This repository has been archived by the owner on Mar 4, 2020. It is now read-only.

feat(Popup): added on prop for triggering the popup on click, hover or focus #622

Merged
merged 28 commits into from
Jan 8, 2019

Conversation

mnajdova
Copy link
Contributor

@mnajdova mnajdova commented Dec 17, 2018

This PR aims to solve #620 by adding on prop on the Popup, that can receive one of the values click, hover, focus, or array of these (except the click and hover cannot be defined at the same time), thus allowing the user to specify the event that should trigger the popup. In addition to this, there is new property added mouseLeaveDelay that is representing the delay in ms for the mouse leave event, before the popup will be closed (There must be some timeout before the mouse is moved form the trigger to the content of the popup, and the popup should not be closed in that period. This property is defining how long that timeout should be - the default is 500ms).

TODO:

  • escape should close the Popup when the on property's click is specified
  • escape should close the Popup when the on property's focus is specified
  • when the hover value is specified, because of accessibility consistency, we have to open the popup on click (enter/space)
  • escape should closed the Popup when the on property's the hover is specified (we should subscribe to the EventStack keyDown for this). This will be addressed in a separate PR, alongside with the other cases of handling the escape pressed key.
  • focus trap zone with focusable element inside the content's content doesn't work with focus, as focusing back the element is opening the Popup again. Adressed in a follow up PR with together with the escape key handling.

…er event of the popup on click or hover

-added usage examples
src/components/Popup/Popup.tsx Outdated Show resolved Hide resolved
src/components/Popup/Popup.tsx Show resolved Hide resolved
@alinais alinais added this to mnajdova in Core Team Dec 19, 2018
manajdov added 5 commits December 20, 2018 12:36
-copied handlers on the primitive content element
-hover should by default add the focus handler as well
# Conflicts:
#	CHANGELOG.md
#	src/components/Popup/PopupContent.tsx
-fixed examples imports
@mnajdova mnajdova changed the title feat(Popup): added on prop for triggering the popup on click or hover feat(Popup): added on prop for triggering the popup on click, hover or focus Dec 21, 2018
@hughreeling hughreeling added the vsts Paired with ticket in vsts label Jan 2, 2019
@@ -63,6 +71,9 @@ export interface PopupProps
*/
offset?: string

/** Events triggering the popup. */
on?: PopupEvents | PopupEventsArray
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This type allows this:

on={['click', 'click']}

TS playground

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I want to restrict using 'click' together with 'hover'. Adding the array ['click', 'click'] is not a bug, so I don't know it we want to add some other restrictions for this.

Core Team automation moved this from mnajdova to bcalvery Jan 7, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🚀 ready for review vsts Paired with ticket in vsts
Projects
No open projects
Core Team
  
bcalvery
Development

Successfully merging this pull request may close these issues.

None yet

7 participants