Skip to content

Commit

Permalink
Merge pull request #5759 from mateoholman/5723-info-addon-styling
Browse files Browse the repository at this point in the history 
Add font family to info panel
  • Loading branch information
@ndelangen
ndelangen authored Feb 27, 2019
2 parents 6234e7a + c2df59f commit 1cfc04c
Show file tree
Hide file tree
Showing 4 changed files with 30 additions and 27 deletions.
2 changes: 2 additions & 0 deletions addons/info/src/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,7 @@ 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",
Expand Down Expand Up @@ -1391,6 +1392,7 @@ 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",
Expand Down
1 change: 1 addition & 0 deletions addons/info/src/components/Story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ const stylesheetBase = {
},
},
info: {
fontFamily: 'Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, sans-serif',
position: 'fixed',
background: 'white',
top: 0,
Expand Down
2 changes: 1 addition & 1 deletion examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ exports[`Storyshots Button with new info 1`] = `
</button>
<div
class="info__overlay"
style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
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"
>
<button
class="info__close-button"
Expand Down
52 changes: 26 additions & 26 deletions examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ exports[`Storyshots Addons|Info/Decorator Use Info as story decorator 1`] = `
</button>
<div
class="info__overlay"
style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
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"
>
<button
class="info__close-button"
Expand Down Expand Up @@ -265,7 +265,7 @@ exports[`Storyshots Addons|Info/ForwardRef Displays forwarded ref components cor
</button>
<div
class="info__overlay"
style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
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"
>
<button
class="info__close-button"
Expand Down Expand Up @@ -583,7 +583,7 @@ exports[`Storyshots Addons|Info/GitHub issues #1814 1`] = `
</button>
<div
class="info__overlay"
style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
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"
>
<button
class="info__close-button"
Expand Down Expand Up @@ -747,7 +747,7 @@ exports[`Storyshots Addons|Info/JSX Displays JSX in description 1`] = `
</button>
<div
class="info__overlay"
style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
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"
>
<button
class="info__close-button"
Expand Down Expand Up @@ -1026,7 +1026,7 @@ exports[`Storyshots Addons|Info/Markdown Displays Markdown in description 1`] =
</button>
<div
class="info__overlay"
style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
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"
>
<button
class="info__close-button"
Expand Down Expand Up @@ -1309,7 +1309,7 @@ exports[`Storyshots Addons|Info/Markdown From external Markdown file 1`] = `
</button>
<div
class="info__overlay"
style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
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"
>
<button
class="info__close-button"
Expand Down Expand Up @@ -1572,7 +1572,7 @@ exports[`Storyshots Addons|Info/Markdown From internal Markdown file 1`] = `
</button>
<div
class="info__overlay"
style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
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"
>
<button
class="info__close-button"
Expand Down Expand Up @@ -1847,7 +1847,7 @@ exports[`Storyshots Addons|Info/Options.TableComponent Use a custom component fo
</button>
<div
class="info__overlay"
style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
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"
>
<button
class="info__close-button"
Expand Down Expand Up @@ -2029,7 +2029,7 @@ exports[`Storyshots Addons|Info/Options.excludedPropTypes Excludes propTypes tha
</button>
<div
class="info__overlay"
style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
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"
>
<button
class="info__close-button"
Expand Down Expand Up @@ -2253,7 +2253,7 @@ exports[`Storyshots Addons|Info/Options.header Shows or hides Info Addon header
</button>
<div
class="info__overlay"
style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
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"
>
<button
class="info__close-button"
Expand Down Expand Up @@ -2716,7 +2716,7 @@ exports[`Storyshots Addons|Info/Options.propTables Shows additional component pr
</button>
<div
class="info__overlay"
style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
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"
>
<button
class="info__close-button"
Expand Down Expand Up @@ -3046,7 +3046,7 @@ exports[`Storyshots Addons|Info/Options.propTablesExclude Exclude component from
</button>
<div
class="info__overlay"
style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
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"
>
<button
class="info__close-button"
Expand Down Expand Up @@ -3352,7 +3352,7 @@ exports[`Storyshots Addons|Info/Options.source Shows or hides Info Addon source
</button>
<div
class="info__overlay"
style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
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"
>
<button
class="info__close-button"
Expand Down Expand Up @@ -3543,7 +3543,7 @@ exports[`Storyshots Addons|Info/Options.styles Extend info styles with an object
</button>
<div
class="info__overlay"
style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
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"
>
<button
class="info__close-button"
Expand Down Expand Up @@ -3779,7 +3779,7 @@ exports[`Storyshots Addons|Info/Options.styles Full control over styles using a
</button>
<div
class="info__overlay"
style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
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"
>
<button
class="info__close-button"
Expand Down Expand Up @@ -4023,7 +4023,7 @@ exports[`Storyshots Addons|Info/Parameters Overwrite the parameters with markdow
</button>
<div
class="info__overlay"
style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
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"
>
<button
class="info__close-button"
Expand Down Expand Up @@ -4999,7 +4999,7 @@ exports[`Storyshots Addons|Info/React Docgen Comments from Flow declarations 1`]
</button>
<div
class="info__overlay"
style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
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"
>
<button
class="info__close-button"
Expand Down Expand Up @@ -5218,7 +5218,7 @@ exports[`Storyshots Addons|Info/React Docgen Comments from PropType declarations
</button>
<div
class="info__overlay"
style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
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"
>
<button
class="info__close-button"
Expand Down Expand Up @@ -6021,7 +6021,7 @@ exports[`Storyshots Addons|Info/React Docgen Comments from component declaration
</button>
<div
class="info__overlay"
style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
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"
>
<button
class="info__close-button"
Expand Down Expand Up @@ -6284,7 +6284,7 @@ exports[`Storyshots Addons|Info/React Docgen Comments from named export componen
</button>
<div
class="info__overlay"
style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
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"
>
<button
class="info__close-button"
Expand Down Expand Up @@ -6622,7 +6622,7 @@ exports[`Storyshots Addons|Info/Story Source Array prop 1`] = `
</button>
<div
class="info__overlay"
style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
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"
>
<button
class="info__close-button"
Expand Down Expand Up @@ -7084,7 +7084,7 @@ exports[`Storyshots Addons|Info/Story Source Children 1`] = `
</button>
<div
class="info__overlay"
style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
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"
>
<button
class="info__close-button"
Expand Down Expand Up @@ -7400,7 +7400,7 @@ exports[`Storyshots Addons|Info/Story Source Many props 1`] = `
</button>
<div
class="info__overlay"
style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
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"
>
<button
class="info__close-button"
Expand Down Expand Up @@ -7661,7 +7661,7 @@ exports[`Storyshots Addons|Info/Story Source Object prop 1`] = `
</button>
<div
class="info__overlay"
style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
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"
>
<button
class="info__close-button"
Expand Down Expand Up @@ -7981,7 +7981,7 @@ exports[`Storyshots Addons|Info/Story Source One prop 1`] = `
</button>
<div
class="info__overlay"
style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
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"
>
<button
class="info__close-button"
Expand Down Expand Up @@ -8217,7 +8217,7 @@ exports[`Storyshots Addons|Info/deprecated Displays Markdown in description 1`]
</button>
<div
class="info__overlay"
style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
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"
>
<button
class="info__close-button"
Expand Down

0 comments on commit 1cfc04c

Please sign in to comment.