From 3e7293c936ebdd0033b4da9119c4f2273e41d409 Mon Sep 17 00:00:00 2001
From: samanpwbb <samanpwbb@gmail.com>
Date: Thu, 25 May 2017 11:45:50 -0400
Subject: [PATCH] rename icon-wrapper to icon-inliner, other small fixes

---
 site/catalog/icons.js                     |  6 ++--
 src/icons.css                             | 25 +++++++-------
 test/__snapshots__/build-css.jest.js.snap | 40 +++++++++++------------
 3 files changed, 36 insertions(+), 35 deletions(-)

diff --git a/site/catalog/icons.js b/site/catalog/icons.js
index d585141d..193c1b83 100644
--- a/site/catalog/icons.js
+++ b/site/catalog/icons.js
@@ -23,7 +23,7 @@ const iconSizes = [
   'icon icon--l',
 ];
 
-const wrapperClass = 'icon-wrapper';
+const wrapperClass = 'icon-inliner';
 
 const getIconEl = (icon) => {
   return (
@@ -41,13 +41,13 @@ const getIconEl = (icon) => {
       </div>
 
       {fontSizes.map((f) => iconSizes.map((c) => <div className={`mb12 ${f}`}>
-          <div className={f.includes('h') ? wrapperClass + ' icon-wrapper--heading' : wrapperClass}>
+          <div className={f.includes('h') ? wrapperClass + ' icon-inliner--heading' : wrapperClass}>
             <svg className={c}>
               <use xlinkHref={`#icon-${icon}`} />
             </svg>
           </div>
           <span>Curabitur blandit tempus porttitor.</span>
-          <div className={f.includes('h') ? wrapperClass + ' icon-wrapper--heading' : wrapperClass}>
+          <div className={f.includes('h') ? wrapperClass + ' icon-inliner--heading' : wrapperClass}>
             <svg className={c}>
               <use xlinkHref={`#icon-${icon}`} />
             </svg>
diff --git a/src/icons.css b/src/icons.css
index 9bf3aaf7..5d3ceb60 100644
--- a/src/icons.css
+++ b/src/icons.css
@@ -53,30 +53,31 @@
 }
 
 /**
- * Add to a wrapping element around an icon in order to align the icon with text and ensure icon doesn't impact text line height. If text uses a `txt-h{number}` class, then use the `icon-wrapper--heading` modifier.
+ * Add to a wrapping element around an icon in order to align the icon with text and ensure the icon doesn't unexpectedly shift text line height. Note that this rule depends on an expected text line height of 1.5 to 1.66, so it does not work with `txt-h{number}` classes. See the `icon-inliner--heading` modifier to center icons in heading text.
  *
  * @memberof Icons
  * @example
- * <p class='txt-l'><span class='icon-wrapper'><svg class='icon'><use xlink:href='#icon-clipboard'/></svg></span> Copy</p>
- * <p class='txt-xl'>Ring the <span class='icon-wrapper'><svg class='icon icon--l'><use xlink:href='#icon-bell'/></svg></span></p>
- * <p class='txt-s'>Keep your <span class='icon-wrapper'><svg class='icon icon--s'><use xlink:href='#icon-home'/></svg></span> safe from <span class='icon-wrapper'><svg class='icon icon--s'><use xlink:href='#icon-bug'/></svg></span></p>
+ * <p class='txt-l'><span class='icon-inliner'><svg class='icon'><use xlink:href='#icon-clipboard'/></svg></span> Copy</p>
+ * <p class='txt-xl'>Ring the <span class='icon-inliner'><svg class='icon icon--l'><use xlink:href='#icon-bell'/></svg></span></p>
+ * <p class='txt-s'>Keep your <span class='icon-inliner'><svg class='icon icon--s'><use xlink:href='#icon-home'/></svg></span> safe from <span class='icon-inliner'><svg class='icon icon--s'><use xlink:href='#icon-bug'/></svg></span></p>
  **/
-.icon-wrapper {
-  position: relative;
+.icon-inliner {
+  position: relative !important;
   display: inline-flex !important;
   vertical-align: top !important;
-  align-items: center;
-  justify-content: center;
-  height: 1em;
+  align-items: center !important;
+  justify-content: center !important;
+  height: 1em !important;
   top: 0.3em;
 }
 
 /**
-
+ * Modify the `icon-inliner` class so it works inside headings, which have an expected line height of 1.2 rather than 1.5 to 1.66.
+ *
  * @memberof Icons
  * @example
- * <h1 class='txt-h1'>I <span class='icon-wrapper icon-wrapper--heading'><svg class='icon icon--l'><use xlink:href='#icon-heart'/></svg></span> New York.</p>
+ * <h1 class='txt-h1'>I <span class='icon-inliner icon-inliner--heading'><svg class='icon icon--l'><use xlink:href='#icon-heart'/></svg></span> New York.</p>
  **/
-.icon-wrapper--heading {
+.icon-inliner--heading {
   top: 0.08em;
 }
diff --git a/test/__snapshots__/build-css.jest.js.snap b/test/__snapshots__/build-css.jest.js.snap
index 04744780..b51bc73f 100644
--- a/test/__snapshots__/build-css.jest.js.snap
+++ b/test/__snapshots__/build-css.jest.js.snap
@@ -1326,22 +1326,22 @@ input:checked:disabled + .toggle{
   height:36px !important;
   width:36px !important;
 }
-.icon-wrapper{
-  position:relative;
+.icon-inliner{
+  position:relative !important;
   display:-webkit-inline-flex !important;
   display:-ms-inline-flexbox !important;
   display:inline-flex !important;
   vertical-align:top !important;
-  -webkit-align-items:center;
-      -ms-flex-align:center;
-          align-items:center;
-  -webkit-justify-content:center;
-      -ms-flex-pack:center;
-          justify-content:center;
-  height:1em;
+  -webkit-align-items:center !important;
+      -ms-flex-align:center !important;
+          align-items:center !important;
+  -webkit-justify-content:center !important;
+      -ms-flex-pack:center !important;
+          justify-content:center !important;
+  height:1em !important;
   top:0.3em;
 }
-.icon-wrapper--heading{
+.icon-inliner--heading{
   top:0.08em;
 }
 .grid{
@@ -17794,22 +17794,22 @@ input:checked:disabled + .toggle{
   height:36px !important;
   width:36px !important;
 }
-.icon-wrapper{
-  position:relative;
+.icon-inliner{
+  position:relative !important;
   display:-webkit-inline-flex !important;
   display:-ms-inline-flexbox !important;
   display:inline-flex !important;
   vertical-align:top !important;
-  -webkit-align-items:center;
-      -ms-flex-align:center;
-          align-items:center;
-  -webkit-justify-content:center;
-      -ms-flex-pack:center;
-          justify-content:center;
-  height:1em;
+  -webkit-align-items:center !important;
+      -ms-flex-align:center !important;
+          align-items:center !important;
+  -webkit-justify-content:center !important;
+      -ms-flex-pack:center !important;
+          justify-content:center !important;
+  height:1em !important;
   top:0.3em;
 }
-.icon-wrapper--heading{
+.icon-inliner--heading{
   top:0.08em;
 }
 .grid{