[MarkdownEditor] Add className support to toolbar for custom styling

packages/eui/changelogs/upcoming/9153.md

@@ -0,0 +1 @@
+- Added `className` support to `EuiMarkdownEditor`'s `toolbarProps` for custom toolbar styling

packages/eui/src/components/markdown_editor/markdown_editor.test.tsx

@@ -407,6 +407,20 @@ describe('EuiMarkdownEditor', () => {
         screen.getByRole('button', { name: 'Editor' })
       ).toBeInTheDocument();
     });
+
+    it('applies custom className to toolbar when passed', () => {
+      render(
+        <EuiMarkdownEditor
+          onChange={() => null}
+          value="markdown test"
+          {...requiredProps}
+          toolbarProps={{ className: 'customToolbarClass' }}
+        />
+      );
+      const toolbar = screen.getByTestSubject('euiMarkdownEditorToolbar');
+      expect(toolbar).toHaveClass('euiMarkdownEditorToolbar');
+      expect(toolbar).toHaveClass('customToolbarClass');
+    });
   });
   it('should show footer by default and hide when showFooter is false', () => {
     render(

packages/eui/src/components/markdown_editor/markdown_editor.tsx

@@ -143,6 +143,7 @@ type CommonMarkdownEditorProps = Omit<
      * Props to customize the toolbar. `right` replaces the default preview/editor toggle with custom content.
      */
     toolbarProps?: {
+      className?: EuiMarkdownEditorToolbarProps['className'];
       right?: EuiMarkdownEditorToolbarProps['right'];
     };
     /** Controls whether the footer is shown */

packages/eui/src/components/markdown_editor/markdown_editor_toolbar.tsx

@@ -13,6 +13,7 @@ import React, {
   forwardRef,
   Ref,
 } from 'react';
+import classNames from 'classnames';
 
 import { useEuiMemoizedStyles } from '../../services';
 import { CommonProps } from '../common';
@@ -140,6 +141,7 @@ export const EuiMarkdownEditorToolbar = forwardRef<
 >(
   (
     {
+      className,
       markdownActions,
       viewMode,
       onClickPreview,
@@ -151,6 +153,8 @@ export const EuiMarkdownEditorToolbar = forwardRef<
   ) => {
     const { openPluginEditor, readOnly } = useContext(EuiMarkdownContext);
 
+    const classes = classNames('euiMarkdownEditorToolbar', className);
+
     const handleMdButtonClick = (mdButtonId: string) => {
       const actionResult = markdownActions.do(mdButtonId);
       if (actionResult !== true) openPluginEditor(actionResult);
@@ -166,7 +170,7 @@ export const EuiMarkdownEditorToolbar = forwardRef<
       <div
         ref={ref}
         css={styles.euiMarkdownEditorToolbar}
-        className="euiMarkdownEditorToolbar"
+        className={classes}
         data-test-subj="euiMarkdownEditorToolbar"
       >
         <div