From 1c9e4c1328de4e9a9666f4e63934bf38b1534562 Mon Sep 17 00:00:00 2001
From: Adam Boro <adam@adamboro.com>
Date: Wed, 18 Jul 2018 11:39:23 +0200
Subject: [PATCH] addon-info: fix copy button styling

The copy button in Story Source was shrunk when the source was too wide to fit on screen (https://monosnap.com/file/0k7rzJAxlBV9XiFLGeJnnUKs12dipg).
---
 .../info/src/__snapshots__/index.test.js.snap |  6 +++
 .../src/components/markdown/pre/copyButton.js |  1 +
 .../__snapshots__/index.stories.storyshot     |  4 +-
 .../addon-info.stories.storyshot              | 48 +++++++++----------
 4 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap
index e935cd48a7a3..cd708d7a0a65 100644
--- 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
index fa84c05a0ce4..ff11d7a60d0f 100644
--- 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
index 587f57a8dae6..cedc3dd0594c 100644
--- 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
index 04f742dd04c3..4d98d0a10783 100644
--- 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"