Merge pull request #580 from primer/remove-invalid-button-classes

Remove invalid button classes
primer · Oct 18, 2018 · 6f49e82 · 6f49e82
2 parents 77507f0 + 399c6c5
commit 6f49e82
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 72 deletions.
diff --git a/modules/primer-buttons/README.md b/modules/primer-buttons/README.md
@@ -95,23 +95,20 @@ Use `.btn-large` to increase the padding and border radius of a button. This is
 [Type scale utilities](https://styleguide.github.com/primer/utilities/typography/#type-scale-utilities) can be used to alter the font-size if needed. Padding is applied in em's so that it scales proportionally with the font-size.
 
 ```html
-
 <p>
   <a class="btn btn-large btn-purple" href="#url" role="button">Large link button</a>
-  <button class="btn btn-large btn-outline-blue" type="button">Large button button</button>
+  <button class="btn btn-large" type="button">Large button button</button>
 </p>
 
 ```
 
 Use `.btn-large` with a type scale utility to transform the text to a bigger size.
 
 ```html
-
 <p class="f3">
   <a class="btn btn-large btn-purple" href="#url" role="button">Large link button</a>
   <button class="btn btn-large btn-outline-blue" type="button">Large button button</button>
 </p>
-
 ```
 
 ## Disabled state

diff --git a/modules/primer-buttons/stories.js b/modules/primer-buttons/stories.js
@@ -14,15 +14,6 @@ storiesOf('Button', module)
       <button className='btn btn-primary disabled'>disabled</button>
     </div>
   ))
-  .add('btn-secondary', () => (
-    <div className='p-4 d-flex flex-justify-between'>
-      <button className='btn btn-secondary'>Button</button>
-      <button className='btn btn-secondary hover'>hover</button>
-      <button className='btn btn-secondary focus'>focus</button>
-      <button className='btn btn-secondary selected'>selected</button>
-      <button className='btn btn-secondary disabled'>disabled</button>
-    </div>
-  ))
   .add('btn-danger', () => (
     <div className='p-4 d-flex flex-justify-between'>
       <button className='btn btn-danger'>Button</button>
@@ -62,7 +53,7 @@ storiesOf('Button', module)
   .add('btn-large', () => (
     <div className='f3 p-4'>
       <a className="btn btn-large btn-purple mr-6" href="#url" role="button">Large link button</a>
-      <button className="btn btn-large btn-outline-blue" type="button">Large button button</button>
+      <button className="btn btn-large" type="button">Large button button</button>
     </div>
   ))
   .add('btn-link', () => (

diff --git a/modules/primer-tooltips/stories.js b/modules/primer-tooltips/stories.js
@@ -2,61 +2,61 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 
 storiesOf('Tooltips', module)
-.add('tooltipped direction', () => (
-  <div className='p-4'>
-    <span className='tooltipped tooltipped-n border p-2 mb-2 mr-2 float-left' aria-label='This is the tooltip on the North side.'>
-    Tooltip North
-    </span>
-    <span className='tooltipped tooltipped-ne border p-2 mb-2 mr-2 float-left' aria-label='This is the tooltip on the North East side.'>
-      Tooltip North East
-    </span>
-    <span className='tooltipped tooltipped-e border p-2 mb-2 mr-2 float-left' aria-label='This is the tooltip on the East side.'>
-      Tooltip East
-    </span>
-    <span className='tooltipped tooltipped-se border p-2 mb-2 mr-2 float-left' aria-label='This is the tooltip on the South East side.'>
-      Tooltip South East
-    </span>
-    <span className='tooltipped tooltipped-s border p-2 mb-2 mr-2 float-left' aria-label='This is the tooltip on the South side.'>
-      Tooltip South
-    </span>
-    <span className='tooltipped tooltipped-sw border p-2 mb-2 mr-2 float-left' aria-label='This is the tooltip on the South West side.'>
-      Tooltip South West
-    </span>
-    <span className='tooltipped tooltipped-w border p-2 mb-2 mr-2 float-left' aria-label='This is the tooltip on the West side.'>
-      Tooltip West
-    </span>
-    <span className='tooltipped tooltipped-nw border p-2 mb-2 mr-2 float-left' aria-label='This is the tooltip on the North West side.'>
-      Tooltip North West
-    </span>
-  </div>
-))
-.add('tooltip aligned', () => (
-  <div className='p-4'>
-    <span className='tooltipped tooltipped-ne tooltipped-align-left-1 border p-2 mb-2 mr-2 float-left' aria-label='Tooltipped NE and aligned left.'>
-    Tooltip North East align left 1
-    </span>
-    <span className='tooltipped tooltipped-ne tooltipped-align-left-2 border p-2 mb-2 mr-2 float-left' aria-label='Tooltipped NE and aligned left.'>
-    Tooltip North East align left 2
-    </span>
-    <span className='tooltipped tooltipped-se tooltipped-align-left-1 border p-2 mb-2 mr-2 float-left' aria-label='Tooltipped SW and aigned left.'>
-    Tooltip South East align left 1
-    </span>
-    <span className='tooltipped tooltipped-se tooltipped-align-left-2 border p-2 mb-2 mr-2 float-left' aria-label='Tooltipped SW and aigned left.'>
-    Tooltip South East align left 2
-    </span>
-    <span className='tooltipped tooltipped-nw tooltipped-align-right-1 border p-2 mb-2 mr-2 float-left' aria-label='Tooltipped NW and aligned right.'>
-      Tooltip North West align right 1
-    </span>
-    <span className='tooltipped tooltipped-nw tooltipped-align-right-2 border p-2 mb-2 mr-2 float-left' aria-label='Tooltipped NW and aligned right.'>
-      Tooltip North West align right 2
-    </span>
-    <span className='tooltipped tooltipped-sw tooltipped-align-right-1 border p-2 mb-2 mr-2 float-left' aria-label='Tooltipped SE and aligned right.'>
-      Tooltip South West align right 1
-    </span>
-    <span className='tooltipped tooltipped-sw tooltipped-align-right-2 border p-2 mb-2 mr-2 float-left' aria-label='Tooltipped SE and aligned right.'>
-      Tooltip South West align right 2
-    </span>
-  </div>
+  .add('tooltipped direction', () => (
+    <div className='p-4'>
+      <span className='tooltipped tooltipped-n border p-2 mb-2 mr-2 float-left' aria-label='This is the tooltip on the North side.'>
+      Tooltip North
+      </span>
+      <span className='tooltipped tooltipped-ne border p-2 mb-2 mr-2 float-left' aria-label='This is the tooltip on the North East side.'>
+        Tooltip North East
+      </span>
+      <span className='tooltipped tooltipped-e border p-2 mb-2 mr-2 float-left' aria-label='This is the tooltip on the East side.'>
+        Tooltip East
+      </span>
+      <span className='tooltipped tooltipped-se border p-2 mb-2 mr-2 float-left' aria-label='This is the tooltip on the South East side.'>
+        Tooltip South East
+      </span>
+      <span className='tooltipped tooltipped-s border p-2 mb-2 mr-2 float-left' aria-label='This is the tooltip on the South side.'>
+        Tooltip South
+      </span>
+      <span className='tooltipped tooltipped-sw border p-2 mb-2 mr-2 float-left' aria-label='This is the tooltip on the South West side.'>
+        Tooltip South West
+      </span>
+      <span className='tooltipped tooltipped-w border p-2 mb-2 mr-2 float-left' aria-label='This is the tooltip on the West side.'>
+        Tooltip West
+      </span>
+      <span className='tooltipped tooltipped-nw border p-2 mb-2 mr-2 float-left' aria-label='This is the tooltip on the North West side.'>
+        Tooltip North West
+      </span>
+    </div>
+  ))
+  .add('tooltip aligned', () => (
+    <div className='p-4'>
+      <span className='tooltipped tooltipped-ne tooltipped-align-left-1 border p-2 mb-2 mr-2 float-left' aria-label='Tooltipped NE and aligned left.'>
+        Tooltip North East align left 1
+      </span>
+      <span className='tooltipped tooltipped-ne tooltipped-align-left-2 border p-2 mb-2 mr-2 float-left' aria-label='Tooltipped NE and aligned left.'>
+        Tooltip North East align left 2
+      </span>
+      <span className='tooltipped tooltipped-se tooltipped-align-left-1 border p-2 mb-2 mr-2 float-left' aria-label='Tooltipped SW and aigned left.'>
+        Tooltip South East align left 1
+      </span>
+      <span className='tooltipped tooltipped-se tooltipped-align-left-2 border p-2 mb-2 mr-2 float-left' aria-label='Tooltipped SW and aigned left.'>
+        Tooltip South East align left 2
+      </span>
+      <span className='tooltipped tooltipped-nw tooltipped-align-right-1 border p-2 mb-2 mr-2 float-left' aria-label='Tooltipped NW and aligned right.'>
+        Tooltip North West align right 1
+      </span>
+      <span className='tooltipped tooltipped-nw tooltipped-align-right-2 border p-2 mb-2 mr-2 float-left' aria-label='Tooltipped NW and aligned right.'>
+        Tooltip North West align right 2
+      </span>
+      <span className='tooltipped tooltipped-sw tooltipped-align-right-1 border p-2 mb-2 mr-2 float-left' aria-label='Tooltipped SE and aligned right.'>
+        Tooltip South West align right 1
+      </span>
+      <span className='tooltipped tooltipped-sw tooltipped-align-right-2 border p-2 mb-2 mr-2 float-left' aria-label='Tooltipped SE and aligned right.'>
+        Tooltip South West align right 2
+      </span>
+    </div>
   ))
   .add('tootlipped-multiline', () => (
     <div className='p-6'>
@@ -77,6 +77,6 @@ storiesOf('Tooltips', module)
   ))
   .add('tooltip on button', () => (
     <div className='p-6'>
-    <button className='btn btn-secondary tooltipped tooltipped-n' aria-label='This is the tooltip on a button.'>Button</button>
+      <button className='btn tooltipped tooltipped-n' aria-label='This is the tooltip on a button.'>Button</button>
     </div>
-))
+  ))
diff --git a/modules/primer-utilities/docs/layout.md b/modules/primer-utilities/docs/layout.md
@@ -204,7 +204,7 @@ Use `.position-absolute` to take elements out of the normal document flow.
 
 ```html
 <div class="position-relative" style="height:116px;">
-  <button type="button" class="btn btn-secondary mb-1">Button</button>
+  <button type="button" class="btn mb-1">Button</button>
   <div class="position-absolute border border-gray p-2">
     <a href="#url" class="d-block p-1">Mashed potatoes</a>
     <a href="#url" class="d-block p-1">Fries</a>