Skip to content

Commit

Permalink
Updated buttons to be more accessible. (#373)
Browse files Browse the repository at this point in the history 
* Darkened hover colors
* Darkened disabled text color
* Removed elevated button styles
* Refactored many button styles to overrideable variables
* Added link description text
  • Loading branch information
@dsjen
dsjen authored Nov 16, 2016
1 parent d11de56 commit 406b219
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 84 deletions.
2 changes: 1 addition & 1 deletion pattern-library/sass/global/_settings.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -320,7 +320,7 @@ $text-de-emphasized-font-weight: font-weight(normal) !default;


// links
$link-color: palette(primary, base) !default;
$link-color: palette(primary, dark) !default;
$link-focus-color: palette(primary, light) !default;
$link-visited-color: palette(primary, dark) !default;

Expand Down
100 changes: 30 additions & 70 deletions pattern-library/sass/patterns/_buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
// #NEUTRAL
// #BRAND
// #LINK
// #ELEVATED
// #INVERSE
// #COMBO
// #APPLICATION
Expand All @@ -26,6 +25,11 @@ $btn-border-size: 1px !default;
$btn-shadow: 3px !default;
$btn-font-weight: font-weight(semi-bold) !default;
$btn-border-radius: $component-border-radius !default;
$btn-focus-color: palette(primary, dark) !default;
$btn-focus-text-color: palette(primary, x-back) !default;
$btn-disabled-text-color: palette(grayscale, accent) !default;
$btn-disabled-background-color: palette(grayscale, x-back) !default;
$btn-disabled-border-color: palette(grayscale, back) !default;

// sizes
$btn-large-padding-vertical: spacing-vertical(small);
Expand Down Expand Up @@ -120,9 +124,9 @@ $btn-small-font-size: font-size(small);
&.is-hovered,
&:focus,
&.is-focused {
border-color: palette(primary, accent);
background: palette(primary, accent);
color: palette(primary, x-back);
border-color: $btn-focus-color;
background: $btn-focus-color;
color: $btn-focus-text-color;
}

// STATE: is pressed or active
Expand All @@ -137,8 +141,8 @@ $btn-small-font-size: font-size(small);
// STATE: is disabled
&:disabled,
&.is-disabled {
border-color: palette(grayscale, back);
color: palette(grayscale, back);
border-color: $btn-disabled-border-color;
color: $btn-disabled-text-color;
}
}

Expand All @@ -157,9 +161,9 @@ $btn-small-font-size: font-size(small);
&.is-hovered,
&:focus,
&.is-focused {
border-color: palette(primary, accent);
background: palette(primary, accent);
color: palette(primary, x-back);
border-color: $btn-focus-color;
background: $btn-focus-color;
color: $btn-focus-text-color;
}

// STATE: is pressed or active
Expand All @@ -173,9 +177,9 @@ $btn-small-font-size: font-size(small);
// STATE: is disabled
&:disabled,
&.is-disabled {
border-color: palette(grayscale, back);
background: palette(grayscale, x-back);
color: palette(grayscale, back);
border-color: $btn-disabled-border-color;
background: $btn-disabled-background-color;
color: $btn-disabled-text-color;
}
}

Expand All @@ -195,9 +199,9 @@ $btn-small-font-size: font-size(small);
&.is-hovered,
&:focus,
&.is-focused {
border-color: palette(primary, accent);
background: palette(primary, accent);
color: palette(primary, x-back);
border-color: $btn-focus-color;
background: $btn-focus-color;
color: $btn-focus-text-color;
}

// STATE: is pressed or active
Expand All @@ -212,9 +216,9 @@ $btn-small-font-size: font-size(small);
// STATE: is disabled
&:disabled,
&.is-disabled {
border-color: palette(grayscale, back);
background: palette(grayscale, x-back);
color: palette(grayscale, back);
border-color: $btn-disabled-border-color;
background: $btn-disabled-background-color;
color: $btn-disabled-text-color;
}
}

Expand All @@ -232,50 +236,16 @@ $btn-small-font-size: font-size(small);
padding: 1px;
background: $transparent;

&:disabled {
// disabled links shouldn't be in the interface
// plus, having them pass AA guidelines would make them no longer look disabled
display: none;
}
}


// ----------------------------
// #ELEVATED
// ----------------------------
%btn-elevated {
@extend %btn;
border-color: palette(primary, base);
box-shadow: inset 0 -3px 0 0 palette(primary, dark);
background: palette(primary, base);
color: palette(primary, x-back);

// STATE: hover and focus
&:hover,
&.is-hovered,
&:focus,
&.is-focused {
box-shadow: inset 0 -3px 0 0 palette(primary, base);
background: palette(primary, accent);
color: palette(primary, x-back);
}

// STATE: is pressed or active
&:active,
&.is-pressed,
&.is-active {
box-shadow: inset 0 3px 0 0 palette(primary, dark);
background: palette(primary, base);
color: palette(primary, back);
&:focus {
text-decoration: underline;
}

// STATE: is disabled
&:disabled,
&.is-disabled {
box-shadow: none;
border-color: palette(grayscale, back);
background: palette(grayscale, x-back);
color: palette(grayscale, back);
&:disabled {
// disabled links shouldn't be in the interface
// plus, having them pass AA guidelines would make them no longer look disabled
display: none;
}
}

Expand Down Expand Up @@ -340,13 +310,8 @@ $btn-small-font-size: font-size(small);
// STATE: is disabled
&:disabled,
&.is-disabled {
border-color: palette(grayscale, back);
color: palette(grayscale, back);

&:hover {
border-color: palette(grayscale, back);
color: palette(grayscale, back);
}
border-color: palette(grayscale, accent);
color: $btn-disabled-text-color;
}
}

Expand Down Expand Up @@ -374,11 +339,6 @@ $btn-small-font-size: font-size(small);
@extend %btn-link;
}

// elevated
.btn-elevated {
@extend %btn-elevated;
}

// inverse
.btn-inverse {
@extend %btn-inverse;
Expand Down
14 changes: 1 addition & 13 deletions pldoc/_components/buttons.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,14 +43,6 @@ info: Buttons should be used for performing actions within the edX envi
<button type="button" class="btn-brand" disabled>Primary Disabled</button>
</div>

<h3 class="example-set-hd">Elevated</h3>
<div class="example-set">
<button type="button" class="btn-elevated">Elevated</button>
<button type="button" class="btn-elevated btn-large">Elevated Large</button>
<button type="button" class="btn-elevated btn-small">Elevated Small</button>
<button type="button" class="btn-elevated" disabled>Elevated Disabled</button>
</div>

<h3 class="example-set-hd">Buttons with icons</h3>
<div class="example-set">
<button type="button" class="btn">
Expand All @@ -65,10 +57,6 @@ info: Buttons should be used for performing actions within the edX envi
<span class="icon fa fa-comment" aria-hidden="true"></span>
Brand
</button>
<button type="button" class="btn-elevated">
<span class="icon fa fa-comment" aria-hidden="true"></span>
Elevated
</button>
</div>

<h3 class="example-set-hd">Combo</h3>
Expand Down Expand Up @@ -102,10 +90,10 @@ info: Buttons should be used for performing actions within the edX envi
<a href="http://ux.edx.org/" class="btn">View the UX Pattern Library</a>
<a href="http://ux.edx.org/" class="btn-neutral">View the UX Pattern Library</a>
<a href="http://ux.edx.org/" class="btn-brand">View the UX Pattern Library</a>
<a href="http://ux.edx.org/" class="btn-elevated">View the UX Pattern Library</a>
</div>

<h3 class="example-set-hd">Links without visual styling</h3>
<p>Note: unread links use the primary color, while read/visited links use primary dark.</p>
<div class="example-set">
<button type="button" class="btn-link">Link</button>
<button type="button" class="btn-link btn-large">Link Large</button>
Expand Down

0 comments on commit 406b219

Please sign in to comment.