chore(compass-query-bar): add new toolbars env flag, use in compass-query-bar COMPASS-5670 (#3117)

Author: Anemy

package-lock.json

@@ -4,7 +4,7 @@ import { css, cx } from '@leafygreen-ui/emotion';
 import { uiColors } from '@leafygreen-ui/palette';
 import { FocusState, useFocusState } from './use-focus-hover';
 
-export const focusRing = css({
+export const focusRingStyles = css({
   position: 'relative',
   outline: 'none',
   '&::after': {
@@ -21,7 +21,7 @@ export const focusRing = css({
   },
 });
 
-export const focusRingVisible = css({
+export const focusRingVisibleStyles = css({
   '&::after': {
     boxShadow: `0 0 0 3px ${uiColors.focus}`,
     transitionTimingFunction: 'ease-out',
@@ -34,8 +34,8 @@ export function useFocusRing<T extends HTMLElement>(): React.HTMLProps<T> {
   return {
     ...focusProps,
     className: cx(
-      focusRing,
-      focusState === FocusState.FocusVisible && focusRingVisible
+      focusRingStyles,
+      focusState === FocusState.FocusVisible && focusRingVisibleStyles
     ),
   };
 }

packages/compass-components/src/hooks/use-focus-ring.ts

@@ -99,7 +99,11 @@ export { Placeholder } from './components/placeholder';
 export { useDOMRect } from './hooks/use-dom-rect';
 export { VirtualGrid } from './components/virtual-grid';
 export { mergeProps } from './utils/merge-props';
-export { useFocusRing } from './hooks/use-focus-ring';
+export {
+  focusRingStyles,
+  focusRingVisibleStyles,
+  useFocusRing,
+} from './hooks/use-focus-ring';
 export { useDefaultAction } from './hooks/use-default-action';
 export { useSortControls, useSortedItems } from './hooks/use-sort';
 export { Pipeline, Stage } from '@leafygreen-ui/pipeline';

packages/compass-components/src/index.ts

@@ -24,13 +24,13 @@
     "dist"
   ],
   "main": "dist/index.js",
-  "compass:main": "src/index.js",
+  "compass:main": "src/index.ts",
   "exports": {
     "require": "./dist/index.js",
     "browser": "./dist/browser.js"
   },
   "compass:exports": {
-    ".": "./src/index.js"
+    ".": "./src/index.ts"
   },
   "scripts": {
     "prepublishOnly": "npm run compile && compass-scripts check-exports-exist",
@@ -81,6 +81,7 @@
     "electron": "^13.5.1",
     "enzyme": "^3.11.0",
     "eslint": "^7.25.0",
+    "hadron-app-registry": "^8.12.0",
     "hadron-react-components": "^5.15.0",
     "mocha": "^7.0.1",
     "mongodb-ace-autocompleter": "^0.13.0",

packages/compass-query-bar/package.json

@@ -8,7 +8,7 @@ import OptionsToggle from '../options-toggle';
 import configureStore from '../../stores';
 import configureActions from '../../actions';
 
-import styles from '../query-bar/query-bar.module.less';
+import styles from './query-bar.module.less';
 
 describe('QueryBar [Component]', function () {
   let actions;