Adding directional margin classes to the utilities (#1595)

* Adding directional margin classes to the utilities

Co-Authored-By: Katie Langerman <langermank@gmail.com>

* Create sixty-masks-matter.md

* Pushes the box to the top

Co-authored-by: Katie Langerman <langermank@gmail.com>

.changeset/sixty-masks-matter.md

@@ -0,0 +1,7 @@
+---
+"@primer/css": minor
+---
+
+Adding directional margin classes to the margin utilities. 
+
+Adding: `ml-auto, mb-auto, mr-auto`

docs/content/utilities/margin.md

@@ -91,6 +91,20 @@ Use `mx-auto`to center block elements with a set width.
 </div>
 ```
 
+We also provide directional margin auto. `mt-auto, mr-auto, mb-auto, ml-auto`
+
+```html live
+<div class="d-flex border mb-4">
+  <div style="height:100px;"></div>
+  <div class="border mt-auto">`mt-auto` will push this box to the bottom.</div>
+  <div class="border mb-auto">`mb-auto` will push this box to the top.</div>
+</div>
+<div class="d-flex flex-column border">
+  <div class="border ml-auto">`ml-auto` will push this box to the right.</div>
+  <div class="border mr-auto">`mr-auto` will push this box to the left.</div>
+</div>
+```
+
 ## Reset margins
 Reset margins built into typography elements or other components with `m-0`, `mt-0`, `mr-0`, `mb-0`, `ml-0`, `mx-0`, and `my-0`.
 

src/utilities/margin.scss

@@ -63,3 +63,6 @@
 .m-auto { margin: auto !important; }
 
 .mt-auto { margin-top: auto !important; }
+.mr-auto { margin-right: auto !important; }
+.mb-auto { margin-bottom: auto !important; }
+.ml-auto { margin-left: auto !important; }