Merge pull request #3724 from sowasred2012/button-link

Add button link pattern

package.json

@@ -43,7 +43,7 @@
     "percy": "percy exec -- node snapshots.js",
     "icon-svgs-to-mixins": "node scripts/convert-svgs-to-icon-mixins.js icons"
   },
-  "version": "2.29.0",
+  "version": "2.30.0",
   "files": [
     "/scss",
     "!/scss/docs"

scss/_base_links.scss

@@ -4,6 +4,10 @@
 @mixin vf-b-links {
   // stylelint-disable selector-max-type -- base styles can use type selectors
   a {
+    @extend %vf-link-base;
+  }
+
+  %vf-link-base {
     @include vf-focus;
 
     color: $color-link;

scss/_base_placeholders.scss

@@ -135,7 +135,7 @@
   }
 
   %u-no-margin--bottom {
-    &:not(hr):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(p):not(small):not([class*='p-heading']) {
+    &:not(hr):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(p):not(small):not([class*='p-heading']):not([class*='p-button--link']) {
       margin-bottom: 0 !important;
     }
   }

scss/_patterns_buttons.scss

@@ -10,6 +10,7 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
   @include vf-button-positive;
   @include vf-button-negative;
   @include vf-button-base;
+  @include vf-button-link;
   @include vf-button-inline;
   @include vf-button-processing;
   @include vf-button-active;
@@ -136,6 +137,33 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
   }
 }
 
+@mixin vf-button-link {
+  .p-button--link {
+    @extend %vf-link-base;
+
+    border: none;
+    border-radius: 0;
+    margin-right: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+
+    &:hover {
+      background: transparent;
+    }
+
+    &.u-no-margin--bottom {
+      @extend %u-no-margin--bottom--default-text;
+    }
+
+    // stylelint-disable-next-line selector-max-type -- buttons should not affect paragraph spacing
+    p & {
+      margin-bottom: 0;
+      padding-top: 0;
+    }
+  }
+}
+
 @mixin vf-button-inline {
   [class*='p-button'].is-inline {
     @media (min-width: $breakpoint-x-small) {

templates/_layouts/docs.html

@@ -59,7 +59,7 @@
               <li class="p-side-navigation__item--title"><span class="p-side-navigation__text">Components</span></li>
               {{ side_nav_item("/docs/patterns/accordion", "Accordion") }}
               {{ side_nav_item("/docs/patterns/breadcrumbs", "Breadcrumbs") }}
-              {{ side_nav_item("/docs/patterns/buttons", "Buttons") }}
+              {{ side_nav_item("/docs/patterns/buttons", "Buttons", "updated") }}
               {{ side_nav_item("/docs/patterns/card", "Cards") }}
               {{ side_nav_item("/docs/patterns/chip", "Chips") }}
               {{ side_nav_item("/docs/patterns/contextual-menu", "Contextual menu") }}
@@ -117,7 +117,7 @@
               <li class="p-side-navigation__item--title"><span class="p-side-navigation__text">Layouts</span></li>
               {{ side_nav_item("/docs/layouts/application", "Application") }}
               {{ side_nav_item("/docs/layouts/documentation", "Documentation") }}
-              {{ side_nav_item("/docs/layouts/fluid-breakout", "Fluid breakout", "updated") }}
+              {{ side_nav_item("/docs/layouts/fluid-breakout", "Fluid breakout") }}
               {{ side_nav_item("/docs/layouts/sticky-footer", "Sticky footer") }}
             </ul>
 

templates/docs/component-status.md

@@ -22,12 +22,12 @@ When we add, make significant updates, or deprecate a component we update their
     </tr>
   </thead>
   <tbody>
-    <!-- 2.29 -->
+    <!-- 2.30 -->
     <tr>
-      <th><a href="/docs/layouts/fluid-breakout#toolbar">Fluid breakout - toolbar</a></th>
+      <th><a href="/docs/patterns/buttons#link">Button / Link</a></th>
       <td><div class="p-label--new">New</div></td>
-      <td>2.29.0</td>
-      <td>We added support for a toolbar within the fluid-breakout layout.</td>
+      <td>2.30.0</td>
+      <td>Buttons can now assume the appearance of a standard link.</td>
     </tr>
   </tbody>
 </table>
@@ -44,6 +44,13 @@ When we add, make significant updates, or deprecate a component we update their
     </tr>
   </thead>
   <tbody>
+    <!-- 2.29 -->
+    <tr>
+      <th><a href="/docs/layouts/fluid-breakout#toolbar">Fluid breakout - toolbar</a></th>
+      <td><div class="p-label--new">New</div></td>
+      <td>2.29.0</td>
+      <td>We added support for a toolbar within the fluid-breakout layout.</td>
+    </tr>
     <!-- 2.28 -->
     <tr>
       <th><a href="/docs/patterns/modal">Modal footer</a></th>

templates/docs/examples/patterns/buttons/link.html

@@ -0,0 +1,8 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Buttons / Link{% endblock %}
+
+{% block standalone_css %}patterns_buttons{% endblock %}
+
+{% block content %}
+<button class="p-button--link">Button as link</button>
+{% endblock %}

templates/docs/patterns/buttons.md

@@ -56,6 +56,16 @@ You can use the brand button with the main color of your brand.
 View example of the brand button pattern
 </a></div>
 
+### Link
+
+<span class="p-label--new">New</span>
+
+In some contexts you may need a button to look visually identical to a link.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/buttons/link/" class="js-example">
+View example of the link button pattern
+</a></div>
+
 ### Inline
 
 Should you wish to place a button after a line of inline text, as a CTA for example, you can do so by adding the state class `is-inline` to the button element.