feat(Buttons): Rename Highlight button to Primary Button

[finishes #131374747] Signed-off-by: Charles Hansen <chansen@pivotal.io>
pivotal-cf · Oct 4, 2016 · f64c6bb · f64c6bb
1 parent 40c3e50
commit f64c6bb
Show file tree

Hide file tree

Showing 9 changed files with 104 additions and 104 deletions.
diff --git a/library/spec/pivotal-ui-react/buttons/button_spec.js b/library/spec/pivotal-ui-react/buttons/button_spec.js
@@ -81,7 +81,7 @@ describe('UIButton', function() {
       beforeEach(function() {
         renderButton({
           className: 'custom-class-1 custom-class-2',
-          kind: 'highlight',
+          kind: 'primary',
           large: true
         });
       });
@@ -91,7 +91,7 @@ describe('UIButton', function() {
       });
 
       it('includes the button classes set by the other options', function() {
-        expect('#root button').toHaveClass(['btn-highlight', 'btn-lg']);
+        expect('#root button').toHaveClass(['btn-primary', 'btn-lg']);
       });
     });
   });
@@ -135,7 +135,7 @@ describe('UIButton', function() {
   [
     {name: 'SuccessButton', btnClass: 'btn-success'},
     {name: 'DangerButton', btnClass: 'btn-danger'},
-    {name: 'HighlightButton', btnClass: 'btn-highlight'},
+    {name: 'PrimaryButton', btnClass: 'btn-primary'},
     {name: 'BrandButton', btnClass: 'btn-brand'},
   ].forEach(function({name, btnClass}) {
     describe(name, function() {

diff --git a/library/src/pivotal-ui-react/buttons/buttons.js b/library/src/pivotal-ui-react/buttons/buttons.js
@@ -10,7 +10,7 @@ class UIButton extends React.Component{
     kind: React.PropTypes.oneOf([
       'default',
       'danger',
-      'highlight',
+      'primary',
       'success',
       'brand'
     ]),
@@ -68,7 +68,7 @@ module.exports = {
 
   DangerButton: defButton({kind: 'danger'}),
 
-  HighlightButton: defButton({kind: 'highlight'}),
+  PrimaryButton: defButton({kind: 'primary'}),
 
   SuccessButton: defButton({kind: 'success'}),
 

diff --git a/library/src/pivotal-ui/components/buttons/buttons.scss b/library/src/pivotal-ui/components/buttons/buttons.scss
@@ -284,52 +284,52 @@ input[type="button"].btn-default-alt-wh {
   }
 }
 
-//Highlight Button
+//Primary Button
 //---------------------------------------
-button.btn-highlight,
-.button.btn-highlight,
-input[type="submit"].btn-highlight,
-input[type="reset"].btn-highlight,
-input[type="button"].btn-highlight {
-  background-color: $btn-highlight-color;
+button.btn-primary,
+.button.btn-primary,
+input[type="submit"].btn-primary,
+input[type="reset"].btn-primary,
+input[type="button"].btn-primary {
+  background-color: $btn-primary-color;
   color: $btn-light;
-  border-color: $btn-highlight-color;
+  border-color: $btn-primary-color;
   .svgicon {
     fill: $btn-light;
   }
 }
 
-.button.btn-highlight:focus,
-button.btn-highlight:focus,
-input[type="submit"].btn-highlight:focus,
-input[type="reset"].btn-highlight:focus,
-input[type="button"].btn-highlight:focus {
-  background-color: $btn-highlight-color-focus;
-  border-color: $btn-highlight-color-focus;
+.button.btn-primary:focus,
+button.btn-primary:focus,
+input[type="submit"].btn-primary:focus,
+input[type="reset"].btn-primary:focus,
+input[type="button"].btn-primary:focus {
+  background-color: $btn-primary-color-focus;
+  border-color: $btn-primary-color-focus;
   outline: none;
 }
 
-.button.btn-highlight:hover,
-.button.btn-highlight:focus:hover,
-button.btn-highlight:hover,
-button.btn-highlight:focus:hover,
-input[type="submit"].btn-highlight:hover,
-input[type="submit"].btn-highlight:focus:hover,
-input[type="reset"].btn-highlight:hover,
-input[type="reset"].btn-highlight:focus:hover,
-input[type="button"].btn-highlight:hover,
-input[type="button"].btn-highlight:focus:hover {
-  background-color: $btn-highlight-color-hover;
-  border-color: $btn-highlight-color-hover;
+.button.btn-primary:hover,
+.button.btn-primary:focus:hover,
+button.btn-primary:hover,
+button.btn-primary:focus:hover,
+input[type="submit"].btn-primary:hover,
+input[type="submit"].btn-primary:focus:hover,
+input[type="reset"].btn-primary:hover,
+input[type="reset"].btn-primary:focus:hover,
+input[type="button"].btn-primary:hover,
+input[type="button"].btn-primary:focus:hover {
+  background-color: $btn-primary-color-hover;
+  border-color: $btn-primary-color-hover;
   outline: none;
 }
 
 //Spinner
-button.btn-highlight,
-.button.btn-highlight,
-input[type="submit"].btn-highlight,
-input[type="reset"].btn-highlight,
-input[type="button"].btn-highlight {
+button.btn-primary,
+.button.btn-primary,
+input[type="submit"].btn-primary,
+input[type="reset"].btn-primary,
+input[type="button"].btn-primary {
   .spinner,
   .spinner-md,
   .spinner-sm {
@@ -342,85 +342,85 @@ input[type="button"].btn-highlight {
   }
 }
 
-//Flat Highlight
-.btn-highlight-flat {
-  color: $btn-highlight-color;
+//Flat Primary
+.btn-primary-flat {
+  color: $btn-primary-color;
   .svgicon {
-    fill: $btn-highlight-color;
+    fill: $btn-primary-color;
   }
   &:hover,
   &:focus,
   &:hover:focus {
-    color: $btn-highlight-color-focus;
+    color: $btn-primary-color-focus;
     outline: none;
     .svgicon {
-      fill: $btn-highlight-color-focus;
+      fill: $btn-primary-color-focus;
     }
   }
 }
 
-//Highlight Alt Button
+//Primary Alt Button
 //---------------------------------------
-button.btn-highlight-alt,
-.button.btn-highlight-alt,
-input[type="submit"].btn-highlight-alt,
-input[type="reset"].btn-highlight-alt,
-input[type="button"].btn-highlight-alt {
+button.btn-primary-alt,
+.button.btn-primary-alt,
+input[type="submit"].btn-primary-alt,
+input[type="reset"].btn-primary-alt,
+input[type="button"].btn-primary-alt {
   background-color: transparent;
-  color: $btn-highlight-color;
-  border-color: $btn-highlight-color;
+  color: $btn-primary-color;
+  border-color: $btn-primary-color;
   .svgicon {
-    fill: $btn-highlight-color;
+    fill: $btn-primary-color;
   }
 }
 
-.button.btn-highlight-alt:focus,
-button.btn-highlight-alt:focus,
-input[type="submit"].btn-highlight-alt:focus,
-input[type="reset"].btn-highlight-alt:focus,
-input[type="button"].btn-highlight-alt:focus {
+.button.btn-primary-alt:focus,
+button.btn-primary-alt:focus,
+input[type="submit"].btn-primary-alt:focus,
+input[type="reset"].btn-primary-alt:focus,
+input[type="button"].btn-primary-alt:focus {
   background-color: transparent;
-  color: $btn-highlight-color-focus;
-  border-color: $btn-highlight-color-focus;
+  color: $btn-primary-color-focus;
+  border-color: $btn-primary-color-focus;
   outline: none;
   .svgicon {
-    fill: $btn-highlight-color-focus;
+    fill: $btn-primary-color-focus;
   }
 }
 
-.button.btn-highlight-alt:hover,
-.button.btn-highlight-alt:focus:hover,
-button.btn-highlight-alt:hover,
-button.btn-highlight-alt:focus:hover,
-input[type="submit"].btn-highlight-alt:hover,
-input[type="submit"].btn-highlight-alt:focus:hover,
-input[type="reset"].btn-highlight-alt:hover,
-input[type="reset"].btn-highlight-alt:focus:hover,
-input[type="button"].btn-highlight-alt:hover,
-input[type="button"].btn-highlight-alt:focus:hover {
+.button.btn-primary-alt:hover,
+.button.btn-primary-alt:focus:hover,
+button.btn-primary-alt:hover,
+button.btn-primary-alt:focus:hover,
+input[type="submit"].btn-primary-alt:hover,
+input[type="submit"].btn-primary-alt:focus:hover,
+input[type="reset"].btn-primary-alt:hover,
+input[type="reset"].btn-primary-alt:focus:hover,
+input[type="button"].btn-primary-alt:hover,
+input[type="button"].btn-primary-alt:focus:hover {
   background-color: transparent;
-  color: $btn-highlight-color-hover;
-  border-color: $btn-highlight-color-hover;
+  color: $btn-primary-color-hover;
+  border-color: $btn-primary-color-hover;
   outline: none;
   .svgicon {
-    fill: $btn-highlight-color-hover;
+    fill: $btn-primary-color-hover;
   }
 }
 
 //Spinner
-button.btn-highlight-alt,
-.button.btn-highlight-alt,
-input[type="submit"].btn-highlight-alt,
-input[type="reset"].btn-highlight-alt,
-input[type="button"].btn-highlight-alt {
+button.btn-primary-alt,
+.button.btn-primary-alt,
+input[type="submit"].btn-primary-alt,
+input[type="reset"].btn-primary-alt,
+input[type="button"].btn-primary-alt {
   .spinner,
   .spinner-md,
   .spinner-sm {
     .ring {
-      stroke: $btn-highlight-color;
+      stroke: $btn-primary-color;
     }
     .path {
-      stroke: $btn-highlight-color;
+      stroke: $btn-primary-color;
     }
   }
 }

diff --git a/library/src/pivotal-ui/components/modals/README.md b/library/src/pivotal-ui/components/modals/README.md
@@ -13,7 +13,7 @@ Note that this requires Bootstrap's JavaScript.
       </div>
       <div class="modal-footer">
         <button type="button" class="btn-default-alt" data-dismiss="modal">Close</button>
-        <button type="button" class="btn-highlight">Save changes</button>
+        <button type="button" class="btn-primary">Save changes</button>
       </div>
     </div>
   </div>

diff --git a/library/src/pivotal-ui/components/pui-variables.scss b/library/src/pivotal-ui/components/pui-variables.scss
@@ -445,10 +445,10 @@ $btn-spacing-base: 10px;
 $btn-default-color:$dark-5;
 $btn-default-color-hover:$dark-3;
 $btn-default-color-focus:$dark-3;
-//highlight
-$btn-highlight-color:$accent-3;
-$btn-highlight-color-hover:$accent-2;
-$btn-highlight-color-focus:$accent-2;
+//primary
+$btn-primary-color:$accent-3;
+$btn-primary-color-hover:$accent-2;
+$btn-primary-color-focus:$accent-2;
 //brand
 $btn-brand-color:$brand-6;
 $btn-brand-color-hover:$brand-4;

diff --git a/styleguide/docs/css/buttons.scss b/styleguide/docs/css/buttons.scss
@@ -32,7 +32,7 @@ Every button type has a default style, an alt style (with inverted colors and a
 Button                                           | Button Alt                                               | Button Flat                                                | Description
 -------------------------------------------------|----------------------------------------------------------|------------------------------------------------------------|-----------
 <button class="btn-default">Default</button>     |<button class="btn-default-alt">Default Alt</button>      | <button>Default Flat</button>                              | This the default button style.
-<button class="btn-highlight">Highlight</button> |<button class="btn-highlight-alt">Highlight Alt</button>  | <button class="btn-highlight-flat">Highlight Flat</button> | Use this button for primary actions.
+<button class="btn-primary">Primary</button> |<button class="btn-primary-alt">Primary Alt</button>  | <button class="btn-primary-flat">Primary Flat</button> | Use this button for primary actions.
 <button class="btn-danger">Danger</button>       |<button class="btn-danger-alt">Danger Alt</button>        | <button class="btn-danger-flat">Danger Flat</button>       | This button is for delete actions, these actions should also have a confirmation dialog
 <button class="btn-success">Success</button>     |<button class="btn-success-alt">Success Alt</button>      | <button class="btn-success-flat">Success Flat</button>     | Use this button to promote action (e.g. sign up, begin)
 <button class="btn-brand">Brand</button>         |<button class="btn-brand-alt">Brand Alt</button>          | <button class="btn-brand-flat">Brand Flat</button>         | This button is for marketing purposes only
@@ -44,11 +44,11 @@ The most common button examples are below:
 
 <button class="btn-default-alt">Default Alt</button>
 
-<button class="btn-highlight">Highlight</button>
+<button class="btn-primary">Primary</button>
 
-<button class="btn-highlight-alt">Highlight Alt</button>
+<button class="btn-primary-alt">Primary Alt</button>
 
-<button class="btn-highlight-flat">Highlight Flat</button>
+<button class="btn-primary-flat">Primary Flat</button>
 
 <button class="btn-danger">Danger</button>
 ```
@@ -77,7 +77,7 @@ If given the disabled class, a button will be functionally disabled, and will al
 
 <button class="disabled">Flat Disabled</button>
 
-<button class="btn-highlight disabled">Highlight Disabled</button>
+<button class="btn-primary disabled">Primary Disabled</button>
 
 ```
 

diff --git a/styleguide/docs/css/modals.scss b/styleguide/docs/css/modals.scss
@@ -33,7 +33,7 @@ Modals bring desired content to the foreground and de-emphasize the rest of the
       </div>
       <div class="modal-footer">
         <button type="button" class="btn-default-alt" data-dismiss="modal">Close</button>
-        <button type="button" class="btn-highlight">Save changes</button>
+        <button type="button" class="btn-primary">Save changes</button>
       </div>
     </div>
   </div>

diff --git a/styleguide/docs/react/buttons.js b/styleguide/docs/react/buttons.js
@@ -16,7 +16,7 @@ Require the subcomponents:
 
 ```
 var DefaultButton = require('pui-react-buttons').DefaultButton;
-var HighlightButton = require('pui-react-buttons').HighlightButton;
+var PrimaryButton = require('pui-react-buttons').PrimaryButton;
 var DangerButton = require('pui-react-buttons').DangerButton;
 var SuccessButton = require('pui-react-buttons').SuccessButton;
 var BrandButton = require('pui-react-buttons').Brand;
@@ -37,16 +37,16 @@ Buttons use the button tag by default. If you'd like a link rather than a button
 
 ## Styles
 
-There are 4 main button color schemes: Default, Highlight, Danger, and Success. There is also Brand, but this should only be used for marketing.
+There are 4 main button color schemes: Default, Primary, Danger, and Success. There is also Brand, but this should only be used for marketing.
 
 ```react_example_table
 <DefaultButton>
   Default
 </DefaultButton>
 
-<HighlightButton>
-  Highlight
-</HighlightButton>
+<PrimaryButton>
+  Primary
+</PrimaryButton>
 
 <DangerButton>
   Danger
@@ -74,9 +74,9 @@ To use the alt style, set the `alt` prop, to use the flat style, use the `flat`
   Flat
 </DefaultButton>
 
-<HighlightButton alt>
-  Highlight Alt
-</HighlightButton>
+<PrimaryButton alt>
+  Primary Alt
+</PrimaryButton>
 
 <SuccessButton flat>
   Success Flat
@@ -89,13 +89,13 @@ To use the alt style, set the `alt` prop, to use the flat style, use the `flat`
 To make a button large, set the `large` property to true, to make it small, set `small` to true.
 
 ```react_example_table
-<HighlightButton large>
+<PrimaryButton large>
   Big Button
-</HighlightButton>
+</PrimaryButton>
 
-<HighlightButton small>
+<PrimaryButton small>
   Small Button
-</HighlightButton>
+</PrimaryButton>
 ```
 
 */
diff --git a/styleguide/docs/react/expander.js b/styleguide/docs/react/expander.js
@@ -48,7 +48,7 @@ const MoreInfo = React.createClass({
               Content in expander
             </p>
         </ExpanderContent>
-        <button className='btn-highlight' onClick={this.toggleContent}>
+        <button className='btn-primary' onClick={this.toggleContent}>
           Toggle Content
         </button>
       </main>