1856057 - UI tweaks to expandable highlights section

Status: VERIFIED FIXED

(Firefox :: Shopping, defect)

Description

[:Gijs (out for now; he/him)]

There are three minor UI issues with the highlights section:

• the separator line should be changed from --in-content-box-border-color to --in-content-border-color (a subtler grey
• the separator line should continue across the full width of the container (right now there is a transparent 1px border on shopping-card, I believe because of accessibility, which is causing a 1px gap either side).
• the absolute-positioned "show more" footer element is cutting square corners into the border-radius'd shopping-card ancestors. It should probably just get the same border radius as its ancestor, on the bottom left and right hand corner (not the others or it'll affect the separator line which is implemented as a top border).

Comment 1

[:Gijs (out for now; he/him)]

(In reply to :Gijs (he/him) from comment #0)

• the separator line should be changed from --in-content-box-border-color to --in-content-border-color (a subtler grey

Oops, got cut off here. But also, https://searchfox.org/mozilla-central/rev/2f5b657343ce18e4b8a56417f707022550f4b742/toolkit/themes/shared/in-content/common-shared.css#29 suggests this is still really dark, not the #f0f0f4 which is in the figma. So I'm confused. What colour is supposed to be used here?

• the separator line should continue across the full width of the container (right now there is a transparent 1px border on shopping-card, I believe because of accessibility, which is causing a 1px gap either side).

Actually, the spec appears to have a 1px border on (all) the cards that isn't transparent (e.g. here). But as far as I can tell this has never been brought up. Julian, could you clarify? Looks like if we made these borders match, the problem would also go away.

Comment 2

[Julian Gaibler]

Hi!
So, in Figma, we have the color token Border/Overlay, and that's the one we've been using for the card borders and the separator line. In light mode that is #F0F0F4 and in dark mode #52525E.

Ideally, both the card borders and the separator line would match the Figma color!

Comment 3

[:Gijs (out for now; he/him)]

(In reply to :Gijs (he/him) from bug 1856060 comment #2)

Talking to Julian, there are 2 other things that UX would like to change here:

• <snip>
• the "show more"/"show less" button should have an 8px gap above it instead of 12px.

I'll move the second one to bug 1856057.

Comment 4

[:Gijs (out for now; he/him)]

Attachment: Bug 1856057 - fix highlights card issues with colour/padding/borders, r?#shopping-reviewers

Depends on D189765

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5502331146fe
fix highlights card issues with colour/padding/borders, r=shopping-reviewers,niklas

Comment 6

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/5502331146fe

Comment 7

[:Gijs (out for now; he/him)]

Attachment: Bug 1856057 - fix highlights card issues with colour/padding/borders, r?#shopping-reviewers

Original Revision: https://phabricator.services.mozilla.com/D189818

Comment 8

[Phabricator Automation]

Uplift Approval Request

• Risk associated with taking this patch: low
• String changes made/needed: no
• Steps to reproduce for manual QE testing: Check that comment 0 issues have been addressed
• Is Android affected?: no
• Needs manual QE test: yes
• Fix verified in Nightly: no
• Explanation of risk level: CSS only fixes, still have some beta runway
• Code covered by automated testing: no
• User impact if declined: visual design of fakespot looks unpolished

Comment 9

[Dianna Smith [:diannaS]]

Comment on attachment 9356423 [details]
Bug 1856057 - fix highlights card issues with colour/padding/borders, r?#shopping-reviewers

Approved for 119.0b5

Comment 10

[Pulsebot]

https://hg.mozilla.org/releases/mozilla-beta/rev/20072380b395

Comment 11

[Rares Doghi, Desktop QA]

This issue is verified as fixed in our latest Nightly build 120.0a1 (2023-10-03) and our latest beta 119.0b5.