Closed Bug 1846846 Opened 1 year ago Closed 8 months ago

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

Categories

(Toolkit :: UI Widgets, task)

task

Tracking

()

RESOLVED FIXED
122 Branch
Tracking Status
firefox122 --- fixed

People

(Reporter: hjones, Assigned: tgiles)

References

(Blocks 3 open bugs)

Details

(Whiteboard: [recomp])

Attachments

(2 files)

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
Whiteboard: [fidefe-reusable-components]
Assignee: nobody → tgiles

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.

See Also: → 1850037
See Also: 1850037

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.

Attachment #9352085 - Attachment description: Bug 1846846 - Convert shopping-card to moz-card. r=hjones,mstriemer,jules → WIP: Bug 1846846 - Convert shopping-card to moz-card. r=hjones,mstriemer,jules
Blocks: 1853029
Attachment #9352085 - Attachment description: WIP: Bug 1846846 - Convert shopping-card to moz-card. r=hjones,mstriemer,jules → Bug 1846846 - Convert shopping-card to moz-card. r=hjones,mstriemer,jules
Blocks: 1854008
Blocks: 1860901
Attachment #9352085 - Attachment description: Bug 1846846 - Convert shopping-card to moz-card. r=hjones,mstriemer,jules → Bug 1846846 - Convert shopping-card to moz-card. r=hjones,mstriemer,jules,#accessibility-frontend-reviewers
Blocks: 1862052
See Also: → 1840735
Blocks: 1865630
Pushed by tgiles@mozilla.com:
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
Pushed by tgiles@mozilla.com:
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
Flags: needinfo?(tgiles)

Backed out for causing bc failures on browser_parsable_css.js

Backout link

Push with failures

Failure log

Flags: needinfo?(tgiles)
Pushed by tgiles@mozilla.com:
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

Backed out for causing bc failures in browser_parsable_css.js

Pushed by tgiles@mozilla.com:
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
Status: NEW → RESOLVED
Closed: 8 months ago
Resolution: --- → FIXED
Target Milestone: --- → 122 Branch
Duplicate of this bug: 1862052
Flags: needinfo?(tgiles)
Regressions: 1871024
Regressions: 1872139
No longer regressions: 1872139
No longer blocks: 1865630
Whiteboard: [fidefe-reusable-components] → [recomp]
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: