From 3e3869a3c363d290f5696600f17e45b8f37f1b80 Mon Sep 17 00:00:00 2001 From: Daniel Ortiz Lira Date: Tue, 21 Sep 2021 11:45:56 -0500 Subject: [PATCH] Expose layout components to material-ui overrides system by providing a name Signed-off-by: Daniel Ortiz Lira --- .../src/layout/BottomLink/BottomLink.tsx | 31 +-- .../src/layout/BottomLink/index.ts | 2 +- .../src/layout/Breadcrumbs/Breadcrumbs.tsx | 32 ++-- .../src/layout/Breadcrumbs/index.ts | 4 + .../src/layout/Content/Content.tsx | 47 +++-- .../src/layout/Content/index.ts | 1 + .../layout/ContentHeader/ContentHeader.tsx | 74 ++++---- .../src/layout/ContentHeader/index.ts | 1 + .../src/layout/ErrorPage/ErrorPage.tsx | 37 ++-- .../src/layout/ErrorPage/MicDrop.tsx | 33 ++-- .../src/layout/ErrorPage/index.ts | 2 + .../src/layout/Header/Header.tsx | 160 +++++++++------- .../src/layout/Header/index.ts | 1 + .../src/layout/HeaderLabel/HeaderLabel.tsx | 41 ++-- .../src/layout/HeaderLabel/index.ts | 1 + .../src/layout/HeaderTabs/HeaderTabs.tsx | 51 +++-- .../src/layout/HeaderTabs/index.tsx | 2 +- .../src/layout/InfoCard/InfoCard.tsx | 71 ++++--- .../src/layout/InfoCard/index.ts | 6 +- .../src/layout/ItemCard/ItemCardGrid.tsx | 4 +- .../src/layout/ItemCard/ItemCardHeader.tsx | 4 +- .../src/layout/ItemCard/index.ts | 7 +- .../core-components/src/layout/Page/Page.tsx | 27 +-- .../core-components/src/layout/Page/index.ts | 1 + .../src/layout/Sidebar/Bar.tsx | 83 ++++---- .../src/layout/Sidebar/Intro.tsx | 92 +++++---- .../src/layout/Sidebar/Items.tsx | 179 ++++++++++-------- .../src/layout/Sidebar/Page.tsx | 25 ++- .../src/layout/Sidebar/index.ts | 5 +- .../src/layout/SignInPage/customProvider.tsx | 25 ++- .../src/layout/SignInPage/index.ts | 2 + .../src/layout/SignInPage/styles.tsx | 31 +-- .../src/layout/TabbedCard/TabbedCard.tsx | 77 +++++--- .../src/layout/TabbedCard/index.ts | 5 + 34 files changed, 675 insertions(+), 489 deletions(-) diff --git a/packages/core-components/src/layout/BottomLink/BottomLink.tsx b/packages/core-components/src/layout/BottomLink/BottomLink.tsx index 6d6811cc09..cb168600e5 100644 --- a/packages/core-components/src/layout/BottomLink/BottomLink.tsx +++ b/packages/core-components/src/layout/BottomLink/BottomLink.tsx @@ -21,19 +21,24 @@ import { BackstageTheme } from '@backstage/theme'; import Box from '@material-ui/core/Box'; import { Link } from '../../components/Link'; -const useStyles = makeStyles(theme => ({ - root: { - maxWidth: 'fit-content', - padding: theme.spacing(2, 2, 2, 2.5), - }, - boxTitle: { - margin: 0, - color: theme.palette.textSubtle, - }, - arrow: { - color: theme.palette.textSubtle, - }, -})); +export type BottomLinkClassKey = 'root' | 'boxTitle' | 'arrow'; + +const useStyles = makeStyles( + theme => ({ + root: { + maxWidth: 'fit-content', + padding: theme.spacing(2, 2, 2, 2.5), + }, + boxTitle: { + margin: 0, + color: theme.palette.textSubtle, + }, + arrow: { + color: theme.palette.textSubtle, + }, + }), + { name: 'BackstageBottomLink' }, +); export type BottomLinkProps = { link: string; diff --git a/packages/core-components/src/layout/BottomLink/index.ts b/packages/core-components/src/layout/BottomLink/index.ts index 853c74c880..e0252a5bb4 100644 --- a/packages/core-components/src/layout/BottomLink/index.ts +++ b/packages/core-components/src/layout/BottomLink/index.ts @@ -15,4 +15,4 @@ */ export { BottomLink } from './BottomLink'; -export type { BottomLinkProps } from './BottomLink'; +export type { BottomLinkClassKey, BottomLinkProps } from './BottomLink'; diff --git a/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.tsx b/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.tsx index 28c86d32f0..26304f9e2b 100644 --- a/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.tsx @@ -27,19 +27,29 @@ import React, { ComponentProps, Fragment } from 'react'; type Props = ComponentProps; -const ClickableText = withStyles({ - root: { - textDecoration: 'underline', - cursor: 'pointer', - }, -})(Typography); +export type BreadcrumbsClickableTextClassKey = 'root'; -const StyledBox = withStyles({ - root: { - textDecoration: 'underline', - color: 'inherit', +const ClickableText = withStyles( + { + root: { + textDecoration: 'underline', + cursor: 'pointer', + }, }, -})(Box); + { name: 'BackstageBreadcrumbsClickableText' }, +)(Typography); + +export type BreadcrumbsStyledBoxClassKey = 'root'; + +const StyledBox = withStyles( + { + root: { + textDecoration: 'underline', + color: 'inherit', + }, + }, + { name: 'BackstageBreadcrumbsStyledBox' }, +)(Box); export function Breadcrumbs(props: Props) { const { children, ...restProps } = props; diff --git a/packages/core-components/src/layout/Breadcrumbs/index.ts b/packages/core-components/src/layout/Breadcrumbs/index.ts index 31bae893a4..3cbce4164a 100644 --- a/packages/core-components/src/layout/Breadcrumbs/index.ts +++ b/packages/core-components/src/layout/Breadcrumbs/index.ts @@ -15,3 +15,7 @@ */ export { Breadcrumbs } from './Breadcrumbs'; +export type { + BreadcrumbsClickableTextClassKey, + BreadcrumbsStyledBoxClassKey, +} from './Breadcrumbs'; diff --git a/packages/core-components/src/layout/Content/Content.tsx b/packages/core-components/src/layout/Content/Content.tsx index a3771dff3f..588c9fd630 100644 --- a/packages/core-components/src/layout/Content/Content.tsx +++ b/packages/core-components/src/layout/Content/Content.tsx @@ -18,28 +18,33 @@ import React, { PropsWithChildren } from 'react'; import classNames from 'classnames'; import { Theme, makeStyles } from '@material-ui/core'; -const useStyles = makeStyles((theme: Theme) => ({ - root: { - gridArea: 'pageContent', - minWidth: 0, - paddingTop: theme.spacing(3), - paddingBottom: theme.spacing(3), - paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(2), - [theme.breakpoints.up('sm')]: { - paddingLeft: theme.spacing(3), - paddingRight: theme.spacing(3), +export type BackstageContentClassKey = 'root' | 'stretch' | 'noPadding'; + +const useStyles = makeStyles( + (theme: Theme) => ({ + root: { + gridArea: 'pageContent', + minWidth: 0, + paddingTop: theme.spacing(3), + paddingBottom: theme.spacing(3), + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(2), + [theme.breakpoints.up('sm')]: { + paddingLeft: theme.spacing(3), + paddingRight: theme.spacing(3), + }, }, - }, - stretch: { - display: 'flex', - flexDirection: 'column', - flexGrow: 1, - }, - noPadding: { - padding: 0, - }, -})); + stretch: { + display: 'flex', + flexDirection: 'column', + flexGrow: 1, + }, + noPadding: { + padding: 0, + }, + }), + { name: 'BackstageContent' }, +); type Props = { stretch?: boolean; diff --git a/packages/core-components/src/layout/Content/index.ts b/packages/core-components/src/layout/Content/index.ts index a94ceabdfa..df7bd00b52 100644 --- a/packages/core-components/src/layout/Content/index.ts +++ b/packages/core-components/src/layout/Content/index.ts @@ -15,3 +15,4 @@ */ export { Content } from './Content'; +export type { BackstageContentClassKey } from './Content'; diff --git a/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx b/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx index 76fec703a9..c3faec64a2 100644 --- a/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx +++ b/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx @@ -22,39 +22,49 @@ import React, { PropsWithChildren, ReactNode } from 'react'; import { Typography, makeStyles } from '@material-ui/core'; import { Helmet } from 'react-helmet'; +export type ContentHeaderClassKey = + | 'container' + | 'leftItemsBox' + | 'rightItemsBox' + | 'description' + | 'title'; + const useStyles = (props: ContentHeaderProps) => - makeStyles(theme => ({ - container: { - width: '100%', - display: 'flex', - flexDirection: 'row', - flexWrap: 'wrap', - justifyContent: 'flex-end', - alignItems: 'center', - marginBottom: theme.spacing(2), - textAlign: props.textAlign, - }, - leftItemsBox: { - flex: '1 1 auto', - minWidth: 0, - overflow: 'visible', - }, - rightItemsBox: { - flex: '0 1 auto', - display: 'flex', - flexDirection: 'row', - flexWrap: 'wrap', - alignItems: 'center', - marginLeft: theme.spacing(1), - minWidth: 0, - overflow: 'visible', - }, - description: {}, - title: { - display: 'inline-flex', - marginBottom: 0, - }, - })); + makeStyles( + theme => ({ + container: { + width: '100%', + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', + justifyContent: 'flex-end', + alignItems: 'center', + marginBottom: theme.spacing(2), + textAlign: props.textAlign, + }, + leftItemsBox: { + flex: '1 1 auto', + minWidth: 0, + overflow: 'visible', + }, + rightItemsBox: { + flex: '0 1 auto', + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', + alignItems: 'center', + marginLeft: theme.spacing(1), + minWidth: 0, + overflow: 'visible', + }, + description: {}, + title: { + display: 'inline-flex', + marginBottom: 0, + }, + }), + { name: 'BackstageContentHeader' }, + ); type ContentHeaderTitleProps = { title?: string; diff --git a/packages/core-components/src/layout/ContentHeader/index.ts b/packages/core-components/src/layout/ContentHeader/index.ts index 537a2b6ed9..3a55db4e22 100644 --- a/packages/core-components/src/layout/ContentHeader/index.ts +++ b/packages/core-components/src/layout/ContentHeader/index.ts @@ -15,3 +15,4 @@ */ export { ContentHeader } from './ContentHeader'; +export type { ContentHeaderClassKey } from './ContentHeader'; diff --git a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx index 87eebdb729..79aaaebfc6 100644 --- a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx +++ b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx @@ -28,24 +28,29 @@ interface IErrorPageProps { additionalInfo?: string; } -const useStyles = makeStyles(theme => ({ - container: { - padding: theme.spacing(8), - [theme.breakpoints.down('xs')]: { - padding: theme.spacing(2), +export type ErrorPageClassKey = 'container' | 'title' | 'subtitle'; + +const useStyles = makeStyles( + theme => ({ + container: { + padding: theme.spacing(8), + [theme.breakpoints.down('xs')]: { + padding: theme.spacing(2), + }, }, - }, - title: { - paddingBottom: theme.spacing(5), - [theme.breakpoints.down('xs')]: { - paddingBottom: theme.spacing(4), - fontSize: 32, + title: { + paddingBottom: theme.spacing(5), + [theme.breakpoints.down('xs')]: { + paddingBottom: theme.spacing(4), + fontSize: 32, + }, }, - }, - subtitle: { - color: theme.palette.textSubtle, - }, -})); + subtitle: { + color: theme.palette.textSubtle, + }, + }), + { name: 'BackstageErrorPage' }, +); export function ErrorPage(props: IErrorPageProps) { const { status, statusMessage, additionalInfo } = props; diff --git a/packages/core-components/src/layout/ErrorPage/MicDrop.tsx b/packages/core-components/src/layout/ErrorPage/MicDrop.tsx index 666eea4f09..5500994e4f 100644 --- a/packages/core-components/src/layout/ErrorPage/MicDrop.tsx +++ b/packages/core-components/src/layout/ErrorPage/MicDrop.tsx @@ -18,21 +18,26 @@ import React from 'react'; import { makeStyles } from '@material-ui/core'; import MicDropSvgUrl from './mic-drop.svg'; -const useStyles = makeStyles(theme => ({ - micDrop: { - maxWidth: '60%', - position: 'absolute', - bottom: theme.spacing(2), - right: theme.spacing(2), - [theme.breakpoints.down('xs')]: { - maxWidth: '96%', - position: 'relative', - bottom: 'unset', - right: 'unset', - margin: `${theme.spacing(10)}px auto ${theme.spacing(4)}px`, +const useStyles = makeStyles( + theme => ({ + micDrop: { + maxWidth: '60%', + position: 'absolute', + bottom: theme.spacing(2), + right: theme.spacing(2), + [theme.breakpoints.down('xs')]: { + maxWidth: '96%', + position: 'relative', + bottom: 'unset', + right: 'unset', + margin: `${theme.spacing(10)}px auto ${theme.spacing(4)}px`, + }, }, - }, -})); + }), + { name: 'BackstageErrorPageMicDrop' }, +); + +export type MicDropClassKey = 'micDrop'; export const MicDrop = () => { const classes = useStyles(); diff --git a/packages/core-components/src/layout/ErrorPage/index.ts b/packages/core-components/src/layout/ErrorPage/index.ts index a9a5fc9b2a..429b467444 100644 --- a/packages/core-components/src/layout/ErrorPage/index.ts +++ b/packages/core-components/src/layout/ErrorPage/index.ts @@ -15,3 +15,5 @@ */ export { ErrorPage } from './ErrorPage'; +export type { ErrorPageClassKey } from './ErrorPage'; +export type { MicDropClassKey } from './MicDrop'; diff --git a/packages/core-components/src/layout/Header/Header.tsx b/packages/core-components/src/layout/Header/Header.tsx index 3f83bcc843..0b3c1121f0 100644 --- a/packages/core-components/src/layout/Header/Header.tsx +++ b/packages/core-components/src/layout/Header/Header.tsx @@ -22,64 +22,78 @@ import { Helmet } from 'react-helmet'; import { Link } from '../../components/Link'; import { Breadcrumbs } from '../Breadcrumbs'; -const useStyles = makeStyles(theme => ({ - header: { - gridArea: 'pageHeader', - padding: theme.spacing(3), - width: '100%', - boxShadow: '0 0 8px 3px rgba(20, 20, 20, 0.3)', - position: 'relative', - zIndex: 100, - display: 'flex', - flexDirection: 'row', - flexWrap: 'wrap', - alignItems: 'center', - backgroundImage: theme.page.backgroundImage, - backgroundPosition: 'center', - backgroundSize: 'cover', - }, - leftItemsBox: { - maxWidth: '100%', - flexGrow: 1, - }, - rightItemsBox: { - width: 'auto', - }, - title: { - color: theme.palette.bursts.fontColor, - wordBreak: 'break-all', - fontSize: 'calc(24px + 6 * ((100vw - 320px) / 680))', - marginBottom: 0, - }, - subtitle: { - color: 'rgba(255, 255, 255, 0.8)', - lineHeight: '1.0em', - display: 'inline-block', // prevents margin collapse of adjacent siblings - marginTop: theme.spacing(1), - }, - type: { - textTransform: 'uppercase', - fontSize: 11, - opacity: 0.8, - marginBottom: theme.spacing(1), - color: theme.palette.bursts.fontColor, - }, - breadcrumb: { - fontSize: 'calc(15px + 1 * ((100vw - 320px) / 680))', - color: theme.palette.bursts.fontColor, - }, - breadcrumbType: { - fontSize: 'inherit', - opacity: 0.7, - marginRight: -theme.spacing(0.3), - marginBottom: theme.spacing(0.3), - }, - breadcrumbTitle: { - fontSize: 'inherit', - marginLeft: -theme.spacing(0.3), - marginBottom: theme.spacing(0.3), - }, -})); +export type HeaderClassKey = + | 'header' + | 'leftItemsBox' + | 'rightItemsBox' + | 'title' + | 'subtitle' + | 'type' + | 'breadcrumb' + | 'breadcrumbType' + | 'breadcrumbTitle'; + +const useStyles = makeStyles( + theme => ({ + header: { + gridArea: 'pageHeader', + padding: theme.spacing(3), + width: '100%', + boxShadow: '0 0 8px 3px rgba(20, 20, 20, 0.3)', + position: 'relative', + zIndex: 100, + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', + alignItems: 'center', + backgroundImage: theme.page.backgroundImage, + backgroundPosition: 'center', + backgroundSize: 'cover', + }, + leftItemsBox: { + maxWidth: '100%', + flexGrow: 1, + }, + rightItemsBox: { + width: 'auto', + }, + title: { + color: theme.palette.bursts.fontColor, + wordBreak: 'break-all', + fontSize: 'calc(24px + 6 * ((100vw - 320px) / 680))', + marginBottom: 0, + }, + subtitle: { + color: 'rgba(255, 255, 255, 0.8)', + lineHeight: '1.0em', + display: 'inline-block', // prevents margin collapse of adjacent siblings + marginTop: theme.spacing(1), + }, + type: { + textTransform: 'uppercase', + fontSize: 11, + opacity: 0.8, + marginBottom: theme.spacing(1), + color: theme.palette.bursts.fontColor, + }, + breadcrumb: { + fontSize: 'calc(15px + 1 * ((100vw - 320px) / 680))', + color: theme.palette.bursts.fontColor, + }, + breadcrumbType: { + fontSize: 'inherit', + opacity: 0.7, + marginRight: -theme.spacing(0.3), + marginBottom: theme.spacing(0.3), + }, + breadcrumbTitle: { + fontSize: 'inherit', + marginLeft: -theme.spacing(0.3), + marginBottom: theme.spacing(0.3), + }, + }), + { name: 'BackstageHeader' }, +); type HeaderStyles = ReturnType; @@ -195,20 +209,22 @@ export function Header(props: PropsWithChildren) { <>
- - - - - +
+ + + + + +
{children} diff --git a/packages/core-components/src/layout/Header/index.ts b/packages/core-components/src/layout/Header/index.ts index 2c322fe9c1..d705b8de74 100644 --- a/packages/core-components/src/layout/Header/index.ts +++ b/packages/core-components/src/layout/Header/index.ts @@ -15,3 +15,4 @@ */ export { Header } from './Header'; +export type { HeaderClassKey } from './Header'; diff --git a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx index 88f6e26bf5..5071971f48 100644 --- a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx +++ b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx @@ -17,24 +17,29 @@ import { Link, makeStyles, Typography, Grid } from '@material-ui/core'; import React from 'react'; -const useStyles = makeStyles(theme => ({ - root: { - textAlign: 'left', - }, - label: { - color: theme.palette.common.white, - fontWeight: 'bold', - letterSpacing: 0, - fontSize: theme.typography.fontSize, - marginBottom: theme.spacing(1) / 2, - lineHeight: 1, - }, - value: { - color: 'rgba(255, 255, 255, 0.8)', - fontSize: theme.typography.fontSize, - lineHeight: 1, - }, -})); +export type HeaderLabelClassKey = 'root' | 'label' | 'value'; + +const useStyles = makeStyles( + theme => ({ + root: { + textAlign: 'left', + }, + label: { + color: theme.palette.common.white, + fontWeight: 'bold', + letterSpacing: 0, + fontSize: theme.typography.fontSize, + marginBottom: theme.spacing(1) / 2, + lineHeight: 1, + }, + value: { + color: 'rgba(255, 255, 255, 0.8)', + fontSize: theme.typography.fontSize, + lineHeight: 1, + }, + }), + { name: 'BackstageHeaderLabel' }, +); type HeaderLabelContentProps = { value: React.ReactNode; diff --git a/packages/core-components/src/layout/HeaderLabel/index.ts b/packages/core-components/src/layout/HeaderLabel/index.ts index cc803e7fde..df8dcaf84c 100644 --- a/packages/core-components/src/layout/HeaderLabel/index.ts +++ b/packages/core-components/src/layout/HeaderLabel/index.ts @@ -15,3 +15,4 @@ */ export { HeaderLabel } from './HeaderLabel'; +export type { HeaderLabelClassKey } from './HeaderLabel'; diff --git a/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx b/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx index 3468439ade..b34af3eb83 100644 --- a/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx +++ b/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx @@ -20,29 +20,38 @@ import React, { useState, useEffect } from 'react'; import { makeStyles, Tabs, Tab as TabUI, TabProps } from '@material-ui/core'; -const useStyles = makeStyles(theme => ({ - tabsWrapper: { - gridArea: 'pageSubheader', - backgroundColor: theme.palette.background.paper, - paddingLeft: theme.spacing(3), - }, - defaultTab: { - padding: theme.spacing(3, 3), - ...theme.typography.caption, - textTransform: 'uppercase', - fontWeight: 'bold', - color: theme.palette.text.secondary, - }, - selected: { - color: theme.palette.text.primary, - }, - tabRoot: { - '&:hover': { - backgroundColor: theme.palette.background.default, +export type HeaderTabsClassKey = + | 'tabsWrapper' + | 'defaultTab' + | 'selected' + | 'tabRoot'; + +const useStyles = makeStyles( + theme => ({ + tabsWrapper: { + gridArea: 'pageSubheader', + backgroundColor: theme.palette.background.paper, + paddingLeft: theme.spacing(3), + }, + defaultTab: { + padding: theme.spacing(3, 3), + ...theme.typography.caption, + textTransform: 'uppercase', + fontWeight: 'bold', + color: theme.palette.text.secondary, + }, + selected: { color: theme.palette.text.primary, }, - }, -})); + tabRoot: { + '&:hover': { + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, + }, + }, + }), + { name: 'BackstageHeaderTabs' }, +); export type Tab = { id: string; diff --git a/packages/core-components/src/layout/HeaderTabs/index.tsx b/packages/core-components/src/layout/HeaderTabs/index.tsx index e706f19bf6..477269e7a9 100644 --- a/packages/core-components/src/layout/HeaderTabs/index.tsx +++ b/packages/core-components/src/layout/HeaderTabs/index.tsx @@ -14,5 +14,5 @@ * limitations under the License. */ -export type { Tab } from './HeaderTabs'; +export type { Tab, HeaderTabsClassKey } from './HeaderTabs'; export { HeaderTabs } from './HeaderTabs'; diff --git a/packages/core-components/src/layout/InfoCard/InfoCard.tsx b/packages/core-components/src/layout/InfoCard/InfoCard.tsx index 36205b0dc0..a3094b792e 100644 --- a/packages/core-components/src/layout/InfoCard/InfoCard.tsx +++ b/packages/core-components/src/layout/InfoCard/InfoCard.tsx @@ -29,34 +29,51 @@ import classNames from 'classnames'; import { ErrorBoundary, ErrorBoundaryProps } from '../ErrorBoundary'; import { BottomLink, BottomLinkProps } from '../BottomLink'; -const useStyles = makeStyles(theme => ({ - noPadding: { - padding: 0, - '&:last-child': { - paddingBottom: 0, - }, - }, - header: { - padding: theme.spacing(2, 2, 2, 2.5), - }, - headerTitle: { - fontWeight: 700, - }, - headerSubheader: { - paddingTop: theme.spacing(1), - }, - headerAvatar: {}, - headerAction: {}, - headerContent: {}, -})); +export type InfoCardClassKey = + | 'noPadding' + | 'header' + | 'headerTitle' + | 'headerSubheader' + | 'headerAvatar' + | 'headerAction' + | 'headerContent'; -const CardActionsTopRight = withStyles(theme => ({ - root: { - display: 'inline-block', - padding: theme.spacing(8, 8, 0, 0), - float: 'right', - }, -}))(CardActions); +const useStyles = makeStyles( + theme => ({ + noPadding: { + padding: 0, + '&:last-child': { + paddingBottom: 0, + }, + }, + header: { + padding: theme.spacing(2, 2, 2, 2.5), + }, + headerTitle: { + fontWeight: 700, + }, + headerSubheader: { + paddingTop: theme.spacing(1), + }, + headerAvatar: {}, + headerAction: {}, + headerContent: {}, + }), + { name: 'BackstageInfoCard' }, +); + +export type CardActionsTopRightClassKey = 'root'; + +const CardActionsTopRight = withStyles( + theme => ({ + root: { + display: 'inline-block', + padding: theme.spacing(8, 8, 0, 0), + float: 'right', + }, + }), + { name: 'BackstageInfoCardCardActionsTopRight' }, +)(CardActions); const VARIANT_STYLES = { card: { diff --git a/packages/core-components/src/layout/InfoCard/index.ts b/packages/core-components/src/layout/InfoCard/index.ts index cab443d9b2..1be4c01828 100644 --- a/packages/core-components/src/layout/InfoCard/index.ts +++ b/packages/core-components/src/layout/InfoCard/index.ts @@ -15,4 +15,8 @@ */ export { InfoCard } from './InfoCard'; -export type { InfoCardVariants } from './InfoCard'; +export type { + InfoCardVariants, + InfoCardClassKey, + CardActionsTopRightClassKey, +} from './InfoCard'; diff --git a/packages/core-components/src/layout/ItemCard/ItemCardGrid.tsx b/packages/core-components/src/layout/ItemCard/ItemCardGrid.tsx index 137c48d272..739398252e 100644 --- a/packages/core-components/src/layout/ItemCard/ItemCardGrid.tsx +++ b/packages/core-components/src/layout/ItemCard/ItemCardGrid.tsx @@ -17,6 +17,8 @@ import { createStyles, makeStyles, Theme, WithStyles } from '@material-ui/core'; import React from 'react'; +export type ItemCardGridClassKey = 'root'; + const styles = (theme: Theme) => createStyles({ root: { @@ -27,7 +29,7 @@ const styles = (theme: Theme) => }, }); -const useStyles = makeStyles(styles); +const useStyles = makeStyles(styles, { name: 'BackstageItemCardGrid' }); export type ItemCardGridProps = Partial> & { /** diff --git a/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx b/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx index 4dbc5d7c1a..7ad6732e02 100644 --- a/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx +++ b/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx @@ -23,6 +23,8 @@ import { import React from 'react'; import { BackstageTheme } from '@backstage/theme'; +export type ItemCardHeaderClassKey = 'root'; + const styles = (theme: BackstageTheme) => createStyles({ root: { @@ -34,7 +36,7 @@ const styles = (theme: BackstageTheme) => }, }); -const useStyles = makeStyles(styles); +const useStyles = makeStyles(styles, { name: 'BackstageItemCardHeader' }); export type ItemCardHeaderProps = Partial> & { /** diff --git a/packages/core-components/src/layout/ItemCard/index.ts b/packages/core-components/src/layout/ItemCard/index.ts index 7c4f77f43a..f69374c03d 100644 --- a/packages/core-components/src/layout/ItemCard/index.ts +++ b/packages/core-components/src/layout/ItemCard/index.ts @@ -16,6 +16,9 @@ export { ItemCard } from './ItemCard'; export { ItemCardGrid } from './ItemCardGrid'; -export type { ItemCardGridProps } from './ItemCardGrid'; +export type { ItemCardGridProps, ItemCardGridClassKey } from './ItemCardGrid'; export { ItemCardHeader } from './ItemCardHeader'; -export type { ItemCardHeaderProps } from './ItemCardHeader'; +export type { + ItemCardHeaderProps, + ItemCardHeaderClassKey, +} from './ItemCardHeader'; diff --git a/packages/core-components/src/layout/Page/Page.tsx b/packages/core-components/src/layout/Page/Page.tsx index b838693a3c..37d6c663f2 100644 --- a/packages/core-components/src/layout/Page/Page.tsx +++ b/packages/core-components/src/layout/Page/Page.tsx @@ -18,17 +18,22 @@ import React, { PropsWithChildren } from 'react'; import { BackstageTheme } from '@backstage/theme'; import { makeStyles, ThemeProvider } from '@material-ui/core'; -const useStyles = makeStyles(() => ({ - root: { - display: 'grid', - gridTemplateAreas: - "'pageHeader pageHeader pageHeader' 'pageSubheader pageSubheader pageSubheader' 'pageNav pageContent pageSidebar'", - gridTemplateRows: 'max-content auto 1fr', - gridTemplateColumns: 'auto 1fr auto', - height: '100vh', - overflowY: 'auto', - }, -})); +export type PageClassKey = 'root'; + +const useStyles = makeStyles( + () => ({ + root: { + display: 'grid', + gridTemplateAreas: + "'pageHeader pageHeader pageHeader' 'pageSubheader pageSubheader pageSubheader' 'pageNav pageContent pageSidebar'", + gridTemplateRows: 'max-content auto 1fr', + gridTemplateColumns: 'auto 1fr auto', + height: '100vh', + overflowY: 'auto', + }, + }), + { name: 'BackstagePage' }, +); type Props = { themeId: string; diff --git a/packages/core-components/src/layout/Page/index.ts b/packages/core-components/src/layout/Page/index.ts index 91db73657e..4022075c7b 100644 --- a/packages/core-components/src/layout/Page/index.ts +++ b/packages/core-components/src/layout/Page/index.ts @@ -15,4 +15,5 @@ */ export { Page } from './Page'; +export type { PageClassKey } from './Page'; export { PageWithHeader } from './PageWithHeader'; diff --git a/packages/core-components/src/layout/Sidebar/Bar.tsx b/packages/core-components/src/layout/Sidebar/Bar.tsx index 8855f01104..750ec6bbdc 100644 --- a/packages/core-components/src/layout/Sidebar/Bar.tsx +++ b/packages/core-components/src/layout/Sidebar/Bar.tsx @@ -21,47 +21,52 @@ import { sidebarConfig, SidebarContext } from './config'; import { BackstageTheme } from '@backstage/theme'; import { SidebarPinStateContext } from './Page'; -const useStyles = makeStyles(theme => ({ - root: { - zIndex: 1000, - position: 'relative', - overflow: 'visible', - width: theme.spacing(7) + 1, - }, - drawer: { - display: 'flex', - flexFlow: 'column nowrap', - alignItems: 'flex-start', - position: 'fixed', - left: 0, - top: 0, - bottom: 0, - padding: 0, - background: theme.palette.navigation.background, - overflowX: 'hidden', - msOverflowStyle: 'none', - scrollbarWidth: 'none', - width: sidebarConfig.drawerWidthClosed, - borderRight: `1px solid #383838`, - transition: theme.transitions.create('width', { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.shortest, - }), - '& > *': { - flexShrink: 0, +export type SidebarClassKey = 'root' | 'drawer' | 'drawerOpen'; + +const useStyles = makeStyles( + theme => ({ + root: { + zIndex: 1000, + position: 'relative', + overflow: 'visible', + width: theme.spacing(7) + 1, }, - '&::-webkit-scrollbar': { - display: 'none', + drawer: { + display: 'flex', + flexFlow: 'column nowrap', + alignItems: 'flex-start', + position: 'fixed', + left: 0, + top: 0, + bottom: 0, + padding: 0, + background: theme.palette.navigation.background, + overflowX: 'hidden', + msOverflowStyle: 'none', + scrollbarWidth: 'none', + width: sidebarConfig.drawerWidthClosed, + borderRight: `1px solid #383838`, + transition: theme.transitions.create('width', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.shortest, + }), + '& > *': { + flexShrink: 0, + }, + '&::-webkit-scrollbar': { + display: 'none', + }, }, - }, - drawerOpen: { - width: sidebarConfig.drawerWidthOpen, - transition: theme.transitions.create('width', { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.shorter, - }), - }, -})); + drawerOpen: { + width: sidebarConfig.drawerWidthOpen, + transition: theme.transitions.create('width', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.shorter, + }), + }, + }), + { name: 'BackstageSidebar' }, +); enum State { Closed, diff --git a/packages/core-components/src/layout/Sidebar/Intro.tsx b/packages/core-components/src/layout/Sidebar/Intro.tsx index 45098b49e1..70b952588d 100644 --- a/packages/core-components/src/layout/Sidebar/Intro.tsx +++ b/packages/core-components/src/layout/Sidebar/Intro.tsx @@ -26,48 +26,58 @@ import { } from './config'; import { SidebarDivider } from './Items'; -const useStyles = makeStyles(theme => ({ - introCard: { - color: '#b5b5b5', - // XXX (@koroeskohr): should I be using a Mui theme variable? - fontSize: 12, - width: sidebarConfig.drawerWidthOpen, - marginTop: 18, - marginBottom: 12, - paddingLeft: sidebarConfig.iconPadding, - paddingRight: sidebarConfig.iconPadding, - }, - introDismiss: { - display: 'flex', - justifyContent: 'flex-end', - alignItems: 'center', - marginTop: 12, - }, - introDismissLink: { - color: '#dddddd', - display: 'flex', - alignItems: 'center', - marginBottom: 4, - '&:hover': { - color: theme.palette.linkHover, - transition: theme.transitions.create('color', { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.shortest, - }), +export type SidebarIntroClassKey = + | 'introCard' + | 'introDismiss' + | 'introDismissLink' + | 'introDismissText' + | 'introDismissIcon'; + +const useStyles = makeStyles( + theme => ({ + introCard: { + color: '#b5b5b5', + // XXX (@koroeskohr): should I be using a Mui theme variable? + fontSize: 12, + width: sidebarConfig.drawerWidthOpen, + marginTop: 18, + marginBottom: 12, + paddingLeft: sidebarConfig.iconPadding, + paddingRight: sidebarConfig.iconPadding, }, - }, - introDismissText: { - fontSize: '0.7rem', - fontWeight: 'bold', - textTransform: 'uppercase', - letterSpacing: 1, - }, - introDismissIcon: { - width: 18, - height: 18, - marginRight: 12, - }, -})); + introDismiss: { + display: 'flex', + justifyContent: 'flex-end', + alignItems: 'center', + marginTop: 12, + }, + introDismissLink: { + color: '#dddddd', + display: 'flex', + alignItems: 'center', + marginBottom: 4, + '&:hover': { + color: theme.palette.linkHover, + transition: theme.transitions.create('color', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.shortest, + }), + }, + }, + introDismissText: { + fontSize: '0.7rem', + fontWeight: 'bold', + textTransform: 'uppercase', + letterSpacing: 1, + }, + introDismissIcon: { + width: 18, + height: 18, + marginRight: 12, + }, + }), + { name: 'BackstageSidebarIntro' }, +); type IntroCardProps = { text: string; diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx index b3acc36f98..fbe1ffbb82 100644 --- a/packages/core-components/src/layout/Sidebar/Items.tsx +++ b/packages/core-components/src/layout/Sidebar/Items.tsx @@ -42,90 +42,107 @@ import { } from 'react-router-dom'; import { sidebarConfig, SidebarContext } from './config'; -const useStyles = makeStyles(theme => { - const { - selectedIndicatorWidth, - drawerWidthClosed, - drawerWidthOpen, - iconContainerWidth, - } = sidebarConfig; - return { - root: { - color: theme.palette.navigation.color, - display: 'flex', - flexFlow: 'row nowrap', - alignItems: 'center', - height: 48, - cursor: 'pointer', - }, - buttonItem: { - background: 'none', - border: 'none', - width: 'auto', - margin: 0, - padding: 0, - textAlign: 'inherit', - font: 'inherit', - }, - closed: { - width: drawerWidthClosed, - justifyContent: 'center', - }, - open: { - width: drawerWidthOpen, - }, - label: { - // XXX (@koroeskohr): I can't seem to achieve the desired font-weight from the designs - fontWeight: 'bold', - whiteSpace: 'nowrap', - lineHeight: 'auto', - flex: '3 1 auto', - width: '110px', - overflow: 'hidden', - 'text-overflow': 'ellipsis', - }, - iconContainer: { - boxSizing: 'border-box', - height: '100%', - width: iconContainerWidth, - marginRight: -theme.spacing(2), - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - }, - searchRoot: { - marginBottom: 12, - }, - searchField: { - color: '#b5b5b5', - fontWeight: 'bold', - fontSize: theme.typography.fontSize, - }, - searchFieldHTMLInput: { - padding: `${theme.spacing(2)} 0 ${theme.spacing(2)}`, - }, - searchContainer: { - width: drawerWidthOpen - iconContainerWidth, - }, - secondaryAction: { - width: theme.spacing(6), - textAlign: 'center', - marginRight: theme.spacing(1), - }, - selected: { - '&$root': { - borderLeft: `solid ${selectedIndicatorWidth}px ${theme.palette.navigation.indicator}`, - color: theme.palette.navigation.selectedColor, +export type SidebarItemClassKey = + | 'root' + | 'buttonItem' + | 'closed' + | 'open' + | 'label' + | 'iconContainer' + | 'searchRoot' + | 'searchField' + | 'searchFieldHTMLInput' + | 'searchContainer' + | 'secondaryAction' + | 'selected'; + +const useStyles = makeStyles( + theme => { + const { + selectedIndicatorWidth, + drawerWidthClosed, + drawerWidthOpen, + iconContainerWidth, + } = sidebarConfig; + return { + root: { + color: theme.palette.navigation.color, + display: 'flex', + flexFlow: 'row nowrap', + alignItems: 'center', + height: 48, + cursor: 'pointer', }, - '&$closed': { - width: drawerWidthClosed - selectedIndicatorWidth, + buttonItem: { + background: 'none', + border: 'none', + width: 'auto', + margin: 0, + padding: 0, + textAlign: 'inherit', + font: 'inherit', }, - '& $iconContainer': { - marginLeft: -selectedIndicatorWidth, + closed: { + width: drawerWidthClosed, + justifyContent: 'center', }, - }, - }; -}); + open: { + width: drawerWidthOpen, + }, + label: { + // XXX (@koroeskohr): I can't seem to achieve the desired font-weight from the designs + fontWeight: 'bold', + whiteSpace: 'nowrap', + lineHeight: 'auto', + flex: '3 1 auto', + width: '110px', + overflow: 'hidden', + 'text-overflow': 'ellipsis', + }, + iconContainer: { + boxSizing: 'border-box', + height: '100%', + width: iconContainerWidth, + marginRight: -theme.spacing(2), + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + searchRoot: { + marginBottom: 12, + }, + searchField: { + color: '#b5b5b5', + fontWeight: 'bold', + fontSize: theme.typography.fontSize, + }, + searchFieldHTMLInput: { + padding: `${theme.spacing(2)} 0 ${theme.spacing(2)}`, + }, + searchContainer: { + width: drawerWidthOpen - iconContainerWidth, + }, + secondaryAction: { + width: theme.spacing(6), + textAlign: 'center', + marginRight: theme.spacing(1), + }, + selected: { + '&$root': { + borderLeft: `solid ${selectedIndicatorWidth}px ${theme.palette.navigation.indicator}`, + color: theme.palette.navigation.selectedColor, + }, + '&$closed': { + width: drawerWidthClosed - selectedIndicatorWidth, + }, + '& $iconContainer': { + marginLeft: -selectedIndicatorWidth, + }, + }, + }; + }, + { name: 'BackstageSidebarItem' }, +); type SidebarItemBaseProps = { icon: IconComponent; diff --git a/packages/core-components/src/layout/Sidebar/Page.tsx b/packages/core-components/src/layout/Sidebar/Page.tsx index 47c5878cde..c375112321 100644 --- a/packages/core-components/src/layout/Sidebar/Page.tsx +++ b/packages/core-components/src/layout/Sidebar/Page.tsx @@ -25,17 +25,22 @@ import { sidebarConfig } from './config'; import { BackstageTheme } from '@backstage/theme'; import { LocalStorage } from './localStorage'; -const useStyles = makeStyles({ - root: { - width: '100%', - minHeight: '100%', - transition: 'padding-left 0.1s ease-out', - paddingLeft: ({ isPinned }) => - isPinned - ? sidebarConfig.drawerWidthOpen - : sidebarConfig.drawerWidthClosed, +export type SidebarPageClassKey = 'root'; + +const useStyles = makeStyles( + { + root: { + width: '100%', + minHeight: '100%', + transition: 'padding-left 0.1s ease-out', + paddingLeft: ({ isPinned }) => + isPinned + ? sidebarConfig.drawerWidthOpen + : sidebarConfig.drawerWidthClosed, + }, }, -}); + { name: 'BackstageSidebarPage' }, +); export type SidebarPinStateContextType = { isPinned: boolean; diff --git a/packages/core-components/src/layout/Sidebar/index.ts b/packages/core-components/src/layout/Sidebar/index.ts index 58e193dbaf..067a9bf2eb 100644 --- a/packages/core-components/src/layout/Sidebar/index.ts +++ b/packages/core-components/src/layout/Sidebar/index.ts @@ -15,8 +15,9 @@ */ export { Sidebar } from './Bar'; +export type { SidebarClassKey } from './Bar'; export { SidebarPage, SidebarPinStateContext } from './Page'; -export type { SidebarPinStateContextType } from './Page'; +export type { SidebarPinStateContextType, SidebarPageClassKey } from './Page'; export { SidebarDivider, SidebarItem, @@ -25,7 +26,9 @@ export { SidebarSpacer, SidebarScrollWrapper, } from './Items'; +export type { SidebarItemClassKey } from './Items'; export { IntroCard, SidebarIntro } from './Intro'; +export type { SidebarIntroClassKey } from './Intro'; export { SIDEBAR_INTRO_LOCAL_STORAGE, SidebarContext, diff --git a/packages/core-components/src/layout/SignInPage/customProvider.tsx b/packages/core-components/src/layout/SignInPage/customProvider.tsx index 98753ad444..46fed6b5ae 100644 --- a/packages/core-components/src/layout/SignInPage/customProvider.tsx +++ b/packages/core-components/src/layout/SignInPage/customProvider.tsx @@ -32,16 +32,21 @@ import { GridItem } from './styles'; // accept base64url format according to RFC7515 (https://tools.ietf.org/html/rfc7515#section-3) const ID_TOKEN_REGEX = /^[a-z0-9_\-]+\.[a-z0-9_\-]+\.[a-z0-9_\-]+$/i; -const useFormStyles = makeStyles(theme => ({ - form: { - display: 'flex', - flexFlow: 'column nowrap', - }, - button: { - alignSelf: 'center', - marginTop: theme.spacing(2), - }, -})); +export type CustomProviderClassKey = 'form' | 'button'; + +const useFormStyles = makeStyles( + theme => ({ + form: { + display: 'flex', + flexFlow: 'column nowrap', + }, + button: { + alignSelf: 'center', + marginTop: theme.spacing(2), + }, + }), + { name: 'BackstageCustomProvider' }, +); type Data = { userId: string; diff --git a/packages/core-components/src/layout/SignInPage/index.ts b/packages/core-components/src/layout/SignInPage/index.ts index 2e5502d7ea..caa8506399 100644 --- a/packages/core-components/src/layout/SignInPage/index.ts +++ b/packages/core-components/src/layout/SignInPage/index.ts @@ -16,3 +16,5 @@ export type { SignInProviderConfig } from './types'; export { SignInPage } from './SignInPage'; +export type { SignInPageClassKey } from './styles'; +export type { CustomProviderClassKey } from './customProvider'; diff --git a/packages/core-components/src/layout/SignInPage/styles.tsx b/packages/core-components/src/layout/SignInPage/styles.tsx index 96559a4e78..55db36229b 100644 --- a/packages/core-components/src/layout/SignInPage/styles.tsx +++ b/packages/core-components/src/layout/SignInPage/styles.tsx @@ -16,20 +16,25 @@ import React from 'react'; import { Grid, makeStyles } from '@material-ui/core'; -export const useStyles = makeStyles({ - container: { - padding: 0, - listStyle: 'none', +export type SignInPageClassKey = 'container' | 'item'; + +export const useStyles = makeStyles( + { + container: { + padding: 0, + listStyle: 'none', + }, + item: { + display: 'flex', + flexDirection: 'column', + width: '100%', + maxWidth: '400px', + margin: 0, + padding: 0, + }, }, - item: { - display: 'flex', - flexDirection: 'column', - width: '100%', - maxWidth: '400px', - margin: 0, - padding: 0, - }, -}); + { name: 'BackstageSignInPage' }, +); export const GridItem = ({ children }: { children: JSX.Element }) => { const classes = useStyles(); diff --git a/packages/core-components/src/layout/TabbedCard/TabbedCard.tsx b/packages/core-components/src/layout/TabbedCard/TabbedCard.tsx index f350b24f1d..e9905663b2 100644 --- a/packages/core-components/src/layout/TabbedCard/TabbedCard.tsx +++ b/packages/core-components/src/layout/TabbedCard/TabbedCard.tsx @@ -34,22 +34,32 @@ import { import { BottomLink, BottomLinkProps } from '../BottomLink'; import { ErrorBoundary, ErrorBoundaryProps } from '../ErrorBoundary'; -const useTabsStyles = makeStyles(theme => ({ - root: { - padding: theme.spacing(0, 2, 0, 2.5), - minHeight: theme.spacing(3), - }, - indicator: { - backgroundColor: theme.palette.info.main, - height: theme.spacing(0.3), - }, -})); +export type TabbedCardClassKey = 'root' | 'indicator'; -const BoldHeader = withStyles(theme => ({ - root: { padding: theme.spacing(2, 2, 2, 2.5), display: 'inline-block' }, - title: { fontWeight: 700 }, - subheader: { paddingTop: theme.spacing(1) }, -}))(CardHeader); +const useTabsStyles = makeStyles( + theme => ({ + root: { + padding: theme.spacing(0, 2, 0, 2.5), + minHeight: theme.spacing(3), + }, + indicator: { + backgroundColor: theme.palette.info.main, + height: theme.spacing(0.3), + }, + }), + { name: 'BackstageTabbedCard' }, +); + +export type BoldHeaderClassKey = 'root' | 'title' | 'subheader'; + +const BoldHeader = withStyles( + theme => ({ + root: { padding: theme.spacing(2, 2, 2, 2.5), display: 'inline-block' }, + title: { fontWeight: 700 }, + subheader: { paddingTop: theme.spacing(1) }, + }), + { name: 'BackstageTabbedCardBoldHeader' }, +)(CardHeader); type Props = { /** @deprecated Use errorBoundaryProps instead */ @@ -114,23 +124,28 @@ export function TabbedCard(props: PropsWithChildren) { ); } -const useCardTabStyles = makeStyles(theme => ({ - root: { - minWidth: theme.spacing(6), - minHeight: theme.spacing(3), - margin: theme.spacing(0, 2, 0, 0), - padding: theme.spacing(0.5, 0, 0.5, 0), - textTransform: 'none', - '&:hover': { - opacity: 1, - backgroundColor: 'transparent', - color: theme.palette.text.primary, +export type CardTabClassKey = 'root' | 'selected'; + +const useCardTabStyles = makeStyles( + theme => ({ + root: { + minWidth: theme.spacing(6), + minHeight: theme.spacing(3), + margin: theme.spacing(0, 2, 0, 0), + padding: theme.spacing(0.5, 0, 0.5, 0), + textTransform: 'none', + '&:hover': { + opacity: 1, + backgroundColor: 'transparent', + color: theme.palette.text.primary, + }, }, - }, - selected: { - fontWeight: 'bold', - }, -})); + selected: { + fontWeight: 'bold', + }, + }), + { name: 'BackstageCardTab' }, +); type CardTabProps = TabProps & { children: ReactNode; diff --git a/packages/core-components/src/layout/TabbedCard/index.ts b/packages/core-components/src/layout/TabbedCard/index.ts index f3e32be054..2f31163beb 100644 --- a/packages/core-components/src/layout/TabbedCard/index.ts +++ b/packages/core-components/src/layout/TabbedCard/index.ts @@ -15,3 +15,8 @@ */ export { CardTab, TabbedCard } from './TabbedCard'; +export type { + CardTabClassKey, + TabbedCardClassKey, + BoldHeaderClassKey, +} from './TabbedCard';