Merge pull request #3896 from adekbadek/patch-1

addon-info: fix copy button styling
storybookjs · Jul 18, 2018 · 8b6e508 · 8b6e508
2 parents 9211dcb + 1c9e4c1
commit 8b6e508
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 26 deletions.
diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap
@@ -33,6 +33,9 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
   -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
   align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 .emotion-1:hover {
@@ -1335,6 +1338,9 @@ exports[`addon Info should render <Info /> and markdown 1`] = `
   -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
   align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 .emotion-1:hover {

diff --git a/addons/info/src/components/markdown/pre/copyButton.js b/addons/info/src/components/markdown/pre/copyButton.js
@@ -12,6 +12,7 @@ const Button = styled('button')(
     fontSize: 13,
     padding: '3px 10px',
     alignSelf: 'flex-start',
+    flexShrink: 0,
 
     ':hover': {
       backgroundColor: '#f4f7fa',

diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
@@ -181,7 +181,7 @@ exports[`Storyshots Button addons composition 1`] = `
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -385,7 +385,7 @@ exports[`Storyshots Button with new info 1`] = `
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"

diff --git a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
@@ -98,7 +98,7 @@ exports[`Storyshots Addons|Info.Decorator Use Info as story decorator 1`] = `
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -404,7 +404,7 @@ exports[`Storyshots Addons|Info.GitHub issues #1814 1`] = `
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -586,7 +586,7 @@ exports[`Storyshots Addons|Info.JSX Displays JSX in description 1`] = `
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -917,7 +917,7 @@ exports[`Storyshots Addons|Info.Markdown Displays Markdown in description 1`] =
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -1217,7 +1217,7 @@ exports[`Storyshots Addons|Info.Markdown From external Markdown file 1`] = `
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -1529,7 +1529,7 @@ exports[`Storyshots Addons|Info.Markdown From internal Markdown file 1`] = `
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -1802,7 +1802,7 @@ exports[`Storyshots Addons|Info.Options.TableComponent Use a custom component fo
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -1998,7 +1998,7 @@ exports[`Storyshots Addons|Info.Options.excludedPropTypes Excludes propTypes tha
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -2241,7 +2241,7 @@ exports[`Storyshots Addons|Info.Options.header Shows or hides Info Addon header
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -2512,7 +2512,7 @@ exports[`Storyshots Addons|Info.Options.inline Inlines component inside story 1`
             </div>
           </div>
           <button
-            class="css-zvhq5i"
+            class="css-1naocv3"
           >
             <div
               class="css-lvl6aa"
@@ -3482,7 +3482,7 @@ exports[`Storyshots Addons|Info.Options.maxPropsIntoLine === 0 Object and array
             </div>
           </div>
           <button
-            class="css-zvhq5i"
+            class="css-1naocv3"
           >
             <div
               class="css-lvl6aa"
@@ -4268,7 +4268,7 @@ exports[`Storyshots Addons|Info.Options.maxPropsIntoLine === 3 Object and array
             </div>
           </div>
           <button
-            class="css-zvhq5i"
+            class="css-1naocv3"
           >
             <div
               class="css-lvl6aa"
@@ -4549,7 +4549,7 @@ exports[`Storyshots Addons|Info.Options.propTables Shows additional component pr
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -5001,7 +5001,7 @@ exports[`Storyshots Addons|Info.Options.propTablesExclude Exclude component from
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -5492,7 +5492,7 @@ exports[`Storyshots Addons|Info.Options.styles Extend info styles with an object
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -5765,7 +5765,7 @@ exports[`Storyshots Addons|Info.Options.styles Full control over styles using a
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -6102,7 +6102,7 @@ exports[`Storyshots Addons|Info.Parameters Overwrite the parameters with markdow
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -6402,7 +6402,7 @@ exports[`Storyshots Addons|Info.Parameters Overwrite the text parameter with mar
             </div>
           </div>
           <button
-            class="css-zvhq5i"
+            class="css-1naocv3"
           >
             <div
               class="css-lvl6aa"
@@ -6672,7 +6672,7 @@ exports[`Storyshots Addons|Info.Parameters Overwriting and extending the paramet
             </div>
           </div>
           <button
-            class="css-zvhq5i"
+            class="css-1naocv3"
           >
             <div
               class="css-lvl6aa"
@@ -6917,7 +6917,7 @@ exports[`Storyshots Addons|Info.Parameters Using paramaters across all stories 1
             </div>
           </div>
           <button
-            class="css-zvhq5i"
+            class="css-1naocv3"
           >
             <div
               class="css-lvl6aa"
@@ -7216,7 +7216,7 @@ exports[`Storyshots Addons|Info.React Docgen Comments from Flow declarations 1`]
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -7667,7 +7667,7 @@ exports[`Storyshots Addons|Info.React Docgen Comments from PropType declarations
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -8402,7 +8402,7 @@ exports[`Storyshots Addons|Info.React Docgen Comments from component declaration
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -8704,7 +8704,7 @@ exports[`Storyshots Addons|Info.React Docgen Comments from named export componen
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"