Issue with the page background colour and the app background colour

[tsullivan]

For non serverless the page background is white but for serverless it seems to be grey, causing issues with some apps

[elasticmachine]

Pinging @elastic/appex-sharedux (Team:SharedUX)

[sebelga]

It took me a while to understand what was happening but I think I finally got to the bottom of this! 😄

In Kibana "classic" the pages are wrapped with a side bar which allows the page to be "panelled".

Let's look at how the ML plugin renders its pages:

1. It provides a solutionNav prop to our KibanaPageTemplate (https://github.com/elastic/kibana/blob/main/x-pack/plugins/ml/public/application/components/ml_page/ml_page.tsx#L140C9-L150C10)
2. We read this prop and create a pageSideBar prop (https://github.com/elastic/kibana/blob/main/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx#L67C4-L73C7)
3. We parse it and add an EuiPageTemplate.Sidebar (https://github.com/elastic/kibana/blob/main/packages/shared-ux/page/kibana_template/impl/src/page_template_inner.tsx#L71C3-L77C4)
4. In EUI, only if there is an EuiSideBar (https://github.com/elastic/kibana/blob/main/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx#L67C4-L73C7 and https://github.com/elastic/eui/blob/main/src/components/page_template/page_template.tsx#L160C3-L161C62) we can set the page as "paneled".
5. In Kibana classic the page is panelled and has a white background because there is a side bar. In Serverless the page is not panelled (passing panelled prop does not have effect).

@elastic/eui-team It seems that the easiest way to fix this is to allow consumers to mark a page as "panelled" manually without requiring an EuiSideBar component to exist. WDYT?

// before
 const innerPanelled = () =>
    panelled === false ? false : Boolean(sidebar.length > 0);

// after
 const innerPanelled = () => panelled ?? Boolean(sidebar.length > 0);

With sidebar (panelled)

Without sidebar

[1Copenut]

Thank you @sebelga for the report. I'll start looking at this suggestion on a local install of EUI and see how it holds up, then review with the EUI team.

Is there a way I can run a test with serverless locally? It'd be helpful to test this in a sandbox if possible.

[cee-chen]

If the intention is to have the white collapsible nav against pure white page backgrounds, I agree that your after snippet is the way to go @sebelga!

However, I want to caution that based on @MichaelMarcialis's Figma mocks, the non-panelled usage seems to be intended/more common than totally panelled backgrounds - I only see one example of a page with a totally white background and I'm not 100% sure it was intentional.

Another designer option we could use instead of a white/panelled background here for example would be to wrap the entire table/section in an <EuiPanel> - I'm not sure if it's a good option, just wanted to throw it out there.

Michael, can you chime in here on the intention of the new designs and whether page backgrounds should generally either be tinted vs. pure white?

[sebelga]

I only see one example of a page with a totally white background and I'm not 100% sure it was intentional.

Probably I am missing something but on my side I see all pages with white background.

The thing is, we can't change now for serverless if pages render on white background or not. They must all render the same way as in "classic" Kibana - that's how their design was built on top of (see all the screenshots in the PR description).

We can't either start adding panels everywhere in Kibana, that's not realistic.

What you do point out that I hadn't immediately see is that the EuiSidebar does not have a white background and maybe that's what we should do in Serverless. Have the left side navigation with a light blue background to create a contrast with the main page? @MichaelMarcialis thoughts on that?

[sebelga]

Is there a way I can run a test with serverless locally?

@1Copenut You can start Kibana in serverless with yarn serverless oblt

[cee-chen]

The thing is, we can't change now for serverless if pages render on white background or not. They must all render the same way as in "classic" Kibana - that's how their design was built on top of (see all the screenshots in the PR description).
We can't either start adding panels everywhere in Kibana, that's not realistic.

Gotcha, that's totally valid. I'm just hoping to have a designer confirm that a white side nav next to a white page background is the new intended design before we commit any code. I'll re-ping @MichaelMarcialis and @ryankeairns here to get their confirmation

[cee-chen]

Michael has confirmed in Slack that a white nav next to a white background is the new intended design:

Yes, this is intended. The combination of the 1px light shade right border and small shadow on the navigation designs is sufficient contrast to my eyes to divide the navigation and main content on the page (regardless if the main content is on a white or light gray background).

Thanks for your patience with me on this. @sebelga, I'll open a PR here shortly with your proposed after code change, unless you'd like to do it / get the credit for the EUI contribution! 😄 (we'll credit you in the newsletter either way!)

[sebelga]

@cee-chen Thanks for adding the fix in EUI. Do you know when the next EUI version upgrade in Kibana is planed?

[cee-chen]

@sebelga The linked EUI fix will hopefully be merged into Kibana early or middle of next week. Just to check, is the fix needed by 8.10 FF or no?

[sebelga]

is the fix needed by 8.10 FF or no?

No it is not required for 8.10 FF so mid next week is OK 👍

[cee-chen]

Fantastic, thanks!