From c4090c080607c5a9082d9a6def2ed82a3b496dad Mon Sep 17 00:00:00 2001
From: Jonathan Zempel <jzempel@gmail.com>
Date: Mon, 15 Oct 2018 16:55:28 -0700
Subject: [PATCH 1/2] Configure button to truncate with an ellipsis (if
 necessary)

---
 packages/buttons/src/_base.css | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/buttons/src/_base.css b/packages/buttons/src/_base.css
index bba159f2..c35ed9b5 100644
--- a/packages/buttons/src/_base.css
+++ b/packages/buttons/src/_base.css
@@ -26,10 +26,9 @@
   --zd-btn--sm-min-width: calc(calc(46 / 12 * 1em) + calc(var(--zd-btn--sm-padding) * 2));
 }
 
-/* 1. IE inner spacing fix.
- * 2. Anchor tag reset.
- * 3. Override for <input> & <button> elements.
- * 4. FF <input type="submit" fix. */
+/* 1. Anchor tag reset.
+ * 2. Override for <input> & <button> elements.
+ * 3. FF <input type="submit" fix. */
 
 .c-btn {
   display: inline-block;
@@ -41,14 +40,15 @@
   cursor: pointer;
   padding: 0 var(--zd-btn-padding);
   min-width: var(--zd-btn-min-width);
-  overflow: visible; /* [1] */
+  overflow: hidden;
   vertical-align: middle;
   text-align: center;
-  text-decoration: none; /* [2] */
+  text-decoration: none; /* [1] */
+  text-overflow: ellipsis;
   line-height: var(--zd-btn-line-height);
   white-space: nowrap;
   color: var(--zd-btn-color);
-  font-family: inherit; /* [3] */
+  font-family: inherit; /* [2] */
   font-size: var(--zd-btn-font-size);
   font-weight: var(--zd-btn-font-weight);
   -webkit-font-smoothing: subpixel-antialiased;
@@ -57,7 +57,7 @@
   -webkit-touch-callout: none;
 }
 
-.c-btn::-moz-focus-inner { /* [4] */
+.c-btn::-moz-focus-inner { /* [3] */
   border: 0;
   padding: 0;
 }

From 2be56678a195ca1dc4de09bae4c904b63b808835 Mon Sep 17 00:00:00 2001
From: Jonathan Zempel <jzempel@gmail.com>
Date: Mon, 15 Oct 2018 16:59:56 -0700
Subject: [PATCH 2/2] Update .c-dialog__footer__item to prevent overflow

---
 demo/modals/index.html          | 39 +++++++++++++++++++++++++--------
 packages/modals/src/_footer.css | 18 ++++++++++++---
 2 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/demo/modals/index.html b/demo/modals/index.html
index 49dab3f7..0728657f 100644
--- a/demo/modals/index.html
+++ b/demo/modals/index.html
@@ -258,7 +258,12 @@ <h1 class="c-dialog__header">Big</h1>
     tincidunt id purus vel posuere.</p>
   </div>
   <footer class="c-dialog__footer">
-    <button class="c-dialog__footer__item c-btn c-btn--primary js-close">OK</button>
+    <div class="c-dialog__footer__item">
+      <button class="c-btn c-btn--basic js-close">Cancel</button>
+    </div>
+    <div class="c-dialog__footer__item">
+      <button class="c-btn c-btn--primary js-close">OK</button>
+    </div>
   </footer>
 </section></textarea>
         </div>
@@ -285,8 +290,12 @@ <h1 class="c-dialog__header">Big</h1>
     gastropub. Austin quinoa butcher, everyday carry echo park sartorial
     VHS.</p>
     <footer class="c-dialog__footer">
-      <code class="c-dialog__footer__item c-code" dir="ltr">.c-dialog__footer</code
-      ><button class="c-dialog__footer__item c-btn c-btn--primary js-close">OK</button>
+      <div class="c-dialog__footer__item">
+        <code class="c-code" dir="ltr">.c-dialog__footer</code>
+      </div>
+      <div class="c-dialog__footer__item">
+        <button class="c-btn c-btn--primary js-close">OK</button>
+      </div>
     </footer>
   </section>
 
@@ -325,8 +334,12 @@ <h1 class="c-dialog__header">Big</h1>
       mlkshk hexagon.</p>
     </div>
     <footer class="c-dialog__footer">
-      <button class="c-dialog__footer__item c-btn c-btn--basic js-close">Cancel</button
-      ><button class="c-dialog__footer__item c-btn c-btn--primary js-close">OK</button>
+      <div class="c-dialog__footer__item">
+        <button class="c-btn c-btn--basic js-close">Cancel</button>
+      </div>
+      <div class="c-dialog__footer__item">
+        <button class="c-btn c-btn--primary js-close">OK</button>
+      </div>
     </footer>
   </section>
 
@@ -348,8 +361,12 @@ <h1 class="c-dialog__header">Big</h1>
     bitters, blog letterpress pinterest vegan dreamcatcher. Selvage meh lomo
     90's, crucifix banjo seitan knausgaard kitsch salvia actually bespoke.</p>
     <footer class="c-dialog__footer">
-      <button class="c-dialog__footer__item c-btn c-btn--basic js-close">Cancel</button
-      ><button class="c-dialog__footer__item c-btn c-btn--primary js-close">OK</button>
+      <div class="c-dialog__footer__item">
+        <button class="c-btn c-btn--basic js-close">Cancel</button>
+      </div>
+      <div class="c-dialog__footer__item">
+        <button class="c-btn c-btn--primary js-close">OK</button>
+      </div>
     </footer>
   </section>
 
@@ -387,8 +404,12 @@ <h1 class="c-dialog__header">Big</h1>
       mlkshk hexagon.</p>
     </div>
     <footer class="c-dialog__footer">
-      <button class="c-dialog__footer__item c-btn c-btn--basic js-close">Cancel</button
-      ><button class="c-dialog__footer__item c-btn c-btn--primary js-close">OK</button>
+      <div class="c-dialog__footer__item">
+        <button class="c-btn c-btn--basic js-close">Cancel</button>
+      </div>
+      <div class="c-dialog__footer__item">
+        <button class="c-btn c-btn--primary js-close">OK</button>
+      </div>
     </footer>
   </section>
 
diff --git a/packages/modals/src/_footer.css b/packages/modals/src/_footer.css
index c36a8a00..064bbee7 100644
--- a/packages/modals/src/_footer.css
+++ b/packages/modals/src/_footer.css
@@ -2,7 +2,7 @@
 
 :root {
   --zd-dialog__footer-padding: 0 var(--zd-spacing-xl) 32px;
-  --zd-dialog__footer__btn-margin: 20px;
+  --zd-dialog__footer__item-margin: 20px;
   --zd-dialog--large__footer-padding: 32px var(--zd-spacing-xl);
   --zd-dialog--large__footer-border-top: var(--zd-dialog__header-border-bottom);
 }
@@ -20,10 +20,22 @@
 }
 
 .c-dialog__footer__item {
-  margin-left: var(--zd-dialog__footer__btn-margin);
+  display: flex;
+  margin-left: var(--zd-dialog__footer__item-margin);
+  min-width: 0;
+}
+
+.c-dialog__footer__item:first-child {
+  margin-left: 0;
 }
 
 .c-dialog.is-rtl .c-dialog__footer__item {
-  margin-right: var(--zd-dialog__footer__btn-margin);
+  margin-right: var(--zd-dialog__footer__item-margin);
   margin-left: 0;
 }
+
+/* stylelint-disable selector-max-specificity */
+.c-dialog.is-rtl .c-dialog__footer__item:first-child {
+  margin-right: 0;
+}
+/* stylelint-enable selector-max-specificity */