1858812 - Create a icon and text variant of moz-button

Status: RESOLVED FIXED

(Toolkit :: UI Widgets, task)

Description

[Mark Striemer [:mstriemer]]

While our design system doesn't currently specify a button with an icon and text, it is currently being used in practice. It would be nice to have this format standardized in our button implementation

Comment 1

[Hanna Jones [:hjones]]

Attachment: login-command-button

The credential management team already has a version of this that's also sort of a ghost button: https://searchfox.org/mozilla-central/source/browser/components/aboutlogins/content/components/login-command-button.mjs

There's potentially some prior art we can draw from there. Alternatively we should file follow up bugs to use the icon + text variant of moz-button in place of or as a base component for that login-command-button

Comment 2

[Hanna Jones [:hjones]]

Attachment: Bug 1858812 - Support an icon + text variant of moz-button r=mstriemer,#recomp-reviewers,#desktop-theme-reviewers

This patch expands moz-button to support a variant that contains both an icon and text, since this is a fairly common UI pattern. This patch enables us to deprecate icon as a type, but maintains support for full backwards compatibilty/to support different use cases.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/ac4a48bfbf74
Support an icon + text variant of moz-button r=mstriemer,reusable-components-reviewers,desktop-theme-reviewers,sfoster

Comment 4

[Pulsebot]

Backout by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/8e9cf97b312b
Backed out changeset ac4a48bfbf74 for causing mochitest failures on test_moz_button.html CLOSED TREE

Comment 5

[Aron Cseh]

Backed out for causing mochitest failures on test_moz_button.html

• Backout link
• Push with failures
• Failure Log

[task 2024-04-23T14:21:18.364Z] 14:21:18     INFO - TEST-PASS | toolkit/content/tests/widgets/test_moz_button.html | backgroundSize should be --icon-size-default 
[task 2024-04-23T14:21:18.365Z] 14:21:18     INFO - Buffered messages finished
[task 2024-04-23T14:21:18.396Z] 14:21:18     INFO - TEST-UNEXPECTED-FAIL | toolkit/content/tests/widgets/test_moz_button.html | button uses an inner img element to display an icon 
[task 2024-04-23T14:21:18.396Z] 14:21:18     INFO - SimpleTest.ok@chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:426:16
[task 2024-04-23T14:21:18.396Z] 14:21:18     INFO - verifyImageIcon@chrome://mochitests/content/chrome/toolkit/content/tests/widgets/test_moz_button.html:174:11
[task 2024-04-23T14:21:18.396Z] 14:21:18     INFO - testIconButtons@chrome://mochitests/content/chrome/toolkit/content/tests/widgets/test_moz_button.html:187:22
[task 2024-04-23T14:21:18.396Z] 14:21:18     INFO - async*add_task/nextTick/<@chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:2189:34
[task 2024-04-23T14:21:18.396Z] 14:21:18     INFO - async*nextTick@chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:2233:11
[task 2024-04-23T14:21:18.397Z] 14:21:18     INFO - setTimeout handler*SimpleTest_setTimeoutShim@chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:922:41
[task 2024-04-23T14:21:18.397Z] 14:21:18     INFO - add_task@chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:2137:17
[task 2024-04-23T14:21:18.398Z] 14:21:18     INFO - @chrome://mochitests/content/chrome/toolkit/content/tests/widgets/test_moz_button.html:53:13
[task 2024-04-23T14:21:18.398Z] 14:21:18     INFO - Not taking screenshot here: see the one that was previously logged
[task 2024-04-23T14:21:18.398Z] 14:21:18     INFO - TEST-UNEXPECTED-FAIL | toolkit/content/tests/widgets/test_moz_button.html | TypeError: can't access property "src", img is null - Should not throw any errors
[task 2024-04-23T14:21:18.399Z] 14:21:18     INFO - verifyImageIcon@chrome://mochitests/content/chrome/toolkit/content/tests/widgets/test_moz_button.html:175:12
[task 2024-04-23T14:21:18.399Z] 14:21:18     INFO - testIconButtons@chrome://mochitests/content/chrome/toolkit/content/tests/widgets/test_moz_button.html:187:22
[task 2024-04-23T14:21:18.399Z] 14:21:18     INFO - async*add_task/nextTick/<@chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:2189:34
[task 2024-04-23T14:21:18.399Z] 14:21:18     INFO - async*nextTick@chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:2233:11
[task 2024-04-23T14:21:18.399Z] 14:21:18     INFO - setTimeout handler*SimpleTest_setTimeoutShim@chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:922:41
[task 2024-04-23T14:21:18.400Z] 14:21:18     INFO - add_task@chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:2137:17
[task 2024-04-23T14:21:18.400Z] 14:21:18     INFO - @chrome://mochitests/content/chrome/toolkit/content/tests/widgets/test_moz_button.html:53:13
[task 2024-04-23T14:21:18.400Z] 14:21:18     INFO - GECKO(1071) | MEMORY STAT | vsize 11963MB | residentFast 551MB | heapAllocated 237MB
[task 2024-04-23T14:21:18.401Z] 14:21:18     INFO - GECKO(1071) | [Parent 1071, Main Thread] WARNING: NS_ENSURE_SUCCESS(rv, rv) failed with result 0x80004005 (NS_ERROR_FAILURE): file /builds/worker/checkouts/gecko/chrome/nsChromeRegistry.cpp:182
[task 2024-04-23T14:21:18.402Z] 14:21:18     INFO - GECKO(1071) | [Parent 1071, Main Thread] WARNING: 'NS_FAILED(rv)', file /builds/worker/checkouts/gecko/chrome/nsChromeProtocolHandler.cpp:73
[task 2024-04-23T14:21:18.403Z] 14:21:18     INFO - GECKO(1071) | [Parent 1071, Main Thread] WARNING: Failed to retarget HTML data delivery to the parser thread.: file /builds/worker/checkouts/gecko/parser/html/nsHtml5StreamParser.cpp:1215
[task 2024-04-23T14:21:18.406Z] 14:21:18     INFO - TEST-OK | toolkit/content/tests/widgets/test_moz_button.html | took 609ms

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/94ecd54d9e6b
Support an icon + text variant of moz-button r=mstriemer,reusable-components-reviewers,desktop-theme-reviewers,sfoster

Comment 7

[Serban Stanca [:SerbanS]]

Backed out for causing mochitests failures in test_moz_button.html.

• Backout link
• Push with failures
• Failure Log
• Failure line: TEST-UNEXPECTED-FAIL | toolkit/content/tests/widgets/test_moz_button.html | fill should be --button-text-color - got "rgba(91, 91, 102, 1)", expected "rgba(21, 20, 26, 1)"

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/32cf6efa1382
Support an icon + text variant of moz-button r=mstriemer,reusable-components-reviewers,desktop-theme-reviewers,sfoster

Comment 9

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/32cf6efa1382