Update OuiCollapsableNav > OuiCollapsableNavGroup background to use the same value as OuiPageBackgroundColor

[KrooshalUX]

No description provided.

[joshuarrrr]

@KrooshalUX The OuiCollapsibleNavGroup actually takes a background prop which sets theme-defined backgrounds and can be none (default), dark, or light:

Screen.Recording.2023-07-20.at.4.59.51.PM.mov

I'm wondering if we can deprecate this if that's not something you want exposed to designers and builders. If we keep it as is, we'd need to define the behavior of each prop setting per theme.

[KrooshalUX]

I don't see this same interface where you see "set background" - but I have seen the "none" "dark" "light" array listed in props. So, this issue is about changing "dark" and "light" to the same value as OuiPageBackgroundColor, if that is a more explicit ask. I am not sure what happens when the background is set to "none" and the collapsible nav is undocked. - but if "none" just ends up using OuiPageBackgroundColor, then we can satisfy this change with deprecating the prop.

[joshuarrrr]

Here are the background definitions:

oui/src/components/collapsible_nav/_variables.scss

Lines 13 to 23 in f718f63

	$ouiCollapsibleNavGroupLightBackgroundColor: $ouiPageBackgroundColor !default;
	$ouiCollapsibleNavGroupDarkBackgroundColor: lightOrDarkTheme(
	shade($ouiColorDarkestShade, 20%),
	shade($ouiColorLightestShade, 50%),
	) !default;
	$ouiCollapsibleNavGroupDarkHighContrastColor: makeGraphicContrastColor(
	$ouiColorPrimary,
	$ouiCollapsibleNavGroupDarkBackgroundColor
	) !default;

Here are the color values in next_dark:

  "ouiCollapsibleNavGroupLightBackgroundColor": "#172430",
  "ouiCollapsibleNavGroupDarkBackgroundColor": "#0d1720",
  "ouiCollapsibleNavGroupDarkHighContrastColor": "#159d8d",
  "euiCollapsibleNavGroupLightBackgroundColor": "#172430",
  "euiCollapsibleNavGroupDarkBackgroundColor": "#0d1720",
  "euiCollapsibleNavGroupDarkHighContrastColor": "#159d8d",

Here are the color values in next_light:

  "ouiCollapsibleNavGroupLightBackgroundColor": "#f0f2f4",
  "ouiCollapsibleNavGroupDarkBackgroundColor": "#24313e",
  "ouiCollapsibleNavGroupDarkHighContrastColor": "#159d8d",
  "euiCollapsibleNavGroupLightBackgroundColor": "#f0f2f4",
  "euiCollapsibleNavGroupDarkBackgroundColor": "#24313e",
  "euiCollapsibleNavGroupDarkHighContrastColor": "#159d8d",

[joshuarrrr]

The OpenSearch Dashboards sidebar menu is composed of multiple collapsible nav group components, a couple of which are not commonly (or ever) used:

1. Custom Nav Link (no known usage)
2. Recently viewed
3. Categorized sections
4. Uncategorized nav links (if a plugin does not correctly provide a category when adding a nav link - should not be used)
5. Docking controls

Note that groups 1. and 2. are currently visually distinguished from the rest with a different background shade. Additionally, they're not part of the same scroll container as everything else.

While I think it's relatively safe to ignore 1. and 4., because we have no evidence of their use in the wild, I included them in the example screenshots for considering the overall component design

Taking into account all of the above, my recommended solution is to

1. Update all <EuiCollapsibleNavGroup> components in OpenSearch Dashboard to use the set the background prop to light (which is already defined to use $ouiPageBackgroundColor for all themes).
2. Mark as deprecated the dark option for the background prop (because we have no examples of any usage of it)

This change would result in all sections using the OuiPageBackgroundColor (including in existing themes):

The advantage is that we don't need to introduce theme-specific logic to this component that currently has none, and we retain flexibility to use the alternative background options in other context (the only other usage of <EuiCollapsibleNavGroup> today is in the maps plugin): https://github.com/search?q=org%3Aopensearch-project+EuiCollapsibleNavGroup+NOT+repo%3Aopensearch-project%2Foui+NOT+repo%3Aopensearch-project%2FOpenSearch-Dashboards&type=code

The potential disadvantage is that it changes (subtly) the look of the nav menu existing themes, although we may consider that to be an improvement.

[KrooshalUX]

I don't know that I want the same visual effect to be applied to the current theme. In V7, the background color giving contrast to OuiCollapsibleNav is appropriate, whereas in Next, its less in-line with the overall look & feel change. The collapsible nav & header are meant to appear less "chrome-heavy" in the Next theme, thus matching the page background is ideal to balance the focus to the content. I don't know that the same approach works on v7.

Can you update the screenshots to include a next dark version with the nav docked? Its hard to tell the outcome of the background apporach with it floating and on the scrim.

[joshuarrrr]

Screenshots updated.

[joshuarrrr]

@KrooshalUX Some more context and findings I wanted to share. In general, the background color you're seeing for most of the sidenav (OuiCollapsibleNav > OuiCollapsibleNavGroup background) is not set by either of those components, because the OuiCollapsibleNavGroup component only sets a background if the background prop is set to dark or light. Otherwise, the background is just set by parent components.

Because OuiCollapsibleNav is just a special-purpose wrapper of OuiFlyout, the background styling is coming from OuiFlyout, which sets a background color of $ouiColorEmptyShade:

oui/src/components/flyout/_mixins.scss

Line 24 in 807c4cd

background: $ouiColorEmptyShade;

Not sure that changes the particular guidance here at all, but it's something to consider if you want all flyouts to have a more neutral PageBackground color, or for that to be separately theme-able.

For now, I'm thinking of refactoring so that we can treat OuiCollapsibleNav as a special case with its own background behavior.

[joshuarrrr]

See also #1016 - I ended up adding an additional themable override to the background of OuiCollapsibleNav for themes (like next) that would like to style it separately from OuiFlyout.