[BUG][Metrics] OuiFacetButton does not render properly

[pjfitzgibbons]

What is the bug? Attempting to use OuiFacetButton to display metric name in sidepanel. Have removed all imports of css from ts/react parent component chain :

• components/metrics/sidebar/metrics_accordion.tsx
• components/metrics/sidebar.tsx (sidebar.css)
• components/metrcis/index.tsx (Home) (index.css)
• components/app.tsx
• components/index.tsx (Observability)
• plugin.ts (index.css)

Should look something like this

Using

<OuiFacetButton
      icon={<OuiAvatar type="space" size="s" name="Prometheus" />}
    >
      22 [Prometheus Metric] aws_prometheus2.prometheus_tsdb_compactions_total
    </OuiFacetButton>
    <br />
    <OuiFacetButton ...

How can one reproduce the bug? Steps to reproduce the behavior:

1. Go to metrics_accordion.tsx:34
2. replace line with : <OuiFacetButton icon={<OuiAvatar type="space" size="s" name="Prometheus" />} >{metric.name}</OuiFacetButton>
3. Add to imports from @elastic/eui - OuiFacetButton, OuiToken
4. See error

What is the expected behavior? Oui render as demonstrated in oui.opensearch.org demo pages

What is your host/environment?

• OS: Macos
• Version Ventura 13.4
• Chrome Browser 114

Do you have any screenshots? If applicable, add screenshots to help explain your problem.

Do you have any additional context? Add any other context about the problem.

[anirudha]

is this a OUI bug or observability bug?