Store details step - add contextual information and skip link #4735

samueljseay · 2020-07-02T04:02:59Z

Fixes #4566

Changes:

Updated @wordpress/components and @wordpress/base-styles
Use the new Card and Flex from @wordpress/components
Add contextual tooltips
Adjust existing styles to match new designs

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

Detailed test instructions:

Start the setup wizard via the usual means (either after installing WooCommerce the first time or via WooCommerce > Settings > Help > Setup Wizard)
Visually confirm that the page matches the designs
Visually confirm that the tooltips work on hover and that the content is correct.
You should also test that changing a user's color scheme still works. There are some good instructions on testing that here

Changes: * Add tooltips * Use @wordpress/components Card and Flex * Adjust styles to match new designs

samueljseay · 2020-07-02T04:03:52Z

client/profile-wizard/steps/store-details.js


 class StoreDetails extends Component {
 	constructor( props ) {
-		super( ...arguments );
+		super( props );


this was just a formatting change, really no need to pass anything but props to Component.

samueljseay · 2020-07-02T04:04:39Z

client/profile-wizard/steps/store-details.js

 				</H>
 				<H className="woocommerce-profile-wizard__header-subtitle">
 					{ __(
-						'This will help us configure your store and get you started quickly',
+						"Tell us about your store and we'll get you set up in no time",


A question: do I need to do anything for translations in other languages here?

No, its wrapped in __(), so the translations are handled elsewhere.

samueljseay · 2020-07-02T04:05:50Z

client/profile-wizard/steps/store-details.js

-						validate={ validateStoreAddress }
+					<Tooltip
+						text={ __(
+							'Your store address will help us configure currency\n options and shipping rules automatically.\n This information will not be publicly visible and can\n easily be changed later.',


I used newlines and whitespace: pre to get this displaying as close to the designs as possible. This seems problematic for translations?

I tried modifying elements on popover more with styles, but it was quite constrained, I could not retain the exact width of the design.

samueljseay · 2020-07-02T04:06:43Z

client/profile-wizard/steps/store-details.js

-						) }
-					</Form>
-				</Card>
+							<CardFooter>


Making use of the new Card, CardFooter etc from @wordpress/components.

I've used 2 footers here to match the design

samueljseay · 2020-07-02T04:07:22Z

client/profile-wizard/steps/store-details.js

+								</FlexItem>
+							</CardFooter>
+
+							<CardFooter justify="center">


The Card elements are flex components, so we can justify them or align them as desired to match the designs.

samueljseay · 2020-07-02T04:07:57Z

client/profile-wizard/style.scss


 		> * {
-			max-width: 476px;
+			max-width: 504px;


The designs have made the card bigger to compensate for the larger amount of text content.

samueljseay · 2020-07-02T04:08:21Z

client/profile-wizard/style.scss

@@ -93,9 +99,31 @@
 			font-weight: 400;
 		}

+		.components-popover__content {


Customizing the tooltip's popover element to get the desired display.

samueljseay · 2020-07-02T04:11:31Z

client/profile-wizard/style.scss

 		.woocommerce-card ~ p {
 			font-size: 14px;
 		}
+
+		.woocommerce-profile-wizard__footer {


a new footer element that holds the "skip wizard" link.

samueljseay · 2020-07-02T04:12:44Z

client/stylesheets/abstracts/_variables.scss

@@ -6,6 +6,8 @@
 @import 'node_modules/@wordpress/base-styles/animations';
 @import 'node_modules/@wordpress/base-styles/z-index';

+@include wordpress-admin-schemes;


We need this to generate the css var that $theme-coloris replaced by

samueljseay · 2020-07-02T04:13:18Z

client/stylesheets/abstracts/_variables.scss

-	0 6px 10px rgba(0, 0, 0, 0.14);
-$muriel-box-shadow-8dp: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
-	0 3px 14px 2px rgba(0, 0, 0, 0.12);
+$muriel-box-shadow-1dp: 0 2px 1px -1px rgba(0, 0, 0, 0.2),


My editor formatted these probably a prettier setting. Happy to revert this if its a pain.

samueljseay · 2020-07-02T04:13:59Z

packages/components/src/list/style.scss

@@ -53,7 +54,7 @@
 	$background-color: $white;
 	$background-color-hover: $light-gray-100;
 	$border-color: $light-gray-tertiary;
-	$foreground-color: $theme-color;
+	$foreground-color: var(--wp-admin-theme-color);


use the new css var

$theme-color was derived from theme(button) in Gutenberg and evaluated in using postCSS. In our codebase we have variations like theme(primary) or theme(outlines). Those may need to be replaced as well.

samueljseay · 2020-07-02T04:14:35Z

packages/components/src/text-control/style.scss

@@ -24,7 +22,22 @@
 		}
 	}

-	.components-text-control__input {
+	// @wordpress/components styles for text control target all types, so we must also do that


This is a change from the latest update to @wordpress/components

psealock

Nice job @samueljseay ! This is a nice change and clean up. I made a couple comments, but have run out of time and will give it a deeper look tomorrow. I am also getting an error when I npm start, Error: Undefined variable: "$blue-medium-focus". I think that variable needs to be removed or mapped.

I think, as mentioned below, the update to base styles and components may have more issues lurking in the codebase and I'm wondering if those updates don't warrant a separate PR. This way we can discuss and test those changes in isolation. What do you think?

psealock · 2020-07-02T04:37:19Z

client/profile-wizard/steps/store-details.js

 				</H>
 				<H className="woocommerce-profile-wizard__header-subtitle">
 					{ __(
-						'This will help us configure your store and get you started quickly',
+						"Tell us about your store and we'll get you set up in no time",


No, its wrapped in __(), so the translations are handled elsewhere.

psealock · 2020-07-02T04:44:16Z

packages/components/src/list/style.scss

@@ -53,7 +54,7 @@
 	$background-color: $white;
 	$background-color-hover: $light-gray-100;
 	$border-color: $light-gray-tertiary;
-	$foreground-color: $theme-color;
+	$foreground-color: var(--wp-admin-theme-color);


$theme-color was derived from theme(button) in Gutenberg and evaluated in using postCSS. In our codebase we have variations like theme(primary) or theme(outlines). Those may need to be replaced as well.

samueljseay · 2020-07-02T21:01:07Z

@psealock thanks for the feedback. I will separate out a PR for the base-styles update. and I'll look at the other theme variations. Strange I didn't see that CSS variable error in my environment, but I'll investigate.

About the translations, sorry my question wasn't very clear, I was more wondering, is there anything we need to do to provide translations for these new strings in other languages?

samueljseay · 2020-07-02T21:01:47Z

I'll close this for now and separate out a PR for the base-styles update first.

psealock · 2020-07-03T00:32:36Z

About the translations, sorry my question wasn't very clear, I was more wondering, is there anything we need to do to provide translations for these new strings in other languages?

No we don't. Once on the .org repository, translators will translate the strings into different languages. See https://translate.wordpress.org/projects/wp-plugins/woocommerce/ for more on how thats done.

samueljseay added 4 commits July 1, 2020 15:41

Update base-styles.

83f9f54

Update @wordpress/components to latest version.

d897495

Rework the store details onboarding screen

dfcf235

Changes: * Add tooltips * Use @wordpress/components Card and Flex * Adjust styles to match new designs

Remove -color which is no longer supported by base-styles.

e79e9ed

probot-autolabeler bot added tool: monorepo infrastructure focus: components Issues for woocommerce components Packages labels Jul 2, 2020

samueljseay commented Jul 2, 2020

View reviewed changes

Remove redundant font size override on popover.

6c52f2a

samueljseay commented Jul 2, 2020

View reviewed changes

Revert redundant formatting changes to scss file.

604b360

samueljseay changed the title ~~Add/4566~~ Store details step - add contextual information and skip link Jul 2, 2020

samueljseay added [Status] Needs Review focus: onboarding labels Jul 2, 2020

psealock reviewed Jul 2, 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 Jul 2, 2020

samueljseay closed this Jul 2, 2020

samueljseay deleted the add/4566 branch September 8, 2020 21:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Store details step - add contextual information and skip link #4735

Store details step - add contextual information and skip link #4735

samueljseay commented Jul 2, 2020 •

edited

Loading

samueljseay Jul 2, 2020

samueljseay Jul 2, 2020

psealock Jul 2, 2020

samueljseay Jul 2, 2020

samueljseay Jul 2, 2020

samueljseay Jul 2, 2020

samueljseay Jul 2, 2020

samueljseay Jul 2, 2020

samueljseay Jul 2, 2020

samueljseay Jul 2, 2020

samueljseay Jul 2, 2020

samueljseay Jul 2, 2020

psealock Jul 2, 2020

samueljseay Jul 2, 2020

psealock left a comment

psealock Jul 2, 2020

psealock Jul 2, 2020

samueljseay commented Jul 2, 2020

samueljseay commented Jul 2, 2020

psealock commented Jul 3, 2020

Store details step - add contextual information and skip link #4735

Store details step - add contextual information and skip link #4735

Conversation

samueljseay commented Jul 2, 2020 • edited Loading

Accessibility

Screenshots

Detailed test instructions:

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

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

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

samueljseay commented Jul 2, 2020

samueljseay commented Jul 2, 2020

psealock commented Jul 3, 2020

samueljseay commented Jul 2, 2020 •

edited

Loading