Refactor/remove breadcrumb styling main (#4621) (#4627)

* chore(chrome): Remove OSD breadcrumb styling and classes

Now that the breacrumb styling is coming from OUI

Signed-off-by: Josh Romero <rmerqg@amazon.com>

* chore (chrome): Remove other remnants of breadcrumb styling

Essentially reverting:
- #1954
- #2085

Signed-off-by: Josh Romero <rmerqg@amazon.com>

* Update snapshot

Signed-off-by: Josh Romero <rmerqg@amazon.com>

* add changelog

Signed-off-by: Josh Romero <rmerqg@amazon.com>

* Update header snapshot

Signed-off-by: Josh Romero <rmerqg@amazon.com>

---------

Signed-off-by: Josh Romero <rmerqg@amazon.com>
(cherry picked from commit 983fc34)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

# Conflicts:
#	CHANGELOG.md

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/core/public/_variables.scss

@@ -1,10 +1,3 @@
 @import "@elastic/eui/src/global_styling/variables/header";
 
 $osdHeaderOffset: $euiHeaderHeightCompensation;
-$osdHeaderBreadcrumbBlueBackground: #b9d9eb;
-$osdHeaderBreadcrumbGrayBackground: #d9e1e2;
-$osdHeaderBreadcrumbCollapsedLink: #002a3a;
-$osdHeaderBreadcrumbPacificSkyDarkestBackground: #163f66;
-$osdHeaderBreadcrumbMidnightSkyMediumBackground: #4c636f;
-$osdHeaderBreadcrumbMidnightSkyMediumLightColor: #96a0a5;
-$osdHeaderBreadcrumbMidnightSkyMediumLightHoverColor: #b0b8bb;

src/core/public/chrome/ui/header/header.tsx

@@ -115,7 +115,7 @@ export function Header({
   const toggleCollapsibleNavRef = createRef<HTMLButtonElement & { euiAnimate: () => void }>();
   const navId = htmlIdGenerator()();
   const className = classnames('hide-for-sharing', 'headerGlobalNav');
-  const { useExpandedHeader = true, darkMode } = branding;
+  const { useExpandedHeader = true } = branding;
 
   const headerTheme: EuiHeaderProps['theme'] = 'dark';
 
@@ -208,7 +208,6 @@ export function Header({
             <HeaderBreadcrumbs
               appTitle$={observables.appTitle$}
               breadcrumbs$={observables.breadcrumbs$}
-              isDarkMode={darkMode}
             />
 
             <EuiHeaderSectionItem border="none">

src/core/public/chrome/ui/header/header_breadcrumbs.test.tsx

@@ -38,11 +38,7 @@ describe('HeaderBreadcrumbs', () => {
   it('renders updates to the breadcrumbs$ observable', () => {
     const breadcrumbs$ = new BehaviorSubject([{ text: 'First' }]);
     const wrapper = mount(
-      <HeaderBreadcrumbs
-        appTitle$={new BehaviorSubject('')}
-        breadcrumbs$={breadcrumbs$}
-        isDarkMode={false}
-      />
+      <HeaderBreadcrumbs appTitle$={new BehaviorSubject('')} breadcrumbs$={breadcrumbs$} />
     );
     expect(wrapper.find('.euiBreadcrumb')).toMatchSnapshot();
 

src/core/public/chrome/ui/header/header_breadcrumbs.tsx

@@ -35,18 +35,14 @@ import useObservable from 'react-use/lib/useObservable';
 import { Observable } from 'rxjs';
 import { ChromeBreadcrumb } from '../../chrome_service';
 
-import './header_breadcrumbs.scss';
-
 interface Props {
   appTitle$: Observable<string>;
   breadcrumbs$: Observable<ChromeBreadcrumb[]>;
-  isDarkMode?: boolean;
 }
 
-export function HeaderBreadcrumbs({ appTitle$, breadcrumbs$, isDarkMode }: Props) {
+export function HeaderBreadcrumbs({ appTitle$, breadcrumbs$ }: 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) {
@@ -61,15 +57,7 @@ export function HeaderBreadcrumbs({ appTitle$, breadcrumbs$, isDarkMode }: Props
       i === 0 && 'first',
       i === breadcrumbs.length - 1 && 'last'
     ),
-    className: classNames('osdBreadcrumbs'),
   }));
 
-  return (
-    <EuiHeaderBreadcrumbs
-      breadcrumbs={crumbs}
-      max={10}
-      data-test-subj="breadcrumbs"
-      className={className}
-    />
-  );
+  return <EuiHeaderBreadcrumbs breadcrumbs={crumbs} max={10} data-test-subj="breadcrumbs" />;
 }