From defecdfe2f8f275e9c4773b5e80649efb4d8456c Mon Sep 17 00:00:00 2001 From: Kartik Desai Date: Mon, 8 Aug 2022 18:13:53 -0500 Subject: [PATCH] [Bug] Fix Global Breadcrumb Styling in dark mode (#2085) Issue: https://github.com/opensearch-project/OpenSearch-Dashboards/issues/2072 Issue with dark mode theme not being applied to breadcrumbs. Signed-off-by: kaddy645 (cherry picked from commit 75db369d7a65502131a779b346496c6954fccf1d) --- src/core/public/_variables.scss | 4 + .../header/__snapshots__/header.test.tsx.snap | 2 + src/core/public/chrome/ui/header/header.tsx | 3 +- .../chrome/ui/header/header_breadcrumbs.scss | 88 +++++++++++++++---- .../ui/header/header_breadcrumbs.test.tsx | 6 +- .../chrome/ui/header/header_breadcrumbs.tsx | 6 +- 6 files changed, 87 insertions(+), 22 deletions(-) diff --git a/src/core/public/_variables.scss b/src/core/public/_variables.scss index b36b21eb667c..f77e2b4d2755 100644 --- a/src/core/public/_variables.scss +++ b/src/core/public/_variables.scss @@ -4,3 +4,7 @@ $osdHeaderOffset: $euiHeaderHeightCompensation; $osdHeaderBreadcrumbBlueBackground: #b9d9eb; $osdHeaderBreadcrumbGrayBackground: #d9e1e2; $osdHeaderBreadcrumbCollapsedLink: #002a3a; +$osdHeaderBreadcrumbPacificSkyDarkestBackground: #163f66; +$osdHeaderBreadcrumbMidnightSkyMediumBackground: #4c636f; +$osdHeaderBreadcrumbMidnightSkyMediumLightColor: #96a0a5; +$osdHeaderBreadcrumbMidnightSkyMediumLightHoverColor: #b0b8bb; diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap index b2af9f57e011..1a452ef60a69 100644 --- a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap +++ b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap @@ -3590,6 +3590,7 @@ exports[`Header handles visibility and lock changes 1`] = ` "thrownError": null, } } + isDarkMode={false} > void }>(); const navId = htmlIdGenerator()(); const className = classnames('hide-for-sharing', 'headerGlobalNav'); - const { useExpandedHeader = true } = branding; + const { useExpandedHeader = true, darkMode } = branding; return ( <> @@ -194,6 +194,7 @@ export function Header({ diff --git a/src/core/public/chrome/ui/header/header_breadcrumbs.scss b/src/core/public/chrome/ui/header/header_breadcrumbs.scss index 2d1fd2cf2107..5ac333e1615a 100644 --- a/src/core/public/chrome/ui/header/header_breadcrumbs.scss +++ b/src/core/public/chrome/ui/header/header_breadcrumbs.scss @@ -13,43 +13,95 @@ $breadcrumbPolygon: polygon( 0% 100% ); -.osdHeaderBreadcrumbs { - /* - filter defines a custom filter effect by grouping atomic filter primitives! - here we are using Gaussian filter with stdDeviation for applying - border-radius on clipped background. - */ - - filter: url("../../public/assets/round_filter.svg#round"); +/* remove background color on autofocus for euiBreadcrumbs in Popover */ +.euiBreadcrumbs__inPopover { + .euiLink.euiLink--text:focus { + background: none; + } +} - .osdBreadcrumbs { +.osdHeaderBreadcrumbs { + /* common for both light & dark theme */ + .osdBreadcrumbs, + &--dark .osdBreadcrumbs { clip-path: $breadcrumbPolygon; - background-color: $osdHeaderBreadcrumbGrayBackground; padding: $euiSizeXS - 2.5 $euiSizeL - $euiSizeXS; &:first-child { clip-path: $firstBreadcrumbPolygon; } + } + + .osdBreadcrumbs { + background-color: $osdHeaderBreadcrumbGrayBackground; &:last-child { background-color: $osdHeaderBreadcrumbBlueBackground; } } - .euiBreadcrumbSeparator { - display: none; - } - + /* only light mode */ .euiBreadcrumb__collapsedLink { color: $osdHeaderBreadcrumbCollapsedLink; background: $euiColorEmptyShade; } - .euiPopover__anchor { - padding: 0 $euiSizeS; + .euiLink.euiLink--subdued:focus { + background: $euiColorEmptyShade; + outline: $euiSizeXS - 1 solid $osdHeaderBreadcrumbBlueBackground; } - .euiBreadcrumb:not(.euiBreadcrumb:last-child) { - margin-right: 0; + /* common for dark & light mode */ + &, + &--dark { + /* + filter defines a custom filter effect by grouping atomic filter primitives! + here we are using Gaussian filter with stdDeviation for applying + border-radius on clipped background. + */ + filter: url("../../public/assets/round_filter.svg#round"); + + button { + line-height: inherit; + } + + .euiBreadcrumbSeparator { + display: none; + } + + .euiPopover__anchor { + padding: 0 $euiSizeS; + } + + .euiBreadcrumb:not(.euiBreadcrumb:last-child) { + margin-right: 0; + } + } + + /* only dark mode */ + &--dark { + .osdBreadcrumbs { + background-color: $osdHeaderBreadcrumbMidnightSkyMediumBackground; + color: $osdHeaderBreadcrumbMidnightSkyMediumLightColor; + + &:hover { + color: $osdHeaderBreadcrumbMidnightSkyMediumLightHoverColor; + } + + &:last-child { + background-color: $osdHeaderBreadcrumbPacificSkyDarkestBackground; + color: $euiColorFullShade; + } + } + + .euiBreadcrumb__collapsedLink { + color: $euiColorGhost; + background: $euiColorEmptyShade; + } + + .euiLink.euiLink--subdued:focus { + background: $euiColorEmptyShade; + outline: $euiSizeXS - 1 solid $osdHeaderBreadcrumbPacificSkyDarkestBackground; + } } } diff --git a/src/core/public/chrome/ui/header/header_breadcrumbs.test.tsx b/src/core/public/chrome/ui/header/header_breadcrumbs.test.tsx index 2008a3f6c493..d95e7881cf5a 100644 --- a/src/core/public/chrome/ui/header/header_breadcrumbs.test.tsx +++ b/src/core/public/chrome/ui/header/header_breadcrumbs.test.tsx @@ -38,7 +38,11 @@ describe('HeaderBreadcrumbs', () => { it('renders updates to the breadcrumbs$ observable', () => { const breadcrumbs$ = new BehaviorSubject([{ text: 'First' }]); const wrapper = mount( - + ); expect(wrapper.find('.euiBreadcrumb')).toMatchSnapshot(); diff --git a/src/core/public/chrome/ui/header/header_breadcrumbs.tsx b/src/core/public/chrome/ui/header/header_breadcrumbs.tsx index 634651dc1229..ba81b61e8bcd 100644 --- a/src/core/public/chrome/ui/header/header_breadcrumbs.tsx +++ b/src/core/public/chrome/ui/header/header_breadcrumbs.tsx @@ -40,11 +40,13 @@ import './header_breadcrumbs.scss'; interface Props { appTitle$: Observable; breadcrumbs$: Observable; + isDarkMode?: boolean; } -export function HeaderBreadcrumbs({ appTitle$, breadcrumbs$ }: Props) { +export function HeaderBreadcrumbs({ appTitle$, breadcrumbs$, isDarkMode }: Props) { const appTitle = useObservable(appTitle$, 'OpenSearch Dashboards'); const breadcrumbs = useObservable(breadcrumbs$, []); + const className = isDarkMode ? 'osdHeaderBreadcrumbs--dark' : 'osdHeaderBreadcrumbs'; let crumbs = breadcrumbs; if (breadcrumbs.length === 0 && appTitle) { @@ -67,7 +69,7 @@ export function HeaderBreadcrumbs({ appTitle$, breadcrumbs$ }: Props) { breadcrumbs={crumbs} max={10} data-test-subj="breadcrumbs" - className="osdHeaderBreadcrumbs" + className={className} /> ); }