From 481a3addcbc422b9a8e6cfa9a403bfed0965b884 Mon Sep 17 00:00:00 2001 From: Radek Podrazky Date: Mon, 3 Aug 2020 13:56:54 +0200 Subject: [PATCH] fix(DocumentFormatting): inherit font size in links --- .../stories/addon-docs/docs-only.stories.mdx | 13 ++++++++++++- .../src/blocks/Description.stories.tsx | 18 +++++++++++++++++- .../src/typography/DocumentFormatting.tsx | 2 +- .../src/typography/DocumentFormattingSample.md | 8 ++++++++ 4 files changed, 38 insertions(+), 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 index cc194f026920..986d5445f41d 100644 --- 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 `` 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 `` definition: @@ -62,3 +64,12 @@ It can, however, still contain a `` 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 index c10528ae1b46..14bbfaacb872 100644 --- 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) => ; @@ -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 index 33d7d32b0a39..df03c85367eb 100644 --- a/lib/components/src/typography/DocumentFormatting.tsx +++ b/lib/components/src/typography/DocumentFormatting.tsx @@ -92,7 +92,7 @@ const Link: FunctionComponent = ({ 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 index c40d9df2562b..fbf3e112bba6 100644 --- 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) +# [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') +