Molecule -> buttons

[justinscherer]

Analysis

Our current buttons are:

• numerous. We have way too many button styles
• Inaccessible because they constantly use allcaps to demonstrate tappability. Allcaps are harder to read.
• Heavily use drop shadows to bump up contrast and show clicked states
• Lot’s of muddy grey on greys
• We have no link button style

Solution

Some example treatments with our type and branding.

New styles on white

New styles on black

New styles on white with alt states

Rationale

Limit buttons to 3 button types:

1. solid button (primary action)
2. hollow button (secondary action)
3. link button (tertiary action)
   This forces us to be more selective with our calls to action on complex pages but still gives us plenty of flexibility with colour variation.

• the buttons get rid of the allcaps in favour of our "tappable" type style from #148 i.e. Lato Black with 0.2px letter-spacing
• Properly contrasting colours replace drop shadows
• clicked styles nudge in the corner radius of the button from 3 -> 5. Very subtle.
• Disabled buttons are #D0D0D0 which is our generally disabled colour.
• buttons can have determinate loaders instead of our current treatment with the bouncing balls inside buttons.
• sizing of buttons follows our new sizing rules
• Colours may vary depending on context, but should follow our colour rules

[Angamanga]

@Erioldoesdesign @justinscherer Link for QA is here:

• http://preview.ushahidi.com/platform-pattern-library/ui-refresh/assets/html/1_atoms/#pl-pattern-buttons
• http://preview.ushahidi.com/platform-pattern-library/ui-refresh/assets/html/2_molecules/#pl-pattern-buttons

[Erioldoesdesign]

Testing in Chrome Version 67.0.3396.87

FE QA notes:

• Looks like our 'Gamma' button's clicked colour state on a white background should actually be grey #777777 (it's currently in the PL as a darker shade of blue #1c1284 which also isn't in our colour palette)
  
  )

• Gamma button gets a border on it when 'active' or 'focus'. Shouldn't get this border (tis a bug)
  

• Loading buttons should have the bar at the very top on the button and travels/animates over the top of the top border (this may be quite hard to achieve?):
  Current PL:
  

Designs:

I love the new button that has a label and then the label disappears on smaller screen to show just an icon button!

I raised this in another ticket but we still have allcaps/uppercase across everything but this should be sentence case. Will make sure I mention this in the typography ticket too.

[sethburtonhall]

@Erioldoesdesign I have made these changes and moved the issue back into QA pipeline.

ushahidi/platform-pattern-library@45d2d7d

[justinscherer]

Double-checking this and moving back to FED:

for text inside buttons letter-spacing: 1px;should be letter-spacing: 0.2px;

border-radius on buttons should be 3px not 5px. 5px is a clicked state only.

all buttons change colour and become invisible after being clicked. e.g.

Can we figure out a way to keep the border radius in the top left corner during the loading state?

[justinscherer]

also: left and right padding between the text and the inside edges of all buttons should be 34px

vertical padding between the text and the top/bottom of the button should be 8px

[sethburtonhall]

@Erioldoesdesign I moved this from "Ready for Front-End" to "QA for Design" on June 29 but I see you moved it back. I have made all the above changes and don't see any more revisions. Am I missing something or was this an oversight on your part?

[Erioldoesdesign]

@sethburtonhall Yup looks like I didn't check the 8px & 34px button padding properly but I see it's there now:

Closing this ticket :)

[Erioldoesdesign]

Trying this out here @all-contributors add @justinscherer for design, ideas, userTesting

[allcontributors]

@Erioldoesdesign

I've put up a pull request to add @justinscherer! 🎉