Merge pull request #6186 from SteffenGorenflo/5723-Info-addon-doesn't…

…-inherit-styling Add fonts and color to styling in info addon
storybookjs · Mar 23, 2019 · 313f0bc · 313f0bc
1 parent aea59f1
commit 313f0bc
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 65 deletions.
diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap
@@ -138,7 +138,6 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
             "background": "white",
             "bottom": 0,
             "display": "none",
-            "fontFamily": "Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, sans-serif",
             "left": 0,
             "overflow": "auto",
             "padding": "0 40px",
@@ -179,6 +178,8 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
                 "backgroundColor": "#fff",
                 "border": "1px solid #eee",
                 "borderRadius": "2px",
+                "color": "black",
+                "fontFamily": "Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, sans-serif",
                 "fontSize": "15px",
                 "fontWeight": 300,
                 "lineHeight": 1.45,
@@ -1392,7 +1393,6 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
             "background": "white",
             "bottom": 0,
             "display": "none",
-            "fontFamily": "Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, sans-serif",
             "left": 0,
             "overflow": "auto",
             "padding": "0 40px",
@@ -1433,6 +1433,8 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
                 "backgroundColor": "#fff",
                 "border": "1px solid #eee",
                 "borderRadius": "2px",
+                "color": "black",
+                "fontFamily": "Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, sans-serif",
                 "fontSize": "15px",
                 "fontWeight": 300,
                 "lineHeight": 1.45,
@@ -2634,6 +2636,8 @@ exports[`addon Info should render component description if story kind matches co
               "backgroundColor": "#fff",
               "border": "1px solid #eee",
               "borderRadius": "2px",
+              "color": "black",
+              "fontFamily": "Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, sans-serif",
               "fontSize": "15px",
               "fontWeight": 300,
               "lineHeight": 1.45,
@@ -2756,6 +2760,8 @@ exports[`addon Info should render component description if story kind matches co
               "backgroundColor": "#fff",
               "border": "1px solid #eee",
               "borderRadius": "2px",
+              "color": "black",
+              "fontFamily": "Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, sans-serif",
               "fontSize": "15px",
               "fontWeight": 300,
               "lineHeight": 1.45,
@@ -3849,6 +3855,8 @@ exports[`addon Info should render component description if story name matches co
               "backgroundColor": "#fff",
               "border": "1px solid #eee",
               "borderRadius": "2px",
+              "color": "black",
+              "fontFamily": "Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, sans-serif",
               "fontSize": "15px",
               "fontWeight": 300,
               "lineHeight": 1.45,
@@ -3971,6 +3979,8 @@ exports[`addon Info should render component description if story name matches co
               "backgroundColor": "#fff",
               "border": "1px solid #eee",
               "borderRadius": "2px",
+              "color": "black",
+              "fontFamily": "Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, sans-serif",
               "fontSize": "15px",
               "fontWeight": 300,
               "lineHeight": 1.45,

diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js
@@ -35,7 +35,6 @@ const stylesheetBase = {
     },
   },
   info: {
-    fontFamily: 'Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, sans-serif',
     position: 'fixed',
     background: 'white',
     top: 0,
@@ -51,6 +50,8 @@ const stylesheetBase = {
     zIndex: 0,
   },
   infoBody: {
+    fontFamily: 'Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, sans-serif',
+    color: 'black',
     fontWeight: 300,
     lineHeight: 1.45,
     fontSize: '15px',

diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
@@ -28,7 +28,7 @@ exports[`Storyshots Button with new info 1`] = `
   </button>
   <div
     class="info__overlay"
-    style="font-family:Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, sans-serif;position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
+    style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
   >
     <button
       class="info__close-button"
@@ -39,7 +39,7 @@ exports[`Storyshots Button with new info 1`] = `
     </button>
     <div>
       <div
-        style="font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
+        style="font-family:Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, sans-serif;color:black;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
       >
         <div
           style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"