build(opentrons): add styled-components to buildtools #5129
Conversation
Add styled-components and additional buildtools in support
Codecov Report
@@ Coverage Diff @@
## edge #5129 +/- ##
==========================================
- Coverage 68.86% 68.85% -0.02%
==========================================
Files 1082 1089 +7
Lines 36042 36245 +203
==========================================
+ Hits 24821 24957 +136
- Misses 11221 11288 +67
Continue to review full report at Codecov.
|
| @@ -50,9 +50,11 @@ | |||
| * non-standard, but works on all webkit browsers, Edge, and Firefox >= 68 | |||
| * it turns out CSS ellipses for multiline blocks are hard | |||
| */ | |||
| display: -webkit-box; /* stylelint-disable-line declaration-block-no-duplicate-properties */ | |||
| /* stylelint-disable */ | |||
| display: -webkit-box; | |||
There was a problem hiding this comment.
changes required ignoring all three webkit prefixes
|
@iansolano can you add in a simple example or two of what porting a simple component to styled components might looks like for context? |
There was a problem hiding this comment.
A couple little housekeeping requests, but otherwise this is great! Very excited to start using this.
Also, like @Kadee80 said (and discussed in the tech debt meeting), additions to the Front-end Cookbook for basic how to use info on styled-components (plus copy-paste snippets) I think are needed to call the RFC closed
| @@ -50,9 +50,11 @@ | |||
| * non-standard, but works on all webkit browsers, Edge, and Firefox >= 68 | |||
| * it turns out CSS ellipses for multiline blocks are hard | |||
| */ | |||
| display: -webkit-box; /* stylelint-disable-line declaration-block-no-duplicate-properties */ | |||
| /* stylelint-disable */ | |||
There was a problem hiding this comment.
Could we disable the specific rules rather than every rule?
|
|
||
| return ( | ||
| <section className={style}> | ||
| {title && <h3 className={styles.card_title}>{title}</h3>} | ||
| <Section disabled={disabled} className={className}> |
There was a problem hiding this comment.
Keeping className allows folks to easy extend the component styles doing:
const NewCard = styled(Card)`
color: red; // extended style
`
| @@ -2,10 +2,10 @@ | |||
|
|
|||
| exports[`Card renders Card correctly 1`] = ` | |||
| <section | |||
| className="card" | |||
| className="Card__Section-sc-1ltsa6e-0 fUnCuR" | |||
There was a problem hiding this comment.
Non-blocking: we said we're planning to not use snapshot tests, but maybe in the meantime we should use https://github.com/styled-components/jest-styled-components#snapshot-testing to make these more readable?
There was a problem hiding this comment.
It looks like this PR already pulls in this dependency, so it should be a matter of placing that import call in a test setup script (see scripts for global enzyme and mocks setup)
There was a problem hiding this comment.
import 'jest-styled-components' in the test file should do the trick and is already included as mike mentioned.
Add styled-components and additional buildtools in support
closes: #4866
Added to the cookbook here: https://coda.io/d/Front-end-Cookbook_dw3eEFMgHPr/Styled-Components_su1oc#_luNNQ
overview
changelog
review requests