rename icon-wrapper to icon-inliner, other small fixes

mapbox · May 25, 2017 · 3e7293c · 3e7293c
1 parent 1f4cc5a
commit 3e7293c
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 35 deletions.
diff --git 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
@@ -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
@@ -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{