Skip to content

Commit 8902552

Browse files
stephl3stephl3
authored
[LG-5570] feat(lg-markdown): expand markdown support and improve styling system (#3158)
* chore(lg-markdown): add palette dep * test(lg-markdown): update MARKDOWN_TEXT for stories * test(message): update MARKDOWN_TEXT for story * feat(lg-markdown): enhance styling system and component mappings * fix(message): long link formatting * chore: changesets * chore(lg-markdown): add comments about h5 and h6 * fix(lg-markdown): layout and spacing
1 parent ceccfc1 commit 8902552

File tree

11 files changed

+237
-22
lines changed

11 files changed

+237
-22
lines changed

‎.changeset/chat-lg-markdown-updates.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
'@lg-chat/lg-markdown': minor
3+
---
4+
5+
[LG-5570](https://jira.mongodb.org/browse/LG-5570)
6+
- Expand markdown element coverage to include `<blockquote>`, `<hr>`, and `<h4>`
7+
- Improve list spacing and indentation
8+
- Fix header stylings

‎.changeset/chat-message-markdown-fix.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@lg-chat/message': patch
3+
---
4+
5+
[LG-5570](https://jira.mongodb.org/browse/LG-5570): fix text wrapping and overflow

‎chat/lg-markdown/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"@leafygreen-ui/code": "workspace:^",
1818
"@leafygreen-ui/emotion": "workspace:^",
1919
"@leafygreen-ui/lib": "workspace:^",
20+
"@leafygreen-ui/palette": "workspace:^",
2021
"@leafygreen-ui/tokens": "workspace:^",
2122
"@leafygreen-ui/typography": "workspace:^",
2223
"react-markdown": "^8.0.7"

‎chat/lg-markdown/src/LGMarkdown.stories.tsx‎

Lines changed: 34 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,21 @@ import { StoryFn } from '@storybook/react';
44

55
import { LGMarkdown } from '.';
66

7-
const StoryMarkdown = `
7+
const MARKDOWN_TEXT = `
88
# Heading 1
99
1010
## Heading 2
1111
1212
### Heading 3
1313
14+
#### Heading 4
15+
16+
##### Heading 5 (not supported)
17+
18+
###### Heading 6 (not supported)
19+
20+
---
21+
1422
This is a paragraph.
1523
1624
Each paragraph can span multiple lines. And have multiple sentences!
@@ -19,6 +27,10 @@ A paragraph can also contain formatted text, like *italics* or **bold** words.
1927
2028
You can link to a URL using markdown link notation, e.g. [LeafyGreen UI](mongodb.design)
2129
30+
Long links will wrap to the next line: [https://mongodb.github.io/leafygreen-ui/?path=/docs/overview-introduction--docs](https://mongodb.github.io/leafygreen-ui/?path=/docs/overview-introduction--docs)
31+
32+
---
33+
2234
If you want to talk about code in a paragraph, you can use \`inline code\`. Wow!
2335
2436
Or you can use a markdown code block like this:
@@ -30,16 +42,33 @@ function helloWorld() {
3042
return "Hello, world!" satisfies HelloWorld;
3143
}
3244
\`\`\`
33-
- [https://mongodb.github.io/leafygreen-ui/?path=/docs/overview-introduction--docs](https://mongodb.github.io/leafygreen-ui/?path=/docs/overview-introduction--docs)
34-
- [https://mongodb.github.io/leafygreen-ui/?path=/docs/overview-introduction--docs](https://mongodb.github.io/leafygreen-ui/?path=/docs/overview-introduction--docs)
35-
- [https://mongodb.github.io/leafygreen-ui/?path=/docs/overview-introduction--docs](https://mongodb.github.io/leafygreen-ui/?path=/docs/overview-introduction--docs)
45+
46+
---
47+
48+
> This is a blockquote element.
49+
50+
Here's an ordered list:
51+
52+
1. Ordered list item 1
53+
2. Ordered list item 2
54+
1. Nested ordered list item 2.1
55+
2. Nested ordered list item 2.2
56+
3. Ordered list item 3
57+
58+
Here's an unordered list:
59+
60+
- Unordered list item 1
61+
- Unordered list item 2
62+
- Nested unordered list item 2.1
63+
- Nested unordered list item 2.2
64+
- Unordered list item 3
3665
`;
3766

3867
const meta = {
3968
title: 'Composition/Chat/LGMarkdown',
4069
component: LGMarkdown,
4170
args: {
42-
children: StoryMarkdown,
71+
children: MARKDOWN_TEXT,
4372
},
4473
argTypes: {
4574
baseFontSize: storybookArgTypes.baseFontSize,

‎chat/lg-markdown/src/LGMarkdown/LGMarkdown.styles.ts‎

Lines changed: 77 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,87 @@
1-
import { css } from '@leafygreen-ui/emotion';
2-
import { spacing } from '@leafygreen-ui/tokens';
1+
import { css, cx } from '@leafygreen-ui/emotion';
2+
import { Theme } from '@leafygreen-ui/lib';
3+
import { palette } from '@leafygreen-ui/palette';
4+
import {
5+
borderRadius,
6+
color,
7+
InteractionState,
8+
spacing,
9+
Variant,
10+
} from '@leafygreen-ui/tokens';
311

4-
export const baseStyles = css`
12+
const BLOCKQUOTE_WEDGE_WIDTH = 3;
13+
const LIST_INDENT_SPACING = spacing[400];
14+
const VERTICAL_SPACING = spacing[200];
15+
16+
const getBlockquoteStyles = (theme: Theme) => css`
17+
position: relative;
18+
margin: 0;
19+
padding-left: ${spacing[300]}px;
20+
display: flex;
21+
22+
/* wedge default state */
23+
&:before {
24+
content: '';
25+
position: absolute;
26+
background-color: ${theme === Theme.Light
27+
? palette.gray.light1
28+
: palette.gray.dark1};
29+
pointer-events: none;
30+
top: 0;
31+
bottom: 0;
32+
left: 0;
33+
width: ${BLOCKQUOTE_WEDGE_WIDTH}px;
34+
border-radius: ${borderRadius[400]}px;
35+
}
36+
`;
37+
38+
const getHrStyles = (theme: Theme) => css`
39+
margin: 0;
40+
background-color: ${color[theme].border[Variant.Secondary][
41+
InteractionState.Default
42+
]};
43+
width: 100%;
44+
height: 1px;
45+
`;
46+
47+
const getBaseStyles = (theme: Theme) => css`
548
display: flex;
649
flex-direction: column;
7-
gap: ${spacing[200]}px;
50+
gap: ${VERTICAL_SPACING}px;
51+
52+
blockquote {
53+
${getBlockquoteStyles(theme)}
54+
}
855
56+
hr {
57+
${getHrStyles(theme)}
58+
}
59+
60+
li,
961
ol,
1062
ul {
11-
padding-inline-start: ${spacing[300]}px;
63+
white-space: normal;
64+
}
65+
66+
ol,
67+
ul {
68+
margin: 0;
69+
padding-inline-start: ${LIST_INDENT_SPACING}px;
1270
display: flex;
1371
flex-direction: column;
14-
gap: ${spacing[200]}px;
72+
gap: ${VERTICAL_SPACING}px;
73+
}
74+
75+
code,
76+
pre {
77+
white-space: pre-wrap;
1578
}
1679
`;
80+
81+
export const getWrapperStyles = ({
82+
className,
83+
theme,
84+
}: {
85+
className?: string;
86+
theme: Theme;
87+
}) => cx(getBaseStyles(theme), className);

‎chat/lg-markdown/src/LGMarkdown/LGMarkdown.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React from 'react';
22
import ReactMarkdown from 'react-markdown';
33

4-
import { cx } from '@leafygreen-ui/emotion';
54
import LeafyGreenProvider, {
65
useDarkMode,
76
} from '@leafygreen-ui/leafygreen-provider';
7+
import { getTheme } from '@leafygreen-ui/lib';
88
import { useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
99

1010
import componentsMap from './componentsMap';
11-
import { baseStyles } from './LGMarkdown.styles';
11+
import { getWrapperStyles } from './LGMarkdown.styles';
1212
import { LGMarkdownProps } from '.';
1313

1414
export const LGMarkdown = ({
@@ -24,7 +24,9 @@ export const LGMarkdown = ({
2424
const providerBaseFontSize: 14 | 16 = baseFontSize === 13 ? 14 : 16; // todo: update when LGProvider switches to 13/16
2525
return (
2626
<LeafyGreenProvider darkMode={darkMode} baseFontSize={providerBaseFontSize}>
27-
<div className={cx(baseStyles, className)}>
27+
<div
28+
className={getWrapperStyles({ className, theme: getTheme(darkMode) })}
29+
>
2830
<ReactMarkdown
2931
components={{ ...componentsMap, ...components }}
3032
{...rest}

‎chat/lg-markdown/src/LGMarkdown/componentsMap.tsx‎

Lines changed: 68 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,14 @@ import React, { Children, ComponentPropsWithoutRef, ReactElement } from 'react';
22
import { Components as ReactMarkdownComponents } from 'react-markdown';
33

44
import Code, { Language } from '@leafygreen-ui/code';
5-
import { Body, H1, H2, H3, InlineCode, Link } from '@leafygreen-ui/typography';
5+
import { BaseFontSize, FontWeight } from '@leafygreen-ui/tokens';
6+
import {
7+
Body,
8+
H3,
9+
InlineCode,
10+
Link,
11+
Subtitle,
12+
} from '@leafygreen-ui/typography';
613

714
import { ExtraProps } from './LGMarkdown.types';
815

@@ -19,6 +26,13 @@ const componentsMap: ReactMarkdownComponents = {
1926
</Link>
2027
);
2128
},
29+
blockquote: ({
30+
children,
31+
node: _node,
32+
...rest
33+
}: ComponentPropsWithoutRef<'blockquote'> & ExtraProps) => {
34+
return <blockquote {...rest}>{children}</blockquote>;
35+
},
2236
code: ({
2337
children,
2438
node: _node,
@@ -31,21 +45,71 @@ const componentsMap: ReactMarkdownComponents = {
3145
node: _node,
3246
...rest
3347
}: ComponentPropsWithoutRef<'h1'> & ExtraProps) => {
34-
return <H1 {...rest}>{children}</H1>;
48+
return (
49+
<H3 as="h1" {...rest}>
50+
{children}
51+
</H3>
52+
);
3553
},
3654
h2: ({
3755
children,
3856
node: _node,
3957
...rest
4058
}: ComponentPropsWithoutRef<'h2'> & ExtraProps) => {
41-
return <H2 {...rest}>{children}</H2>;
59+
return (
60+
<Subtitle as="h2" {...rest}>
61+
{children}
62+
</Subtitle>
63+
);
4264
},
4365
h3: ({
4466
children,
4567
node: _node,
4668
...rest
4769
}: ComponentPropsWithoutRef<'h3'> & ExtraProps) => {
48-
return <H3 {...rest}>{children}</H3>;
70+
return (
71+
<Body
72+
as="h3"
73+
baseFontSize={BaseFontSize.Body2}
74+
weight={FontWeight.SemiBold}
75+
{...rest}
76+
>
77+
{children}
78+
</Body>
79+
);
80+
},
81+
h4: ({
82+
children,
83+
node: _node,
84+
...rest
85+
}: ComponentPropsWithoutRef<'h4'> & ExtraProps) => {
86+
return (
87+
<Body as="h4" weight={FontWeight.SemiBold} {...rest}>
88+
{children}
89+
</Body>
90+
);
91+
},
92+
// h5 is intentionally not supported, so return the markdown syntax as-is
93+
h5: ({
94+
children,
95+
node: _node,
96+
...rest
97+
}: ComponentPropsWithoutRef<'h5'> & ExtraProps) => {
98+
return <Body {...rest}>##### {children}</Body>;
99+
},
100+
// h5 is intentionally not supported, so return the markdown syntax as-is
101+
h6: ({
102+
children,
103+
node: _node,
104+
...rest
105+
}: ComponentPropsWithoutRef<'h6'> & ExtraProps) => {
106+
return <Body {...rest}>###### {children}</Body>;
107+
},
108+
hr: ({
109+
node: _node,
110+
...rest
111+
}: ComponentPropsWithoutRef<'hr'> & ExtraProps) => {
112+
return <hr {...rest} />;
49113
},
50114
li: ({
51115
children,

‎chat/lg-markdown/tsconfig.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,9 @@
2626
{
2727
"path": "../../packages/lib"
2828
},
29+
{
30+
"path": "../../packages/palette"
31+
},
2932
{
3033
"path": "../../packages/tokens"
3134
},

‎chat/message/src/Message.stories.tsx‎

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,14 @@ const MARKDOWN_TEXT = `
1919
2020
### Heading 3
2121
22+
#### Heading 4
23+
24+
##### Heading 5 (not supported)
25+
26+
###### Heading 6 (not supported)
27+
28+
---
29+
2230
This is a paragraph.
2331
2432
Each paragraph can span multiple lines. And have multiple sentences!
@@ -27,6 +35,10 @@ A paragraph can also contain formatted text, like *italics* or **bold** words.
2735
2836
You can link to a URL using markdown link notation, e.g. [LeafyGreen UI](mongodb.design)
2937
38+
Long links will wrap to the next line: [https://mongodb.github.io/leafygreen-ui/?path=/docs/overview-introduction--docs](https://mongodb.github.io/leafygreen-ui/?path=/docs/overview-introduction--docs)
39+
40+
---
41+
3042
If you want to talk about code in a paragraph, you can use \`inline code\`. Wow!
3143
3244
Or you can use a markdown code block like this:
@@ -39,9 +51,25 @@ function helloWorld() {
3951
}
4052
\`\`\`
4153
42-
- [https://mongodb.github.io/leafygreen-ui/?path=/docs/overview-introduction--docs](https://mongodb.github.io/leafygreen-ui/?path=/docs/overview-introduction--docs)
43-
- [https://mongodb.github.io/leafygreen-ui/?path=/docs/overview-introduction--docs](https://mongodb.github.io/leafygreen-ui/?path=/docs/overview-introduction--docs)
44-
- [https://mongodb.github.io/leafygreen-ui/?path=/docs/overview-introduction--docs](https://mongodb.github.io/leafygreen-ui/?path=/docs/overview-introduction--docs)
54+
---
55+
56+
> This is a blockquote element.
57+
58+
Here's an ordered list:
59+
60+
1. Ordered list item 1
61+
2. Ordered list item 2
62+
1. Nested ordered list item 2.1
63+
2. Nested ordered list item 2.2
64+
3. Ordered list item 3
65+
66+
Here's an unordered list:
67+
68+
- Unordered list item 1
69+
- Unordered list item 2
70+
- Nested unordered list item 2.1
71+
- Nested unordered list item 2.2
72+
- Unordered list item 3
4573
`;
4674

4775
const USER_MESSAGE = `How can I delete a massive amount of documents from a collection?`;

‎chat/message/src/MessageContainer/MessageContainer.styles.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import { Variant } from './MessageContainer.types';
77

88
const baseStyles = css`
99
position: relative;
10-
white-space: pre-wrap;
10+
max-width: 100%;
11+
white-space: pre-line;
1112
overflow-wrap: break-word;
1213
display: flex;
1314
flex-direction: column;

0 commit comments

Comments
 (0)