Foundation Site: Buttons & Links con't

[kristinashu]

Follow up from - Foundation Site: Buttons & Links #317.

Summary of the buttons UI components are in wagtail: https://foundation.mozilla.org/en/docs/brand/design/ui-components/

This ticket is to finish off the still work in progress button elements:

• Disabled Button State
• In-line Icon Button
• Grouped Buttons
• Social Buttons

[kristinashu]

@beccaklam your blog design introduces some new button styles. Since those buttons are so lovely looking we should incorporate them into our existing styles and guidelines and retire some of our older styles.

New style:

Old style on /participate:

@sabrinang has also just pointed out that the square adjacent buttons in your comp are all the same width and one row which is not in our current guidelines. Could you please check-in with Mavis to see if that's possible?

[sabrinang]

social button audit examples on slide 48-49 for reference: https://docs.google.com/presentation/d/1mQJOwKj1OQkXlhHOVa2uLX0gRPQ-PffW0B3ffXztk5w/edit?usp=sharing

[beccaklam]

@kristinashu @sabrinang sorry about that! i just copied the style from what we did for PNI since it was similar to our current foundation site button styles. @mmmavis would we be able to incorporate this style into the foundation site's style guide?

[mmmavis]

@beccaklam so far only three types of buttons have been cleaned up, and yes, we can add more styles to the set.

Implemented

1. .btn-primary (the old .btn-normal)
2. .btn-secondary (the old .btn-ghost)
3. .btn-pop

---

would we be able to incorporate this style into the foundation site's style guide?

By "style", did you mean a button group where

• buttons are equal width,
• individual button is styled as btn-primary,
• and individual button has a social icon before the button text

[kristinashu]

@beccaklam assigning this one to you so you can also test out our processes around adding/updating the style guide.

[kristinashu]

One more thing to consider is our external icon in buttons and links MozillaFoundation/foundation.mozilla.org#3219

[beccaklam]

@beccaklam so far only three types of buttons have been cleaned up, and yes, we can add more styles to the set.

Implemented

1. .btn-primary (the old .btn-normal)

2. .btn-secondary (the old .btn-ghost)

3. .btn-pop

would we be able to incorporate this style into the foundation site's style guide?

By "style", did you mean a button group where

* buttons are equal width,

* individual button is styled as `btn-primary`,

* and individual button has a social icon before the button text

Hi @mmmavis sorry for the really late reply. Yes, that is what I mean by "style". Though I'm not sure it's much of a style? @sabrinang can you clarify what you meant by that style not being in our current guidelines?

[beccaklam]

Also, @kristinashu can you clarify what we're hoping for in a disabled button state and in-line button? Do we currently have a standard disabled button style for the foundation site?

[kristinashu]

Sabrina's audit deck might be useful, starting at slide 46.

We don't currently have a standard for disabled buttons. We have a disabled button on PNI tho:

In-line icon in a button of as text link would be like:

[kristinashu]

Sabrina's icon ticket #346

[beccaklam]

@sabrinang from your ticket ^ it seems like you also scaled the extra small icons from 12px to 16px to fit the buttons, right? That's the size I'm thinking works the best for the social buttons being discussed in this ticket.

[sabrinang]

@beccaklam I scaled small icons down 24px to 16px but I think @natalieworth is making a 16px set as I think she updated the grid for it

[beccaklam]

Brand update ticket started here: #371.