Refactor/remove breadcrumb styling main (#4621)

* chore(chrome): Remove OSD breadcrumb styling and classes Now that the breacrumb styling is coming from OUI Signed-off-by: Josh Romero <[email protected]> * chore (chrome): Remove other remnants of breadcrumb styling Essentially reverting: - #1954 - #2085 Signed-off-by: Josh Romero <[email protected]> * Update snapshot Signed-off-by: Josh Romero <[email protected]> * add changelog Signed-off-by: Josh Romero <[email protected]> * Update header snapshot Signed-off-by: Josh Romero <[email protected]> --------- Signed-off-by: Josh Romero <[email protected]> (cherry picked from commit 983fc34) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> # Conflicts: # CHANGELOG.md
opensearch-project · Jul 26, 2023 · 04d09be · 04d09be
1 parent d3163cf
commit 04d09be
Show file tree

Hide file tree

Showing 8 changed files with 13 additions and 160 deletions.
diff --git a/src/core/public/_variables.scss b/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;
diff --git a/src/core/public/chrome/public/assets/round_filter.svg b/src/core/public/chrome/public/assets/round_filter.svg
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
diff --git a/src/core/public/chrome/ui/header/__snapshots__/header_breadcrumbs.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header_breadcrumbs.test.tsx.snap
diff --git a/src/core/public/chrome/ui/header/header.tsx b/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">

diff --git a/src/core/public/chrome/ui/header/header_breadcrumbs.scss b/src/core/public/chrome/ui/header/header_breadcrumbs.scss
diff --git a/src/core/public/chrome/ui/header/header_breadcrumbs.test.tsx b/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();
 

diff --git a/src/core/public/chrome/ui/header/header_breadcrumbs.tsx b/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" />;
 }