Fix links that are not working with plain left click (#6970)

Fix links that are not working with plain left click

addons/notes/src/Panel.tsx

@@ -149,6 +149,8 @@ const NotesPanel = ({ active }: Props) => {
                 href="https://github.com/storybookjs/storybook/tree/master/addons/notes"
                 target="_blank"
                 withArrow
+                secondary
+                cancel={false}
               >
                 document components in Markdown
               </Link>

examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap

@@ -2424,6 +2424,7 @@ exports[`Storyshots Basics|Placeholder twoChildren 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #1EA7FD;
+  color: #999999;
 }
 
 .emotion-2 svg path {
@@ -2459,6 +2460,26 @@ exports[`Storyshots Basics|Placeholder twoChildren 1`] = `
   margin-right: 0.4em;
 }
 
+.emotion-2 svg path {
+  fill: #999999;
+}
+
+.emotion-2:hover {
+  color: #666666;
+}
+
+.emotion-2:hover svg path {
+  fill: #666666;
+}
+
+.emotion-2:active {
+  color: #444444;
+}
+
+.emotion-2:active svg path {
+  fill: #444444;
+}
+
 .emotion-4 {
   padding: 30px;
   text-align: center;
@@ -2477,6 +2498,7 @@ exports[`Storyshots Basics|Placeholder twoChildren 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #1EA7FD;
+  color: #999999;
 }
 
 .emotion-2 svg path {
@@ -2512,6 +2534,26 @@ exports[`Storyshots Basics|Placeholder twoChildren 1`] = `
   margin-right: 0.4em;
 }
 
+.emotion-2 svg path {
+  fill: #999999;
+}
+
+.emotion-2:hover {
+  color: #666666;
+}
+
+.emotion-2:hover svg path {
+  fill: #666666;
+}
+
+.emotion-2:active {
+  color: #444444;
+}
+
+.emotion-2:active svg path {
+  fill: #444444;
+}
+
 <div
   class="emotion-4"
 >

lib/components/src/placeholder/placeholder.stories.tsx

@@ -15,7 +15,10 @@ export const twoChildren = () => (
   <Placeholder>
     <Fragment key="title">This has two children, the first bold</Fragment>
     <Fragment key="desc">
-      The second normal weight. Here's a <Link href="https://storybook.js.org">link</Link>
+      The second normal weight. Here's a{' '}
+      <Link href="https://storybook.js.org" secondary cancel={false}>
+        link
+      </Link>
     </Fragment>
   </Placeholder>
 );

lib/ui/src/settings/__snapshots__/about.stories.storyshot

@@ -195,48 +195,6 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = `
   width: 15px;
 }
 
-.emotion-14 {
-  display: inline-block;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: #1EA7FD;
-}
-
-.emotion-14 svg path {
-  fill: #1EA7FD;
-}
-
-.emotion-14:hover,
-.emotion-14:focus {
-  cursor: pointer;
-  color: #0297f5;
-}
-
-.emotion-14:hover svg path,
-.emotion-14:focus svg path {
-  fill: #0297f5;
-}
-
-.emotion-14:active {
-  color: #028ee6;
-}
-
-.emotion-14:active svg path {
-  fill: #028ee6;
-}
-
-.emotion-14 svg {
-  display: inline-block;
-  height: 1em;
-  width: 1em;
-  vertical-align: text-top;
-  position: relative;
-  bottom: -0.125em;
-  margin-right: 0.4em;
-}
-
 .emotion-22 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -252,7 +210,7 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = `
   margin-left: 20px;
 }
 
-.emotion-17 {
+.emotion-14 {
   display: inline-block;
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
@@ -262,30 +220,30 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = `
   color: #999999;
 }
 
-.emotion-17 svg path {
+.emotion-14 svg path {
   fill: #1EA7FD;
 }
 
-.emotion-17:hover,
-.emotion-17:focus {
+.emotion-14:hover,
+.emotion-14:focus {
   cursor: pointer;
   color: #0297f5;
 }
 
-.emotion-17:hover svg path,
-.emotion-17:focus svg path {
+.emotion-14:hover svg path,
+.emotion-14:focus svg path {
   fill: #0297f5;
 }
 
-.emotion-17:active {
+.emotion-14:active {
   color: #028ee6;
 }
 
-.emotion-17:active svg path {
+.emotion-14:active svg path {
   fill: #028ee6;
 }
 
-.emotion-17 svg {
+.emotion-14 svg {
   display: inline-block;
   height: 1em;
   width: 1em;
@@ -295,23 +253,23 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = `
   margin-right: 0.4em;
 }
 
-.emotion-17 svg path {
+.emotion-14 svg path {
   fill: #999999;
 }
 
-.emotion-17:hover {
+.emotion-14:hover {
   color: #666666;
 }
 
-.emotion-17:hover svg path {
+.emotion-14:hover svg path {
   fill: #666666;
 }
 
-.emotion-17:active {
+.emotion-14:active {
   color: #444444;
 }
 
-.emotion-17:active svg path {
+.emotion-14:active svg path {
   fill: #444444;
 }
 
@@ -543,7 +501,7 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = `
             class="emotion-22"
           >
             <a
-              class="emotion-17"
+              class="emotion-14"
               href="https://storybook.js.org"
               target="_blank"
             >
@@ -554,7 +512,7 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = `
               </span>
             </a>
             <a
-              class="emotion-17"
+              class="emotion-14"
               href="https://github.com/storybookjs/storybook"
               target="_blank"
             >
@@ -565,7 +523,7 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = `
               </span>
             </a>
             <a
-              class="emotion-17"
+              class="emotion-14"
               href="https://storybook.js.org/support"
               target="_blank"
             >

lib/ui/src/settings/about.js

@@ -168,6 +168,8 @@ const AboutScreen = ({ latest, current, onClose }) => {
                   href="https://github.com/storybookjs/storybook/releases"
                   target="_blank"
                   withArrow
+                  secondary
+                  cancel={false}
                 >
                   Check Storybook's release history
                 </Link>