[Lens] Annotation Preview Chart Type & Theme Enhancements

[MichaelMarcialis]

In order to maintain consistency and offer the same amenities being planned for the upcoming color mapping preview feature, the annotation preview interface (outside of Lens, in the visualization library experience) should add:

1. Visualization type selection
2. Theme mode selection

Updated wireframes have been created to account for both of these enhancements via additions to the toolbar in the preview panel.

Related to: #158774

[elasticmachine]

Pinging @elastic/kibana-visualizations @elastic/kibana-visualizations-external (Team:Visualizations)

[nickofthyme]

I was curious how the nested theme switcher would work from this design. AFAIK this is not currently implemented anywhere in kibana.

I did a small investigation to determine the practicality of this using EUI sandbox.

It appears this is possible by nesting an EuiThemeProvider in an EuiProvider. I have not tested the full extent of this so there could be cases or components that use the wrong theme tokens. Additionally, this is possible main because of our use of emotion (aka css-in-js) with the use of the useEuiTheme hook, thus if we are reusing components in this nested themed component, these components must exclusively use emotion any sass usage would likely refer to the wrong tokens.

So something like this...

const root = createRoot(document.getElementById("root"));
root.render(
  <EuiProvider cache={cache} colorMode="dark">
    <div
      style={{
        padding: 20
      }}
    >
      <ThemedComponent colorMode="Dark" />
      <div>
        <EuiThemeProvider colorMode="light">
          <ThemedComponent colorMode="Light" />
        </EuiThemeProvider>
      </div>
    </div>
  </EuiProvider>
);

function ThemedComponent({ colorMode, size }) {
  const { euiTheme } = useEuiTheme();

  return (
    <div
      style={{
        background: euiTheme.colors.lightestShade,
        height: "100px",
        width: "200px"
      }}
    >
      <h1>{colorMode} theme here</h1>
      <Demo />
    </div>
  );
}

Would result in something like this...

👍🏼

Based on work from #161914 I think we would use the KibanaThemeContextProvider in place of the EuiThemeProvider when implemented in kibana.

See full demo here

[markov00]

In order to provide better transparency of priorities, issues that will not be prioritized within the next 24 months are being closed.

Tracking request in Lens general improvements ice box #184459