diff --git a/.changeset/tender-dingos-burn.md b/.changeset/tender-dingos-burn.md new file mode 100644 index 0000000000..0801d9d971 --- /dev/null +++ b/.changeset/tender-dingos-burn.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Change the default hover experience for the sidebar to be not jumpy & add visual separation between sidebar & Entity Page tabs for dark mode. diff --git a/packages/core-components/src/layout/Sidebar/Bar.tsx b/packages/core-components/src/layout/Sidebar/Bar.tsx index 65da4d2d75..f928c4b7c4 100644 --- a/packages/core-components/src/layout/Sidebar/Bar.tsx +++ b/packages/core-components/src/layout/Sidebar/Bar.tsx @@ -42,6 +42,7 @@ const useStyles = makeStyles(theme => ({ msOverflowStyle: 'none', scrollbarWidth: 'none', width: sidebarConfig.drawerWidthClosed, + borderRight: `1px solid #383838`, transition: theme.transitions.create('width', { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.shortest, @@ -60,14 +61,11 @@ const useStyles = makeStyles(theme => ({ duration: theme.transitions.duration.shorter, }), }, - drawerPeek: { - width: sidebarConfig.drawerWidthClosed + 4, - }, })); enum State { Closed, - Peek, + Idle, Open, } @@ -103,7 +101,7 @@ export const Sidebar = ({ setState(State.Open); }, openDelayMs); - setState(State.Peek); + setState(State.Idle); } }; @@ -115,7 +113,7 @@ export const Sidebar = ({ clearTimeout(hoverTimerRef.current); hoverTimerRef.current = undefined; } - if (state === State.Peek) { + if (state === State.Idle) { setState(State.Closed); } else if (state === State.Open) { hoverTimerRef.current = window.setTimeout(() => { @@ -143,7 +141,6 @@ export const Sidebar = ({ >
diff --git a/packages/core-components/src/layout/Sidebar/config.ts b/packages/core-components/src/layout/Sidebar/config.ts index 3d574d03bb..d2a690e38f 100644 --- a/packages/core-components/src/layout/Sidebar/config.ts +++ b/packages/core-components/src/layout/Sidebar/config.ts @@ -25,7 +25,7 @@ export const sidebarConfig = { drawerWidthOpen: 224, // As per NN/g's guidance on timing for exposing hidden content // See https://www.nngroup.com/articles/timing-exposing-content/ - defaultOpenDelayMs: 300, + defaultOpenDelayMs: 100, defaultCloseDelayMs: 0, defaultFadeDuration: 200, logoHeight: 32,