Add BackstageTab to overridableComponents

Signed-off-by: sandra-greenhalgh <sandra.greenhalgh@justeattakeaway.com>

.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/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<BackstageTheme, StyledTabProps>(
   theme => ({
     root: {
@@ -65,5 +67,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;