diff --git a/.changeset/famous-forks-listen.md b/.changeset/famous-forks-listen.md new file mode 100644 index 0000000000..6c5aa683f1 --- /dev/null +++ b/.changeset/famous-forks-listen.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Removed inline styling in breadcrumbs and replaced with a theme targetable class of BreadcrumbsCurrentPage diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index 7641386176..a9372921b2 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -136,6 +136,9 @@ export function Breadcrumbs(props: Props_18): React_2.JSX.Element; // @public (undocumented) export type BreadcrumbsClickableTextClassKey = 'root'; +// @public (undocumented) +export type BreadcrumbsCurrentPageClassKey = 'root'; + // @public (undocumented) export type BreadcrumbsStyledBoxClassKey = 'root'; diff --git a/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.tsx b/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.tsx index 0d11068074..49880e203b 100644 --- a/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.tsx @@ -51,6 +51,18 @@ const StyledBox = withStyles( { name: 'BackstageBreadcrumbsStyledBox' }, )(Box); +/** @public */ +export type BreadcrumbsCurrentPageClassKey = 'root'; + +const BreadcrumbsCurrentPage = withStyles( + { + root: { + fontStyle: 'italic', + }, + }, + { name: 'BreadcrumbsCurrentPage' }, +)(Box); + /** * Breadcrumbs component to show navigation hierarchical structure * @@ -88,7 +100,7 @@ export function Breadcrumbs(props: Props) { {hasHiddenBreadcrumbs && ( ... )} - {currentPage} + {currentPage}