fix(docusaurus-theme): fill Codesandbox icon with currentColor

[weronikaolejniczak]

Summary

The Codesandbox icon in the footer of each example in EUI+ doesn't change the color depending on the theme (dark / light mode).

QA

1. Open the new docs.
2. Navigate to any component page (e.g. Accordion).
3. Notice the component preview. In the footer, there's a Codesandbox icon.
4. Switch themes using the toggle in the top right of the page.
5. Verify that the Codesandbox icon is visible. In light mode it should be black, in dark mode white.

Screen.Recording.2024-11-08.at.19.34.42.mov

[mgadewoll]

@weronikaolejniczak

Nothing is applicable... 👀

A general fyi for the "QA" section:
We have the general QA checklist but besides that you can add your own QA instructions.
E.g. something like this:

- open EUI+ docs (example link here)
- toggle the color mode switch in the page header
- [ ] verify that the codesandbox icon on code examples updates its color accordingly on color mode change

There is no expected pattern for this, just in general some instructions to follow for people to know what to look at and verify considering someone might see it and not fully know what it's about (this PR is simple but more as a common approach)

[weronikaolejniczak]

@mgadewoll that's a good point 👌🏻 I updated the description with proper QA instructions.

[mgadewoll]

This solution works but I think we might be able to make it even better 🙂
The icon is passed to EuiButtonIcon (here) which then passes icons to EuiIcon (here) and EuiIcon returns the icon component with added props here.

If we want the icon to behave like an EuiIcon - and not only update color - the only thing missing here is making sure that we spread the props to this custom svg. This will then also ensure other props e.g. className or a11y props like role, aria-hidden or aria-label are passed along.

// since it's not actually an EuiIcon component but the return of that component that's not 
// specifically defined and it could be used in other places, I'd think `any` type is fine here
const CodeSandboxIcon = (props: any) => (
  <svg {...props}
   ...
   />

[mgadewoll]

Actually let's use HTMLAttributes<SVGElement> as type for props to have some limitations at least.

[weronikaolejniczak]

@mgadewoll thanks for the suggestion! 🙌🏻 I implemented the changes and re-tested, and added one more commit with a typo fix. Could you review again?

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_8127/
• Storybook: https://eui.elastic.co/pr_8127/storybook
• New docs: https://eui.elastic.co/pr_8127/new-docs

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 18a416a

History

• 💚 Build #3032 succeeded c40dfd1