diff --git a/.changeset/dull-bulldogs-laugh.md b/.changeset/dull-bulldogs-laugh.md new file mode 100644 index 0000000000..f49aa694b6 --- /dev/null +++ b/.changeset/dull-bulldogs-laugh.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Create a short delay when `` is opened diff --git a/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx b/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx index 1e9afe86ef..029c3386d2 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx @@ -16,7 +16,7 @@ import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import classnames from 'classnames'; -import React, { ReactNode, useContext } from 'react'; +import React, { ReactNode, useContext, useEffect, useState } from 'react'; import { SidebarItemWithSubmenuContext, sidebarConfig, @@ -48,7 +48,7 @@ const useStyles = (props: { left: number }) => scrollbarWidth: 'none', cursor: 'default', width: submenuConfig.drawerWidthClosed, - borderRight: `1px solid #383838`, + transitionDelay: `${submenuConfig.defaultOpenDelayMs}ms`, '& > *': { flexShrink: 0, }, @@ -91,10 +91,16 @@ export const SidebarSubmenu = (props: SidebarSubmenuProps) => { const classes = useStyles({ left: left })(); const { isHoveredOn } = useContext(SidebarItemWithSubmenuContext); + const [isSubmenuOpen, setIsSubmenuOpen] = useState(false); + + useEffect(() => { + setIsSubmenuOpen(isHoveredOn); + }, [isHoveredOn]); + return (
diff --git a/packages/core-components/src/layout/Sidebar/config.ts b/packages/core-components/src/layout/Sidebar/config.ts index dbcdb7d788..3796898fc7 100644 --- a/packages/core-components/src/layout/Sidebar/config.ts +++ b/packages/core-components/src/layout/Sidebar/config.ts @@ -40,18 +40,7 @@ export const sidebarConfig = { export const submenuConfig = { drawerWidthClosed: 0, drawerWidthOpen: 202, - // As per NN/g's guidance on timing for exposing hidden content - // See https://www.nngroup.com/articles/timing-exposing-content/ - defaultOpenDelayMs: 100, - defaultCloseDelayMs: 0, - defaultFadeDuration: 200, - logoHeight: 32, - iconContainerWidth: drawerWidthClosed, - iconSize: drawerWidthClosed - iconPadding * 2, - iconPadding, - selectedIndicatorWidth: 3, - userBadgePadding, - userBadgeDiameter: drawerWidthClosed - userBadgePadding * 2, + defaultOpenDelayMs: sidebarConfig.defaultOpenDelayMs + 200, }; export const SIDEBAR_INTRO_LOCAL_STORAGE =