IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Move the background style to the parent component (#43359)

Browse Source
This commit is contained in:
Ashley Harrison
2021-12-20 16:00:29 +00:00
committed by GitHub
parent dc163a958d
commit 6f8e651cdb
3 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/app/core/components/NavBar/NavBarItem.tsx
View File

@@ -123,7 +123,6 @@ const getStyles = (
) => ({ ) => ({
...getNavBarItemWithoutMenuStyles(theme, isActive), ...getNavBarItemWithoutMenuStyles(theme, isActive),
header: css` header: css`
background-color: ${theme.colors.background.secondary};
color: ${theme.colors.text.primary}; color: ${theme.colors.text.primary};
height: ${theme.components.sidemenu.width - (adjustHeightForBorder ? 2 : 1)}px; height: ${theme.components.sidemenu.width - (adjustHeightForBorder ? 2 : 1)}px;
font-size: ${theme.typography.h4.fontSize}; font-size: ${theme.typography.h4.fontSize};

11
public/app/core/components/NavBar/NavBarItemMenu.tsx
View File

@@ -50,7 +50,13 @@ export function NavBarItemMenu(props: NavBarItemMenuProps): ReactElement | null
const menuSubTitle = section.value.subTitle; const menuSubTitle = section.value.subTitle;
const sectionComponent = ( const sectionComponent = (
<NavBarItemMenuItem key={section.key} item={section} state={state} onNavigate={onNavigate} /> <NavBarItemMenuItem
className={styles.section}
key={section.key}
item={section}
state={state}
onNavigate={onNavigate}
/>
); );
const subTitleComponent = ( const subTitleComponent = (
@@ -124,5 +130,8 @@ function getStyles(
padding: ${theme.spacing(1)} ${theme.spacing(2)} ${theme.spacing(1)}; padding: ${theme.spacing(1)} ${theme.spacing(2)} ${theme.spacing(1)};
white-space: nowrap; white-space: nowrap;
`, `,
section: css`
background-color: ${theme.colors.background.secondary};
`,
}; };
} }

6
public/app/core/components/NavBar/NavBarItemMenuItem.tsx
View File

@@ -7,16 +7,18 @@ import { useFocus } from '@react-aria/interactions';
import { TreeState } from '@react-stately/tree'; import { TreeState } from '@react-stately/tree';
import { mergeProps } from '@react-aria/utils'; import { mergeProps } from '@react-aria/utils';
import { Node } from '@react-types/shared'; import { Node } from '@react-types/shared';
import classNames from 'classnames';
import { useNavBarItemMenuContext } from './context'; import { useNavBarItemMenuContext } from './context';
export interface NavBarItemMenuItemProps { export interface NavBarItemMenuItemProps {
className?: string;
item: Node<NavModelItem>; item: Node<NavModelItem>;
state: TreeState<NavModelItem>; state: TreeState<NavModelItem>;
onNavigate: (item: NavModelItem) => void; onNavigate: (item: NavModelItem) => void;
} }
export function NavBarItemMenuItem({ item, state, onNavigate }: NavBarItemMenuItemProps): ReactElement { export function NavBarItemMenuItem({ className, item, state, onNavigate }: NavBarItemMenuItemProps): ReactElement {
const { onClose } = useNavBarItemMenuContext(); const { onClose } = useNavBarItemMenuContext();
const { key, rendered } = item; const { key, rendered } = item;
const ref = useRef<HTMLLIElement>(null); const ref = useRef<HTMLLIElement>(null);
@@ -46,7 +48,7 @@ export function NavBarItemMenuItem({ item, state, onNavigate }: NavBarItemMenuIt
); );
return ( return (
<li {...mergeProps(menuItemProps, focusProps)} ref={ref} className={styles.menuItem}> <li {...mergeProps(menuItemProps, focusProps)} ref={ref} className={classNames(styles.menuItem, className)}>
{rendered} {rendered}
</li> </li>
); );