site-kit-wp
site-kit-wp copied to clipboard
google
Implement new design for User Input Settings
Feature Description
The User Input Settings section of the Admin Settings should be updated to reflect the updated look.
Do not alter or remove anything below. The following sections will be managed by moderators only.
Acceptance criteria
- The User Input section of Admin Settings page should implement the new design.
- The layout, typography, positioning of various UI elements and text copies should exactly follow the design.
- The Key Metrics toggle should not be implemented as part of this issue.
- The questions will be updated separately as part of #5888.
Implementation Brief
Test Coverage
QA Brief
Changelog entry
@kuasha420 what is implemented as part of this issue? It seems like it would only be the "Key metrics" container with nothing in it? If so we can probably handle this as part of #5895
Otherwise, I think this seems like it would be a condition to render either the CTA or the settings, both of which are implemented in other issues.
I think we could've implemnted CTA and this one together, however the other one was moved far up into IB and is with @hussain-t.
I've updated the AC of this one to add note about the CTA. This should be good now.
This has turned into kind of a glue issue. If, during the IB process, there turns out to be nothing to do here, we can close it then. However, still worth keeping it open for now and see if everything fits together and follows the design and intent.
@kuasha420, I agree; we could've combined both into a single task. However, I have updated the IB for #5895. So the CTA container can be implemented as part of this ticket.
I get what you mean about this mostly being a "glue" issue @kuasha420, which I think made these ACs a bit unclear to me—they mostly seem like what will be implemented elsewhere/what not to implement.
Could you clarify exactly what this issue is adding/being changed by this issue in one section of the ACs? And then if you want to clarify as a separate point what's covered elsewhere by other issues that's fine, but I think it's currently mixed which is hard to parse 🙂
Fair point @tofumatt ! I have reordered the ACs to put what needs to be done in the beginning and hopefully it reads clearer. I've also mentioned showing the CTA or the questions correctly based on the completion state.
As for that the issue is mainly addressing, it's the aforementioned logic and general design update ie. layout, font, copy etc. \
Cheers.
Unassigned me, since I did not start execution and got many other issues back from CR, that I have to work on.
QA Update ❌
@nfmohit
- Background color of selected answer is different. In Figma color is #B8E5CA and implemented color is #b0e6c5.
- On edit answer screen. Options are not aligned as Figma design.
Figma -
- Questions title font color in Figma is #202124 and implemented color is #131418 and Font Family in Figma is 'Google Sans Text' and implemented is 'Google Sans Display'.
- Answers Loading Issue > When user navigate to admin settings then for milliseconds "Please select an answer" text gets load before actual answer.
https://user-images.githubusercontent.com/94359491/211818274-e2a12059-a3db-49c4-a72c-9497e80e7032.mp4
- On edit answer, screen separation line not exists between options in Figma design.
Figma
Thank you for raising the concerns, @mohitwp!
I have addressed all of them, except 1 (Background color of selected answer is different. In Figma color is #B8E5CA and implemented color is #b0e6c5), this has been implemented using the correct token/variable, and will be fixed via #6328.
Although, I feel most of these concerns are related to #5891 (re-design of the User Input Preview component), since we re-use the Preview component in the Admin Settings screen. This issue was defined mostly to address the container of the Preview component in the Admin Settings screen. Regardless, I've addressed the concerns as a part of this issue.
Thanks!
QA Update ⚠️
@nfmohit I found 2 issues. Let me know if you would resolve the below issue in the same ticket, or I should create a separate ticket for this ?
Issue 1 : Loading issue> If analytics is connected then for milliseconds "CTA gets load" before we see the answer preview screen.
https://user-images.githubusercontent.com/94359491/212305531-0eec3d22-f951-4a3a-adc9-7b7c15ef5357.mp4
- Now under options alignment for radio buttons is same as Figma design but check boxes in 3rd question are still not aligned.
Thank you for re-checking this, @mohitwp!
Issue 1 : Loading issue> If analytics is connected then for milliseconds "CTA gets load" before we see the answer preview screen.
Since it doesn't directly relate to the design in question, I think this should be addressed in a new issue.
Now under options alignment for radio buttons is same as Figma design but check boxes in 3rd question are still not aligned.
I have added a new PR #6403 for this.
Thanks!
QA Update ✅
Thank you @nfmohit
- Verified on main.
- Issue related to alignment of option checkboxes is now resolved.
For issue 1 reported here. I will create a separate ticket for this. I'm also getting Site Kit API console error when 'User Input' feature flag is active. I will create a separate issue for this also.
- Verified all issues except Issue 1 - Reported here are now resolved.
- Admin Settings screen now shows the User Input section according to the Figma design linked in the ACs.
- Verified settings section visible when the user has completed the User Input questions.
- If questions are unanswered, then CTA display under Settings > Admin.
Note -
- Key Metrics toggle should not be implemented as part of this issue.
- The questions will be updated separately as part of Update questions and related copies of User Input Screens #5888.
- The Inline Edit interface will be implemented in https://github.com/google/site-kit-wp/issues/5897.
@mohitwp once you create the follow up issues, please assign them to me for triage. Cheers.
@kuasha420 Here is the follow-up issue - https://github.com/google/site-kit-wp/issues/6428 .