paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 42 Packages Projects Releases Wiki Activity

Updated core-components api-report, changed useStyles for components in Sidebar/

Browse Source 
Signed-off-by: Jonathan Ash <jonathan-ash@users.noreply.github.com>
This commit is contained in:
Jonathan Ash
2022-03-24 14:46:19 +00:00
parent 5a32db06b8
commit 35b78976e9
10 changed files with 372 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core-components/api-report.md
+12 -2
View File
@@ -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
```
packages/core-components/src/layout/Sidebar/Bar.tsx
+47 -51
View File
@@ -37,56 +37,52 @@ import { MobileSidebar } from './MobileSidebar';
/** @public */
export type SidebarClassKey = 'drawer' | 'drawerOpen';
const useStyles = ({ sidebarConfig }: { sidebarConfig: SidebarConfig }) =>
makeStyles<BackstageTheme>(
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<BackstageTheme, { sidebarConfig: SidebarConfig }>(
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<BackstageTheme>(
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;
packages/core-components/src/layout/Sidebar/Intro.tsx
+45 -46
View File
@@ -38,52 +38,51 @@ export type SidebarIntroClassKey =
| 'introDismissText'
| 'introDismissIcon';
const useStyles = ({ sidebarConfig }: { sidebarConfig: SidebarConfig }) =>
makeStyles<BackstageTheme>(
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<BackstageTheme, { sidebarConfig: SidebarConfig }>(
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();
packages/core-components/src/layout/Sidebar/Items.tsx
+116 -118
View File
@@ -83,124 +83,122 @@ export type SidebarItemClassKey =
| 'arrows'
| 'selected';
const useStyles = ({ sidebarConfig }: { sidebarConfig: SidebarConfig }) =>
makeStyles<BackstageTheme>(
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<BackstageTheme, { sidebarConfig: SidebarConfig }>(
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<BackstageTheme>(
theme => theme.breakpoints.down('md'),
packages/core-components/src/layout/Sidebar/MobileSidebar.tsx
+38 -39
View File
@@ -59,47 +59,46 @@ type OverlayMenuProps = {
children?: React.ReactNode;
};
const useStyles = ({ sidebarConfig }: { sidebarConfig: SidebarConfig }) =>
makeStyles<BackstageTheme>(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<BackstageTheme, { sidebarConfig: SidebarConfig }>(
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 (
<Drawer
@@ -168,7 +167,7 @@ export const MobileSidebarContext = createContext<MobileSidebarContextType>({
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<number>(-1);
packages/core-components/src/layout/Sidebar/Page.tsx
+28 -34
View File
@@ -32,41 +32,35 @@ import useMediaQuery from '@material-ui/core/useMediaQuery';
export type SidebarPageClassKey = 'root';
const useStyles = ({
isPinned,
sidebarConfig,
}: {
isPinned: boolean;
sidebarConfig: SidebarConfig;
}) =>
makeStyles<BackstageTheme>(
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`
packages/core-components/src/layout/Sidebar/SidebarGroup.tsx
+18 -19
View File
@@ -48,26 +48,25 @@ export interface SidebarGroupProps extends BottomNavigationActionProps {
children?: React.ReactNode;
}
const useStyles = ({ sidebarConfig }: { sidebarConfig: SidebarConfig }) =>
makeStyles<BackstageTheme>(theme => {
return {
root: {
flexGrow: 0,
margin: theme.spacing(0, 2),
color: theme.palette.navigation.color,
},
const useStyles = makeStyles<BackstageTheme, { sidebarConfig: SidebarConfig }>(
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);
packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx
+59 -57
View File
@@ -25,66 +25,68 @@ import {
} from './config';
import { BackstageTheme } from '@backstage/theme';
const useStyles = (props: { left: number; submenuConfig: SubmenuConfig }) =>
makeStyles<BackstageTheme>(
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);
packages/core-components/src/layout/Sidebar/config.ts
+4
View File
@@ -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;
packages/core-components/src/layout/Sidebar/index.ts
+5 -1
View File
@@ -59,4 +59,8 @@ export {
SidebarContext,
sidebarConfig,
} from './config';
export type { SidebarContextType } from './config';
export type {
SidebarContextType,
SidebarOptions,
SubmenuOptions,
} from './config';