Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor/remove breadcrumb styling #4341

Merged
merged 4 commits into from
Jul 13, 2023
Merged

Refactor/remove breadcrumb styling #4341

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4d6f4af
chore(chrome): Remove OSD breadcrumb styling and classes
joshuarrrr May 30, 2023
0268fe5
chore (chrome): Remove other remnants of breadcrumb styling
joshuarrrr May 30, 2023
770cff0
Update snapshot
joshuarrrr Jun 21, 2023
3b1be90
Merge branch 'feature/oui-re-theme' into refactor/remove-breadcrumb-s…
joshuarrrr Jun 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 0 additions & 7 deletions src/core/public/_variables.scss
View file
Open in desktop
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
View file
Open in desktop

This file was deleted.

20 changes: 6 additions & 14 deletions src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
View file
Open in desktop

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

6 changes: 3 additions & 3 deletions src/core/public/chrome/ui/header/__snapshots__/header_breadcrumbs.test.tsx.snap
View file
Open in desktop

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
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,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;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does it mean now breadcrumbs cannot be customized theme specific and is inherited as it is from oui?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, breadcrumbs in OpenSearch Dashboards were never intended to be customized/customizable, we just had to do things that way because OUI was not yet available. But OUI should be responsible for the styling and theming of the breadcrumb components.


return (
<>
Expand Down Expand Up @@ -202,7 +202,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
View file
Open in desktop

This file was deleted.

6 changes: 1 addition & 5 deletions src/core/public/chrome/ui/header/header_breadcrumbs.test.tsx
View file
Open in desktop
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
View file
Open in desktop
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" />;
}