Revery: UI Styles: Hover Styles

[akinsho]

with @samatar26's change in #313, I think we can actually implement hover styles :thinking:. I was thinking we could copy bs-css api which looks like

let styles = [
  color(Green)
  hover([
   color(Red)
  ])
]

under the hood that gets converted to a string. In our case was thinking
we could have the style added to allProps in Style.re as

type hoverProps = 
// other stuff in allProps except hover should be a type error if you nest hover
| Hover(list(allProps) 

in the primitive(?) you could add and remove the hover list i.e. on mouseOver

mergeStyles(~source=NonHover, ~target=withHover)

and on mouse out remove the hover from the list that's passed down

one concern would be that you hijack the user's mouseOver and mouseOut so I suggest wrapping the handler

onMouseOut={e => {
  usersFn()
  removeHover(styles)
}

onMouseOver={e => {
 usersFn()
 applyHover(styles)
}

These are just an idea of how there's probably quite a few bits I haven't consider but hopefully this helps anyone curious about tackling it.

[samatar26]

@Akin909 thanks for writing down your thoughts on how to implement the hover style api 💯. I think it'll be a great help in tackling the issue. Another idea I had was since we've got access to the actual nodes, could we maybe implement this on the node layer?

[akinsho]

@samatar26 if its possible we have some other styles like overflow which were dealt with there but I personally worry that layer gets very complex with all this adhoc logic especially if it isn't necessary to deal with it at that layer, I'd be curious what you think @bryphe? (should manipulating the style lists live at this layer, my inclination is not but then again it is the only common point for View and Text so it might have to)

[lessp]

Has anyone started this yet? I was fiddling around with some UI and noticed that there are some UI-elements that could benefit from another look!

e.g. something similar as your proposal might be a good idea for disabled as well, but I guess that'd only be for certain elements 🙂

[akinsho]

@lessp pretty sure no one is looking at this atm :+1: it'd be awesome to have functionality like this :100:

[lessp]

I'll close this in favour of:

https://github.com/revery-ui/revery/pull/868

... and with regards to https://github.com/revery-ui/revery/issues/489