Merge pull request #24259 from Bonial-International-GmbH/pjungermann/markdown

fix: no `undefined` class name used at `MarkdownContent` if no custom class name was provided

.changeset/lemon-months-press.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+No `undefined` class name used at `MarkdownContent` if no custom class name was provided.

packages/core-components/src/components/MarkdownContent/MarkdownContent.test.tsx

@@ -45,6 +45,36 @@ describe('<MarkdownContent />', () => {
     ).toBeInTheDocument();
   });
 
+  it('Render MarkdownContent component without custom class', async () => {
+    await renderInTestApp(
+      <MarkdownContent content="https://example.com" dialect="common-mark" />,
+    );
+    const content = screen.getByText('https://example.com', { selector: 'p' });
+
+    expect(
+      Array.from(content.parentElement?.classList?.values() ?? []).map(cls =>
+        cls.replace(/-\d+$/, ''),
+      ),
+    ).toEqual(['BackstageMarkdownContent-markdown']);
+  });
+
+  it('Render MarkdownContent component with custom class', async () => {
+    await renderInTestApp(
+      <MarkdownContent
+        content="https://example.com"
+        dialect="common-mark"
+        className="custom-class"
+      />,
+    );
+    const content = screen.getByText('https://example.com', { selector: 'p' });
+
+    expect(
+      Array.from(content.parentElement?.classList?.values() ?? []).map(cls =>
+        cls.replace(/-\d+$/, ''),
+      ),
+    ).toEqual(['BackstageMarkdownContent-markdown', 'custom-class']);
+  });
+
   it('render MarkdownContent component with CodeSnippet for code blocks', async () => {
     await renderInTestApp(
       <MarkdownContent content={'```typescript\njest(test: string);\n```'} />,

packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx

@@ -127,7 +127,7 @@ export function MarkdownContent(props: Props) {
   return (
     <ReactMarkdown
       remarkPlugins={dialect === 'gfm' ? [gfm] : []}
-      className={`${classes.markdown} ${className}`}
+      className={`${classes.markdown} ${className ?? ''}`.trim()}
       children={content}
       components={components}
       linkTarget={linkTarget}