Skip to content

Commit 8b86a1f

Browse files
stubbornellaAugust Toman-Yih
authored andcommitted
fix(buttons): Changes style of buttons.
BREAKING CHANGE: (css class): Removes btn-primary Signed-off-by: Kenny Wang <kwang@pivotal.io>
1 parent d97439a commit 8b86a1f

File tree

4 files changed

+65
-65
lines changed

4 files changed

+65
-65
lines changed

spec/pivotal-ui-react/buttons/button_spec.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,6 @@ describe('UIButton', function() {
114114

115115
[
116116
{name: 'DefaultAltButton', btnClass: 'btn-default-alt'},
117-
{name: 'PrimaryButton', btnClass: 'btn-primary'},
118117
{name: 'LowlightButton', btnClass: 'btn-lowlight'},
119118
{name: 'DangerButton', btnClass: 'btn-danger'},
120119
{name: 'HighlightButton', btnClass: 'btn-highlight'},
@@ -126,7 +125,7 @@ describe('UIButton', function() {
126125
React.render(<Button>Click here</Button>, root);
127126
});
128127

129-
it('renders with the btn-primary class', function() {
128+
it('renders with the btn-default class', function() {
130129
expect('button.btn').not.toHaveClass('btn-default');
131130
expect('button.btn').toHaveClass(btnClass);
132131
});

src/pivotal-ui/components/buttons/buttons.scss

Lines changed: 17 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,9 @@ Button styles can be applied to any element. Typically you'll want to
2121
use either a `<button>` or an `<a>` element:
2222
2323
```html_example_table
24-
<button class="btn btn-primary">Button</button>
24+
<button class="btn btn-default">Button</button>
2525
26-
<a class="btn btn-primary" href="http://trulia.com">Link</a>
26+
<a class="btn btn-default" href="http://trulia.com">Link</a>
2727
```
2828
2929
If your button is actually a link to another page, please use the
@@ -47,21 +47,20 @@ size and style modifiers.
4747
Create block level buttons - those that span the full width of a parent - by adding `.btn-block`.
4848
4949
```html_example
50-
<button class="btn btn-primary btn-block">Full width button</button>
50+
<button class="btn btn-default btn-block">Full width button</button>
5151
```
5252
5353
*/
5454

5555
.btn {
56-
font-weight: 900;
56+
font-weight: $btn-font-weight;
5757
padding: 5px 15px;
5858

5959
&.disabled,
6060
&[disabled],
6161
fieldset[disabled] & {
6262
cursor: not-allowed;
6363
pointer-events: none; // Future-proof disabling of clicks
64-
box-shadow: 0 3px 0 $shadow-2;
6564
}
6665
}
6766

@@ -76,44 +75,38 @@ Button | Disabled
7675
------------------------------------------------------------------ | -------------------------------------------------------------------------- | ----------------------- | -----------
7776
<button class="btn btn-default">Default</button> |<button class="btn btn-default" disabled>Default</button> | `btn btn-default` | This is what buttons look like, this is the go to button style.
7877
<button class="btn btn-default-alt">Default alternate</button> |<button class="btn btn-default-alt" disabled>Default alternate</button> | `btn btn-default-alt` | This is what buttons look like, this is the go to button style (on white backgrounds).
79-
<button class="btn btn-primary">Primary</button> |<button class="btn btn-primary" disabled>Primary</button> | `btn btn-primary` | Use this button as the primary call to action
8078
<button class="btn btn-lowlight">Lowlight</button> |<button class="btn btn-lowlight" disabled>Lowlight</button> | `btn btn-lowlight` | Use this button for other actions, like cancel/dismiss
8179
<button class="btn btn-danger">Delete</button> |<button class="btn btn-danger" disabled>Delete</button> | `btn btn-danger` | This button is for delete actions, these actions should also have a confirmation dialog
8280
<button class="btn btn-highlight">Highlight</button> |<button class="btn btn-highlight" disabled>Highlight</button> | `btn btn-highlight` | Use this button for other important actions, e.g. restarting apps
8381
<button class="btn btn-highlight-alt">Highlight alternate</button> |<button class="btn btn-highlight-alt" disabled>Highlight alternate</button> | `btn btn-highlight-alt` | Use this button for other important actions, e.g. marketing call to actions
8482
*/
8583

8684
.btn-default {
87-
@include button-skin($btn-default-color, $btn-default-bg, $btn-default-bg-hover);
85+
@include button-skin($btn-default-color, $btn-default-bg, $btn-default-border);
8886
}
8987

9088
.btn-default-alt {
91-
@include button-skin($btn-default-alt-color, $btn-default-alt-bg, $btn-default-alt-bg-hover, $btn-default-alt-border);
89+
@include button-skin($btn-default-alt-color, $btn-default-alt-bg, $btn-default-alt-border);
9290
@include button-shadow;
9391
}
9492

95-
.btn-primary {
96-
@include button-skin($btn-primary-color, $btn-primary-bg, $btn-primary-bg-hover);
93+
.btn-lowlight {
94+
@include button-skin($btn-lowlight-color, $btn-lowlight-bg);
95+
}
96+
97+
// Danger and error appear as red
98+
.btn-danger {
99+
@include button-skin($btn-danger-color, $btn-danger-bg, $border: null, $color-disabled: $btn-danger-color-disabled);
97100
@include button-shadow;
98101
}
99102

100103
.btn-highlight {
101-
@include button-skin($btn-highlight-color, $btn-highlight-bg, $btn-highlight-bg-hover);
104+
@include button-skin($btn-highlight-color, $btn-highlight-bg, $border: null, $color-disabled: $btn-highlight-color-disabled);
102105
@include button-shadow;
103106
}
104107

105108
.btn-highlight-alt {
106-
@include button-skin($btn-highlight-alt-color, $btn-highlight-alt-bg, $btn-highlight-alt-bg-hover);
107-
@include button-shadow;
108-
}
109-
110-
.btn-lowlight {
111-
@include button-skin($btn-lowlight-color, $btn-lowlight-bg, $btn-lowlight-bg-hover);
112-
}
113-
114-
// Danger and error appear as red
115-
.btn-danger {
116-
@include button-skin($btn-danger-color, $btn-danger-bg, $btn-danger-bg-hover);
109+
@include button-skin($btn-highlight-alt-color, $btn-highlight-alt-bg, $border: null, $color-disabled: $btn-highlight-alt-color-disabled);
117110
@include button-shadow;
118111
}
119112

@@ -128,9 +121,9 @@ There are two sizes for buttons: Large and default. Simply apply the
128121
size modifier class for the desired size.
129122
130123
```html_example_table
131-
<button class="btn btn-primary btn-lg">Large</button>
124+
<button class="btn btn-default btn-lg">Large</button>
132125
133-
<button class="btn btn-primary">Default</button>
126+
<button class="btn btn-default">Default</button>
134127
```
135128
136129
*/

src/pivotal-ui/components/mixins.scss

Lines changed: 30 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -14,33 +14,35 @@
1414

1515
/* Button Mixins */
1616

17-
@mixin button-skin($color, $background, $background-hover, $border: none) {
17+
@mixin button-skin($color, $background, $border: null, $color-disabled: null) {
1818
color: $color;
1919
background-color: $background;
20-
border: $border;
20+
@if ($border) {
21+
border: 1px solid $border;
22+
}
23+
outline: none;
2124

2225
@include transition-pui();
2326

2427
&:hover,
25-
&:focus,
28+
&:focus {
29+
color: lighten($color, 5%);
30+
background-color: lighten($background, 6%);
31+
outline: none;
32+
}
2633
&:active,
2734
&.active {
28-
color: $color;
29-
background-color: $background-hover;
35+
color: darken($color, 5%);
36+
background-color: darken($background, 6%);
37+
box-shadow: none;
3038
outline: none;
31-
border-color: $border;
3239
}
33-
.open & { &.dropdown-toggle {
40+
.open & {
41+
&.dropdown-toggle {
3442
color: $color;
35-
background-color: $background-hover;
36-
} }
37-
&:active,
38-
&.active {
39-
background-image: none;
43+
background-color: lighten($background, 6%);
44+
}
4045
}
41-
.open & { &.dropdown-toggle {
42-
background-image: none;
43-
} }
4446
&.disabled,
4547
&[disabled],
4648
fieldset[disabled] & {
@@ -49,20 +51,27 @@
4951
&:focus,
5052
&:active,
5153
&.active {
52-
background-color: $btn-disabled-bg;
53-
color: $btn-disabled-color;
54-
border-color: $border;
54+
color: $color-disabled;
55+
opacity: 0.5;
5556
}
5657
}
5758
}
5859

5960
@mixin button-shadow() {
60-
box-shadow: 0 3px 0 $shadow-3;
61+
box-shadow: 0 2px 0 $btn-shadow;
6162
&:hover,
6263
&:focus,
64+
&.disabled,
65+
&[disabled],
66+
fieldset[disabled] & {
67+
box-shadow: 0 2px 0 $btn-shadow;
68+
}
69+
&:focus {
70+
box-shadow: 0 2px 0 $btn-shadow;
71+
}
6372
&:active,
64-
&.active {
65-
box-shadow: 0 3px 0 $shadow-2;
73+
&.active{
74+
box-shadow: none;
6675
}
6776
}
6877

src/pivotal-ui/components/pui-variables.scss

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ $shadow-1 : rgba(0, 0, 0, 0.3);
5050
$shadow-2 : rgba(0, 0, 0, 0.14);
5151
$shadow-3 : rgba(0, 0, 0, 0.07);
5252
$shadow-4 : rgba(0, 0, 0, 0.035);
53+
$btn-shadow: rgba(211,217,217,0.50);
5354
$glow-1 : rgba(255,255,255,0.1);
5455
$glow-2 : rgba(255,255,255,0.2);
5556
$glow-3 : rgba(255,255,255,0.4);
@@ -258,15 +259,15 @@ $navbar-width: 210px;
258259
// Scaffolding
259260
// -------------------------
260261

261-
$html-bg: white;
262+
$html-bg: $neutral-11;
262263
$body-bg: transparent;
263264
$text-color: $neutral-3 !default;
264265

265266
// Links
266267
// -------------------------
267268

268269
$link-color: $accent-3;
269-
$link-hover-color: $dark-2;
270+
$link-hover-color: $accent-4;
270271
$link-hover-decoration: underline !default;
271272

272273
$link-lowlight-color: $accent-5;
@@ -433,38 +434,35 @@ $btn-font-weight: 600 !default;
433434
$btn-border-width: 0;
434435

435436
$btn-default-color: $link-color !default;
436-
$btn-default-bg: $glow-3 !default; // not currently used, but bootstrap relies on this value
437-
$btn-default-border: transparent !default; // not currently used, but bootstrap relies on this value
437+
$btn-default-bg: $neutral-11 !default;
438+
$btn-default-border: $neutral-7 !default; // not currently used, but bootstrap relies on this value
438439
$btn-default-border-hover: transparent;
439-
$btn-default-bg-hover: white;
440440

441441
$btn-default-alt-color: $link-color;
442442
$btn-default-alt-bg: $neutral-11;
443-
$btn-default-alt-bg-hover: $neutral-11;
444-
$btn-default-alt-border: 1px solid rgba(0,0,0,.15);
443+
$btn-default-alt-border: $neutral-7;
445444

446445
$btn-primary-color: $accent-3;
447-
$btn-primary-bg: white;
448-
$btn-primary-bg-hover: white;
446+
$btn-primary-bg: $neutral-11;
447+
$btn-primary-bg-hover: $neutral-11;
449448
$btn-primary-border: #49A8D5 !default;
450449

451-
$btn-lowlight-color: $neutral-3;
452-
$btn-lowlight-bg: transparent;
453-
$btn-lowlight-bg-hover: $glow-4;
450+
$btn-lowlight-color: $dark-5;
451+
$btn-lowlight-bg: $glow-4;
454452

455453
$btn-highlight-color: $neutral-11;
454+
$btn-highlight-color-disabled: $accent-6;
456455
$btn-highlight-bg: $accent-3;
457-
$btn-highlight-bg-hover: #1a739e;
458456

459-
$btn-highlight-alt-color: white;
460-
$btn-highlight-alt-bg: $brand-8;
461-
$btn-highlight-alt-bg-hover: $brand-5;
457+
$btn-highlight-alt-color: $neutral-11;
458+
$btn-highlight-alt-color-disabled:$brand-11;
459+
$btn-highlight-alt-bg: $brand-6;
462460

463461

464462
// alternate is only used on login pages
465463
$btn-alternate-color: #eee !default;
466464
$btn-alternate-bg: $brand-primary !default;
467-
$btn-alternate-border: darken($btn-primary-bg, 5%) !default;
465+
$btn-alternate-border: darken($neutral-11, 5%) !default;
468466

469467
$btn-success-color: transparent !default;
470468
$btn-success-bg: transparent !default;
@@ -477,8 +475,9 @@ $btn-warning-bg-hover: transparent;
477475
$btn-warning-border: transparent !default;
478476

479477
$btn-danger-color: $neutral-11;
478+
$btn-danger-color-disabled: $error-6;
480479
$btn-danger-bg: $error-4 !default;
481-
$btn-danger-bg-hover: $error-3 !default;
480+
$btn-danger-bg-hover: $error-5 !default;
482481
$btn-danger-border: $brand-danger !default;
483482

484483
$btn-info-color: transparent !default;

0 commit comments

Comments
 (0)