Merge pull request #11770 from ajkl2533/11393

Addon-docs: Fix link font size to inherit
storybookjs · Aug 3, 2020 · 8eb9ce7 · 8eb9ce7
2 parents a1b11f7 + 481a3ad
commit 8eb9ce7
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 3 deletions.
diff --git a/examples/official-storybook/stories/addon-docs/docs-only.stories.mdx b/examples/official-storybook/stories/addon-docs/docs-only.stories.mdx
@@ -4,9 +4,11 @@ import { Meta, Canvas } from '@storybook/addon-docs/blocks';
 
 # Documentation-only MDX
 
+# [Link](http://https://storybook.js.org/) in heading
+
 This file is a documentation-only MDX file, i.e. it doesn't contain any `<Story>` definitions.
 
-Therefore, it shows up in the navigation UI as a document icon.
+Therefore, it shows up in the [navigation](https://github.com/) UI as a document icon.
 
 It can, however, still contain a `<Canvas>` definition:
 
@@ -62,3 +64,12 @@ It can, however, still contain a `<Canvas>` definition:
 ## Bottom
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc faucibus urna id nibh mollis, varius facilisis sapien scelerisque. Pellentesque lobortis convallis mi, at accumsan nisl sollicitudin id. Aliquam vitae elementum libero. Nulla blandit est turpis, a consectetur ante rhoncus a. Integer eu quam eu mauris pharetra elementum. Donec ex nisl, tincidunt ut tincidunt id, bibendum ut sem. Sed in congue tortor, a congue dolor. Fusce a magna vel nulla laoreet sagittis.
+
+# [Link](https://storybook.js.org/) in heading
+## [Link](https://storybook.js.org/) in heading
+### [Link](https://storybook.js.org/) in heading
+#### [Link](https://storybook.js.org/) in heading
+##### [Link](https://storybook.js.org/) in heading
+###### [Link](https://storybook.js.org/) in heading
+
+He stared at the clinic, [Molly](https://storybook.js.org/) took him to the *[Tank War](https://storybook.js.org/)*, mouth touched with hot gold as a gliding cursor struck sparks from the wall of a **[skyscraper](https://storybook.js.org/)** canyon.
diff --git a/lib/components/src/blocks/Description.stories.tsx b/lib/components/src/blocks/Description.stories.tsx
@@ -15,7 +15,18 @@ The group looked like tall, exotic grazing animals, swaying gracefully and uncon
 
 ![An image](http://placehold.it/350x150)
 
-He stared at the clinic, Molly took him to the Tank War, mouth touched with hot gold as a gliding cursor struck sparks from the wall of a skyscraper canyon. 
+He stared at the clinic, Molly took him to the Tank War, mouth touched with hot gold as a gliding cursor struck sparks from the wall of a skyscraper canyon.
+`;
+
+const markdownWithLinksCaption = `
+# [Link](https://storybook.js.org/) in heading
+## [Link](https://storybook.js.org/) in heading
+### [Link](https://storybook.js.org/) in heading
+#### [Link](https://storybook.js.org/) in heading
+##### [Link](https://storybook.js.org/) in heading
+###### [Link](https://storybook.js.org/) in heading
+
+He stared at the clinic, [Molly](https://storybook.js.org/) took him to the *[Tank War](https://storybook.js.org/)*, mouth touched with hot gold as a gliding cursor struck sparks from the wall of a **[skyscraper](https://storybook.js.org/)** canyon.
 `;
 
 const Template = (args) => <Description {...args} />;
@@ -29,3 +40,8 @@ export const Markdown = Template.bind({});
 Markdown.args = {
   markdown: markdownCaption,
 };
+
+export const MarkdownLinks = Template.bind({});
+MarkdownLinks.args = {
+  markdown: markdownWithLinksCaption,
+};
diff --git a/lib/components/src/typography/DocumentFormatting.tsx b/lib/components/src/typography/DocumentFormatting.tsx
@@ -92,7 +92,7 @@ const Link: FunctionComponent<any> = ({ href: input, children, ...props }) => {
 };
 
 export const A = styled(Link)<{}>(withReset, ({ theme }) => ({
-  fontSize: theme.typography.size.s2,
+  fontSize: 'inherit',
   lineHeight: '24px',
 
   color: theme.color.secondary,

diff --git a/lib/components/src/typography/DocumentFormattingSample.md b/lib/components/src/typography/DocumentFormattingSample.md
@@ -125,7 +125,15 @@ Right aligned columns
 Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
 <!--lint enable no-literal-urls-->
 
+# [Link](https://storybook.js.org/) in heading
+## [Link](https://storybook.js.org/) in heading
+### [Link](https://storybook.js.org/) in heading
+#### [Link](https://storybook.js.org/) in heading
+##### [Link](https://storybook.js.org/) in heading
+###### [Link](https://storybook.js.org/) in heading
+
 ## Images
 
 ![Minion](https://octodex.github.com/images/minion.png)
 ![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg 'The Stormtroopocat')
+