Buttons: Initial pass at buttons, covering sizes, options, disabled, active, focus, and hover states #97

sfrisk · 2015-07-17T04:20:43Z

This is my first initial pass at buttons. It this is the direction people want to go with for buttons, I can add a few more options for buttons (colors, button group, block button etc).

cvrebert · 2015-07-17T04:31:47Z

Why so much @extending? It's arguably an antipattern.

sfrisk · 2015-07-17T04:40:01Z

@cvrebert As I think about it, mixins would probably have be better solution, especially if we want to add additional options. I can easily switch to using mixins instead. Part of this issue was also to test the BEM naming convention (since we haven't had any commits with that yet), and get an idea if visually this was the type of button we wanted to go with. I'll update the PR (although probably not tonight) with a mixin version.

sfrisk · 2015-07-17T05:20:09Z

Or you know, maybe just make things mixins tonight, since I can't sleep. Let me know what you think, and if you approach works.

cvrebert · 2015-07-17T05:29:25Z

demos/buttons.html

+	<a class="ui-button--default" href="#" role="button">Link</a>
+	<button class="ui-button--default" type="submit">Button</button>
+	<input class="ui-button--default" type="button" value="Input">
+	<input class="ui-button--default" type="submit" value="Submit">


Missing a type="reset" example

cvrebert · 2015-07-17T05:47:20Z

Have you considered:

Block-level buttons
A class to make a <button> look like a normal <a>
Additional classes to emulate the appearance of :active, :focus, :hover

cvrebert · 2015-07-17T05:48:57Z

scss/atoms/buttons/_mixins.scss

+	margin: .25em;
+	text-align: center;
+	text-decoration: none;
+	text-transform: uppercase;


Too opinionated, imho

Once the jsass PR lands I will probably make that line into one of the configurable variables that the theme roller can set, for those who prefer not to have uppercase buttons.

Sent from my iPhone

On Jul 17, 2015, at 1:48 AM, Chris Rebert [email protected] wrote:

In scss/atoms/buttons/_mixins.scss:

+/*
+* ==========================================================================
+* Buttons (Mixins)
+* ==========================================================================
+*/
+
+@mixin ui-button($color, $bgcolor, $disabled: false) {

background: $bgcolor;

border: 0;

color: $color;

display: inline-block;

font-weight: 500;

margin: .25em;

text-align: center;

text-decoration: none;

text-transform: uppercase;
Too opinionated, imho

—
Reply to this email directly or view it on GitHub.

sfrisk · 2015-07-17T05:52:07Z

Block-level buttons were actually next on my list of things to add.
Making a button look like a link is a good one, I will add it to the list. Same with classes for active/hover/focus.

Sent from my iPhone

On Jul 17, 2015, at 1:47 AM, Chris Rebert [email protected] wrote:

Have you considered:

Block-level buttons
A class to make a look like a normal
Additional classes to emulate the appearance of :active, :focus, :hover`
—
Reply to this email directly or view it on GitHub.

cvrebert · 2015-07-17T05:53:09Z

scss/atoms/buttons/_mixins.scss

+	&:hover {
+		background: darken($bgcolor, 10%);
+	}
+	&:disabled {


Chassis' browser compatibility doesn't seem to be documented, but FYI :disabled is not IE8 compatible.

Also, consider adding &[aria-disabled="true"], which makes toggling the disabledness of an <a> button much simpler (since it's context-insensitive and uniform), and also communicates the disabledness to accessibility tools.

On a tangentially related note, perhaps you jQuery folks would consider voicing support for https://www.w3.org/Bugs/Public/show_bug.cgi?id=28673 ?

cvrebert · 2015-07-17T08:31:32Z

Consider implementing twbs/bootstrap#15947 as well

kristyjy · 2015-07-17T19:26:49Z

scss/atoms/buttons/_buttons.scss

+$chassis-blue: #4fc0c8;
+$chassis-gray-light: #f2f2f2;
+$chassis-gray-dark: #383838;
+


I'm wondering if we should name the variables based on their purpose rather than color? This way when they get changed in the theme roller a person wouldn't create a purple button that is called "blue".

Yeah, I should switch these to stuff like $button-primary-background, and $button-primary-color. That was something to put in their temporarily, but you're right, I should have better variable names.

cvrebert · 2015-07-17T23:13:18Z

Also, what about combinations of multiple states? (Example: twbs/bootstrap#16767)

sfrisk · 2015-07-17T23:41:24Z

@cvrebert Ooo, I hadn't thought of that one. Might need to tweak how disabled styling currently works to make that work.

sfrisk · 2015-07-20T17:41:32Z

Also @geekman-rohit pointed out that the primary button contrast don't actually pass accessibility contrast checking. I used colors suggested for use with the Chassis Logo, but if anyone has any alternative color suggestions that are accessible, I would love to hear them.

geekman-rohit · 2015-07-20T19:39:03Z

Basically we want the background - foreground colors to have more contrast so they are easier to read to all people. We also need to see what tests it should pass? I think the primary button should pass AAA while it should be okay for disabled buttons to be AA or even A http://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html

arschmitz · 2015-07-20T19:46:33Z

there are automated tools we can use with grunt for this sort of checking its been on my todo for a while to set them up

sfrisk · 2015-07-20T19:47:01Z

I'll add an issue for Accessibility Checking

sfrisk · 2015-07-21T17:43:34Z

This was brought up in the meeting today, but should we have the default button be a "block" button, since we'll be designing this mobile first, with an optional modifier to have an inline button? Or the other way around?

geekman-rohit · 2015-07-21T18:47:16Z

I think it should be inline with a modifier to make it block.

Fixes jquery-archivegh-96

sfrisk · 2015-08-18T02:31:45Z

@geekman-rohit added some different types of buttons to test the performance stuff you're working on

sfrisk · 2015-12-15T19:23:52Z

Closing this in favor of #138, which is our new approach on this.

sfrisk added the [Status] Needs Review label Jul 17, 2015

sfrisk added this to the Phase One milestone Jul 17, 2015

jquerybot added the CLA: Valid label Jul 17, 2015

cvrebert reviewed Jul 17, 2015
View reviewed changes

kristyjy reviewed Jul 17, 2015
View reviewed changes

sfrisk added 4 commits August 15, 2015 19:52

Buttons: Initial pass at buttons, covering sizes, options, and states

88a4de6

Fixes jquery-archivegh-96

Buttons: Spaces to Tabs fix for buttons.html

b672e22

Buttons: Switched to Mixins

889e914

Buttons: Removing box-sizing

10efba1

sfrisk added 11 commits August 15, 2015 19:52

Buttons: Adding reset demo

12be9ed

Buttons: IE=edge and adding a type=button example

f425e31

Buttons: Added classes for each state, demos, cleaned up variable names

ff413db

Buttons: bug fix

765b19b

Buttons: Fixed Typos

5fa9d3c

Buttons: Removing # of background declarations per selector

b88bbbd

Buttons: Fixing typos in demo file

5c0a7ec

Buttons: Fixing css linting breaking the build

ccc4bf9

Buttons: Pull in jsass-vars into button variables

e23fde7

Buttons: Adding Success/Info/Warning/Danger buttons

3cb1565

Buttons: Adjusting rounded corner variable

e74e4db

sfrisk force-pushed the 96-basic-buttons branch from e00504e to e74e4db Compare August 18, 2015 02:28

sfrisk added 2 commits August 17, 2015 22:35

Buttons: linking to min file

005be5e

Buttons: Add pointer cursor to buttons

435dd5e

geekman-rohit mentioned this pull request Aug 18, 2015

BEM usage and modifier ordering policy for chassis classes #120

Closed

sfrisk mentioned this pull request Nov 3, 2015

Creating a JSASS Style Guide for Chassis #135

Open

sfrisk closed this Dec 15, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Buttons: Initial pass at buttons, covering sizes, options, disabled, active, focus, and hover states #97

Buttons: Initial pass at buttons, covering sizes, options, disabled, active, focus, and hover states #97

sfrisk commented Jul 17, 2015

cvrebert commented Jul 17, 2015

sfrisk commented Jul 17, 2015

sfrisk commented Jul 17, 2015

cvrebert Jul 17, 2015

cvrebert commented Jul 17, 2015

cvrebert Jul 17, 2015

sfrisk Jul 17, 2015

sfrisk commented Jul 17, 2015

cvrebert Jul 17, 2015

cvrebert Jul 17, 2015

cvrebert commented Jul 17, 2015

kristyjy Jul 17, 2015

sfrisk Jul 17, 2015

cvrebert commented Jul 17, 2015

sfrisk commented Jul 17, 2015

sfrisk commented Jul 20, 2015

geekman-rohit commented Jul 20, 2015

arschmitz commented Jul 20, 2015

sfrisk commented Jul 20, 2015

sfrisk commented Jul 21, 2015

geekman-rohit commented Jul 21, 2015

sfrisk commented Aug 18, 2015

sfrisk commented Dec 15, 2015

Buttons: Initial pass at buttons, covering sizes, options, disabled, active, focus, and hover states #97

Buttons: Initial pass at buttons, covering sizes, options, disabled, active, focus, and hover states #97

Conversation

sfrisk commented Jul 17, 2015

cvrebert commented Jul 17, 2015

sfrisk commented Jul 17, 2015

sfrisk commented Jul 17, 2015

cvrebert Jul 17, 2015

Choose a reason for hiding this comment

cvrebert commented Jul 17, 2015

cvrebert Jul 17, 2015

Choose a reason for hiding this comment

sfrisk Jul 17, 2015

Choose a reason for hiding this comment

sfrisk commented Jul 17, 2015

cvrebert Jul 17, 2015

Choose a reason for hiding this comment

cvrebert Jul 17, 2015

Choose a reason for hiding this comment

cvrebert commented Jul 17, 2015

kristyjy Jul 17, 2015

Choose a reason for hiding this comment

sfrisk Jul 17, 2015

Choose a reason for hiding this comment

cvrebert commented Jul 17, 2015

sfrisk commented Jul 17, 2015

sfrisk commented Jul 20, 2015

geekman-rohit commented Jul 20, 2015

arschmitz commented Jul 20, 2015

sfrisk commented Jul 20, 2015

sfrisk commented Jul 21, 2015

geekman-rohit commented Jul 21, 2015

sfrisk commented Aug 18, 2015

sfrisk commented Dec 15, 2015