From 2986f503e4b952a128eb10b36c487f27e77d17ff Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Tue, 10 Aug 2021 17:23:50 +0200 Subject: [PATCH 1/5] Minor adjustments to Sidebar UX Signed-off-by: Philipp Hugenroth --- .../core-components/src/layout/Sidebar/Bar.tsx | 11 ++++------- .../core-components/src/layout/Sidebar/Items.tsx | 16 +++++++++------- .../core-components/src/layout/Sidebar/config.ts | 2 +- packages/theme/src/themes.ts | 2 ++ packages/theme/src/types.ts | 1 + 5 files changed, 17 insertions(+), 15 deletions(-) diff --git a/packages/core-components/src/layout/Sidebar/Bar.tsx b/packages/core-components/src/layout/Sidebar/Bar.tsx index 65da4d2d75..05bb751cc8 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 ${theme.palette.navigation.divider}`, 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/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx index 1068a877bd..00771c837b 100644 --- a/packages/core-components/src/layout/Sidebar/Items.tsx +++ b/packages/core-components/src/layout/Sidebar/Items.tsx @@ -344,13 +344,15 @@ export const SidebarSpacer = styled('div')({ height: 8, }); -export const SidebarDivider = styled('hr')({ - height: 1, - width: '100%', - background: '#383838', - border: 'none', - margin: '12px 0px', -}); +export const SidebarDivider = styled('hr')( + ({ theme }: { theme: BackstageTheme }) => ({ + height: 1, + width: '100%', + background: theme.palette.navigation.divider, + border: 'none', + margin: '12px 0px', + }), +); const styledScrollbar = (theme: Theme): CreateCSSProperties => ({ overflowY: 'auto', 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, diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts index b31786aae9..03a8fad2a2 100644 --- a/packages/theme/src/themes.ts +++ b/packages/theme/src/themes.ts @@ -66,6 +66,7 @@ export const lightTheme = createTheme({ background: '#171717', indicator: '#9BF0E1', color: '#b5b5b5', + divider: '#383838', selectedColor: '#FFF', }, pinSidebarButton: { @@ -132,6 +133,7 @@ export const darkTheme = createTheme({ background: '#424242', indicator: '#9BF0E1', color: '#b5b5b5', + divider: '#383838', selectedColor: '#FFF', }, pinSidebarButton: { diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts index c2758c29e7..2c4d198a4f 100644 --- a/packages/theme/src/types.ts +++ b/packages/theme/src/types.ts @@ -47,6 +47,7 @@ type PaletteAdditions = { background: string; indicator: string; color: string; + divider: string; selectedColor: string; }; tabbar: { From a3f3cff3bc8a91d678ec7a5b97ee5a88f65335e9 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Tue, 10 Aug 2021 18:15:37 +0200 Subject: [PATCH 2/5] Add changeset Signed-off-by: Philipp Hugenroth --- .changeset/tender-dingos-burn.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/tender-dingos-burn.md diff --git a/.changeset/tender-dingos-burn.md b/.changeset/tender-dingos-burn.md new file mode 100644 index 0000000000..fa52bfcead --- /dev/null +++ b/.changeset/tender-dingos-burn.md @@ -0,0 +1,6 @@ +--- +'@backstage/core-components': patch +'@backstage/theme': patch +--- + +Change the default hover experience for the sidebar to be not jumpy & add visual separation between sidebar & Entity Page tabs for dark mode. From ae5891ac61f4640376938e0a5c88b4b6818fa61b Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Wed, 11 Aug 2021 12:31:42 +0200 Subject: [PATCH 3/5] Add BackstageTheme to core-components imports Signed-off-by: Philipp Hugenroth --- packages/core-components/api-report.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index 42404fb0c0..14ed06d37c 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -7,6 +7,7 @@ import { ApiRef } from '@backstage/core-plugin-api'; import { BackstageIdentityApi } from '@backstage/core-plugin-api'; +import { BackstageTheme } from '@backstage/theme'; import { Breadcrumbs as Breadcrumbs_2 } from '@material-ui/core'; import { ButtonProps } from '@material-ui/core'; import { ButtonTypeMap } from '@material-ui/core'; @@ -1604,6 +1605,13 @@ export const SidebarDivider: React_2.ComponentType< > & StyledComponentProps<'root'> & { className?: string | undefined; + } & Pick< + { + theme: BackstageTheme; + }, + never + > & { + theme?: BackstageTheme | undefined; } >; From 7f9676b242eeba6cd521c5b13139130b8746914e Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Mon, 16 Aug 2021 11:39:39 +0200 Subject: [PATCH 4/5] Remove added color from theme types to prevent version bump Signed-off-by: Philipp Hugenroth --- .../core-components/src/layout/Sidebar/Bar.tsx | 2 +- .../core-components/src/layout/Sidebar/Items.tsx | 16 +++++++--------- packages/theme/src/themes.ts | 2 -- packages/theme/src/types.ts | 1 - 4 files changed, 8 insertions(+), 13 deletions(-) diff --git a/packages/core-components/src/layout/Sidebar/Bar.tsx b/packages/core-components/src/layout/Sidebar/Bar.tsx index 05bb751cc8..f928c4b7c4 100644 --- a/packages/core-components/src/layout/Sidebar/Bar.tsx +++ b/packages/core-components/src/layout/Sidebar/Bar.tsx @@ -42,7 +42,7 @@ const useStyles = makeStyles(theme => ({ msOverflowStyle: 'none', scrollbarWidth: 'none', width: sidebarConfig.drawerWidthClosed, - borderRight: `1px solid ${theme.palette.navigation.divider}`, + borderRight: `1px solid #383838`, transition: theme.transitions.create('width', { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.shortest, diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx index 00771c837b..1068a877bd 100644 --- a/packages/core-components/src/layout/Sidebar/Items.tsx +++ b/packages/core-components/src/layout/Sidebar/Items.tsx @@ -344,15 +344,13 @@ export const SidebarSpacer = styled('div')({ height: 8, }); -export const SidebarDivider = styled('hr')( - ({ theme }: { theme: BackstageTheme }) => ({ - height: 1, - width: '100%', - background: theme.palette.navigation.divider, - border: 'none', - margin: '12px 0px', - }), -); +export const SidebarDivider = styled('hr')({ + height: 1, + width: '100%', + background: '#383838', + border: 'none', + margin: '12px 0px', +}); const styledScrollbar = (theme: Theme): CreateCSSProperties => ({ overflowY: 'auto', diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts index 03a8fad2a2..b31786aae9 100644 --- a/packages/theme/src/themes.ts +++ b/packages/theme/src/themes.ts @@ -66,7 +66,6 @@ export const lightTheme = createTheme({ background: '#171717', indicator: '#9BF0E1', color: '#b5b5b5', - divider: '#383838', selectedColor: '#FFF', }, pinSidebarButton: { @@ -133,7 +132,6 @@ export const darkTheme = createTheme({ background: '#424242', indicator: '#9BF0E1', color: '#b5b5b5', - divider: '#383838', selectedColor: '#FFF', }, pinSidebarButton: { diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts index 2c4d198a4f..c2758c29e7 100644 --- a/packages/theme/src/types.ts +++ b/packages/theme/src/types.ts @@ -47,7 +47,6 @@ type PaletteAdditions = { background: string; indicator: string; color: string; - divider: string; selectedColor: string; }; tabbar: { From 65344071e464131e1f6a2aa00b8cebd866fc9515 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Mon, 16 Aug 2021 12:03:51 +0200 Subject: [PATCH 5/5] Adjust api report & changeset Signed-off-by: Philipp Hugenroth --- .changeset/tender-dingos-burn.md | 1 - packages/core-components/api-report.md | 8 -------- 2 files changed, 9 deletions(-) diff --git a/.changeset/tender-dingos-burn.md b/.changeset/tender-dingos-burn.md index fa52bfcead..0801d9d971 100644 --- a/.changeset/tender-dingos-burn.md +++ b/.changeset/tender-dingos-burn.md @@ -1,6 +1,5 @@ --- '@backstage/core-components': patch -'@backstage/theme': 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/api-report.md b/packages/core-components/api-report.md index 14ed06d37c..42404fb0c0 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -7,7 +7,6 @@ import { ApiRef } from '@backstage/core-plugin-api'; import { BackstageIdentityApi } from '@backstage/core-plugin-api'; -import { BackstageTheme } from '@backstage/theme'; import { Breadcrumbs as Breadcrumbs_2 } from '@material-ui/core'; import { ButtonProps } from '@material-ui/core'; import { ButtonTypeMap } from '@material-ui/core'; @@ -1605,13 +1604,6 @@ export const SidebarDivider: React_2.ComponentType< > & StyledComponentProps<'root'> & { className?: string | undefined; - } & Pick< - { - theme: BackstageTheme; - }, - never - > & { - theme?: BackstageTheme | undefined; } >;