Add media query hooks and animation to snackbar notices #15908

youknowriad · 2019-05-30T09:09:59Z

This PR adds some animation to snackbar notices. It uses react-spring to do so and it introduces new React hooks: useMediaQuery and useReducedMotion in order to disable the animation if the reduced motion preference is enabled.

Testing instructions

Open the console
Add a notice

wp.data.dispatch('core/notices').createNotice(
		'info',
		'Post published.',
		{
			type: 'snackbar',
			actions: [
				{
					onClick: () => {},
					label: 'View post'
				}
			]
		}
	);

gziolo · 2019-05-30T09:42:27Z

How much of this size gets bundled in @wordpress/compose? Did you measure? After gzip, it might have very little impact, but it would be great to check it.

There are some e2e tests failing for metaboxes and classic editor. Do you think it might be related to animations added?

youknowriad · 2019-05-30T11:12:07Z

I didn't add any dependency to compose so I don't expect any change in bundle size. react-spring is 9.7KB and that is going to be added to the components package.

gziolo · 2019-05-30T11:25:52Z

I didn't add any dependency to compose so I don't expect any change in bundle size. react-spring is 9.7KB and that is going to be added to the components package.

Thanks for follow-up, it makes a lot of sense. I really like how @wordpress/compose is now structured to contain both hooks and HOCs 💯

kjellr · 2019-05-30T16:53:11Z

This is excellent. The modal slides in from the bottom, and does a simple fade out on removal. Here's a (slightly slowed down) GIF of the animation:

It respects the reduce motion media query too, and just appears/disappears in that case:

The only issue I'm seeing occurs when there are multiple notices, and the bottommost ones are dismissed first:

The notices near the top slide down as you'd expect, but they do a little pause before they settle into place at the very bottom. Is there anything we can do to eliminate that?

mtias · 2019-05-30T20:36:28Z

packages/compose/src/hooks/use-reduced-motion/index.js

+ *
+ * @return {boolean} Reduced motion preference value.
+ */
+const useReducedMotion =


This should come in handy.

mtias · 2019-05-30T20:37:03Z

packages/compose/src/hooks/use-media-query/index.js

+ * @param {string} query Media Query.
+ * @return {boolean} return value of the media query.
+ */
+export default function useMediaQuery( query ) {


How would we handle these for mobile native conceptually?

That's a good question, I think Mobile shouldn't really care about that hook. Ultimately, this hook might not be used directly by component. instead we'd use higher-level ones that can be "forked" by mobile for example useReducedMotion can be adapted for mobile.

mtias · 2019-05-30T20:38:14Z

packages/components/src/snackbar/list.js

+				await next( { height: 0 } );
+			},
+			config: { tension: 300 },
+			immediate: isReducedMotion,


I wonder if we should wrap around react-spring primitives and offer this by default.

I'm not sure. Because there is not a unique hook for react spring animations so basically this means creating a custom hook for each one of the react-spring hooks.

youknowriad · 2019-05-31T11:29:17Z

Pushed some updates here:

I introduced a new FORCE_REDUCED_MOTION to be able to force reduced motion for e2e test builds. I'd have preferred to avoid it and instead find a way to change the preference using a runtime code but it doesn't seem like there's a way to do it.
I fixed the "leave" animation (cc @kjellr), there's still a 1px jump at the end of the animation but I spent some time on it and I can't understand where it's coming from. I think it's not very noticeable enough to block this PR.

What do you all think? What's remaining here.

jasmussen · 2019-05-31T11:36:35Z

there's still a 1px jump at the end of the animation but I spent some time on it and I can't understand where it's coming from

I'm unable to look right at this moment, but it sounds like the change from rendering on the GPU (which happens when you use translate) to rendering on the CPU (default state). This is usually mostly visible in Safari. If this is the case, keeping the item on the GPU forever should fix it, and can be done be applying will-change: transform; to the element that gets animated.

The only thing to be mindful of is that this can cause some trickiness when overflow is involved, and even then it's rare.

youknowriad · 2019-05-31T14:30:33Z

@jasmussen Actually, I think it's if something happens when the DOM element containing the snackbar gets removed from the DOM. Before its removal, it is supposed to have a height of 0 which means removing it shouldn't have a visual impact but you do notice a very small jump.

youknowriad · 2019-06-03T12:49:55Z

I'd appreciate reviews and ✅ if you think it's all good.

kjellr · 2019-06-03T13:14:15Z

I fixed the "leave" animation (cc @kjellr), there's still a 1px jump at the end of the animation but I spent some time on it and I can't understand where it's coming from. I think it's not very noticeable enough to block this PR.

@youknowriad — I think I found a quick fix to this one. Setting the tension back to the default 170 value (or removing that line entirely) removes this 1px jump. Not sure why, but it seems to work for me, and the animation still feels just fine. 🙂

I am seeing this PR crash GB in Safari — not sure if that's just a problem on my end. Here's the error I'm seeing.

nerrad

I have just a few non-blocking comments (note this was a code review only, I did not test this).

nerrad · 2019-06-03T13:16:17Z

packages/components/src/snackbar/list.js

+					<div
+						className="components-snackbar-list__notice-container"
+						ref={ ( ref ) => ref && refMap.set( notice, ref ) }
+					>


Why is this an additional nested div? Could the props and ref just be added to the <animated.div> component?

No we can't, that was my original ideal but the way this animation work required the animation divs to be adjacent without any margin between them (otherwise the animation is not smooth on removal, there's a jump) and it also requires that the height of the animated div is equal to the snackbar + the margin between two snackbars and without the inner div it's impossible to do because of the "margin-collapsing"

nerrad · 2019-06-03T13:17:52Z

packages/compose/src/index.js

+
+// Hooks
+export { default as useMediaQuery } from './hooks/use-media-query';
+export { default as useReducedMotion } from './hooks/use-reduced-motion';


Nice little bit of cleanup here 👍

nerrad · 2019-06-03T13:20:15Z

packages/components/package.json

@@ -44,6 +44,7 @@
 		"re-resizable": "^4.7.1",
 		"react-click-outside": "^3.0.0",
 		"react-dates": "^17.1.1",
+		"react-spring": "^8.0.20",


Is react-spring something we might consider adding as a library in WP core? I imagine a number of plugin/theme author's might use it as well (I'm currently using it for a block I'm developing).

I personally worry about adding this kind of libs as WP core libs because of the breaking changes they might introduce. For the moment I think it's small enough to "allow it" to be duplicated but I think that's a good question and we should probably have some defined guidelines to answer it.

youknowriad · 2019-06-03T13:28:50Z

@kjellr Good find. Both are fixed now.

kjellr · 2019-06-03T13:30:54Z

Good find. Both are fixed now.

Excellent — just tested and confirmed. This should be ready to 🚢 from a design perspective!

)

Add media query hooks and animation to snackbar notices

060205c

youknowriad added Needs Design Feedback Needs general design feedback. [Feature] UI Components Impacts or related to the UI component system Needs Accessibility Feedback Need input from accessibility labels May 30, 2019

youknowriad requested review from aduth, ajitbohra, chrisvanpatten, gziolo, jorgefilipecosta and talldan as code owners May 30, 2019 09:10

youknowriad self-assigned this May 30, 2019

youknowriad requested review from kjellr, jasmussen and mapk May 30, 2019 09:10

mtias reviewed May 30, 2019

View reviewed changes

Try to force reduced motion in tests environments

eb44d7f

youknowriad force-pushed the try/snackbar-animation branch from 4533fe1 to eb44d7f Compare May 31, 2019 10:27

youknowriad requested review from nerrad, oandregal and ntwb as code owners May 31, 2019 10:27

Fix the leave animation

15d2042

nerrad approved these changes Jun 3, 2019

View reviewed changes

Fix safari bug and the 1px jump

36e9489

youknowriad merged commit 392bf02 into master Jun 3, 2019

youknowriad added this to the Gutenberg 5.9 milestone Jun 7, 2019

talldan deleted the try/snackbar-animation branch June 17, 2019 08:50

talldan mentioned this pull request Jun 17, 2019

Gutenberg is broken on IE since react-spring was introduced #16194

Closed

jg314 pushed a commit to jg314/gutenberg that referenced this pull request Jul 19, 2019

Add media query hooks and animation to snackbar notices (WordPress#15908

ab97f90

)

sbardian pushed a commit to sbardian/gutenberg that referenced this pull request Jul 29, 2019

Add media query hooks and animation to snackbar notices (WordPress#15908

726bfa5

)

dd32 pushed a commit to dd32/gutenberg that referenced this pull request Sep 27, 2019

Add media query hooks and animation to snackbar notices (WordPress#15908

d7ba748

)

Add media query hooks and animation to snackbar notices #15908

Add media query hooks and animation to snackbar notices #15908

youknowriad commented May 30, 2019

gziolo commented May 30, 2019 •

edited

youknowriad commented May 30, 2019

gziolo commented May 30, 2019

kjellr commented May 30, 2019

mtias May 30, 2019

mtias May 30, 2019

youknowriad May 31, 2019

mtias May 30, 2019

youknowriad May 31, 2019

youknowriad commented May 31, 2019

jasmussen commented May 31, 2019

youknowriad commented May 31, 2019

youknowriad commented Jun 3, 2019

kjellr commented Jun 3, 2019

nerrad left a comment •

edited

nerrad Jun 3, 2019

youknowriad Jun 3, 2019

nerrad Jun 3, 2019

nerrad Jun 3, 2019

youknowriad Jun 3, 2019

youknowriad commented Jun 3, 2019

kjellr commented Jun 3, 2019 •

edited

Add media query hooks and animation to snackbar notices #15908

Add media query hooks and animation to snackbar notices #15908

Conversation

youknowriad commented May 30, 2019

gziolo commented May 30, 2019 • edited

youknowriad commented May 30, 2019

gziolo commented May 30, 2019

kjellr commented May 30, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youknowriad commented May 31, 2019

jasmussen commented May 31, 2019

youknowriad commented May 31, 2019

youknowriad commented Jun 3, 2019

kjellr commented Jun 3, 2019

nerrad left a comment • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youknowriad commented Jun 3, 2019

kjellr commented Jun 3, 2019 • edited

gziolo commented May 30, 2019 •

edited

nerrad left a comment •

edited

kjellr commented Jun 3, 2019 •

edited