[Website] Fix all broken CodeSandbox examples

[weronikaolejniczak]

Tip

I recommend reviewing this PR by commits.

Summary

Resolves #9320

Many CodeSandbox examples were broken. This PR fixes all of them.

• Updated @faker-js/faker to ^10.3.0 to align the docs preview with CodeSandbox, which resolves latest, and updated faker.internet.userName() calls to faker.internet.username() (renamed in v9).
• Fixed broken CodeSandbox examples by adding missing import React and component imports, converting raw JSX fragments to full export default components.
• Fixed broken CodeSandbox examples caused by Docusaurus-specific APIs (useBaseUrl, useChartBaseTheme) not being available in CodeSandbox - replaced with self-contained alternatives.
• Fixed broken image references in CodeSandbox by embedding images as base64 data URLs via url-loader, passing them through scope (react-live) and extraFiles (CodeSandbox).
• Added charts CSS loading to the Docusaurus theme so chart-based demos render correctly in the docs preview.
• Fixed several demos in icons, forms, layout, navigation, templates, utilities, and display pages that had syntax errors or missing imports.

Impact Assessment

Impact level: 🟢 None

QA instructions for reviewer

Test all broken examples. If you feel up for it, you could test all examples.

Update @faker-js/faker to latest

• Table row classes
• Table layout
• Responsive tables

Replace Link with EuiLink

• Error handling and feedback

Add charts CSS imports

• Putting it all together: a simple chart plugin
• Accessibility features
• Part-to-whole comparisons
• Metric chart
• Sizing

Simple cases (missing import, syntax error)

• Flex items are also flex (2nd example)
• Gutter sizing
• Page components (all 3 examples)
• Button text color variant
• Button group tooltips
• Facet horizontal and large gutter
• Empty prompt: using in a page template (2 examples)
• Empty prompt: layout
• Icons (all examples)
• EuiFormControlButton
• Text (2 examples)
• Password
• Numeric (1st example)
• Range sliders: inputs with range in a dropdown
• Range sliders: kitchen sink
• Basic select
• Super select: states
• Combo box (1st example)
• Combo box: pill colors
• Combo box: single selection
• Combo box: custom dropdown content
• Checkbox group
• Radio group
• Switch (1st example)
• Search (1st example)
• Date picker: states
• Date picker: inline display
• Date picker range (1st example)
• Date picker range: inline display
• Super date picker: sizing
• File picker (1st example)
• Color picker: option toggling
• Color palette picker
• Palette picker (1st example)
• Sitewide search: color modes
• Accessibility: screen reader only
• Accessibility: showing on focus
• Accessibility: auto-focusing the live region on text change
• Accessibility: main difference
• Color palettes
• Focus trap
• Text truncation: performance
• Window events: closing a modal on escape
• Window events: avoiding event conflicts

Complex cases

• Empty prompt: more types of empty states
• Empty prompt: empty state types, goals and recommendations

Checklist before marking Ready for Review

• Filled out all sections above
• QA: Tested light/dark modes, high contrast, mobile, Chrome/Safari/Edge/Firefox, keyboard-only, screen reader
• QA: Tested in CodeSandbox and Kibana
• QA: Tested docs changes
• Tests: Added/updated Jest, Cypress, and VRT
• Changelog: Added changelog entry
• Breaking changes: Added breaking change label (if applicable)

[Copilot]

Pull request overview

This pull request updates the EUI docs site demos to better support live editing + CodeSandbox exports by attaching required “extra files” (raw source/assets) to demos, and refreshes a few demo dependencies (notably @faker-js/faker).

Changes:

• Bump @faker-js/faker (website) and update affected docs snippets.
• Add extraFiles (raw-loaded sources/assets) to many MDX demos so CodeSandbox can include referenced local files.
• Improve CodeSandbox demo generation by auto-injecting @elastic/charts theme CSS when charts are used.

Reviewed changes

Copilot reviewed 49 out of 50 changed files in this pull request and generated 19 comments.

Show a summary per file

File	Description
yarn.lock	Updates lockfile for @faker-js/faker version bump.
packages/website/src/theme/Demo/actions.tsx	Adds moment-timezone to CodeSandbox dependency set.
packages/website/package.json	Bumps @faker-js/faker to ^10.3.0.
packages/website/docs/utilities/window-events/index.mdx	Adds raw source as extraFiles for CodeSandbox.
packages/website/docs/utilities/text-truncation.mdx	Adds missing imports in snippet.
packages/website/docs/utilities/focus-trap/index.mdx	Adds raw source as extraFiles for CodeSandbox.
packages/website/docs/utilities/color-palettes/index.mdx	Adds raw source as extraFiles; updates snippet imports.
packages/website/docs/utilities/accessibility/index.mdx	Makes snippets self-contained (imports/exports).
packages/website/docs/dataviz/types/part-to-whole-comparisons.mdx	Adds raw source extraFiles and adjusts imports in snippets.
packages/website/docs/dataviz/types/metric-chart.mdx	Adds raw source extraFiles and adjusts imports in snippets.
packages/website/docs/dataviz/theming.mdx	Adds raw source extraFiles and adjusts imports in snippets.
packages/website/docs/dataviz/sizing.mdx	Adds raw source extraFiles and adjusts imports in snippets.
packages/website/docs/dataviz/accessibility-features.mdx	Adds raw source extraFiles and adjusts imports in snippets.
packages/website/docs/components/templates/sitewide-search/index.mdx	Makes snippet self-contained with imports.
packages/website/docs/components/templates/page-template/guidelines.mdx	Adds SVG raw sources as extraFiles and imports inside snippet.
packages/website/docs/components/tables/basic.mdx	Updates faker API usage and other snippet tweaks.
packages/website/docs/components/navigation/facet.mdx	Switches to useEuiPaletteColorBlind hook usage in snippet.
packages/website/docs/components/navigation/buttons/group.mdx	Fixes snippet imports to match usage.
packages/website/docs/components/navigation/buttons/button.mdx	Fixes import formatting in snippet.
packages/website/docs/components/layout/page_components/index.mdx	Adds SVG raw sources as extraFiles and imports inside snippets.
packages/website/docs/components/layout/flex/item.mdx	Fixes snippet imports to match usage.
packages/website/docs/components/layout/flex/grid.mdx	Corrects demo snippet to use EuiFlexGrid.
packages/website/docs/components/forms/text/password.mdx	Wraps demos with extraFiles for shared display_toggles file.
packages/website/docs/components/forms/text/basic.mdx	Wraps demos with extraFiles for shared display_toggles file.
packages/website/docs/components/forms/selection/switch.mdx	Wraps demo with extraFiles for shared display_toggles file.
packages/website/docs/components/forms/selection/super-select.mdx	Wraps demo with extraFiles for shared display_toggles file.
packages/website/docs/components/forms/selection/radio-and-radio-group.mdx	Wraps demo with extraFiles for shared display_toggles file.
packages/website/docs/components/forms/selection/combo-box.mdx	Wraps multiple demos with extraFiles for shared display_toggles file.
packages/website/docs/components/forms/selection/checkbox-and-checkbox-group.mdx	Wraps demo with extraFiles for shared display_toggles file.
packages/website/docs/components/forms/selection/basic-select.mdx	Wraps demo with extraFiles for shared display_toggles file.
packages/website/docs/components/forms/search-and-filter/search.mdx	Wraps demo with extraFiles for shared display_toggles file.
packages/website/docs/components/forms/other/palette-picker.mdx	Wraps demo with extraFiles for shared display_toggles file.
packages/website/docs/components/forms/other/file-picker.mdx	Wraps demo with extraFiles for shared display_toggles file.
packages/website/docs/components/forms/other/color-picker.mdx	Wraps demos with extraFiles for shared display_toggles file; snippet import tweaks.
packages/website/docs/components/forms/numeric/range-sliders.mdx	Wraps demos with extraFiles for shared display_toggles file.
packages/website/docs/components/forms/numeric/basic.mdx	Wraps demo with extraFiles for shared display_toggles file.
packages/website/docs/components/forms/layouts/form_control_buttons.mdx	Refactors interactive snippet; adds popover + filtering example.
packages/website/docs/components/forms/date-and-time/super-date-picker.mdx	Adjusts imports/snippet structure.
packages/website/docs/components/forms/date-and-time/date-picker.mdx	Wraps demos with extraFiles for shared display_toggles file.
packages/website/docs/components/forms/date-and-time/date-picker-range.mdx	Wraps demos with extraFiles for shared display_toggles file.
packages/website/docs/components/editors-and-syntax/markdown/plugins.mdx	Normalizes snippet string quoting/formatting.
packages/website/docs/components/editors-and-syntax/markdown/editor.mdx	Removes Docusaurus Link usage in demo snippet; uses EuiLink.
packages/website/docs/components/display/icons/index.mdx	Adds raw source extraFiles and makes multiple snippets self-contained.
packages/website/docs/components/display/empty-prompt/types_of_empty_states/use_case_images.ts	Adds url-loader mapping for use-case images.
packages/website/docs/components/display/empty-prompt/types_of_empty_states/sidebar_snippet.tsx	Reworks demo to use url-loader assets + code string output.
packages/website/docs/components/display/empty-prompt/types_of_empty_states/multiple_snippet.tsx	Reworks demo to use url-loader assets + code string output.
packages/website/docs/components/display/empty-prompt/types_of_empty_states/empty_snippet.tsx	Reworks demo to use image URL mapping + code string output.
packages/website/docs/components/display/empty-prompt/index.mdx	Switches illustration demo to use url/raw loaders and extraFiles.
packages/website/docs/components/display/empty-prompt/_multiple_types.tsx	Converts examples to explicit code strings + adds extraFiles/scope for images.
packages/docusaurus-theme/src/components/demo/codesandbox/open_action.tsx	Injects @elastic/charts theme CSS imports into CodeSandbox demos.

Comments suppressed due to low confidence (3)

packages/website/docs/components/forms/other/palette-picker.mdx:21

• This demo's code imports DisplayToggles from a relative path, but the demo transformer strips all import statements for react-live. Without also passing DisplayToggles via the <Demo scope={...}>, the interactive preview will throw (undefined component). Consider importing DisplayToggles in the MDX file and adding scope={{ DisplayToggles }} to the <Demo> props (keep extraFiles for CodeSandbox).

<Demo extraFiles={{ 'display_toggles.tsx': displayTogglesSource }}>
```tsx interactive
import React, { useState } from 'react';
import {
  euiPaletteColorBlind,
  euiPaletteForStatus,

packages/website/docs/components/forms/other/file-picker.mdx:17

• This demo's code imports DisplayToggles from a relative path, but the demo transformer strips all import statements for react-live. Without also passing DisplayToggles via the <Demo scope={...}>, the interactive preview will throw (undefined component). Consider importing DisplayToggles in the MDX file and adding scope={{ DisplayToggles }} to the <Demo> props (keep extraFiles for CodeSandbox).

<Demo extraFiles={{ 'display_toggles.tsx': displayTogglesSource }}>
```tsx interactive
import React, { useState } from 'react';
import {
  EuiFilePicker,
  EuiFlexGroup,

packages/website/docs/components/forms/numeric/range-sliders.mdx:564

• This demo's code imports DisplayToggles from a relative path, but the demo transformer strips all import statements for react-live. Without also passing DisplayToggles via the <Demo scope={...}>, the interactive preview will throw (undefined component). Consider importing DisplayToggles in the MDX file and adding scope={{ DisplayToggles }} to the <Demo> props (keep extraFiles for CodeSandbox).

<Demo extraFiles={{ 'display_toggles.tsx': displayTogglesSource }}>
```tsx interactive
import React, { useState } from 'react';
import {
  EuiRange,
  EuiRangeProps,

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[elasticmachine]

💚 Build Succeeded

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

History

• 💚 Build #3030 succeeded 90d52bb

cc @weronikaolejniczak

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: ec873ce

History

• 💚 Build #6092 succeeded 90d52bb

cc @weronikaolejniczak