Merge pull request #666 from GSA/space-class

added margin-left class with combinators

Author: shayan-roshan

sam-styles/packages/components/button/pill/templates/cancel.html

@@ -14,8 +14,9 @@
       <button
         class="
           usa-button usa-button--base usa-button--outline
-          usa-button-pill usa-button-pill--cancel
+          usa-button-pill
           text-ink
+          space-x-1
         "
       >
         <div>
@@ -29,15 +30,16 @@
             />
           </svg>
         </div>
-        CANCEL
+        <span> CANCEL </span>
       </button>
     </td>
     <td class="padding-1">
       <button
         class="
           usa-button usa-button--base usa-button--outline usa-button--hover
-          usa-button-pill usa-button-pill--cancel
+          usa-button-pill
           text-ink
+          space-x-1
         "
       >
         <div>
@@ -51,15 +53,16 @@
             />
           </svg>
         </div>
-        CANCEL
+        <span> CANCEL </span>
       </button>
     </td>
     <td class="padding-1">
       <button
         class="
           usa-button usa-button--base usa-button--outline usa-button--active
-          usa-button-pill usa-button-pill--cancel
+          usa-button-pill
           text-ink
+          space-x-1
         "
       >
         <div>
@@ -73,15 +76,16 @@
             />
           </svg>
         </div>
-        CANCEL
+        <span> CANCEL </span>
       </button>
     </td>
     <td class="padding-1">
       <button
         class="
           usa-button usa-button--base usa-button--outline
-          usa-focus usa-button-pill usa-button-pill--cancel
+          usa-focus usa-button-pill
           text-ink
+          space-x-1
         "
       >
         <div>
@@ -95,15 +99,16 @@
             />
           </svg>
         </div>
-        CANCEL
+        <span> CANCEL </span>
       </button>
     </td>
     <td class="padding-1">
       <button
         class="
           usa-button usa-button--base usa-button--outline
-          usa-button-pill usa-button-pill--cancel
+          usa-button-pill
           text-ink
+          space-x-1
         "
         disabled="disabled"
       >
@@ -118,7 +123,7 @@
             />
           </svg>
         </div>
-        CANCEL
+        <span> CANCEL </span>
       </button>
     </td>
   </tr>

sam-styles/packages/components/button/pill/templates/next.html

@@ -10,8 +10,8 @@
   <tr style="height: 80px">
     <td class="padding-1">Next</td>
     <td class="padding-1">
-      <button class="usa-button usa-button-pill usa-button-pill--next">
-        NEXT
+      <button class="usa-button usa-button-pill space-x-1">
+        <span> NEXT </span>
         <div>
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -27,13 +27,8 @@
       </button>
     </td>
     <td class="padding-1">
-      <button
-        class="
-          usa-button usa-button--hover
-          usa-button-pill usa-button-pill--next
-        "
-      >
-        NEXT
+      <button class="usa-button usa-button--hover usa-button-pill space-x-1">
+        <span> NEXT </span>
         <div>
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -49,13 +44,8 @@
       </button>
     </td>
     <td class="padding-1">
-      <button
-        class="
-          usa-button usa-button--active
-          usa-button-pill usa-button-pill--next
-        "
-      >
-        NEXT
+      <button class="usa-button usa-button--active usa-button-pill space-x-1">
+        <span> NEXT </span>
         <div>
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -71,10 +61,8 @@
       </button>
     </td>
     <td class="padding-1">
-      <button
-        class="usa-button usa-focus usa-button-pill usa-button-pill--next"
-      >
-        NEXT
+      <button class="usa-button usa-focus usa-button-pill space-x-1">
+        <span> NEXT </span>
         <div>
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -90,11 +78,8 @@
       </button>
     </td>
     <td class="padding-1">
-      <button
-        class="usa-button usa-button-pill usa-button-pill--next"
-        disabled="disabled"
-      >
-        NEXT
+      <button class="usa-button usa-button-pill space-x-1" disabled="disabled">
+        <span> NEXT </span>
         <div>
           <svg
             xmlns="http://www.w3.org/2000/svg"

sam-styles/packages/components/button/pill/templates/previous.html

@@ -11,13 +11,7 @@
   <tr style="height: 80px">
     <td class="padding-1">Previous</td>
     <td class="padding-1">
-      <button
-        class="
-          usa-button
-          bg-primary-lighter
-          usa-button-pill usa-button-pill--previous
-        "
-      >
+      <button class="usa-button bg-primary-lighter usa-button-pill space-x-1">
         <div>
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -30,7 +24,7 @@
             />
           </svg>
         </div>
-        PREVIOUS
+        <span> PREVIOUS </span>
       </button>
     </td>
     <td class="padding-1">
@@ -39,7 +33,8 @@
           usa-button
           bg-primary-lighter
           usa-button--hover
-          usa-button-pill usa-button-pill--previous
+          usa-button-pill
+          space-x-1
         "
       >
         <div>
@@ -54,7 +49,7 @@
             />
           </svg>
         </div>
-        PREVIOUS
+        <span> PREVIOUS </span>
       </button>
     </td>
     <td class="padding-1">
@@ -63,7 +58,8 @@
           usa-button
           bg-primary-lighter
           usa-button--active
-          usa-button-pill usa-button-pill--previous
+          usa-button-pill
+          space-x-1
         "
       >
         <div>
@@ -78,15 +74,16 @@
             />
           </svg>
         </div>
-        PREVIOUS
+        <span> PREVIOUS </span>
       </button>
     </td>
     <td class="padding-1">
       <button
         class="
           usa-button
           bg-primary-lighter
-          usa-focus usa-button-pill usa-button-pill--previous
+          usa-focus usa-button-pill
+          space-x-1
         "
       >
         <div>
@@ -101,16 +98,12 @@
             />
           </svg>
         </div>
-        PREVIOUS
+        <span> PREVIOUS </span>
       </button>
     </td>
     <td class="padding-1">
       <button
-        class="
-          usa-button
-          bg-primary-lighter
-          usa-button-pill usa-button-pill--previous
-        "
+        class="usa-button bg-primary-lighter usa-button-pill space-x-1"
         disabled="disabled"
       >
         <div>
@@ -125,7 +118,7 @@
             />
           </svg>
         </div>
-        PREVIOUS
+        <span> PREVIOUS </span>
       </button>
     </td>
   </tr>