Get started page UX improvements: add FAQs card #1470

ianlin · 2022-05-03T06:48:48Z

Changes proposed in this Pull Request:

Part of #1392, this PR adds the FAQs card to the new get started page.

Design: eQ9O4m2flzrcAiDMXkOW0m-fi-7350%3A121282

The latest copies and the links of the FAQ can be found in the Marketing copy document in this post: pcTzPl-i7-p2#design-requirements. Need to request access in order to see the content.

Screenshots:

Desktop

Mobile

Tablet

Detailed test instructions:

Go to GLA's get started page: https://domain.test/wp-admin/admin.php?page=wc-admin&path=%2Fgoogle%2Fstart
Check the sixth card of the get started page, the UI should align with the design.
Use the mobile view from the dev tool, the text of the longer question shouldn't be overlapped with the caret down icon like the below image:

Changelog entry

Update - Add the FAQs card for UX improvements on get started page.

On some mobile devices like iPhone 12 Pro.

puntope · 2022-05-03T09:14:24Z

js/src/components/faqs-panel/index.js

@@ -30,11 +31,12 @@ const getPanelToggleHandler = ( trackName, id ) => ( isOpened ) => {
 * @param {Object} props React props.
 * @param {string} props.trackName The track event name to be recorded when toggling on FAQ items.
 * @param {Array<FaqItem>} props.faqItems FAQ items for rendering.
+ * @param {string} props.className The class name for this component.


💅

props.className Is optional

Thanks, updated in 43a1d02.

puntope · 2022-05-03T09:19:18Z

I saw some inconsistencies between spacing.

puntope · 2022-05-03T09:24:23Z

💅 To consider a refactor of this:

Maybe using flex styling instead of absolute positioning the SVG.

puntope · 2022-05-03T09:25:58Z

The latest copies and the links of the FAQ can be found in the Marketing copy document in this post: pcTzPl-i7-p2#design-requirements. Need to request access in order to see the content.

Requested access.

puntope

Thanks for the implementation 🙏

Left some comments and suggestions.

ianlin · 2022-05-03T12:36:49Z

@puntope Thanks for the review!

Maybe using flex styling instead of absolute positioning the SVG.

Did you still see the overlapping on the text and the caret down icon? Because there was actually a simple commit 5aa5035 that might fix it by simply add more padding to the right.

Since we are using Panel component from Gutenberg for the FAQs so it's a bit tricky to override its styles using Flex styling, as they put the svg before the text in the code there. Let me know if I miss anything, thanks!

puntope · 2022-05-04T07:40:53Z

Flex styling, as they put the svg before the text in the code there

flex-direction: row-reverse; would help with that. But I'll check with your fix 👌

puntope · 2022-05-04T07:59:13Z

In regards f82e29a

I still see reduced space in

How do I sync my products to Google free listings? and Can I run both Shopping ads and free listings campaigns at the same time?

puntope · 2022-05-04T08:02:04Z

In regards 5aa5035

I still see the chevron quite close to the headline

Originally it used absolute position so the longer text would be overlapped with the icon.

ianlin · 2022-05-04T08:53:48Z

Hey @puntope thanks for the tip! I've updated the codes and it's ready for the review again.

flex-direction: row-reverse; would help with that.

Awesome, it worked, thanks and TIL! Updated in 641a397. I added it in js/src/components/faqs-panel/index.scss so both this component and js/src/setup-mc/setup-stepper/setup-accounts/faqs.js can use the same change.

I still see reduced space in
How do I sync my products to Google free listings? and Can I run both Shopping ads and free listings campaigns at the same time?

Ah thanks for the sharp eyes, finally got what you meant. It's the difference for the bottom spaces. Updated in
1232c2e, thanks!

Finally I also add a commit 486cc21 to make the question title's font style to be aligned with the design.

puntope · 2022-05-04T12:12:50Z

js/src/components/faqs-panel/index.scss

+				position: unset;
+				right: unset;
+				top: unset;
+				transform: unset;


right: unset; top: unset;

This two seems no necessary. Since right and top are not affecting static positioned elements.

Thanks! Updated in 9e15573.

puntope

✅ APPROVED

Checked the copy and is correct
Checked the design and match the Figma

Left some pending comment regarding the unnecessary override of right, and top props. But approved in advance.

ianlin added 11 commits May 3, 2022 12:44

Move get-started-page/faqs.js to get-started-page/faqs/index.js

1da37a8

Update faqs panel header's style in get started faqs to align design

2b98f78

Update the 1st FAQ in get started page

d20b14f

Update the 2nd FAQ in get started page

72c8359

Update the 3rd FAQ in get started page

848b9bb

Update the 4th FAQ in get started page

0baccfd

Update the 5th FAQ in get started page

223c210

Update the 6th FAQ in get started page

7cd8ba5

Update the 7th FAQ in get started page

f0a9d21

Update the 8th FAQ in get started page

f3bfe17

Fix the FAQ questions would overlap with the caret down icon

5aa5035

On some mobile devices like iPhone 12 Pro.

ianlin added the type: enhancement The issue is a request for an enhancement. label May 3, 2022

ianlin requested a review from a team May 3, 2022 06:48

ianlin self-assigned this May 3, 2022

puntope reviewed May 3, 2022

View reviewed changes

puntope self-requested a review May 3, 2022 09:26

puntope reviewed May 3, 2022

View reviewed changes

ianlin added 2 commits May 3, 2022 20:01

Indicates className is optional in JSDoc for FaqsPanel component

43a1d02

Apply <p> to every row of FAQs so they have same line heights

f82e29a

ianlin requested a review from puntope May 3, 2022 12:36

ianlin added 3 commits May 4, 2022 16:18

Apply <p> to every row of FAQs so they have same line heights

1232c2e

Use flex to wrap the gutenberg panel's svg icon

641a397

Originally it used absolute position so the longer text would be overlapped with the icon.

Adjust FAQ's question title's font style to align the design

486cc21

puntope reviewed May 4, 2022

View reviewed changes

puntope approved these changes May 4, 2022

View reviewed changes

Remove unnecessary overrides for Panel component

9e15573

ianlin merged commit 533a9d4 into feature/1392-ux-improvements-on-get-started-page May 5, 2022

ianlin deleted the add/1392-faqs branch May 5, 2022 04:45

eason9487 mentioned this pull request Feb 13, 2023

PMax Assets: Add FAQs for the assets #1881

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Get started page UX improvements: add FAQs card #1470

Get started page UX improvements: add FAQs card #1470

ianlin commented May 3, 2022

puntope May 3, 2022

ianlin May 3, 2022

puntope commented May 3, 2022

puntope commented May 3, 2022

puntope commented May 3, 2022

puntope left a comment

ianlin commented May 3, 2022

puntope commented May 4, 2022

puntope commented May 4, 2022

puntope commented May 4, 2022

ianlin commented May 4, 2022 •

edited

Loading

puntope May 4, 2022

ianlin May 5, 2022

puntope left a comment

Get started page UX improvements: add FAQs card #1470

Get started page UX improvements: add FAQs card #1470

Conversation

ianlin commented May 3, 2022

Changes proposed in this Pull Request:

Screenshots:

Desktop

Mobile

Tablet

Detailed test instructions:

Changelog entry

puntope May 3, 2022

Choose a reason for hiding this comment

ianlin May 3, 2022

Choose a reason for hiding this comment

puntope commented May 3, 2022

puntope commented May 3, 2022

puntope commented May 3, 2022

puntope left a comment

Choose a reason for hiding this comment

ianlin commented May 3, 2022

puntope commented May 4, 2022

puntope commented May 4, 2022

puntope commented May 4, 2022

ianlin commented May 4, 2022 • edited Loading

puntope May 4, 2022

Choose a reason for hiding this comment

ianlin May 5, 2022

Choose a reason for hiding this comment

puntope left a comment

Choose a reason for hiding this comment

ianlin commented May 4, 2022 •

edited

Loading