Merge pull request #354 from edx/andya/quick-fixes

Clean up button styles and documentation
edx · Aug 4, 2016 · 35756b6 · 35756b6
2 parents 42874b1 + 3fcb55f
commit 35756b6
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 35 deletions.
diff --git a/pattern-library/sass/patterns/_buttons.scss b/pattern-library/sass/patterns/_buttons.scss
@@ -80,6 +80,13 @@ $btn-small-font-size: font-size(small);
             margin-right: 0;
         }
     }
+
+    // Don't show underlines on links that are styled as buttons
+    &:hover,
+    &:active,
+    &:focus {
+        text-decoration: none;
+    }
 }
 
 
@@ -114,8 +121,8 @@ $btn-small-font-size: font-size(small);
     &:focus,
     &.is-focused {
         border-color: palette(primary, accent);
-        background: palette(primary, x-back);
-        color: palette(primary, accent);
+        background: palette(primary, accent);
+        color: palette(primary, x-back);
     }
 
     // STATE: is pressed or active
@@ -150,8 +157,8 @@ $btn-small-font-size: font-size(small);
     &.is-hovered,
     &:focus,
     &.is-focused {
+        border-color: palette(primary, accent);
         background: palette(primary, accent);
-        border-color: palette(primary, base);
         color: palette(primary, x-back);
     }
 
@@ -297,8 +304,8 @@ $btn-small-font-size: font-size(small);
         }
 
         &:only-child {
-          @include margin-left(0);
-          border-radius: $btn-border-radius;
+            @include margin-left(0);
+            border-radius: $btn-border-radius;
         }
     }
 }

diff --git a/pldoc/_components/buttons.md b/pldoc/_components/buttons.md
@@ -35,14 +35,6 @@ info:          Buttons should be used for performing actions within the edX envi
     <button type="button" class="btn-neutral" disabled>Neutral Disabled</button>
 </div>
 
-<h3 class="example-set-hd">Neutral with Icons</h3>
-<div class="example-set">
-    <button type="button" class="btn-neutral">
-        <span class="icon fa fa-comment" aria-hidden="true"></span>
-        Add your thoughts to this thread
-    </button>
-</div>
-
 <h3 class="example-set-hd">Brand</h3>
 <div class="example-set">
     <button type="button" class="btn-brand">Primary</button>
@@ -51,13 +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">Links</h3>
-<div class="example-set">
-    <button type="button" class="btn-link">Link</button>
-    <button type="button" class="btn-link btn-large">Link Large</button>
-    <button type="button" class="btn-link btn-small">Link Small</button>
-</div>
-
 <h3 class="example-set-hd">Elevated</h3>
 <div class="example-set">
     <button type="button" class="btn-elevated">Elevated</button>
@@ -66,6 +51,42 @@ info:          Buttons should be used for performing actions within the edX envi
     <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">
+        <span class="icon fa fa-comment" aria-hidden="true"></span>
+        Default
+    </button>
+    <button type="button" class="btn-neutral">
+        <span class="icon fa fa-comment" aria-hidden="true"></span>
+        Neutral
+    </button>
+    <button type="button" class="btn-brand">
+        <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>
+<div class="example-set">
+    <div class="btn-group" role="group">
+        <button type="button" class="btn">Date</button>
+        <button type="button" class="btn">Popularity</button>
+        <button type="button" class="btn">Comments</button>
+        <button type="button" class="btn">Length</button>
+        <button type="button" class="btn">By You</button>
+    </div>
+
+    <div class="btn-group" role="group">
+        <button type="button" class="btn">Edit</button>
+        <button type="button" class="btn">Preview</button>
+    </div>
+</div>
+
 <h3 class="example-set-hd">Inverse</h3>
 <div class="example-set">
     <div class="button-overlay-demo">
@@ -76,26 +97,17 @@ info:          Buttons should be used for performing actions within the edX envi
     </div>
 </div>
 
-<h3 class="example-set-hd">Links with Visual Styling Applied</h3>
+<h3 class="example-set-hd">Links with visual styling applied</h3>
 <div class="example-set">
     <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">Combo</h3>
+<h3 class="example-set-hd">Links without visual styling</h3>
 <div class="example-set">
-    <div class="btn-group" role="group">
-        <button type="button" class="btn">Date</button>
-        <button type="button" class="btn">Popularity</button>
-        <button type="button" class="btn">Comments</button>
-        <button type="button" class="btn">Length</button>
-        <button type="button" class="btn">By You</button>
-    </div>
-
-    <div class="btn-group" role="group">
-        <button type="button" class="btn">Edit</button>
-        <button type="button" class="btn">Preview</button>
-    </div>
+    <button type="button" class="btn-link">Link</button>
+    <button type="button" class="btn-link btn-large">Link Large</button>
+    <button type="button" class="btn-link btn-small">Link Small</button>
 </div>
diff --git a/pldoc/static/sass/_components.scss b/pldoc/static/sass/_components.scss
@@ -610,7 +610,10 @@
 // buttons
 .pldoc-pattern-buttons {
 
-    .btn {
+    .btn,
+    .btn-neutral,
+    .btn-brand,
+    .btn-elevated {
         display: inline-block;
         vertical-align: middle;
         margin-right: spacing-horizontal(x-small);