fix(card): update link to take full width of footer (#3116)

salesforce-ux · Mar 7, 2018 · 89c6a28 · 89c6a28
1 parent 0fa0165
commit 89c6a28
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 11 deletions.
diff --git a/ui/components/cards/base/_index.scss b/ui/components/cards/base/_index.scss
@@ -88,6 +88,15 @@
   }
 }
 
+/**
+* @summary Actionable element within card footer
+* @selector .slds-card__footer-action
+* @restrict .slds-card__footer a
+*/
+.slds-card__footer-action {
+  display: block;
+}
+
 /**
  * Use class if card consumes any form of a tile
  *

diff --git a/ui/components/cards/base/example.jsx b/ui/components/cards/base/example.jsx
@@ -214,7 +214,7 @@ export let examples = [
           </table>
         </CardBody>
         <CardFooter>
-          <a href="javascript:void(0);">
+          <a className="slds-card__footer-action" href="javascript:void(0);">
             View All <span className="slds-assistive-text">entity type</span>
           </a>
         </CardFooter>
@@ -276,7 +276,7 @@ export let examples = [
           </ul>
         </CardBody>
         <CardFooter>
-          <a href="javascript:void(0);">
+          <a className="slds-card__footer-action" href="javascript:void(0);">
             View All <span className="slds-assistive-text">entity type</span>
           </a>
         </CardFooter>
@@ -303,7 +303,10 @@ export let examples = [
               </p>
             </CardBody>
             <CardFooter>
-              <a href="javascript:void(0);">
+              <a
+                className="slds-card__footer-action"
+                href="javascript:void(0);"
+              >
                 View All{' '}
                 <span className="slds-assistive-text">entity type</span>
               </a>
@@ -320,7 +323,10 @@ export let examples = [
               </p>
             </CardBody>
             <CardFooter>
-              <a href="javascript:void(0);">
+              <a
+                className="slds-card__footer-action"
+                href="javascript:void(0);"
+              >
                 View All{' '}
                 <span className="slds-assistive-text">entity type</span>
               </a>
@@ -337,7 +343,10 @@ export let examples = [
               </p>
             </CardBody>
             <CardFooter>
-              <a href="javascript:void(0);">
+              <a
+                className="slds-card__footer-action"
+                href="javascript:void(0);"
+              >
                 View All{' '}
                 <span className="slds-assistive-text">entity type</span>
               </a>
@@ -354,15 +363,18 @@ export let examples = [
               </p>
             </CardBody>
             <CardFooter>
-              <a href="javascript:void(0);">
+              <a
+                className="slds-card__footer-action"
+                href="javascript:void(0);"
+              >
                 View All{' '}
                 <span className="slds-assistive-text">entity type</span>
               </a>
             </CardFooter>
           </Card>
         </CardBody>
         <CardFooter>
-          <a href="javascript:void(0);">
+          <a className="slds-card__footer-action" href="javascript:void(0);">
             View All <span className="slds-assistive-text">entity type</span>
           </a>
         </CardFooter>
@@ -390,7 +402,7 @@ export let examples = [
             </p>
           </CardBody>
           <CardFooter>
-            <a href="javascript:void(0);">
+            <a className="slds-card__footer-action" href="javascript:void(0);">
               View All <span className="slds-assistive-text">entity type</span>
             </a>
           </CardFooter>
@@ -406,7 +418,7 @@ export let examples = [
             </p>
           </CardBody>
           <CardFooter>
-            <a href="javascript:void(0);">
+            <a className="slds-card__footer-action" href="javascript:void(0);">
               View All <span className="slds-assistive-text">entity type</span>
             </a>
           </CardFooter>
@@ -422,7 +434,7 @@ export let examples = [
             </p>
           </CardBody>
           <CardFooter>
-            <a href="javascript:void(0);">
+            <a className="slds-card__footer-action" href="javascript:void(0);">
               View All <span className="slds-assistive-text">entity type</span>
             </a>
           </CardFooter>
@@ -438,7 +450,7 @@ export let examples = [
             </p>
           </CardBody>
           <CardFooter>
-            <a href="javascript:void(0);">
+            <a className="slds-card__footer-action" href="javascript:void(0);">
               View All <span className="slds-assistive-text">entity type</span>
             </a>
           </CardFooter>