diff --git a/packages/core-components/src/layout/Sidebar/Intro.tsx b/packages/core-components/src/layout/Sidebar/Intro.tsx index 05171bb089..9f65be946b 100644 --- a/packages/core-components/src/layout/Sidebar/Intro.tsx +++ b/packages/core-components/src/layout/Sidebar/Intro.tsx @@ -40,50 +40,48 @@ export type SidebarIntroClassKey = const useStyles = ({ sidebarConfig }: { sidebarConfig: SidebarConfig }) => makeStyles( - theme => { - return { - 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, + 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, + }), }, - 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, - }, - }; - }, + }, + introDismissText: { + fontSize: '0.7rem', + fontWeight: 'bold', + textTransform: 'uppercase', + letterSpacing: 1, + }, + introDismissIcon: { + width: 18, + height: 18, + marginRight: 12, + }, + }), { name: 'BackstageSidebarIntro' }, ); diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx index 9636959ada..79ab925d93 100644 --- a/packages/core-components/src/layout/Sidebar/Items.tsx +++ b/packages/core-components/src/layout/Sidebar/Items.tsx @@ -83,20 +83,7 @@ export type SidebarItemClassKey = | 'arrows' | 'selected'; -<<<<<<< HEAD const useStyles = ({ sidebarConfig }: { sidebarConfig: SidebarConfig }) => -======= -const useStyles = ({ - sidebarConfig: { - drawerWidthClosed, - drawerWidthOpen, - iconContainerWidth, - selectedIndicatorWidth, - }, -}: { - sidebarConfig: SidebarConfig; -}) => ->>>>>>> Changed sidebar to accept new props sidebarOptions and submenuOptions makeStyles( theme => { return { @@ -213,11 +200,7 @@ const useStyles = ({ }; }, { name: 'BackstageSidebarItem' }, -<<<<<<< HEAD ); -======= - )(); ->>>>>>> Changed sidebar to accept new props sidebarOptions and submenuOptions /** * Evaluates the routes of the SubmenuItems & nested DropdownItems. @@ -371,11 +354,7 @@ const SidebarItemBase = forwardRef((props, ref) => { ...navLinkProps } = props; const { sidebarConfig } = useContext(SidebarConfigContext); -<<<<<<< HEAD const classes = useStyles({ sidebarConfig })(); -======= - const classes = useStyles({ sidebarConfig }); ->>>>>>> Changed sidebar to accept new props sidebarOptions and submenuOptions // XXX (@koroeskohr): unsure this is optimal. But I just really didn't want to have the item component // depend on the current location, and at least have it being optionally forced to selected. // Still waiting on a Q answered to fine tune the implementation @@ -449,11 +428,7 @@ const SidebarItemWithSubmenu = ({ children: React.ReactElement; }) => { const { sidebarConfig } = useContext(SidebarConfigContext); -<<<<<<< HEAD const classes = useStyles({ sidebarConfig })(); -======= - const classes = useStyles({ sidebarConfig }); ->>>>>>> Changed sidebar to accept new props sidebarOptions and submenuOptions const [isHoveredOn, setIsHoveredOn] = useState(false); const location = useLocation(); const isActive = useLocationMatch(children, location); @@ -543,13 +518,8 @@ type SidebarSearchFieldProps = { export function SidebarSearchField(props: SidebarSearchFieldProps) { const { sidebarConfig } = useContext(SidebarConfigContext); -<<<<<<< HEAD const [input, setInput] = useState(''); const classes = useStyles({ sidebarConfig })(); -======= - const classes = useStyles({ sidebarConfig }); - const [input, setInput] = useState(''); ->>>>>>> Changed sidebar to accept new props sidebarOptions and submenuOptions const Icon = props.icon ? props.icon : SearchIcon; const search = () => { @@ -678,11 +648,7 @@ export const SidebarScrollWrapper = styled('div')(({ theme }) => { */ export const SidebarExpandButton = () => { const { sidebarConfig } = useContext(SidebarConfigContext); -<<<<<<< HEAD const classes = useStyles({ sidebarConfig })(); -======= - const classes = useStyles({ sidebarConfig }); ->>>>>>> Changed sidebar to accept new props sidebarOptions and submenuOptions 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 892bb29719..8bf5198ea8 100644 --- a/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx +++ b/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx @@ -28,11 +28,7 @@ import { orderBy } from 'lodash'; import React, { createContext, useEffect, useState, useContext } from 'react'; import { useLocation } from 'react-router'; import { SidebarGroup } from './SidebarGroup'; -<<<<<<< HEAD import { SidebarConfigContext, SidebarContext, SidebarConfig } from './config'; -======= -import { SidebarConfigContext, SidebarConfig } from './config'; ->>>>>>> Changed sidebar to accept new props sidebarOptions and submenuOptions /** * Type of `MobileSidebarContext` @@ -63,11 +59,7 @@ type OverlayMenuProps = { children?: React.ReactNode; }; -<<<<<<< HEAD const useStyles = ({ sidebarConfig }: { sidebarConfig: SidebarConfig }) => -======= -const useStyles = ({ sidebarConfig }: { sidebarConfig: SidebarConfig }) => ->>>>>>> Changed sidebar to accept new props sidebarOptions and submenuOptions makeStyles(theme => { return { root: { @@ -107,11 +99,7 @@ const useStyles = ({ sidebarConfig }: { sidebarConfig: SidebarConfig }) => marginBottom: `${sidebarConfig.mobileSidebarHeight}px`, }, }; -<<<<<<< HEAD }) -======= - })(); ->>>>>>> Changed sidebar to accept new props sidebarOptions and submenuOptions const sortSidebarGroupsForPriority = (children: React.ReactElement[]) => orderBy( @@ -129,11 +117,7 @@ const OverlayMenu = ({ onClose, }: OverlayMenuProps) => { const { sidebarConfig } = useContext(SidebarConfigContext); -<<<<<<< HEAD const classes = useStyles({ sidebarConfig })(); -======= - const classes = useStyles({ sidebarConfig }); ->>>>>>> Changed sidebar to accept new props sidebarOptions and submenuOptions return ( ({ export const MobileSidebar = (props: MobileSidebarProps) => { const { sidebarConfig } = useContext(SidebarConfigContext); const { children } = props; -<<<<<<< HEAD const classes = useStyles({ sidebarConfig })(); -======= - const { sidebarConfig } = useContext(SidebarConfigContext); - const classes = useStyles({ sidebarConfig }); ->>>>>>> Changed sidebar to accept new props sidebarOptions and submenuOptions const location = useLocation(); const [selectedMenuItemIndex, setSelectedMenuItemIndex] = useState(-1); diff --git a/packages/core-components/src/layout/Sidebar/SidebarGroup.tsx b/packages/core-components/src/layout/Sidebar/SidebarGroup.tsx index 92a4bb49ef..cc43963112 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarGroup.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarGroup.tsx @@ -67,11 +67,7 @@ const useStyles = ({ sidebarConfig }: { sidebarConfig: SidebarConfig }) => display: 'none', }, }; -<<<<<<< HEAD }); -======= - })(); ->>>>>>> Changed sidebar to accept new props sidebarOptions and submenuOptions /** * Returns a MUI `BottomNavigationAction`, which is aware of the current location & the selected item in the `BottomNavigation`, @@ -83,11 +79,7 @@ const useStyles = ({ sidebarConfig }: { sidebarConfig: SidebarConfig }) => const MobileSidebarGroup = (props: SidebarGroupProps) => { const { to, label, icon, value } = props; const { sidebarConfig } = useContext(SidebarConfigContext); -<<<<<<< HEAD const classes = useStyles({ sidebarConfig })(); -======= - const classes = useStyles({ sidebarConfig }); ->>>>>>> Changed sidebar to accept new props sidebarOptions and submenuOptions 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 ff0086bffb..ab83ba3a49 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx @@ -25,7 +25,7 @@ import { } from './config'; import { BackstageTheme } from '@backstage/theme'; -const useStyles = (props: { left: number, submenuConfig: SubmenuConfig }) => +const useStyles = (props: { left: number; submenuConfig: SubmenuConfig }) => makeStyles( theme => ({ root: {