Merge pull request #10572 from saan800/BackstageTab_to_overridableComponent_styles

Add BackstageTab to overridableComponents

.changeset/few-buttons-breathe.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Add BackstageTab to overridableComponents so can override styles in a theme

packages/core-components/api-report.md

@@ -1286,6 +1286,9 @@ export namespace TabbedLayout {
     Route: (props: SubRoute) => null;
 }
 
+// @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)

packages/core-components/src/components/Tabs/Tab.tsx

@@ -37,6 +37,9 @@ const tabMarginLeft = (isFirstNav: boolean, isFirstIndex: boolean) => {
   return '40px';
 };
 
+/** @public */
+export type TabClassKey = 'root' | 'selected';
+
 const useStyles = makeStyles<BackstageTheme, StyledTabProps>(
   theme => ({
     root: {
@@ -65,5 +68,5 @@ const useStyles = makeStyles<BackstageTheme, StyledTabProps>(
 export const StyledTab = (props: StyledTabProps) => {
   const classes = useStyles(props);
   const { isFirstNav, isFirstIndex, ...rest } = props;
-  return <Tab className={classes.root} disableRipple {...rest} />;
+  return <Tab classes={classes} disableRipple {...rest} />;
 };

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';

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;