From 25b8e8d5b59ca1eeef1eaf49d9f555dcced20e4c Mon Sep 17 00:00:00 2001 From: sandra-greenhalgh Date: Fri, 1 Apr 2022 12:32:48 +0100 Subject: [PATCH 1/3] Add BackstageTab to overridableComponents Signed-off-by: sandra-greenhalgh --- .changeset/few-buttons-breathe.md | 5 +++++ packages/core-components/src/components/Tabs/Tab.tsx | 4 +++- packages/core-components/src/components/Tabs/index.ts | 1 + packages/core-components/src/overridableComponents.ts | 2 ++ 4 files changed, 11 insertions(+), 1 deletion(-) create mode 100644 .changeset/few-buttons-breathe.md diff --git a/.changeset/few-buttons-breathe.md b/.changeset/few-buttons-breathe.md new file mode 100644 index 0000000000..7c7996774a --- /dev/null +++ b/.changeset/few-buttons-breathe.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Add BackstageTab to overridableComponents so can override styles in a theme diff --git a/packages/core-components/src/components/Tabs/Tab.tsx b/packages/core-components/src/components/Tabs/Tab.tsx index 52c49ba1f8..cdf29cca93 100644 --- a/packages/core-components/src/components/Tabs/Tab.tsx +++ b/packages/core-components/src/components/Tabs/Tab.tsx @@ -37,6 +37,8 @@ const tabMarginLeft = (isFirstNav: boolean, isFirstIndex: boolean) => { return '40px'; }; +export type TabClassKey = 'root' | 'selected'; + const useStyles = makeStyles( theme => ({ root: { @@ -65,5 +67,5 @@ const useStyles = makeStyles( export const StyledTab = (props: StyledTabProps) => { const classes = useStyles(props); const { isFirstNav, isFirstIndex, ...rest } = props; - return ; + return ; }; diff --git a/packages/core-components/src/components/Tabs/index.ts b/packages/core-components/src/components/Tabs/index.ts index 015118635c..9702c39a48 100644 --- a/packages/core-components/src/components/Tabs/index.ts +++ b/packages/core-components/src/components/Tabs/index.ts @@ -16,6 +16,7 @@ export { Tabs } from './Tabs'; export type { TabsClassKey } from './Tabs'; +export type { TabClassKey } from './Tab'; export type { TabBarClassKey } from './TabBar'; export type { TabIconClassKey } from './TabIcon'; diff --git a/packages/core-components/src/overridableComponents.ts b/packages/core-components/src/overridableComponents.ts index c53c47da1b..49bc162951 100644 --- a/packages/core-components/src/overridableComponents.ts +++ b/packages/core-components/src/overridableComponents.ts @@ -63,6 +63,7 @@ import { TabBarClassKey, TabIconClassKey, TabsClassKey, + TabClassKey, WarningPanelClassKey, } from './components'; @@ -143,6 +144,7 @@ type BackstageComponentsNameToClassKey = { BackstageTabBar: TabBarClassKey; BackstageTabIcon: TabIconClassKey; BackstageTabs: TabsClassKey; + BackstageTab: TabClassKey; BackstageWarningPanel: WarningPanelClassKey; BackstageBottomLink: BottomLinkClassKey; BackstageBreadcrumbsClickableText: BreadcrumbsClickableTextClassKey; From 6db6f2654822fe939d3bf2576cc7d1bb18715423 Mon Sep 17 00:00:00 2001 From: sandra-greenhalgh Date: Fri, 1 Apr 2022 13:07:12 +0100 Subject: [PATCH 2/3] update core-components/api-reports.md Signed-off-by: sandra-greenhalgh --- packages/core-components/api-report.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index 2058fe2122..0023ba1567 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -1286,6 +1286,11 @@ export namespace TabbedLayout { Route: (props: SubRoute) => null; } +// Warning: (ae-missing-release-tag) "TabClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public (undocumented) +export type TabClassKey = 'root' | 'selected'; + // Warning: (ae-missing-release-tag) "TabIconClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) From 9e78aeb72fd0f6051d23f2fdde79638d0d1cac69 Mon Sep 17 00:00:00 2001 From: sandra-greenhalgh Date: Fri, 1 Apr 2022 14:26:01 +0100 Subject: [PATCH 3/3] mark TabClassKey as public Signed-off-by: sandra-greenhalgh --- packages/core-components/api-report.md | 2 -- packages/core-components/src/components/Tabs/Tab.tsx | 1 + 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index 0023ba1567..5367c68ee6 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -1286,8 +1286,6 @@ export namespace TabbedLayout { Route: (props: SubRoute) => null; } -// Warning: (ae-missing-release-tag) "TabClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// // @public (undocumented) export type TabClassKey = 'root' | 'selected'; diff --git a/packages/core-components/src/components/Tabs/Tab.tsx b/packages/core-components/src/components/Tabs/Tab.tsx index cdf29cca93..2922bd9651 100644 --- a/packages/core-components/src/components/Tabs/Tab.tsx +++ b/packages/core-components/src/components/Tabs/Tab.tsx @@ -37,6 +37,7 @@ const tabMarginLeft = (isFirstNav: boolean, isFirstIndex: boolean) => { return '40px'; }; +/** @public */ export type TabClassKey = 'root' | 'selected'; const useStyles = makeStyles(