From 35b78976e9269b3cb966aca2ccd5d6373aa9648c Mon Sep 17 00:00:00 2001 From: Jonathan Ash Date: Thu, 24 Mar 2022 14:46:19 +0000 Subject: [PATCH] Updated core-components api-report, changed useStyles for components in Sidebar/ Signed-off-by: Jonathan Ash --- packages/core-components/api-report.md | 14 +- .../src/layout/Sidebar/Bar.tsx | 98 ++++---- .../src/layout/Sidebar/Intro.tsx | 91 ++++--- .../src/layout/Sidebar/Items.tsx | 234 +++++++++--------- .../src/layout/Sidebar/MobileSidebar.tsx | 77 +++--- .../src/layout/Sidebar/Page.tsx | 62 +++-- .../src/layout/Sidebar/SidebarGroup.tsx | 37 ++- .../src/layout/Sidebar/SidebarSubmenu.tsx | 116 ++++----- .../src/layout/Sidebar/config.ts | 4 + .../src/layout/Sidebar/index.ts | 6 +- 10 files changed, 372 insertions(+), 367 deletions(-) diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index 2eae1d4904..2058fe2122 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -972,6 +972,12 @@ export type SidebarItemClassKey = | 'arrows' | 'selected'; +// @public (undocumented) +export type SidebarOptions = { + drawerWidthClosed?: number; + drawerWidthOpen?: number; +}; + // Warning: (ae-missing-release-tag) "SidebarPage" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) @@ -1183,6 +1189,12 @@ export type StructuredMetadataTableListClassKey = 'root'; // @public (undocumented) export type StructuredMetadataTableNestedListClassKey = 'root'; +// @public (undocumented) +export type SubmenuOptions = { + drawerWidthClosed?: number; + drawerWidthOpen?: number; +}; + // Warning: (ae-forgotten-export) The symbol "SubvalueCellProps" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "SubvalueCell" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -1452,6 +1464,4 @@ export type WarningPanelClassKey = // src/components/TabbedLayout/RoutedTabs.d.ts:9:5 - (ae-forgotten-export) The symbol "SubRoute" needs to be exported by the entry point index.d.ts // src/components/Table/Table.d.ts:20:5 - (ae-forgotten-export) The symbol "SelectedFilters" needs to be exported by the entry point index.d.ts // src/layout/ErrorBoundary/ErrorBoundary.d.ts:8:5 - (ae-forgotten-export) The symbol "SlackChannel" needs to be exported by the entry point index.d.ts -// src/layout/Sidebar/Bar.d.ts:9:5 - (ae-forgotten-export) The symbol "SidebarOptions" needs to be exported by the entry point index.d.ts -// src/layout/Sidebar/Bar.d.ts:10:5 - (ae-forgotten-export) The symbol "SubmenuOptions" needs to be exported by the entry point index.d.ts ``` diff --git a/packages/core-components/src/layout/Sidebar/Bar.tsx b/packages/core-components/src/layout/Sidebar/Bar.tsx index c17ea56aef..7a0b3f5b76 100644 --- a/packages/core-components/src/layout/Sidebar/Bar.tsx +++ b/packages/core-components/src/layout/Sidebar/Bar.tsx @@ -37,56 +37,52 @@ import { MobileSidebar } from './MobileSidebar'; /** @public */ export type SidebarClassKey = 'drawer' | 'drawerOpen'; - -const useStyles = ({ sidebarConfig }: { sidebarConfig: SidebarConfig }) => - makeStyles( - theme => { - return { - drawer: { - display: 'flex', - flexFlow: 'column nowrap', - alignItems: 'flex-start', - position: 'fixed', - left: 0, - top: 0, - bottom: 0, - zIndex: theme.zIndex.appBar, - background: theme.palette.navigation.background, - overflowX: 'hidden', - msOverflowStyle: 'none', - scrollbarWidth: 'none', - width: sidebarConfig.drawerWidthClosed, - 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, - }), - }, - visuallyHidden: { - top: 0, - position: 'absolute', - zIndex: 1000, - transform: 'translateY(-200%)', - '&:focus': { - transform: 'translateY(5px)', - }, - }, - }; +const useStyles = makeStyles( + theme => ({ + drawer: props => ({ + display: 'flex', + flexFlow: 'column nowrap', + alignItems: 'flex-start', + position: 'fixed', + left: 0, + top: 0, + bottom: 0, + zIndex: theme.zIndex.appBar, + background: theme.palette.navigation.background, + overflowX: 'hidden', + msOverflowStyle: 'none', + scrollbarWidth: 'none', + width: props.sidebarConfig.drawerWidthClosed, + transition: theme.transitions.create('width', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.shortest, + }), + '& > *': { + flexShrink: 0, + }, + '&::-webkit-scrollbar': { + display: 'none', + }, + }), + drawerOpen: props => ({ + width: props.sidebarConfig.drawerWidthOpen, + transition: theme.transitions.create('width', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.shorter, + }), + }), + visuallyHidden: { + top: 0, + position: 'absolute', + zIndex: 1000, + transform: 'translateY(-200%)', + '&:focus': { + transform: 'translateY(5px)', + }, }, - { name: 'BackstageSidebar' }, - ); + }), + { name: 'BackstageSidebar' }, +); enum State { Closed, @@ -130,7 +126,7 @@ const DesktopSidebar = (props: DesktopSidebarProps) => { children, } = props; - const classes = useStyles({ sidebarConfig })(); + const classes = useStyles({ sidebarConfig }); const isSmallScreen = useMediaQuery( theme => theme.breakpoints.down('md'), { noSsr: true }, @@ -250,7 +246,7 @@ export const Sidebar = (props: SidebarProps) => { function A11ySkipSidebar() { const { sidebarConfig } = useContext(SidebarConfigContext); const { focusContent, contentRef } = useContent(); - const classes = useStyles({ sidebarConfig })(); + const classes = useStyles({ sidebarConfig }); if (!contentRef?.current) { return null; diff --git a/packages/core-components/src/layout/Sidebar/Intro.tsx b/packages/core-components/src/layout/Sidebar/Intro.tsx index 9f65be946b..d1d8f4b2a2 100644 --- a/packages/core-components/src/layout/Sidebar/Intro.tsx +++ b/packages/core-components/src/layout/Sidebar/Intro.tsx @@ -38,52 +38,51 @@ export type SidebarIntroClassKey = | 'introDismissText' | 'introDismissIcon'; -const useStyles = ({ sidebarConfig }: { sidebarConfig: SidebarConfig }) => - 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, - }), - }, - }, - introDismissText: { - fontSize: '0.7rem', - fontWeight: 'bold', - textTransform: 'uppercase', - letterSpacing: 1, - }, - introDismissIcon: { - width: 18, - height: 18, - marginRight: 12, - }, +const useStyles = makeStyles( + theme => ({ + introCard: props => ({ + color: '#b5b5b5', + // XXX (@koroeskohr): should I be using a Mui theme variable? + fontSize: 12, + width: props.sidebarConfig.drawerWidthOpen, + marginTop: 18, + marginBottom: 12, + paddingLeft: props.sidebarConfig.iconPadding, + paddingRight: props.sidebarConfig.iconPadding, }), - { name: 'BackstageSidebarIntro' }, - ); + 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; @@ -99,7 +98,7 @@ type IntroCardProps = { export function IntroCard(props: IntroCardProps) { const { sidebarConfig } = useContext(SidebarConfigContext); - const classes = useStyles({ sidebarConfig })(); + const classes = useStyles({ sidebarConfig }); const { text, onClose } = props; const handleClose = () => onClose(); diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx index 79ab925d93..142da6af7c 100644 --- a/packages/core-components/src/layout/Sidebar/Items.tsx +++ b/packages/core-components/src/layout/Sidebar/Items.tsx @@ -83,124 +83,122 @@ export type SidebarItemClassKey = | 'arrows' | 'selected'; -const useStyles = ({ sidebarConfig }: { sidebarConfig: SidebarConfig }) => - makeStyles( - theme => { - return { - root: { - color: theme.palette.navigation.color, - display: 'flex', - flexFlow: 'row nowrap', - alignItems: 'center', - height: 48, - cursor: 'pointer', - }, - buttonItem: { - background: 'none', - border: 'none', - width: '100%', - margin: 0, - padding: 0, - textAlign: 'inherit', - font: 'inherit', - }, - closed: { - width: sidebarConfig.drawerWidthClosed, - justifyContent: 'center', - }, - open: { - [theme.breakpoints.up('sm')]: { - width: sidebarConfig.drawerWidthOpen, - }, - }, - highlightable: { - '&:hover': { - background: - theme.palette.navigation.navItem?.hoverBackground ?? '#404040', - }, - }, - highlighted: { - background: - theme.palette.navigation.navItem?.hoverBackground ?? '#404040', - }, - 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: sidebarConfig.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, 2), - }, - searchContainer: { - width: - sidebarConfig.drawerWidthOpen - sidebarConfig.iconContainerWidth, - }, - secondaryAction: { - width: theme.spacing(6), - textAlign: 'center', - marginRight: theme.spacing(1), - }, - closedItemIcon: { - width: '100%', - justifyContent: 'center', - }, - submenuArrow: { - display: 'flex', - }, - expandButton: { - background: 'none', - border: 'none', - color: theme.palette.navigation.color, - width: '100%', - cursor: 'pointer', - position: 'relative', - height: 48, - }, - arrows: { - position: 'absolute', - right: 10, - }, - selected: { - '&$root': { - borderLeft: `solid ${sidebarConfig.selectedIndicatorWidth}px ${theme.palette.navigation.indicator}`, - color: theme.palette.navigation.selectedColor, - }, - '&$closed': { - width: sidebarConfig.drawerWidthClosed, - }, - '& $closedItemIcon': { - paddingRight: sidebarConfig.selectedIndicatorWidth, - }, - '& $iconContainer': { - marginLeft: -sidebarConfig.selectedIndicatorWidth, - }, - }, - }; +const useStyles = makeStyles( + theme => ({ + root: { + color: theme.palette.navigation.color, + display: 'flex', + flexFlow: 'row nowrap', + alignItems: 'center', + height: 48, + cursor: 'pointer', }, - { name: 'BackstageSidebarItem' }, - ); + buttonItem: { + background: 'none', + border: 'none', + width: '100%', + margin: 0, + padding: 0, + textAlign: 'inherit', + font: 'inherit', + }, + closed: props => ({ + width: props.sidebarConfig.drawerWidthClosed, + justifyContent: 'center', + }), + open: props => ({ + [theme.breakpoints.up('sm')]: { + width: props.sidebarConfig.drawerWidthOpen, + }, + }), + highlightable: { + '&:hover': { + background: + theme.palette.navigation.navItem?.hoverBackground ?? '#404040', + }, + }, + highlighted: { + background: + theme.palette.navigation.navItem?.hoverBackground ?? '#404040', + }, + 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: props => ({ + boxSizing: 'border-box', + height: '100%', + width: props.sidebarConfig.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, 2), + }, + searchContainer: props => ({ + width: + props.sidebarConfig.drawerWidthOpen - + props.sidebarConfig.iconContainerWidth, + }), + secondaryAction: { + width: theme.spacing(6), + textAlign: 'center', + marginRight: theme.spacing(1), + }, + closedItemIcon: { + width: '100%', + justifyContent: 'center', + }, + submenuArrow: { + display: 'flex', + }, + expandButton: { + background: 'none', + border: 'none', + color: theme.palette.navigation.color, + width: '100%', + cursor: 'pointer', + position: 'relative', + height: 48, + }, + arrows: { + position: 'absolute', + right: 10, + }, + selected: props => ({ + '&$root': { + borderLeft: `solid ${props.sidebarConfig.selectedIndicatorWidth}px ${theme.palette.navigation.indicator}`, + color: theme.palette.navigation.selectedColor, + }, + '&$closed': { + width: props.sidebarConfig.drawerWidthClosed, + }, + '& $closedItemIcon': { + paddingRight: props.sidebarConfig.selectedIndicatorWidth, + }, + '& $iconContainer': { + marginLeft: -props.sidebarConfig.selectedIndicatorWidth, + }, + }), + }), + { name: 'BackstageSidebarItem' }, +); /** * Evaluates the routes of the SubmenuItems & nested DropdownItems. @@ -648,7 +646,7 @@ export const SidebarScrollWrapper = styled('div')(({ theme }) => { */ export const SidebarExpandButton = () => { const { sidebarConfig } = useContext(SidebarConfigContext); - const classes = useStyles({ sidebarConfig })(); + const classes = useStyles({ sidebarConfig }); const { isOpen, setOpen } = useContext(SidebarContext); const isSmallScreen = useMediaQuery( theme => theme.breakpoints.down('md'), diff --git a/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx b/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx index 2e34eefd54..aefc58bc45 100644 --- a/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx +++ b/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx @@ -59,47 +59,46 @@ type OverlayMenuProps = { children?: React.ReactNode; }; -const useStyles = ({ sidebarConfig }: { sidebarConfig: SidebarConfig }) => - makeStyles(theme => { - return { - root: { - position: 'fixed', - backgroundColor: theme.palette.navigation.background, - color: theme.palette.navigation.color, - bottom: 0, - left: 0, - right: 0, - zIndex: theme.zIndex.snackbar, - // SidebarDivider color - borderTop: '1px solid #383838', - }, +const useStyles = makeStyles( + theme => ({ + root: { + position: 'fixed', + backgroundColor: theme.palette.navigation.background, + color: theme.palette.navigation.color, + bottom: 0, + left: 0, + right: 0, + zIndex: theme.zIndex.snackbar, + // SidebarDivider color + borderTop: '1px solid #383838', + }, - overlay: { - background: theme.palette.navigation.background, - width: '100%', - bottom: `${sidebarConfig.mobileSidebarHeight}px`, - height: `calc(100% - ${sidebarConfig.mobileSidebarHeight}px)`, - flex: '0 1 auto', - overflow: 'auto', - }, + overlay: props => ({ + background: theme.palette.navigation.background, + width: '100%', + bottom: `${props.sidebarConfig.mobileSidebarHeight}px`, + height: `calc(100% - ${props.sidebarConfig.mobileSidebarHeight}px)`, + flex: '0 1 auto', + overflow: 'auto', + }), - overlayHeader: { - display: 'flex', - color: theme.palette.bursts.fontColor, - alignItems: 'center', - justifyContent: 'space-between', - padding: theme.spacing(2, 3), - }, + overlayHeader: { + display: 'flex', + color: theme.palette.bursts.fontColor, + alignItems: 'center', + justifyContent: 'space-between', + padding: theme.spacing(2, 3), + }, - overlayHeaderClose: { - color: theme.palette.bursts.fontColor, - }, + overlayHeaderClose: { + color: theme.palette.bursts.fontColor, + }, - marginMobileSidebar: { - marginBottom: `${sidebarConfig.mobileSidebarHeight}px`, - }, - }; - }); + marginMobileSidebar: props => ({ + marginBottom: `${props.sidebarConfig.mobileSidebarHeight}px`, + }), + }), +); const sortSidebarGroupsForPriority = (children: React.ReactElement[]) => orderBy( @@ -117,7 +116,7 @@ const OverlayMenu = ({ onClose, }: OverlayMenuProps) => { const { sidebarConfig } = useContext(SidebarConfigContext); - const classes = useStyles({ sidebarConfig })(); + const classes = useStyles({ sidebarConfig }); return ( ({ export const MobileSidebar = (props: MobileSidebarProps) => { const { sidebarConfig } = useContext(SidebarConfigContext); const { children } = props; - const classes = useStyles({ sidebarConfig })(); + const classes = useStyles({ sidebarConfig }); const location = useLocation(); const [selectedMenuItemIndex, setSelectedMenuItemIndex] = useState(-1); diff --git a/packages/core-components/src/layout/Sidebar/Page.tsx b/packages/core-components/src/layout/Sidebar/Page.tsx index 88c6c19c0e..4e2dcd8770 100644 --- a/packages/core-components/src/layout/Sidebar/Page.tsx +++ b/packages/core-components/src/layout/Sidebar/Page.tsx @@ -32,41 +32,35 @@ import useMediaQuery from '@material-ui/core/useMediaQuery'; export type SidebarPageClassKey = 'root'; -const useStyles = ({ - isPinned, - sidebarConfig, -}: { - isPinned: boolean; - sidebarConfig: SidebarConfig; -}) => - makeStyles( - theme => { - return { - root: { - width: '100%', - transition: 'padding-left 0.1s ease-out', - isolation: 'isolate', - [theme.breakpoints.up('sm')]: { - paddingLeft: () => - isPinned - ? sidebarConfig.drawerWidthOpen - : sidebarConfig.drawerWidthClosed, - }, - [theme.breakpoints.down('xs')]: { - paddingBottom: sidebarConfig.mobileSidebarHeight, - }, - }, - content: { - zIndex: 0, - isolation: 'isolate', - '&:focus': { - outline: 0, - }, - }, - }; +const useStyles = makeStyles< + BackstageTheme, + { sidebarConfig: SidebarConfig; isPinned: boolean } +>( + theme => ({ + root: props => ({ + width: '100%', + transition: 'padding-left 0.1s ease-out', + isolation: 'isolate', + [theme.breakpoints.up('sm')]: { + paddingLeft: () => + props.isPinned + ? props.sidebarConfig.drawerWidthOpen + : props.sidebarConfig.drawerWidthClosed, + }, + [theme.breakpoints.down('xs')]: { + paddingBottom: props.sidebarConfig.mobileSidebarHeight, + }, + }), + content: { + zIndex: 0, + isolation: 'isolate', + '&:focus': { + outline: 0, + }, }, - { name: 'BackstageSidebarPage' }, - )(); + }), + { name: 'BackstageSidebarPage' }, +); /** * Type of `SidebarPinStateContext` diff --git a/packages/core-components/src/layout/Sidebar/SidebarGroup.tsx b/packages/core-components/src/layout/Sidebar/SidebarGroup.tsx index cc43963112..55b5e770b0 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarGroup.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarGroup.tsx @@ -48,26 +48,25 @@ export interface SidebarGroupProps extends BottomNavigationActionProps { children?: React.ReactNode; } -const useStyles = ({ sidebarConfig }: { sidebarConfig: SidebarConfig }) => - makeStyles(theme => { - return { - root: { - flexGrow: 0, - margin: theme.spacing(0, 2), - color: theme.palette.navigation.color, - }, +const useStyles = makeStyles( + theme => ({ + root: { + flexGrow: 0, + margin: theme.spacing(0, 2), + color: theme.palette.navigation.color, + }, - selected: { - color: `${theme.palette.navigation.selectedColor}!important`, - borderTop: `solid ${sidebarConfig.selectedIndicatorWidth}px ${theme.palette.navigation.indicator}`, - marginTop: '-1px', - }, + selected: props => ({ + color: `${theme.palette.navigation.selectedColor}!important`, + borderTop: `solid ${props.sidebarConfig.selectedIndicatorWidth}px ${theme.palette.navigation.indicator}`, + marginTop: '-1px', + }), - label: { - display: 'none', - }, - }; - }); + label: { + display: 'none', + }, + }), +); /** * Returns a MUI `BottomNavigationAction`, which is aware of the current location & the selected item in the `BottomNavigation`, @@ -79,7 +78,7 @@ const useStyles = ({ sidebarConfig }: { sidebarConfig: SidebarConfig }) => const MobileSidebarGroup = (props: SidebarGroupProps) => { const { to, label, icon, value } = props; const { sidebarConfig } = useContext(SidebarConfigContext); - const classes = useStyles({ sidebarConfig })(); + const classes = useStyles({ sidebarConfig }); const location = useLocation(); const { selectedMenuItemIndex, setSelectedMenuItemIndex } = useContext(MobileSidebarContext); diff --git a/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx b/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx index ab83ba3a49..d1b79263eb 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx @@ -25,66 +25,68 @@ import { } from './config'; import { BackstageTheme } from '@backstage/theme'; -const useStyles = (props: { left: number; submenuConfig: SubmenuConfig }) => - makeStyles( - theme => ({ - root: { - zIndex: 1000, - position: 'relative', - overflow: 'visible', - width: theme.spacing(7) + 1, +const useStyles = makeStyles< + BackstageTheme, + { submenuConfig: SubmenuConfig; left: number } +>( + theme => ({ + root: { + zIndex: 1000, + position: 'relative', + overflow: 'visible', + width: theme.spacing(7) + 1, + }, + drawer: props => ({ + display: 'flex', + flexFlow: 'column nowrap', + alignItems: 'flex-start', + position: 'fixed', + [theme.breakpoints.up('sm')]: { + marginLeft: props.left, + transition: theme.transitions.create('margin-left', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.shortest, + }), }, - drawer: { - display: 'flex', - flexFlow: 'column nowrap', - alignItems: 'flex-start', - position: 'fixed', - [theme.breakpoints.up('sm')]: { - marginLeft: props.left, - transition: theme.transitions.create('margin-left', { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.shortest, - }), - }, - top: 0, - bottom: 0, - padding: 0, - background: theme.palette.navigation.submenu?.background ?? '#404040', - overflowX: 'hidden', - msOverflowStyle: 'none', - scrollbarWidth: 'none', - cursor: 'default', - width: props.submenuConfig.drawerWidthClosed, - transitionDelay: `${props.submenuConfig.defaultOpenDelayMs}ms`, - '& > *': { - flexShrink: 0, - }, - '&::-webkit-scrollbar': { - display: 'none', - }, + top: 0, + bottom: 0, + padding: 0, + background: theme.palette.navigation.submenu?.background ?? '#404040', + overflowX: 'hidden', + msOverflowStyle: 'none', + scrollbarWidth: 'none', + cursor: 'default', + width: props.submenuConfig.drawerWidthClosed, + transitionDelay: `${props.submenuConfig.defaultOpenDelayMs}ms`, + '& > *': { + flexShrink: 0, }, - drawerOpen: { - width: props.submenuConfig.drawerWidthOpen, - [theme.breakpoints.down('xs')]: { - width: '100%', - position: 'relative', - paddingLeft: theme.spacing(3), - left: 0, - top: 0, - }, - }, - title: { - fontSize: 24, - fontWeight: 500, - color: '#FFF', - padding: 20, - [theme.breakpoints.down('xs')]: { - display: 'none', - }, + '&::-webkit-scrollbar': { + display: 'none', }, }), - { name: 'BackstageSidebarSubmenu' }, - ); + drawerOpen: props => ({ + width: props.submenuConfig.drawerWidthOpen, + [theme.breakpoints.down('xs')]: { + width: '100%', + position: 'relative', + paddingLeft: theme.spacing(3), + left: 0, + top: 0, + }, + }), + title: { + fontSize: 24, + fontWeight: 500, + color: '#FFF', + padding: 20, + [theme.breakpoints.down('xs')]: { + display: 'none', + }, + }, + }), + { name: 'BackstageSidebarSubmenu' }, +); /** * Holds a title for text Header of a sidebar submenu and children @@ -108,7 +110,7 @@ export const SidebarSubmenu = (props: SidebarSubmenuProps) => { const left = isOpen ? sidebarConfig.drawerWidthOpen : sidebarConfig.drawerWidthClosed; - const classes = useStyles({ left, submenuConfig })(); + const classes = useStyles({ left, submenuConfig }); const { isHoveredOn } = useContext(SidebarItemWithSubmenuContext); const [isSubmenuOpen, setIsSubmenuOpen] = useState(false); diff --git a/packages/core-components/src/layout/Sidebar/config.ts b/packages/core-components/src/layout/Sidebar/config.ts index e39109d6db..a74e7dd6cc 100644 --- a/packages/core-components/src/layout/Sidebar/config.ts +++ b/packages/core-components/src/layout/Sidebar/config.ts @@ -20,16 +20,19 @@ const drawerWidthClosed = 72; const iconPadding = 24; const userBadgePadding = 18; +/** @public **/ export type SidebarOptions = { drawerWidthClosed?: number; drawerWidthOpen?: number; }; +/** @public **/ export type SubmenuOptions = { drawerWidthClosed?: number; drawerWidthOpen?: number; }; +/** @internal **/ export type SidebarConfig = { drawerWidthClosed: number; drawerWidthOpen: number; @@ -75,6 +78,7 @@ export const makeSidebarConfig = ( sidebarConfig.drawerWidthClosed - sidebarConfig.userBadgePadding * 2, }); +/** @internal **/ export type SubmenuConfig = { drawerWidthClosed: number; drawerWidthOpen: number; diff --git a/packages/core-components/src/layout/Sidebar/index.ts b/packages/core-components/src/layout/Sidebar/index.ts index 96fedaa75a..ecc573fbda 100644 --- a/packages/core-components/src/layout/Sidebar/index.ts +++ b/packages/core-components/src/layout/Sidebar/index.ts @@ -59,4 +59,8 @@ export { SidebarContext, sidebarConfig, } from './config'; -export type { SidebarContextType } from './config'; +export type { + SidebarContextType, + SidebarOptions, + SubmenuOptions, +} from './config';