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

Use outline -2px to guarantee visibility of outline (#43400)

Browse Source
This commit is contained in:
Ashley Harrison 2021-12-21 10:52:26 +00:00 committed by GitHub
parent e993f0c62e
commit c7f76df61e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -51,13 +51,7 @@ export function NavBarItemMenu(props: NavBarItemMenuProps): ReactElement | null
const menuSubTitle = section.value.subTitle; const menuSubTitle = section.value.subTitle;
const sectionComponent = ( const sectionComponent = (
<NavBarItemMenuItem <NavBarItemMenuItem key={section.key} item={section} state={state} onNavigate={onNavigate} />
className={styles.section}
key={section.key}
item={section}
state={state}
onNavigate={onNavigate}
/>
); );
const subTitleComponent = ( const subTitleComponent = (
@ -131,8 +125,5 @@ 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};
`,
}; };
} }

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

@ -7,18 +7,16 @@ import { useFocus, useKeyboard } 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({ className, item, state, onNavigate }: NavBarItemMenuItemProps): ReactElement { export function NavBarItemMenuItem({ item, state, onNavigate }: NavBarItemMenuItemProps): ReactElement {
const { onClose, onLeft } = useNavBarItemMenuContext(); const { onClose, onLeft } = useNavBarItemMenuContext();
const { key, rendered } = item; const { key, rendered } = item;
const ref = useRef<HTMLLIElement>(null); const ref = useRef<HTMLLIElement>(null);
@ -28,7 +26,8 @@ export function NavBarItemMenuItem({ className, item, state, onNavigate }: NavBa
const [isFocused, setFocused] = useState(false); const [isFocused, setFocused] = useState(false);
const { focusProps } = useFocus({ onFocusChange: setFocused, isDisabled }); const { focusProps } = useFocus({ onFocusChange: setFocused, isDisabled });
const theme = useTheme2(); const theme = useTheme2();
const styles = getStyles(theme, isFocused); const isSection = item.value.menuItemType === 'section';
const styles = getStyles(theme, isFocused, isSection);
const onAction = () => { const onAction = () => {
onNavigate(item.value); onNavigate(item.value);
onClose(); onClose();
@ -57,20 +56,22 @@ export function NavBarItemMenuItem({ className, item, state, onNavigate }: NavBa
}); });
return ( return (
<li <li {...mergeProps(menuItemProps, focusProps, keyboardProps)} ref={ref} className={styles.menuItem}>
{...mergeProps(menuItemProps, focusProps, keyboardProps)}
ref={ref}
className={classNames(styles.menuItem, className)}
>
{rendered} {rendered}
</li> </li>
); );
} }
function getStyles(theme: GrafanaTheme2, isFocused: boolean) { function getStyles(theme: GrafanaTheme2, isFocused: boolean, isSection: boolean) {
let backgroundColor = 'transparent';
if (isFocused) {
backgroundColor = theme.colors.action.hover;
} else if (isSection) {
backgroundColor = theme.colors.background.secondary;
}
return { return {
menuItem: css` menuItem: css`
background-color: ${isFocused ? theme.colors.action.hover : 'transparent'}; background-color: ${backgroundColor};
color: ${isFocused ? 'white' : theme.colors.text.primary}; color: ${isFocused ? 'white' : theme.colors.text.primary};
&:focus-visible { &:focus-visible {
@ -78,8 +79,7 @@ function getStyles(theme: GrafanaTheme2, isFocused: boolean) {
box-shadow: none; box-shadow: none;
color: ${theme.colors.text.primary}; color: ${theme.colors.text.primary};
outline: 2px solid ${theme.colors.primary.main}; outline: 2px solid ${theme.colors.primary.main};
// Need to add condition, header is 0, otherwise -2 outline-offset: -2px;
outline-offset: -0px;
transition: none; transition: none;
} }
`, `,