diff --git a/npm/design-system/src/components/FileExplorer/FileExplorer.tsx b/npm/design-system/src/components/FileExplorer/FileExplorer.tsx index 225ed1137b1c..cc03f8d581e6 100644 --- a/npm/design-system/src/components/FileExplorer/FileExplorer.tsx +++ b/npm/design-system/src/components/FileExplorer/FileExplorer.tsx @@ -64,13 +64,15 @@ export const FileExplorer: React.FC = (props) => { const [openFolders, setOpenFolders] = React.useState>({}) React.useLayoutEffect(() => { + const openFoldersTmp:Record = {} + function walk (nodes: TreeNode[]) { for (const node of nodes) { if (node.type === 'folder') { // only update with newly created folders. // we want to maintain the current state (open/closed) of existing folders. - if (!(node.absolute in openFolders)) { - setOpenFolders({ ...openFolders, [node.absolute]: true }) + if (!(node.absolute in openFoldersTmp)) { + openFoldersTmp[node.absolute] = true } walk(node.files) @@ -79,7 +81,8 @@ export const FileExplorer: React.FC = (props) => { } walk(props.files) - }, [props.files, openFolders]) + setOpenFolders(openFoldersTmp) + }, [props.files]) const handleKeyDown = (e: React.KeyboardEvent) => { const files: TreeNode[] = [] diff --git a/npm/design-system/src/components/Nav/LeftNav.tsx b/npm/design-system/src/components/Nav/LeftNav.tsx index 2d01c9b1f40c..d566a8c21621 100644 --- a/npm/design-system/src/components/Nav/LeftNav.tsx +++ b/npm/design-system/src/components/Nav/LeftNav.tsx @@ -1,6 +1,10 @@ import * as React from 'react' import cs from 'classnames' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { library } from '@fortawesome/fontawesome-svg-core' +import { fas } from '@fortawesome/free-solid-svg-icons' + +library.add(fas) import styles from './LeftNav.module.scss' import { LeftNavProps, NavButtonProps, NavLocation, NavItem } from './types' diff --git a/npm/design-system/src/components/SpecList/SpecList.module.scss b/npm/design-system/src/components/SpecList/SpecList.module.scss index e2f17d8fd635..a223ea6bf469 100644 --- a/npm/design-system/src/components/SpecList/SpecList.module.scss +++ b/npm/design-system/src/components/SpecList/SpecList.module.scss @@ -3,6 +3,14 @@ .nav { user-select: none; white-space: nowrap; + overflow: auto; + + > .ul { + height: 100%; // capture a11y focus + // don't hide the a11y box outline for the tree + margin-top: 0.25rem; + margin-bottom: 0.25rem; + } } .ul { diff --git a/packages/runner-ct/src/app/KeyboardHelper.scss b/packages/runner-ct/src/app/KeyboardHelper.scss index 4935931526b4..0bcb02e3d201 100644 --- a/packages/runner-ct/src/app/KeyboardHelper.scss +++ b/packages/runner-ct/src/app/KeyboardHelper.scss @@ -3,6 +3,7 @@ align-items: center; justify-content: center; height: 100%; + background-color: white; .keyboard-helper { padding: 8px 32px; diff --git a/packages/runner-ct/src/app/RunnerCt.module.scss b/packages/runner-ct/src/app/RunnerCt.module.scss index ca501551ab04..1755dfc88ee3 100644 --- a/packages/runner-ct/src/app/RunnerCt.module.scss +++ b/packages/runner-ct/src/app/RunnerCt.module.scss @@ -51,11 +51,14 @@ $box-shadow-closest: 0px 0px 5px rgba(0, 0, 0, 0.4); .specsList { position: relative; background: $spec-list-background-color; - border-right: 1px solid $border-color; + min-width: 150px; + height: 100%; + display: flex; + flex-direction: column; } .runner { - box-shadow: unset; + box-shadow: $shadow-sm; left: 0 !important; } @@ -73,6 +76,7 @@ $box-shadow-closest: 0px 0px 5px rgba(0, 0, 0, 0.4); .ctPluginsHeader { height: 40px; // make sure this is hardcoded in as well RunnerCt.tsx display: flex; + border-top: 1px solid $metal-20; .ctTogglePluginsSectionButton { margin-left: auto; diff --git a/packages/runner-ct/src/app/RunnerCt.scss b/packages/runner-ct/src/app/RunnerCt.scss index ca691f221d6d..2dc64d906ba4 100644 --- a/packages/runner-ct/src/app/RunnerCt.scss +++ b/packages/runner-ct/src/app/RunnerCt.scss @@ -28,7 +28,15 @@ body, html { } .runner { - @include checkerboard(); + // @include checkerboard(); + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjZGJkYmRiIj48L3JlY3Q+CjxwYXRoIGQ9Ik0wIDVMNSAwWk02IDRMNCA2Wk0tMSAxTDEgLTFaIiBzdHJva2U9IiNjNGM0YzQiIHN0cm9rZS13aWR0aD0iMSI+PC9wYXRoPgo8L3N2Zz4="); +} + +// Prevent left-most Resizer from showing up when the pane is hidden. +.isSpecsListClosed { + > .Resizer { + display: none; + } } // Must be globally scoped. Bummer. diff --git a/packages/runner-ct/src/app/RunnerCt.tsx b/packages/runner-ct/src/app/RunnerCt.tsx index 53f8104c2883..791d05b08707 100644 --- a/packages/runner-ct/src/app/RunnerCt.tsx +++ b/packages/runner-ct/src/app/RunnerCt.tsx @@ -16,9 +16,10 @@ import { useGlobalHotKey } from '../lib/useHotKey' import { debounce } from '../lib/debounce' import { LeftNavMenu } from './LeftNavMenu' import styles from './RunnerCt.module.scss' -import { Plugins } from './Plugins' import { KeyboardHelper } from './KeyboardHelper' import './RunnerCt.scss' +import { Plugins } from './Plugins' +import { NoSpecSelected } from './NoSpecSelected' interface AppProps { state: State @@ -220,7 +221,9 @@ const App: React.FC = observer( const autRunnerContent = state.spec ? : ( - + + + ) const MainAreaComponent: React.FC | typeof SplitPane = props.state.spec @@ -255,8 +258,10 @@ const App: React.FC = observer( maxSize={hideIfScreenshotting(() => state.isSpecsListOpen ? 600 : 0)} defaultSize={hideIfScreenshotting(() => state.isSpecsListOpen ? state.specListWidth : 0)} onDragFinished={persistWidth('ctSpecListWidth')} - className="primary" - // @ts-expect-error split-pane ref types are weak so we are using our custom type for ref + className={cs('primary', { 'isSpecsListClosed': !state.isSpecsListOpen })} + pane2Style={{ + borderLeft: '1px solid rgba(230, 232, 234, 1)' /* $metal-20 */, + }} ref={splitPaneRef} onChange={debounce(onSpecListPaneChange)} diff --git a/packages/runner-ct/src/variables.scss b/packages/runner-ct/src/variables.scss index 519bea15cbf0..0081fff0ff6f 100644 --- a/packages/runner-ct/src/variables.scss +++ b/packages/runner-ct/src/variables.scss @@ -12,16 +12,6 @@ $resizer-hover-color: $chill-40; $aut-background-color: white; $aut-drop-shadow: $shadow-md; -/** - * Utility mixins - */ -@mixin checkerboard() { - $checkerBoardColor: $metal-05; - background-image: linear-gradient(45deg, $checkerBoardColor 25%, transparent 25%), linear-gradient(-45deg, $checkerBoardColor 25%, transparent 25%), linear-gradient(45deg, transparent 75%, $checkerBoardColor 75%), linear-gradient(-45deg, transparent 75%, $checkerBoardColor 75%); - background-size: 20px 20px; - background-position: 0 0, 0 10px, 10px -10px, -10px 0px; -} - /** * Utility classes */