refactor(styles): Migrate IssueListItem to Styled Components #578
Conversation
Migrate Stylesheet styles to styled components. gitpoint#532
| align-items: flex-start; | ||
| justify-content: center; | ||
| padding-right: 10; | ||
| padding: 5; |
There was a problem hiding this comment.
Shorthands properties should have units.
| paddingVertical: 5, | ||
| borderBottomWidth: 1, | ||
| borderBottomColor: colors.greyLight, | ||
| }, | ||
| closedIssue: { |
There was a problem hiding this comment.
I think it can be removed, because nowhere uses it.
There was a problem hiding this comment.
The closeIssue style is used in Line 70.
There was a problem hiding this comment.
Oh yes, I forget to expand those collapsed codes.
| @@ -99,10 +103,10 @@ export const IssueListItem = ({ type, issue, navigation, locale }: Props) => ( | |||
| titleStyle={styles.title} | |||
| subtitleStyle={styles.subtitle} | |||
| /> | |||
There was a problem hiding this comment.
Once #619 is merged, this <ListItem> can be converted as a styled component using this:
const Issue = styled(ListItem).attrs({
containerStyle: {
// old style attributes
},
titleStyle: {
// old style attributes
},
subtitleStyle: {
// old style attributes
}
})``;There was a problem hiding this comment.
#619 is merged, you should now be able to convert the react-native-elements components.
| @@ -99,10 +103,10 @@ export const IssueListItem = ({ type, issue, navigation, locale }: Props) => ( | |||
| titleStyle={styles.title} | |||
| subtitleStyle={styles.subtitle} | |||
| /> | |||
| <View style={styles.commentsContainer}> | |||
| <CommentsContainer> | |||
| <Icon name="comment" type="octicon" size={18} color={colors.grey} /> | |||
There was a problem hiding this comment.
I'm wondering if we should define a new styled component here (same way as ListItem), and have all this static props in the styled component.
The JSX code would then simply be something like: <CommentIcon />
What do you think of this? 🤔
machour
changed the title
|
Hi @josenaranjo, friendly ping, are you still up for this one? 🙏 |
I left some StyleSheet styles without migrating because those styles are so specific about a particular behavior that 1. I'm not sure they are going to display the component as expected and 2. It has more meaning as it is. Let me know what you think.
#532