fix: new colors for multi-connection sidebar COMPASS-7844 (#5696)

* style: new base colors for sidebar items - with legacy override

* StyledNavigationItem

* placeholder colors first version

* active colors

* chore: dark mode support

* chore: add placeholder when connecting

* chore: poc of tab theming

* chore: add tests to new hook

* chore: move connection-color hook to compass-connectoins

* chore: fix linting issues

* chore: linting issues

* chore: fix linting issues and dependencies

* chore: force CI

* chore: remove unused console.log

* chore: fix color contrast

* chore: fix theme sync

* chore: remove cyclick dep

* chore: fix linting issues

* chore: revert package-lock.json

* chore: fix deps

* chore: fix dependencies

* chore: fix test that depends on the palette

* chore: fix placeholders

* chore: only enable theme when flag is on

* chore: show only new theme on new sidebar

* chore: fix theming

* chore: fix PR comments

* chore: clean up unused legacy sidebar styles

* Update packages/compass-connections-navigation/src/tree-item.tsx

Co-authored-by: Himanshu Singh <[email protected]>

* Update packages/compass-sidebar/src/components/legacy/sidebar.tsx

Co-authored-by: Himanshu Singh <[email protected]>

* chore: fix linting issues

* chore: memo styled component styles

* chore: remove marker on new sidebar styles

---------

Co-authored-by: Kevin Mas Ruiz <[email protected]>
Co-authored-by: Himanshu Singh <[email protected]>

Author: 3 people

packages/compass-components/src/components/placeholder.tsx

@@ -21,8 +21,6 @@ const move = keyframes({
 });
 
 const placeholder = css({
-  '--gradient-start': palette.gray.light2,
-  '--gradient-end': palette.gray.light3,
   alignSelf: 'center',
   borderRadius: 3,
   maxWidth: '80%',
@@ -39,11 +37,6 @@ const placeholder = css({
   animation: `${move} ${scale}s infinite linear`,
 });
 
-const placeholderDarkMode = css({
-  '--gradient-start': palette.gray.dark2,
-  '--gradient-end': palette.gray.dark4,
-});
-
 function getBoundRandom(min: number, max: number) {
   return Math.random() * (max - min) + min;
 }
@@ -57,6 +50,9 @@ const Placeholder: React.FunctionComponent<
     maxChar?: number;
     width?: CSSProperties['width'];
     height?: CSSProperties['height'];
+    gradientStart?: CSSProperties['color'];
+    gradientEnd?: CSSProperties['color'];
+    style?: CSSProperties;
     'data-testid'?: string;
   }
 > = ({
@@ -65,6 +61,9 @@ const Placeholder: React.FunctionComponent<
   maxChar = 15,
   width: propsWidth,
   height: propsHeight = spacing[3],
+  gradientStart,
+  gradientEnd,
+  style: propsStyle,
   ...props
 }) => {
   const darkMode = useDarkMode();
@@ -73,13 +72,26 @@ const Placeholder: React.FunctionComponent<
     return propsWidth || `${Math.round(getBoundRandom(minChar, maxChar))}ch`;
   }, [minChar, maxChar, propsWidth]);
 
+  const style = useMemo(
+    () => ({
+      width,
+      height: propsHeight,
+      '--gradient-start':
+        gradientStart || (darkMode ? palette.gray.dark2 : palette.gray.light2),
+      '--gradient-end':
+        gradientEnd || (darkMode ? palette.gray.dark4 : palette.gray.light3),
+      ...propsStyle,
+    }),
+    [darkMode, width, propsHeight, gradientStart, gradientEnd, propsStyle]
+  );
+
   return (
     <div
       {...props}
       role="presentation"
       data-testid={props['data-testid'] ?? 'placeholder'}
-      className={cx(placeholder, className, darkMode && placeholderDarkMode)}
-      style={{ width, height: propsHeight }}
+      className={cx(placeholder, className)}
+      style={style}
     ></div>
   );
 };

packages/compass-components/src/components/resizeable-sidebar.tsx

@@ -63,14 +63,24 @@ const ResizableSidebar = ({
   children,
   className,
   style,
+  useNewTheme,
   ...props
 }: {
   initialWidth?: number;
   minWidth?: number;
   children: JSX.Element;
+  useNewTheme?: boolean;
 } & React.HTMLProps<HTMLDivElement>): JSX.Element => {
   const darkMode = useDarkMode();
   const [width, setWidth] = useState(initialWidth);
+  const newThemeStyles = useNewTheme
+    ? {
+        '--item-color-active': darkMode ? palette.white : palette.gray.dark3,
+        '--item-bg-color-active': darkMode
+          ? palette.gray.dark2
+          : palette.gray.light2,
+      }
+    : {};
 
   const getMaxSidebarWidth = useCallback(() => {
     return Math.max(minWidth, 600);
@@ -101,6 +111,7 @@ const ResizableSidebar = ({
         minWidth,
         width: renderedWidth,
         flex: 'none',
+        ...newThemeStyles,
       }}
       {...props}
     >

packages/compass-components/src/components/workspace-tabs/tab.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { palette } from '@leafygreen-ui/palette';
 import { spacing } from '@leafygreen-ui/tokens';
@@ -60,6 +60,18 @@ const animatedSubtitleStyles = css({
   },
 });
 
+export type TabTheme = {
+  '--workspace-tab-background-color': string;
+  '--workspace-tab-selected-background-color': string;
+  '--workspace-tab-border-color': string;
+  '--workspace-tab-color': string;
+  '--workspace-tab-selected-color': string;
+  '&:focus-visible': {
+    '--workspace-tab-selected-color': string;
+    '--workspace-tab-border-color': string;
+  };
+};
+
 const tabLightThemeStyles = css({
   '--workspace-tab-background-color': palette.gray.light3,
   '--workspace-tab-selected-background-color': palette.white,
@@ -164,6 +176,7 @@ type TabProps = {
   iconGlyph: IconGlyph;
   tabContentId: string;
   subtitle?: string;
+  tabTheme?: TabTheme;
 };
 
 function Tab({
@@ -175,6 +188,7 @@ function Tab({
   tabContentId,
   iconGlyph,
   subtitle,
+  tabTheme,
   ...props
 }: TabProps & React.HTMLProps<HTMLDivElement>) {
   const darkMode = useDarkMode();
@@ -189,6 +203,14 @@ function Tab({
     props
   );
 
+  const themeClass = useMemo(() => {
+    if (!tabTheme) {
+      return darkMode ? tabDarkThemeStyles : tabLightThemeStyles;
+    }
+
+    return css(tabTheme);
+  }, [tabTheme, darkMode]);
+
   const style = {
     transform: cssDndKit.Transform.toString(transform),
     transition,
@@ -204,7 +226,7 @@ function Tab({
       style={style}
       className={cx(
         tabStyles,
-        darkMode ? tabDarkThemeStyles : tabLightThemeStyles,
+        themeClass,
         isSelected && selectedTabStyles,
         isDragging && draggingTabStyles,
         subtitle && animatedSubtitleStyles

packages/compass-components/src/components/workspace-tabs/workspace-tabs.tsx

@@ -172,6 +172,7 @@ export type TabProps = {
   id: string;
   title: string;
   subtitle?: string;
+  connectionId?: string;
   iconGlyph: Extract<keyof typeof glyphs, string>;
 } & Omit<React.HTMLProps<HTMLDivElement>, 'id' | 'title' | 'subtitle'>;
 

packages/compass-components/src/index.ts

@@ -37,6 +37,7 @@ export {
 import { ResizeHandle, ResizeDirection } from './components/resize-handle';
 import { Accordion } from './components/accordion';
 import { CollapsibleFieldSet } from './components/collapsible-field-set';
+export { type TabTheme } from './components/workspace-tabs/tab';
 import { WorkspaceTabs } from './components/workspace-tabs/workspace-tabs';
 import ResizableSidebar, {
   defaultSidebarWidth,

packages/compass-connections-navigation/package.json

@@ -49,6 +49,7 @@
   "dependencies": {
     "@mongodb-js/compass-components": "^1.24.0",
     "@mongodb-js/connection-info": "^0.2.1",
+    "@mongodb-js/connection-form": "^1.24.0",
     "@mongodb-js/compass-workspaces": "^0.7.0",
     "compass-preferences-model": "^2.20.0",
     "react": "^17.0.2",

packages/compass-connections-navigation/src/connections-navigation-tree.spec.tsx

@@ -174,7 +174,7 @@ describe('ConnectionsNavigationTree', function () {
       expanded: { connection_initial: {} },
     });
 
-    expect(screen.getAllByTestId('placeholder')).to.have.lengthOf(2);
+    expect(screen.getAllByTestId('placeholder')).to.have.lengthOf(5);
   });
 
   it('when database is expanded, it should render collections', async function () {