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 <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>
opensearch-project · Jul 26, 2023 · 983fc34 · 983fc34
1 parent e2abd27
commit 983fc34
Show file tree

Hide file tree

Showing 9 changed files with 16 additions and 160 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -131,6 +131,9 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Vis Colors] [Timeline] Replace `vis_type_timeline` colors with `ouiPaletteColorBlind()` ([#4366](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4366))
 - [Vis Colors] Update legacy seed colors to use `ouiPaletteColorBlind()` ([#4348](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4348))
 - [Console] Migrate `/lib/mappings/` module to TypeScript ([#4008](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4008))
+- [Console] Migrate `/lib/autocomplete/` module to TypeScript ([#4148](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4148))
+- [Dashboard] Restructure the `Dashboard` plugin folder to be more cohesive with the project ([#4575](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4575))
+- [Chrome] Remove breadcrumb style overrrides ([#4621](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4621))
 
 ### 🔩 Tests
 

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" />;
 }