Skip to content

Commit

Permalink
Refactor/remove breadcrumb styling main (#4621) (#4627)
Browse files Browse the repository at this point in the history
* 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

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
  • Loading branch information
1 parent a85f798 commit 0e0493a
Show file tree
Hide file tree
Showing 8 changed files with 13 additions and 160 deletions.
7 changes: 0 additions & 7 deletions src/core/public/_variables.scss
Original file line number Diff line number Diff line change
@@ -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;
8 changes: 0 additions & 8 deletions src/core/public/chrome/public/assets/round_filter.svg

This file was deleted.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 1 addition & 2 deletions src/core/public/chrome/ui/header/header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -208,7 +208,6 @@ export function Header({
<HeaderBreadcrumbs
appTitle$={observables.appTitle$}
breadcrumbs$={observables.breadcrumbs$}
isDarkMode={darkMode}
/>

<EuiHeaderSectionItem border="none">
Expand Down
107 changes: 0 additions & 107 deletions src/core/public/chrome/ui/header/header_breadcrumbs.scss

This file was deleted.

6 changes: 1 addition & 5 deletions src/core/public/chrome/ui/header/header_breadcrumbs.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down
16 changes: 2 additions & 14 deletions src/core/public/chrome/ui/header/header_breadcrumbs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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" />;
}

0 comments on commit 0e0493a

Please sign in to comment.