[MarkdownEditor] Add className support to toolbar for custom styling

[ragini-pandey]

Summary

Adds className support to the EuiMarkdownEditor toolbar through the toolbarProps prop, allowing consumers to apply custom styles to the toolbar element.

Changes

• Extended toolbarProps to accept className in addition to right
• Updated EuiMarkdownEditorToolbar to merge custom className with the default euiMarkdownEditorToolbar class using classNames utility
• Added unit test to verify className is properly applied

Usage

<EuiMarkdownEditor
  value={value}
  onChange={onChange}
  aria-label="Markdown editor"
  toolbarProps={{ className: 'myCustomToolbarClass' }}
/>

Why are we making this change?

Closes #9153

In Kibana dashboards, there's a need to display very small markdown editors where hiding the toolbar is necessary. Currently, this is being done by targeting the element via data-test-subj, but targeting via className is preferred for styling purposes. See related Kibana PR: elastic/kibana#240806

Screenshots #

N/A - No visual changes. This adds a passthrough prop for custom styling.

Impact to users

Non-breaking change. This is an additive enhancement that allows users to pass a custom className to the toolbar via toolbarProps. Existing usage remains unaffected.

Users who previously targeted the toolbar via data-test-subj="euiMarkdownEditorToolbar" can now use a custom className instead:

// Before (using data-test-subj)
<EuiMarkdownEditor ... />
// CSS: [data-test-subj="euiMarkdownEditorToolbar"] { display: none; }

// After (using className)
<EuiMarkdownEditor toolbarProps={{ className: 'hiddenToolbar' }} ... />
// CSS: .hiddenToolbar { display: none; }

QA

General checklist

• Browser QA
  • Checked in both light and dark modes (No visual changes)
  • Checked in both MacOS and Windows high contrast modes (No visual changes)
  • Checked in mobile (No visual changes)
  • Checked in Chrome, Safari, Edge, and Firefox (No visual changes)
  • Checked for accessibility including keyboard-only and screenreader modes (No accessibility impact)
• Docs site QA
  • Added documentation (Props are self-documenting via TypeScript)
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
  • Checked Code Sandbox works for any docs examples (No new examples added)
• Code quality checklist
  • Added or updated jest and cypress tests
  • Updated visual regression tests (No visual changes)
• Release checklist
  • A changelog entry exists and is marked appropriately
  • If applicable, added the breaking change issue label (Not a breaking change)
  • If the changes unblock an issue in a different repo, smoke tested carefully (Minor enhancement)
• Designer checklist
  • If applicable, file an issue to update EUI's Figma library (No UI changes)

[github-actions]

👋 Since this is a community submitted pull request, a Buildkite build has not been started automatically. Would an Elastic organization member please verify the contents of this pull request and kick off a build manually?

[weronikaolejniczak]

@ragini-pandey this filename needs to be: 9349.md, same as your PR number! 😄

[ragini-pandey]

Ohk Thanks. I thought it was an issue number.
Renamed!

[weronikaolejniczak]

The code looks as expected, let's see if the CI passes. If so, we're good to merge! Thank you for the contribution, @ragini-pandey 🙏🏻 💚

[weronikaolejniczak]

buildkite test this

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: bb869f9
• Documentation website
• Storybook

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: bb869f9