[popups] Add data-closed style hook #882
Conversation
Netlify deploy preview |
| @@ -90,10 +90,11 @@ const AlertDialogPopup = React.forwardRef(function AlertDialogPopup( | |||
| const state: AlertDialogPopup.State = React.useMemo( | |||
| () => ({ | |||
| open, | |||
| mounted, | |||
There was a problem hiding this comment.
Not strictly related to these changes, but this now becomes public API - I feel like "mounted" doesn't describe the behavior very well, especially when keepMounted = true. "visible" could be a better option.
There was a problem hiding this comment.
Perhaps hidden to align with the DOM attribute that's being set?
There was a problem hiding this comment.
visible sounds good too though
There was a problem hiding this comment.
I think hidden makes the most sense to align with the attr. visible adds yet another term to deal with
| @@ -90,7 +90,7 @@ const AlertDialogPopup = React.forwardRef(function AlertDialogPopup( | |||
| const state: AlertDialogPopup.State = React.useMemo( | |||
| () => ({ | |||
| open, | |||
| mounted, | |||
| hidden: !mounted, | |||
There was a problem hiding this comment.
Can we also use the same term internally?
There was a problem hiding this comment.
The hidden value returned from useAnchorPositioning() refers to it being hidden but still mounted, which is when the anchor is hidden, so you want the popup to be hidden too.
Our prop is called hideWhenDetached, and we don't expose a style hook, simply using a functional style instead. I'm wondering if we actually should always expose a style hook and remove hideWhenDetached, so they can just use CSS and allows for further customization.
Adds
hiddento popup components'State, and whentrue(i.e.hiddenis applied withkeepMounted) it has adata-closedstyle hook.