Upgrade to styled-components v4.2.0 #374

superhawk610 · 2019-03-28T23:40:53Z

See #269 for previous discussion.

Changes

upgrade styled-components to latest version (4.2.0)
- change injectGlobal to createGlobalStyle
- change withComponent at declaration to as when instantiating component
- hoist props => values to top level in styled.el.attrs calls (see styled-components#2200)
- change SC.extend to styled(SC)
upgrade flow-bin to latest version (0.95.1) to get forwardRef support

Known issues

bundle.js:112123 Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.
    in Icon
    in StyledComponent
    in AnimatedComponent (at FeedbackButton.js:97)
    in div
    in StyledComponent
    in Spring (at FeedbackButton.js:49)
    in FeedbackButton (at App.js:50)
    in Initialization (created by Connect(Initialization))
    in Connect(Initialization) (at App.js:33)
    in App (created by Connect(App))
    in Connect(App) (at index.js:26)
    in NodeProvider (at index.js:23)
    in Provider (at index.js:22)

Wrapping a styled component with animated()from react-spring seems to be the culprit for this error message, though from researching this briefly it appears to be harmless error (the ref is never used).

@idoberko2 you worked on the migration to react-spring, perhaps you can shed some light here?

Todo

update existing snapshot tests to include styled(Component) and <ForwardRef /> HOCs

superhawk610 · 2019-03-28T23:44:35Z

Looks like this change also breaks all existing snapshot tests that relied on a styled component, as well as any that used a <TextInput /> as it's now wrapped with a <ForwardRef /> HOC. These will need to be updated.

src/components/TextInput/TextInput.js

AWolf81 · 2019-04-24T22:43:32Z

src/components/Sidebar/Sidebar.js

@@ -251,11 +251,11 @@ export class Sidebar extends PureComponent<Props, State> {
  }
 }

-const Wrapper = animated(styled.nav.attrs(props => ({
-  style: {
+const Wrapper = animated(styled.nav.attrs({


Ups, merging master changed this to old styled-component syntax - I'll fix this.

codecov · 2019-04-24T23:20:49Z

Codecov Report

Merging #374 into master will decrease coverage by 0.03%.
The diff coverage is 64.78%.

@@            Coverage Diff             @@
##           master     #374      +/-   ##
==========================================
- Coverage   58.83%   58.79%   -0.04%     
==========================================
  Files         158      159       +1     
  Lines        3357     3354       -3     
  Branches      467      468       +1     
==========================================
- Hits         1975     1972       -3     
  Misses       1179     1179              
  Partials      203      203

Impacted Files	Coverage Δ
...nents/ProjectIconSelection/ProjectIconSelection.js	`50% <ø> (ø)`	⬆️
...omponents/WhimsicalInstaller/WhimsicalInstaller.js	`3.15% <0%> (ø)`	⬆️
src/components/TerminalOutput/TerminalOutput.js	`28% <0%> (ø)`	⬆️
src/components/OnlineChecker/OnlineChecker.js	`0% <0%> (ø)`	⬆️
src/components/GlobalStyles/GlobalStyles.js	`0% <0%> (ø)`
src/components/Planet/PlanetMoon.js	`26.31% <0%> (ø)`	⬆️
src/global-styles.js	`0% <0%> (ø)`	⬆️
src/index.js	`0% <0%> (ø)`	⬆️
src/components/Planet/Orbit.js	`9.09% <0%> (ø)`	⬆️
src/components/LoadingScreen/LoadingScreen.js	`0% <0%> (ø)`	⬆️
... and 23 more

AWolf81

LGTM.

I've updated the snapshots & merged master.

The warning you mentioned is because IconBase is a functional component src of IconBase and React-Spring is passing a ref to it as mentioned in this issue. Not sure how to fix this - the wrapping in a class component will work but feels a bit hacky.

I commented one assertion in Sidebar.test. Not sure how to fix - we can fix this later. SetTimeout seems to be called 7 times but it should be only called twice.

One point I've noticed - Icon selection in ProjectSettingsModal is not working correctly. The citrone icon should be marked in the screenshot below.

superhawk610 · 2019-04-25T16:30:21Z

Awesome, thanks for taking this up. I'll try to look into the icon issue if I get the time. I believe Josh had originally noticed some performance issues when we first looked at moving to v4, did you find there to be any performance degradation?

AWolf81 · 2019-04-25T18:17:35Z

@superhawk610 after having a second look at the modal animation there is an issue with the project settings modal - there is no in animation & the modal is not reaching the final position and out animation is not smooth. I'll have a look if this is the same thing Josh noticed.
The CreateNewProject modal animation is working perfectly. Please have a look at the following screen recording.

Update
After doing some testing I have found the cause for the animation issue. In Modal.js it seems like there is a problem with interpolation for native prop. After testwise commenting native in line 106 it's animating correctly.
Not sure what's the problem - probably there is an interpolation required.

…rpolation of translateY

AWolf81 · 2019-04-25T21:26:16Z

OK, I've fixed the forwardRef warning by creating a wrapper around the icon instead of directly using the animation on the icon.

Selection issue is also fixed - we checked for equality but src contained an initial dot in path on load. e.g. selectedIcon="/static/media/icon_fish6.9287e724.jpg" src="./static/media/icon_fish6.9287e724.jpg"
I first tried to remove the dot during the check with .slice(1) but that wasn't working because selecting an new icon didn't work with this.
I think testing with includes is OK.

I've also improved the animation so it's correctly rendering again but there is still a lot going on but I'm not seeing if there is anything wrong.

In the above screenshot it starts with a click event to open the modal and then at the end it's the closing click event.
The data from the above screenshot are available in this Gist - should be possible to load into Chrome Devtools.

… start with a dot

src/components/ProjectIconSelection/ProjectIconSelection.js

melanieseltzer

I'm noticing a regression with animation in the New Project view 😞 The Project Name box is supposed to animate down when you launch the modal, but in this branch it's stuck in its top position unless you start entering a project name (either by typing or clicking generate):

src/components/ProjectIconSelection/ProjectIconSelection.js

AWolf81 · 2019-05-05T22:17:40Z

@melanieseltzer OK, I've fixed both mentioned issues.

To the project name animation
I think there is just an animation during modal opening but I'm not sure. The stucking happend because of a missing interpolation with native prop.

To the project selection issue
I've changed the undefined check a bit so flow check is working and displaying is working as expected.

melanieseltzer

Icons look great! Animation is still not working right but I think I have a solution...

src/components/CreateNewProjectWizard/MainPane.js

melanieseltzer · 2019-05-06T02:14:03Z

src/components/CreateNewProjectWizard/MainPane.js

  style: {
-    transform: `translateY(${props.translateY}px)`,
+    transform: interpolate([translateY], y => `translateY(${y}px)`),


Unfortunately this interpolate change isn't producing quite the right result... it's still sticking to the top and not having the correct offset animation. The correct behavior has offset at 50 at first, and when moving to next step, offset becomes 0 and content shifts up smoothly:

But I dug into it a little more and I think I found the solution! Remove the native prop on Spring:

<Spring from={{ offset: currentStepIndex === 0 ? 0 : 50, }} to={{ offset: currentStepIndex === 0 ? 50 : 0, }} // remove native >

And then reset this to the original code:

const Wrapper = animated(styled.div.attrs(({ translateY }) => ({ style: { transform: `translateY(${translateY}px)`, }, }))` height: 75vh; will-change: transform; `);

This fixes it for me :) I'm not really sure what native is or why it's here, do you know?

ah, OK. The native prop is there for better performance and we should keep it. docs about native prop.

Maybe inlining the translate into a style prop in MainPane could help. I'll have a look later today.

@melanieseltzer Please have a look at the animation. It should be OK now. I'm not sure why animation(styled.div) is not working - maybe I'll create a minimal demo in a Codesandbox to see if it's happening there too.
Could be an issue with Styled-components or React-spring because animation wrapping is recommended in React-Spring docs.

I've created a Codesandbox with it - seems like the style is not added on the element but I'm not sure why.

Nice, the updated code works 👍 Not sure why it's doing this either. I noticed some more animations not firing so I went and updated them using the way you've outlined, could you double check the logic? Feel free to modify if there's a more elegant way to write these.

migrate from #269

a5b0670

superhawk610 requested review from rfbotto, AWolf81, idoberko2 and melanieseltzer March 28, 2019 23:45

superhawk610 self-assigned this Mar 28, 2019

melanieseltzer reviewed Apr 8, 2019

View reviewed changes

src/components/TextInput/TextInput.js Outdated Show resolved Hide resolved

AWolf81 added 4 commits April 24, 2019 23:43

Update snapshots & fix ProjectName.test

91b7fb7

Merge master

6a7471a

use semantic color constants

d0f6590

add React-beautiful-dnd & update React

e898da0

AWolf81 reviewed Apr 24, 2019

View reviewed changes

AWolf81 added 3 commits April 25, 2019 01:02

Merge branch 'master' into sc-v4

7123aac

revert styled-components props arrow function

46eb73c

fix flow by accepting null as type in setRef method

2a63787

AWolf81 approved these changes Apr 24, 2019

View reviewed changes

AWolf81 added 2 commits April 25, 2019 22:55

fix forwardRef warning by using an icon wrapper to animate the icon

ad19f95

improve animation by changing animated wrapper to animated.div & inte…

d7a6ee0

…rpolation of translateY

AWolf81 added 2 commits April 26, 2019 01:32

fix selectedIcon status - change to includes as the path from src can…

6bcfc6a

… start with a dot

simplify status & fix flow

f55c40e

AWolf81 reviewed Apr 25, 2019

View reviewed changes

src/components/ProjectIconSelection/ProjectIconSelection.js Outdated Show resolved Hide resolved

melanieseltzer reviewed May 5, 2019

View reviewed changes

src/components/ProjectIconSelection/ProjectIconSelection.js Outdated Show resolved Hide resolved

AWolf81 added 2 commits May 5, 2019 23:58

add interpolation to fix ProjectName offset issue

58c8849

change selectedIcon check so it returns status default if undefined

56da823

melanieseltzer reviewed May 6, 2019

View reviewed changes

AWolf81 and others added 4 commits May 6, 2019 20:49

fix Wrapper animation by using animated.div

22c7637

Fix animation for ProgressBar and Toggle

615a74d

Get rid of warnings

c990f20

Fix BigClickableButton animation

6a93dd8

melanieseltzer mentioned this pull request May 9, 2019

Experiment with Docz #254

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade to styled-components v4.2.0 #374

Upgrade to styled-components v4.2.0 #374

superhawk610 commented Mar 28, 2019 •

edited by AWolf81

Loading

superhawk610 commented Mar 28, 2019

AWolf81 Apr 24, 2019

codecov bot commented Apr 24, 2019 •

edited

Loading

AWolf81 left a comment •

edited

Loading

superhawk610 commented Apr 25, 2019

AWolf81 commented Apr 25, 2019 •

edited

Loading

AWolf81 commented Apr 25, 2019 •

edited

Loading

melanieseltzer left a comment •

edited

Loading

AWolf81 commented May 5, 2019

melanieseltzer left a comment

melanieseltzer May 6, 2019

AWolf81 May 6, 2019

AWolf81 May 6, 2019

AWolf81 May 6, 2019

melanieseltzer May 7, 2019

Upgrade to styled-components v4.2.0 #374

Are you sure you want to change the base?

Upgrade to styled-components v4.2.0 #374

Conversation

superhawk610 commented Mar 28, 2019 • edited by AWolf81 Loading

Changes

Known issues

Todo

superhawk610 commented Mar 28, 2019

AWolf81 Apr 24, 2019

Choose a reason for hiding this comment

codecov bot commented Apr 24, 2019 • edited Loading

Codecov Report

AWolf81 left a comment • edited Loading

Choose a reason for hiding this comment

superhawk610 commented Apr 25, 2019

AWolf81 commented Apr 25, 2019 • edited Loading

AWolf81 commented Apr 25, 2019 • edited Loading

melanieseltzer left a comment • edited Loading

Choose a reason for hiding this comment

AWolf81 commented May 5, 2019

melanieseltzer left a comment

Choose a reason for hiding this comment

melanieseltzer May 6, 2019

Choose a reason for hiding this comment

AWolf81 May 6, 2019

Choose a reason for hiding this comment

AWolf81 May 6, 2019

Choose a reason for hiding this comment

AWolf81 May 6, 2019

Choose a reason for hiding this comment

melanieseltzer May 7, 2019

Choose a reason for hiding this comment

superhawk610 commented Mar 28, 2019 •

edited by AWolf81

Loading

codecov bot commented Apr 24, 2019 •

edited

Loading

AWolf81 left a comment •

edited

Loading

AWolf81 commented Apr 25, 2019 •

edited

Loading

AWolf81 commented Apr 25, 2019 •

edited

Loading

melanieseltzer left a comment •

edited

Loading