added Glamour and remove Radium in Listbox

[huyqdang]

it seems like this is all I have to do, but is it ? Am I missing anything ?

[paniclater]

I believe that this is all you need to do in most components - however there may be some trickier issues around the media queries for breakpoints that may pop up. Most components should be similar to this though.

[paniclater]

@phantomxc@cerinman@sambev am I correct here?

[paniclater]

sorry accidentally clicked close 😳

[sambev]

I think this is the general idea, but we do want to be taking a close look at differences, sometimes it isn't always a pure 1:1.

[sambev]

Actually I think you need to change it from style to className

[huyqdang]

@sambev Oh my god, thanks Sam. I was stuck for 30 minutes wondering why the styles are jacked up. 🤦‍♂️

[cerinman]

Yes, 1:1 for most cases but as an example, the Drawer component uses break points so we'll have to make sure that is covered.

I would also suggest looking for merged styles. In the case of radium, there where places where we used the radium syntax that will have to be updated to object spread.

Radium syntax

<divstyle={[styles.item,isSelected&&styles.selectedItem]}>

Object spread

<divstyle={{ ...styles.item, ...isSelected ? styles.selectedItem : {}}}

[cerinman]

You shouldn't have to spread this.props.style in a new object here. You should be able to just do.

className={'mx-listbox'+css(this.props.style)}

[cerinman]

You might even be able to use string interpolation as well

className={`mx-listbox ${css(this.props.style)}`}

[cerinman]

Closing this in favor of pursuing a style sheet for components.