1846846 - Convert shopping-card to a reusable moz-card element in toolkit/widgets

Status: RESOLVED FIXED

(Toolkit :: UI Widgets, task)

Description

[Hanna Jones [:hjones]]

The shopping team recently created a shopping-card element to support their ongoing work. It's relatively simple, and looks pretty similar to a card element that's getting used in mockups for new Firefox translations settings in about:preferences. In order to allow the translations team to use the same element in their work we should convert the shopping-card into a reusable element in toolkit/widgets.

There are a couple of things to keep in mind:

• we might want to hg cp the file rather than move it over entirely (at least to start). There's a rating slot in shopping-card that we won't want to include in a reusable version of the element, so rather than updating every existing consumer of shopping-card it may make sense to do something like:

class ShoppingCard extends MozCard {
    render() {
        ...
        <slot name="rating"></slot>
    } 
}

• ^that kind of depends on how widespread the usage is
• We should probably use heading for both the class and the property name here (instead of header and label). This is a nitpick, but we've used that naming elsewhere.
• We may need to change a couple of classnames that include the word "shopping." We should port over the CSS too.
• We'll need to work with design to make a couple small tweaks to make sure what we create will work for both the shopping and translation use cases

Comment 1

[Hanna Jones [:hjones]]

taking a closer look I realized shopping-card.css is pulling in in-content/common.css: https://searchfox.org/mozilla-central/source/browser/components/shopping/content/shopping-card.css#5

I'm not totally sure why that is/what common styles the card is relying on, but we'll need to get rid of that dependency in the process of making this a reusable component. It can be a follow up task if it becomes a whole headache or seems like too much lift to do component upgrades in the process of migrating the widget to toolkit.

Comment 2

[Tim Giles [:tgiles]]

Attachment: Bug 1846846 - Convert shopping-card to moz-card. r=hjones,mstriemer,jules,#accessibility-frontend-reviewers

This change allows us to refactor the shopping-card to have its ratings
case without needing to duplicate the card widget itself. Additionally,
this will allow us to use the card widget for the translations case in
about:preferences.

The button styles in moz-card.css will need to be de-duplicated in the
future, once we figure out the moz-button widget.

Comment 3

[Tim Giles [:tgiles]]

Attachment: Bug 1846846 - Use --box-background-color in common-shared.css. r=dao,#recomp-reviewers

Depends on D187712

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/54af6f5764b9
Convert shopping-card to moz-card. r=hjones,mstriemer,jules,desktop-theme-reviewers,reusable-components-reviewers,flod,dao,accessibility-frontend-reviewers,morgan
https://hg.mozilla.org/integration/autoland/rev/f5c77e0e2f77
Use --box-background-color in common-shared.css. r=dao,reusable-components-reviewers,desktop-theme-reviewers,mstriemer,hjones

Comment 5

[Cosmin Sabou [:CosminS]]

Backed out for mochitest failures on test_moz_card.html.

Push with failures: https://treeherder.mozilla.org/jobs?repo=autoland&selectedTaskRun=dHVVVXWAQsaWEaA7Gsv2Cw.0&resultStatus=testfailed%2Cbusted%2Cexception&revision=f5c77e0e2f77ad713bba9f132e9049903ad88e66

Failure log: https://treeherder.mozilla.org/logviewer?job_id=437887187&repo=autoland

Backout link: https://hg.mozilla.org/integration/autoland/rev/093273df12ea1f8f866756be52210098d2a735fd

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a5daea306be0
Convert shopping-card to moz-card. r=hjones,mstriemer,jules,desktop-theme-reviewers,reusable-components-reviewers,flod,dao,accessibility-frontend-reviewers,morgan
https://hg.mozilla.org/integration/autoland/rev/bee8db70faed
Use --box-background-color in common-shared.css. r=dao,reusable-components-reviewers,desktop-theme-reviewers,mstriemer,hjones

Comment 7

[Norisz Fay [:noriszfay]]

Backed out for causing bc failures on browser_parsable_css.js

Backout link

Push with failures

Failure log

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b8044557226d
Convert shopping-card to moz-card. r=hjones,mstriemer,jules,desktop-theme-reviewers,reusable-components-reviewers,flod,dao,accessibility-frontend-reviewers,morgan
https://hg.mozilla.org/integration/autoland/rev/1aa814da9673
Use --box-background-color in common-shared.css. r=dao,reusable-components-reviewers,desktop-theme-reviewers,mstriemer,hjones

Comment 9

[Cristian Tuns]

Backed out for causing bc failures in browser_parsable_css.js

• Backout link
• Push with failures
• Failure Log
• Failure line: TEST-UNEXPECTED-FAIL | browser/base/content/test/static/browser_parsable_css.js | custom property --card-text-color is not referenced -

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/756177b9a19a
Convert shopping-card to moz-card. r=hjones,mstriemer,jules,desktop-theme-reviewers,reusable-components-reviewers,flod,dao,accessibility-frontend-reviewers,morgan
https://hg.mozilla.org/integration/autoland/rev/6a116beceb89
Use --box-background-color in common-shared.css. r=dao,reusable-components-reviewers,desktop-theme-reviewers,mstriemer,hjones

Comment 11

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/756177b9a19a
https://hg.mozilla.org/mozilla-central/rev/6a116beceb89