Update TaskList design #4434

jeffstieler · 2020-05-22T16:43:29Z

This PR seeks to update the appearance and functionality of the <TaskList /> component by:

Use checkmarks for list icons
Add a progress bar
Show time estimates for tasks
Remove TaskList upon completion
Don't show TaskList on Analytics Overview (when homepage feature enabled)

Another change made in this PR is to not use the <TaskListPlaceholder /> when the options are being requested as it causes the placeholder to show in cases where the task list isn't displayed. This is an improvement for those cases, but perhaps makes the scenarios where the task list is displayed more jarring, as it "just appears" on fast connections (the placeholder is just for Suspense now).

I'm open to reverting that change for sure.

Accessibility

I've tested using only a keyboard (no mouse)
I've tested using a screen reader
All animations respect prefers-reduced-motion
All text has at least a 4.5 color contrast with its background

Screenshots

@jameskoster does this look OK? ☝️

Detailed test instructions:

Start a dev build (so homepage feature is enabled)
Verify the design of the TaskList on the home screen
Verify functions of all steps
Verify "hide" functionality
Clear "hidden" option
Complete all tasks
Verify task list auto-dismisses
Reset task list completion options
Start a prod build (so homepage feature is disabled)
Verify the design of the TaskList on the home screen
Verify functions of all steps
Verify "hide" functionality

Changelog Note:

Tweak: update design of store setup task list.

…led.

Avoid a potential flash of the placeholder without showing the TaskList.

rrennick · 2020-05-22T17:16:15Z

client/dashboard/customizable.js

+		const isTaskListEnabled =
+			isOnboardingEnabled() &&
+			! taskListHidden &&
+			! window.wcAdminFeatures.homepage;


@jeffstieler if #4418 is merged first this should be updated to ! getFeatureFlag( 'homepage' );

jameskoster · 2020-05-22T20:15:15Z

Opened a PR on this here.

A couple of small things I didn't get to:

I noticed the card header size differs slightly from the quick links. Is it possible to use the Text component (title small) for these?
On that note, are we using the Text component for all instances of text here? The sooner we can adopt that, the sooner our UI will start to feel more cohesive :)
In the hide menu I'm seeing a focus state that I probably shouldn't be upon open. Also, the menu item there should fill the width of the container.

So cool to see this coming together - it's looking really good! :D

psealock

I'm open to reverting that change for sure.

The task list looks weird just appearing. It looks like it depends on two options woocommerce_task_list_complete and woocommerce_task_list_hidden, but only the later is preloaded. Should we preload them both?

psealock · 2020-05-24T23:58:10Z

client/dashboard/customizable.js

@@ -311,7 +314,7 @@ class CustomizableDashboard extends Component {
 			<Fragment>
 				{ isTaskListEnabled && (
 					<Suspense fallback={ <Spinner /> }>
-						<TaskList query={ query } inline={ isDashboardShown } />


unrelated nit: Maybe rename isDashboardShown to isTaskListEnabled so it matches the use Home page

psealock · 2020-05-24T23:59:28Z

client/task-list/index.js


 /**
 * WooCommerce dependencies
 */
-import { Card, List, MenuItem, EllipsisMenu } from '@woocommerce/components';


psealock · 2020-05-25T00:01:33Z

client/task-list/index.js

+					label={ __( 'Task List Options', 'woocommerce-admin' ) }
+					renderContent={ () => (
+						<div className="woocommerce-task-card__section-controls">
+							<Button onClick={ () => this.hideTaskCard( 'remove_card' ) }>


Another unrelated comment: It always bugged me that clicking this didn't cause the task list to disappear immediately or at least show a spinner.

OK to handle this in a follow up?

client/task-list/style.scss

psealock · 2020-05-25T00:04:19Z

client/task-list/tasks.js

-				'Purchase, install, and manage your extensions directly from your dashboard',
-				'wooocommerce-admin'
-			),
-			icon: 'extension',
 			container: null,
 			onClick: () =>
 				remainingProductIds.length ? toggleCartModal() : null,
 			visible: productIds.length,


Clicking "Purchase & install extensions" doesn't do anything for me. Maybe this should be visible: remainingProductIds.length?

I think it's functioning correctly (this is unchanged in the PR) - is it showing complete? If you selected a plugin and have it installed, the step will display as completed.

Ok, maybe it because I'm doing odd things like const isTaskListEnabled = true; hard coded to get it to come up.

psealock · 2020-05-25T00:06:42Z

client/task-list/tasks.js

+				window.location = getAdminLink(
+					'admin.php?page=wc-admin&reset_profiler=1'
+				);
+			},


Perhaps good for a follow up: We should use <Link /> component with these list items. This onClick causes a page refresh where one isn't required. Clicking "Store details" should not refresh the page. Secondarily, it removes the "preview" address in the lower right hand side which is useful.

I'd definitely like to tackle this in a follow up - at a guess, this is likely to be more involved than changing to a link component since we're potentially going to need to reset the "completed" flag for the task list (and think through the impact to tracking of that completion).

* Colors * Only show time estimation for incomplete tasks * Don't show chevron on completed tasks. Co-authored-by: Jeff Stieler <jeff.m.stieler@gmail.com>

jeffstieler · 2020-05-25T17:29:57Z

The task list looks weird just appearing. It looks like it depends on two options woocommerce_task_list_complete and woocommerce_task_list_hidden, but only the later is preloaded. Should we preload them both?

Reworked in 98b8aa9.

psealock

Reworked in 98b8aa9.

It still makes a request, even though both options are preloaded. In https://a8c.slack.com/archives/C9K5T0XSP/p1590452504044500?thread_ts=1590435699.034400&cid=C9K5T0XSP we discovered that hydration isn't working as expected with lazy loaded components. Maybe thats happening here.

Everything is looking good to me, just a prop type violation and the rest to be addressed in follow ups.

psealock · 2020-05-26T01:29:32Z

client/homepage/layout.js

+	/**
+	 * If the task list has been completed.
+	 */
+	taskListComplete: PropTypes.bool,


Theres a proptype violation here, "Invalid prop taskListComplete of type string supplied to Layout, expected boolean." I found it when the task list wasn't visible.

I'm unable to reproduce this - can you provide steps?

psealock · 2020-05-26T01:34:57Z

client/task-list/tasks.js

-				'Purchase, install, and manage your extensions directly from your dashboard',
-				'wooocommerce-admin'
-			),
-			icon: 'extension',
 			container: null,
 			onClick: () =>
 				remainingProductIds.length ? toggleCartModal() : null,
 			visible: productIds.length,


Ok, maybe it because I'm doing odd things like const isTaskListEnabled = true; hard coded to get it to come up.

jeffstieler added 18 commits May 21, 2020 11:25

Update task list to closer match new designs.

d9a59b9

Update TaskList placeholder to match the new design.

ea20f8a

Hook up store details task click.

f29053e

Don't show "skip" prompt for task list on new home screen.

ae59bd8

Update time estimates for tasks.

c566e6f

Add progress indicator to TaskList.

2dc3a7c

Use null container for store details task.

b1621ef

Fix progress bar styling.

c01ac84

Just use card menu for TaskList dismissal.

e5d8ecf

Don't show TaskList on analytics overview if homepage feature is enab…

40474a6

…led.

Initial refactor of TaskList to use WP card.

7059c6d

Style TaskList items and card header.

3a4e7ff

Style "hide" button for TaskList.

78deea4

Don't show TaskList after it's completion.

f062ae9

Don't show TaskList placeholder when options are still loading.

ad9a439

Avoid a potential flash of the placeholder without showing the TaskList.

Fix border radius on progress bar.

73a9ace

Fix TaskList header style with homepage feature disabled.

bf2c6f8

Remove defunct function.

98b3d2b

jeffstieler added type: enhancement The issue is a request for an enhancement. [Status] Needs Review focus: home screen Issues around the new home screen feature labels May 22, 2020

jeffstieler requested a review from a team May 22, 2020 16:43

jeffstieler added the [Tests] Includes Tests label May 22, 2020

rrennick reviewed May 22, 2020

View reviewed changes

Remove unnecessary import.

db9fb2a

psealock reviewed May 25, 2020

View reviewed changes

psealock added needs: author feedback The issue/PR needs a response from any of the parties involved in the issue. and removed [Status] Needs Review labels May 25, 2020

Some minor color tweaks (#4436)

d584d1a

* Colors * Only show time estimation for incomplete tasks * Don't show chevron on completed tasks. Co-authored-by: Jeff Stieler <jeff.m.stieler@gmail.com>

Preload task list completed option, show placeholder when loading.

98b8aa9

jeffstieler added [Status] Needs Review and removed needs: author feedback The issue/PR needs a response from any of the parties involved in the issue. labels May 25, 2020

psealock approved these changes May 26, 2020

View reviewed changes

psealock added [Status] Ready to Merge and removed [Status] Needs Review labels May 26, 2020

Fix alignment of "hide this" button.

4f30b28

jeffstieler merged commit 43cd1a1 into master May 27, 2020

jeffstieler deleted the update/4096-task-list-design branch May 27, 2020 16:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update TaskList design #4434

Update TaskList design #4434

jeffstieler commented May 22, 2020

rrennick May 22, 2020

jameskoster commented May 22, 2020

psealock left a comment

psealock May 24, 2020

psealock May 24, 2020

psealock May 25, 2020

jeffstieler May 25, 2020

psealock May 25, 2020

jeffstieler May 25, 2020

psealock May 26, 2020

psealock May 25, 2020

jeffstieler May 25, 2020

jeffstieler commented May 25, 2020

psealock left a comment

psealock May 26, 2020

jeffstieler May 27, 2020

psealock May 26, 2020

Update TaskList design #4434

Update TaskList design #4434

Conversation

jeffstieler commented May 22, 2020

Accessibility

Screenshots

Detailed test instructions:

Changelog Note:

Choose a reason for hiding this comment

jameskoster commented May 22, 2020

psealock left a 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

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

jeffstieler commented May 25, 2020

psealock left a 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