From 190f105901e73c089a5f46ace3404fd5c814d2b1 Mon Sep 17 00:00:00 2001 From: hiba-aldalaty Date: Fri, 7 Jan 2022 17:04:39 +0000 Subject: [PATCH 1/6] Add open delay for submenus in sidebar Signed-off-by: hiba-aldalaty --- .../src/layout/Sidebar/SidebarSubmenu.tsx | 27 ++++++++++++++++--- .../src/layout/Sidebar/config.ts | 13 +-------- 2 files changed, 25 insertions(+), 15 deletions(-) diff --git a/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx b/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx index 1e9afe86ef..223065cfc9 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx @@ -1,3 +1,4 @@ +/* eslint-disable no-console */ /* * Copyright 2021 The Backstage Authors * @@ -16,7 +17,13 @@ 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, + useRef, + useState, +} from 'react'; import { SidebarItemWithSubmenuContext, sidebarConfig, @@ -48,7 +55,6 @@ const useStyles = (props: { left: number }) => scrollbarWidth: 'none', cursor: 'default', width: submenuConfig.drawerWidthClosed, - borderRight: `1px solid #383838`, '& > *': { flexShrink: 0, }, @@ -91,10 +97,25 @@ export const SidebarSubmenu = (props: SidebarSubmenuProps) => { const classes = useStyles({ left: left })(); const { isHoveredOn } = useContext(SidebarItemWithSubmenuContext); + const [isSubmenuOpen, setIsSubmenuOpen] = useState(false); + const hoverTimerRef = useRef(); + + useEffect(() => { + if (hoverTimerRef.current) { + clearTimeout(hoverTimerRef.current); + hoverTimerRef.current = undefined; + } + if (isHoveredOn) { + hoverTimerRef.current = window.setTimeout(() => { + hoverTimerRef.current = undefined; + setIsSubmenuOpen(true); + }, submenuConfig.defaultOpenDelayMs); + } + }, [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 = From de2396da2435588ced3d5d7955747c34583da385 Mon Sep 17 00:00:00 2001 From: hiba-aldalaty Date: Fri, 7 Jan 2022 17:10:17 +0000 Subject: [PATCH 2/6] Add changeset Signed-off-by: hiba-aldalaty --- .changeset/dull-bulldogs-laugh.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/dull-bulldogs-laugh.md diff --git a/.changeset/dull-bulldogs-laugh.md b/.changeset/dull-bulldogs-laugh.md new file mode 100644 index 0000000000..06f470eb5e --- /dev/null +++ b/.changeset/dull-bulldogs-laugh.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Add a delay on opening submenus in the sidebar From 42f81cf45181a0f5789e607afe6a9c345979a2dc Mon Sep 17 00:00:00 2001 From: hiba-aldalaty Date: Fri, 7 Jan 2022 17:25:50 +0000 Subject: [PATCH 3/6] Update changeset Signed-off-by: hiba-aldalaty --- .changeset/dull-bulldogs-laugh.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/dull-bulldogs-laugh.md b/.changeset/dull-bulldogs-laugh.md index 06f470eb5e..dedd1d6430 100644 --- a/.changeset/dull-bulldogs-laugh.md +++ b/.changeset/dull-bulldogs-laugh.md @@ -2,4 +2,4 @@ '@backstage/core-components': patch --- -Add a delay on opening submenus in the sidebar +Create a delay when a Sidebar submenu opens From d5b17b28d1579f6c8e173e1d6bb8fd0eabe76ea6 Mon Sep 17 00:00:00 2001 From: hiba-aldalaty Date: Fri, 7 Jan 2022 17:31:52 +0000 Subject: [PATCH 4/6] Update changeset Signed-off-by: hiba-aldalaty --- .changeset/dull-bulldogs-laugh.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/dull-bulldogs-laugh.md b/.changeset/dull-bulldogs-laugh.md index dedd1d6430..f49aa694b6 100644 --- a/.changeset/dull-bulldogs-laugh.md +++ b/.changeset/dull-bulldogs-laugh.md @@ -2,4 +2,4 @@ '@backstage/core-components': patch --- -Create a delay when a Sidebar submenu opens +Create a short delay when `` is opened From c9394b67bcd31b4cbec91cdb079c7d3022be63e2 Mon Sep 17 00:00:00 2001 From: hiba-aldalaty Date: Mon, 10 Jan 2022 15:03:31 +0000 Subject: [PATCH 5/6] Use css transition to create submenu open delay instead of js Signed-off-by: hiba-aldalaty --- .../src/layout/Sidebar/SidebarSubmenu.tsx | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx b/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx index 223065cfc9..f5fe29492c 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx @@ -1,4 +1,3 @@ -/* eslint-disable no-console */ /* * Copyright 2021 The Backstage Authors * @@ -55,6 +54,7 @@ const useStyles = (props: { left: number }) => scrollbarWidth: 'none', cursor: 'default', width: submenuConfig.drawerWidthClosed, + transitionDelay: `${submenuConfig.defaultOpenDelayMs}ms`, '& > *': { flexShrink: 0, }, @@ -98,20 +98,11 @@ export const SidebarSubmenu = (props: SidebarSubmenuProps) => { const { isHoveredOn } = useContext(SidebarItemWithSubmenuContext); const [isSubmenuOpen, setIsSubmenuOpen] = useState(false); - const hoverTimerRef = useRef(); useEffect(() => { - if (hoverTimerRef.current) { - clearTimeout(hoverTimerRef.current); - hoverTimerRef.current = undefined; - } - if (isHoveredOn) { - hoverTimerRef.current = window.setTimeout(() => { - hoverTimerRef.current = undefined; - setIsSubmenuOpen(true); - }, submenuConfig.defaultOpenDelayMs); - } + setIsSubmenuOpen(isHoveredOn); }, [isHoveredOn]); + return (
Date: Mon, 10 Jan 2022 15:12:41 +0000 Subject: [PATCH 6/6] Remove unused import Signed-off-by: hiba-aldalaty --- .../core-components/src/layout/Sidebar/SidebarSubmenu.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx b/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx index f5fe29492c..029c3386d2 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx @@ -16,13 +16,7 @@ import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import classnames from 'classnames'; -import React, { - ReactNode, - useContext, - useEffect, - useRef, - useState, -} from 'react'; +import React, { ReactNode, useContext, useEffect, useState } from 'react'; import { SidebarItemWithSubmenuContext, sidebarConfig,