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 sectionComponent = (
<NavBarItemMenuItem
className={styles.section}
key={section.key}
item={section}
state={state}
onNavigate={onNavigate}
/>
<NavBarItemMenuItem key={section.key} item={section} state={state} onNavigate={onNavigate} />
);
const subTitleComponent = (
@ -131,8 +125,5 @@ function getStyles(
padding: ${theme.spacing(1)} ${theme.spacing(2)} ${theme.spacing(1)};
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 { mergeProps } from '@react-aria/utils';
import { Node } from '@react-types/shared';
import classNames from 'classnames';
import { useNavBarItemMenuContext } from './context';
export interface NavBarItemMenuItemProps {
className?: string;
item: Node<NavModelItem>;
state: TreeState<NavModelItem>;
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 { key, rendered } = item;
const ref = useRef<HTMLLIElement>(null);
@ -28,7 +26,8 @@ export function NavBarItemMenuItem({ className, item, state, onNavigate }: NavBa
const [isFocused, setFocused] = useState(false);
const { focusProps } = useFocus({ onFocusChange: setFocused, isDisabled });
const theme = useTheme2();
const styles = getStyles(theme, isFocused);
const isSection = item.value.menuItemType === 'section';
const styles = getStyles(theme, isFocused, isSection);
const onAction = () => {
onNavigate(item.value);
onClose();
@ -57,20 +56,22 @@ export function NavBarItemMenuItem({ className, item, state, onNavigate }: NavBa
});
return (
<li
{...mergeProps(menuItemProps, focusProps, keyboardProps)}
ref={ref}
className={classNames(styles.menuItem, className)}
>
<li {...mergeProps(menuItemProps, focusProps, keyboardProps)} ref={ref} className={styles.menuItem}>
{rendered}
</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 {
menuItem: css`
background-color: ${isFocused ? theme.colors.action.hover : 'transparent'};
background-color: ${backgroundColor};
color: ${isFocused ? 'white' : theme.colors.text.primary};
&:focus-visible {
@ -78,8 +79,7 @@ function getStyles(theme: GrafanaTheme2, isFocused: boolean) {
box-shadow: none;
color: ${theme.colors.text.primary};
outline: 2px solid ${theme.colors.primary.main};
// Need to add condition, header is 0, otherwise -2
outline-offset: -0px;
outline-offset: -2px;
transition: none;
}
`,