added Glamour and remove Radium in Listbox #757
Conversation
|
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. |
|
@phantomxc @cerinman @sambev am I correct here? |
|
sorry accidentally clicked close 😳 |
|
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. |
|
Actually I think you need to change it from |
|
@sambev Oh my god, thanks Sam. I was stuck for 30 minutes wondering why the styles are jacked up. 🤦♂️ |
|
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 <div style={[styles.item, isSelected && styles.selectedItem]}>Object spread <div style={{ ...styles.item, ...isSelected ? styles.selectedItem : {} }} |
| @@ -106,10 +106,9 @@ class Listbox extends React.Component { | |||
| return ( | |||
| <div | |||
| aria-label={this.props['aria-label']} | |||
| className='mx-listbox' | |||
| className={'mx-listbox' + css({ ...this.props.style })} | |||
There was a problem hiding this comment.
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)}There was a problem hiding this comment.
You might even be able to use string interpolation as well
className={`mx-listbox ${css(this.props.style)}`}
|
Closing this in favor of pursuing a style sheet for components. |
it seems like this is all I have to do, but is it ? Am I missing anything ?