Pills and tooltips in product step of OBW #4707

becdetat · 2020-06-26T06:37:35Z

Partially addresses #4577

This replaces the existing price text with a new pill component, using per-month amounts. It also adds a tooltip to each pill.

Accessibility

All text has at least a 4.5 color contrast with its background

Screenshots

Smaller viewport:

Detailed test instructions:

Start the OBW
Step through to the product selection task
Check that the layout matches the design mockup

becdetat · 2020-06-26T06:39:42Z

client/profile-wizard/style.scss

@@ -263,7 +263,7 @@
 			}

 			label.components-checkbox-control__label {
-				margin-left: $gap-large - $gap-smallest;
+				margin-left: $gap;


This is just a small tweak to get the label to line up with the description per the design mockup

timmyc

Looking really great Bec. Couple of minor comments in the code, otherwise all looking good there.

I did have a few questions on the design side of this so cc @jameskoster :

I verified with the design that the pills should be purple. Given that we have been moving away from purple everywhere else, just wanted to see why we are keeping it in this new component?
On narrow view ports, we can end up with the pill wrapping onto a second line. How should we handle this?

timmyc · 2020-06-26T15:26:19Z

client/profile-wizard/steps/product-types.js

+
+	const monthlyPrice = ( yearlyPrice / 12.0 ).toFixed( 2 );
+	const priceDescription = sprintf(
+		'$%f per month, billed annually',


Looks like we missed a translation wrapper on this text.

Whoops, I thought that since sprintf came from the i18n library it included translation. Fixed in 6156c3f.

timmyc · 2020-06-26T15:28:53Z

packages/components/src/pill/pill.js

@@ -0,0 +1,7 @@
+export function Pill( { children } ) {


A new component is born 🎉 - can we also get a line added to the changelog about this new component?

Done in 0fe3e6d

jameskoster · 2020-06-29T11:43:23Z

I verified with the design that the pills should be purple. Given that we have been moving away from purple everywhere else, just wanted to see why we are keeping it in this new component?

I'm going to confirm this with the design team in our call on Tuesday.

jameskoster · 2020-06-30T15:06:23Z

@becdetat we decided that in this use case we'll make the pills gray :D If you could use $medium-gray-text for the stroke and the text, that would be splendid. Sorry for the mix up! :)

becdetat · 2020-07-02T00:41:12Z

Thanks @jameskoster, I've updated the screenshot above with the new colours.

Do you have any guidance around how to handle narrow viewports and the pill pushing to the next line?

jameskoster · 2020-07-02T08:44:09Z

Ah, sorry! Yes, I think the wrapping is ok, so long as we can fix the justification. When wrapped, if the title, pill, and description all line up nicely I think we're good :)

becdetat · 2020-07-04T07:59:18Z

@jameskoster can you check the small viewport screenshot in the description above? Everything looks nicely aligned now.

becdetat · 2020-07-08T01:48:16Z

@jameskoster just a follow-up to see if you can check on the layout? Cheers :-)

psealock

Code is looking great.

Check that the layout matches the design mockup

The continue button has drifted left somehow.

If I remember correctly we support all the way to 320px wide displays. The pills could use just a touch of smallerness.

I also noticed the designs have grey lines and slightly more padding between options:

psealock · 2020-07-09T02:00:49Z

packages/components/src/pill/style.scss

@@ -0,0 +1,8 @@
+.woocommerce-pill {
+	border: 1px solid $medium-gray-text;


FYI medium-gray-text is getting removed in the next update of base-styles in #4759.

Good catch, let's make that gray-700 if we can :)

psealock · 2020-07-09T02:03:04Z

client/profile-wizard/steps/product-types.js

+		return description;
+	}
+
+	const monthlyPrice = ( yearlyPrice / 12.0 ).toFixed( 2 );


TIL toFixed 😄

jameskoster · 2020-07-09T09:33:21Z

The pills could use just a touch of smallerness.

Dang, that is annoying! I'm gonna say I'm ok with it though as it feels like an edge case to me.

If we can just make sure the pills use the Caption text style (including the line-height) that will at least help a little bit.

becdetat · 2020-07-14T05:35:23Z

Ok, this is much closer to the design now:

I did adjust the font size of the pills down from 12px to 11px, which fixes the overflow issue at 320px wide viewports.

jameskoster

Could we only adjust the font-size down to 11px on small screens? That way it will maintain consistency with the caption text style on all other viewport sizes :)

becdetat · 2020-07-15T02:50:09Z

@jameskoster done in 38ccaa0 with a breakpoint on screens 320px and smaller.

timmyc · 2020-07-16T22:08:49Z

@jameskoster could you give this one final 👀 from the design side of things please?

timmyc

Took for one last spin, all is looking great 🚢

… into pills-and-tooltips-in-obw # Conflicts: # client/profile-wizard/steps/product-types.js

becdetat added 3 commits June 26, 2020 14:24

Add monthly product prices to OBW

587d75c

Remove description for physical and download products

8d89a01

Use pills in product selection step of OBW

5594dbe

becdetat added the [Status] Needs Review label Jun 26, 2020

becdetat requested a review from a team June 26, 2020 06:37

probot-autolabeler bot added focus: components Issues for woocommerce components Packages labels Jun 26, 2020

becdetat commented Jun 26, 2020

View reviewed changes

timmyc suggested changes Jun 26, 2020

View reviewed changes

mattsherman 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 Jun 26, 2020

becdetat added 3 commits July 2, 2020 10:30

Add missing translation wrapper, also convert some spaces to tabs

6156c3f

Add pill to changelog

0fe3e6d

Change pills to medium gray text and border

621c72f

becdetat and others added 2 commits July 4, 2020 18:00

Make everything line up correctly on smaller viewports

73731a3

Merge branch 'main' into pills-and-tooltips-in-obw

ebb71a6

becdetat 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 Jul 4, 2020

psealock reviewed Jul 9, 2020

View reviewed changes

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

Get the styles closer to the design

49d66ae

becdetat 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 Jul 14, 2020

jameskoster suggested changes Jul 14, 2020

View reviewed changes

jeffstieler 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 14, 2020

Breakpoint to set font size to 11px

38ccaa0

Merge branch 'main' into pills-and-tooltips-in-obw

ebdb24e

Merge branch 'main' into pills-and-tooltips-in-obw

af62eec

jameskoster approved these changes Jul 17, 2020

View reviewed changes

timmyc approved these changes Jul 20, 2020

View reviewed changes

timmyc added [Status] Ready to Merge and removed needs: author feedback The issue/PR needs a response from any of the parties involved in the issue. labels Jul 20, 2020

Merge branch 'main' of https://github.com/woocommerce/woocommerce-admin…

3e053a2

… into pills-and-tooltips-in-obw # Conflicts: # client/profile-wizard/steps/product-types.js

becdetat merged commit da243ac into main Jul 21, 2020

becdetat deleted the pills-and-tooltips-in-obw branch July 21, 2020 04:27

timmyc mentioned this pull request Jul 21, 2020

Store profiler - product types step change #4577

Closed

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Pills and tooltips in product step of OBW #4707

Pills and tooltips in product step of OBW #4707

becdetat commented Jun 26, 2020 •

edited

Loading

becdetat Jun 26, 2020

timmyc left a comment

timmyc Jun 26, 2020

becdetat Jul 2, 2020

timmyc Jun 26, 2020

becdetat Jul 2, 2020

jameskoster commented Jun 29, 2020

jameskoster commented Jun 30, 2020

becdetat commented Jul 2, 2020

jameskoster commented Jul 2, 2020

becdetat commented Jul 4, 2020

becdetat commented Jul 8, 2020

psealock left a comment

psealock Jul 9, 2020

jameskoster Jul 9, 2020

psealock Jul 9, 2020

jameskoster commented Jul 9, 2020

becdetat commented Jul 14, 2020

jameskoster left a comment

becdetat commented Jul 15, 2020

timmyc commented Jul 16, 2020

timmyc left a comment

		@@ -0,0 +1,8 @@
		.woocommerce-pill {
		border: 1px solid $medium-gray-text;

Pills and tooltips in product step of OBW #4707

Pills and tooltips in product step of OBW #4707

Conversation

becdetat commented Jun 26, 2020 • edited Loading

Accessibility

Screenshots

Detailed test instructions:

Choose a reason for hiding this comment

timmyc 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

jameskoster commented Jun 29, 2020

jameskoster commented Jun 30, 2020

becdetat commented Jul 2, 2020

jameskoster commented Jul 2, 2020

becdetat commented Jul 4, 2020

becdetat commented Jul 8, 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

jameskoster commented Jul 9, 2020

becdetat commented Jul 14, 2020

jameskoster left a comment

Choose a reason for hiding this comment

becdetat commented Jul 15, 2020

timmyc commented Jul 16, 2020

timmyc left a comment

Choose a reason for hiding this comment

becdetat commented Jun 26, 2020 •

edited

Loading