1885332 - Add a README with documentation for moz-button

Status: RESOLVED FIXED

(Toolkit :: UI Widgets, task)

Description

[Hanna Jones [:hjones]]

We should add some component specific documentation for moz-button. In particular we should highlight the different button types and give examples of how to style <moz-button type="icon">.

Comment 2

[Hanna Jones [:hjones]]

Some interesting points that have come up recently and might be good to document:

• When to use the different variants (destructive vs primary, etc)
• Basic tone guidelines for the different variants
• Avoiding changing button types on interaction (i.e. switching from primary to destructive on hover)
• Avoiding "Schrodinger's button" i.e. buttons that only appear when you hover something

There is already content on some of this on the Acorn site, but it could be nice to have some basic developer facing documentation on this as well.

Comment 4

[Hanna Jones [:hjones]]

Another thing that came up today which we should really document - there are two ways of providing an icon/image to moz-button you can either specify type="icon":

<moz-button type="icon"></moz-button>

and provide a background-image for the ::part:

moz-button::part(button) {
  background-image: url("chrome://global/skin/media/audio-muted.svg");
}

Or you can provide an icon URI via iconsrc, in which case setting type="icon" is redundant:

<moz-button iconsrc="chrome://global/skin/media/audio-muted.svg"></moz-button>

Comment 5

[Mark Kennedy [:mark]]

We should probably update the Storybook link used in the Usage section of the Acorn site as well. Right now it has an incorrect link.

Comment 6

[akulyk]

Attachment: Bug 1885332 - Add a README with documentation for moz-button r=#recomp-reviewers

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1d1638d009de
Add a README with documentation for moz-button r=reusable-components-reviewers,hjones

Comment 8

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/1d1638d009de